1. Forum
  2. Usenet
  3. COMP.LANG.JAVASCRIPT

  • AJAX scope problem

    From bill@21:1/5 to All on Fri Sep 17 14:42:15 2021
    As part of a response I create a form. When the user clicks one
    of two buttons I invoke a javascript function:
    <input type="button" name="submit" value="Update" onclick="javascript:saveItem()"/>
    here is the top of that function----------------

    function saveItem () { // save updated Item - from itemsToEdit
    alert ("saveItem - entering 208")
    alert ("saveItem - " + document.getElementById("EditItemsForm");

    The problem is that returns null, as if the form did not exist,
    but inspection of the source shows it present.

    I presume the problem is that the form has not been created when
    the .js is evaluated even though it is there by the time it is
    executed.

    I have many similar functions that work fine but this is the only
    one that references a form created on the fly.

    The apparent solution is to move the form definition to a static
    part of the script but I don't know how to reference it so that
    it appears when the onclick event happens.

    --bill

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From JJ@21:1/5 to bill on Sat Sep 18 22:40:48 2021
    On Fri, 17 Sep 2021 14:42:15 -0400, bill wrote:
    As part of a response I create a form. When the user clicks one
    of two buttons I invoke a javascript function:
    <input type="button" name="submit" value="Update" onclick="javascript:saveItem()"/>
    here is the top of that function----------------

    function saveItem () { // save updated Item - from itemsToEdit
    alert ("saveItem - entering 208")
    alert ("saveItem - " + document.getElementById("EditItemsForm");

    The problem is that returns null, as if the form did not exist,
    but inspection of the source shows it present.

    I presume the problem is that the form has not been created when
    the .js is evaluated even though it is there by the time it is
    executed.

    I have many similar functions that work fine but this is the only
    one that references a form created on the fly.

    The apparent solution is to move the form definition to a static
    part of the script but I don't know how to reference it so that
    it appears when the onclick event happens.

    --bill

    Either the needed element has the wrong ID, or is served within an IFRAME.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From JJ@21:1/5 to All on Sat Sep 18 22:41:16 2021
    On Sat, 18 Sep 2021 22:40:48 +0700, JJ wrote:

    Either the needed element has the wrong ID, or is served within an IFRAME.

    Or is within a Shadow DOM.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From bill@21:1/5 to All on Sat Sep 18 14:22:35 2021
    On 9/18/2021 11:41 AM, JJ wrote:
    On Sat, 18 Sep 2021 22:40:48 +0700, JJ wrote:

    Either the needed element has the wrong ID, or is served within an IFRAME.

    Or is within a Shadow DOM.


    On 9/18/2021 11:41 AM, JJ wrote:
    On Sat, 18 Sep 2021 22:40:48 +0700, JJ wrote:

    Either the needed element has the wrong ID, or is served
    within an IFRAME.

    Or is within a Shadow DOM.

    to explain in somewhat more detail:
    I have 2 nested divs
    The user enters data into a text box in the outer div. This
    triggers a NEW XMLHtttpRequest which invokes a .php script.
    The output of the script lists the search data in the 2nd div
    with a button to edit the selected data item.

    The button click calls a js function that calls another new
    XMLHtttpRequest which is serviced by another php script that puts
    the item's data back into a form in the 2nd div

    The form contains data elements and a button to call a js script
    to save the edited data.

    That script fails because it can not find the form.

    rather than copy the entire function I list only enough to show
    the failure.
    ------------------------------
    function saveItem () {
    alert ("saveItem - entering 208")
    alert ("saveItem - " +
    document.getElementById("EditItemsForm"));

    The both alerts are executed with the 2nd showing
    "saveItem - " + null

    If I change the EditItemsForm to another element that is not
    dynamically generated it does not fail; it returns the id.

    Thank you very much for taking the time to read this.
    -bill

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From bill@21:1/5 to All on Sat Sep 18 14:44:38 2021
    I now define the form in the main part of the script, without any
    input elements and then use the form attribute in the generated
    part.

    --
    Bill Drescher
    william {at} TechServSys {dot} com

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)
  • From JJ@21:1/5 to bill on Mon Sep 20 22:14:28 2021
    On Sat, 18 Sep 2021 14:22:35 -0400, bill wrote:

    If I change the EditItemsForm to another element that is not
    dynamically generated it does not fail; it returns the id.

    Then the `getElementById` is called before the dynamically generated `EditItemsForm` element is created and placed into the document. i.e. `EditItemsForm` is called too soon.

    The code which requires the element should be executed after the element has been dynamically generated and placed into the document.

    --- SoupGate-Win32 v1.05
    * Origin: fsxNet Usenet Gateway (21:1/5)