AJAX scope problem

11 views
Skip to first unread message

bill

unread,
Sep 17, 2021, 2:42:25 PMSep 17
to
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

JJ

unread,
Sep 18, 2021, 11:40:58 AMSep 18
to
Either the needed element has the wrong ID, or is served within an IFRAME.

JJ

unread,
Sep 18, 2021, 11:41:25 AMSep 18
to
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.

bill

unread,
Sep 18, 2021, 2:22:43 PMSep 18
to
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


bill

unread,
Sep 18, 2021, 2:44:46 PMSep 18
to
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

JJ

unread,
Sep 20, 2021, 11:14:22 AMSep 20
to
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.
Reply all
Reply to author
Forward
0 new messages