Groups | Search | Server Info | Keyboard shortcuts | Login | Register [http] [https] [nntp] [nntps]

Groups > comp.lang.javascript > #40388 > unrolled thread

AJAX scope problem

Back to article view | Back to comp.lang.javascript

Contents

  AJAX scope problem bill <william@TechServSys.com> - 2021-09-17 14:42 -0400
    Re: AJAX scope problem JJ <jj4public@gmail.com> - 2021-09-18 22:40 +0700
      Re: AJAX scope problem JJ <jj4public@gmail.com> - 2021-09-18 22:41 +0700
        Re: AJAX scope problem bill <william@TechServSys.com> - 2021-09-18 14:22 -0400
          Re: AJAX scope problem JJ <jj4public@gmail.com> - 2021-09-20 22:14 +0700
    Re: AJAX scope problem bill <william@TechServSys.com> - 2021-09-18 14:44 -0400

#40388 — AJAX scope problem

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

[toc] | [next] | [standalone]

#40389

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.

[toc] | [prev] | [next] | [standalone]

#40390

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.

[toc] | [prev] | [next] | [standalone]

#40391

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

[toc] | [prev] | [next] | [standalone]

#40394

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.

[toc] | [prev] | [next] | [standalone]

#40392

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

[toc] | [prev] | [standalone]

Back to top | Article view | comp.lang.javascript

csiph-web