ajax not updating html into javascript-dynamically created div

Question

(using jQuery)

1) I have an on click javascript that creates a form with a pulldown and a div, like so:

$('#closestDiv').on('click','.firstClick', function(event){

var pass = $(this).attr('data-pass');

var f = document.createElement("form");
    f.setAttribute('method',"post");
    f.setAttribute('id',"newForm");
    f.setAttribute('action',"SubmitForm.php");

    var d = document.createElement("select");   
        var op1 = new Option();
            op1.value = "1";
            op1.text = "1"; 
            op1.setAttribute('class', "secondClick");
            op1.setAttribute('data-pass', pass);        
        d.options.add(op1);

f.appendChild(d);

var div = document.createElement("div");
        div.setAttribute('id', "newDiv");
        div.innerHTML = 'REPLACE CONTENT';      

f.appendChild(div);

$("#closestDiv").append(f);

 }); // end on click

2) I then have an onclick for the pulldown options that load Content into the said div via ajax.

$('#closestDiv').on('click', '.secondClick', function () {  
    $(this).prop('selected', true);
    var value = $(this).attr('value');
    var pass = $(this).attr('data-pass');

$.ajax({
          url: 'getContent.php',
          type: "get",
          data : {value: value, pass: pass},
        success: function(response){

         var result = JSON.parse(response);      

        $('#newDiv').html(result['newContent']);

        console.log(result['newContent']);      
        console.log($('#newDiv'));

            } // end success function
    }); // end ajax call

 }); // end on click

The console shows correct newContent being passed, and in console the div element shows correct html with newContent, but the actual page div is still showing "REPLACE CONTENT" (ie not updating).

I've done this successfully when the dropdown is loaded with the page rather than via javascript. I am wondering if I'm not understanding the order in which DOM loads things, and how to make this work. For some reason I thought that if I built the dropdown in javascript (rather than via ajax - which pretty much gives identical result and which I much prefer if the fix is the same...) it would become functional right away.

I've also noticed the dropdown doesn't show what's been selected, even though the correct selected option is getting passed to ajax.

Any pointers most appreciated. Thanks!

If you are so kind to provide more context so we can analyse the "order in which DOM loads things" — ariel
– ariel, Commented Apr 18, 2020 at 3:51
Also, you better attach to "change" instead of "click", or else it will trigger multiple times — ariel
– ariel, Commented Apr 18, 2020 at 3:55
I will try to post a demo. I think the newForm is still unbound. When I replace secondclick with $('#newForm').on('click', '.secondClick', function () { ... nothing happens at all in console. with $('#closestDiv') the event is firing correctly but does not render to page even though the console shows the element it's supposed to find and replace. It's very confusing as some things seem bound and others unbound. — Stephanie
– Stephanie, Commented Apr 19, 2020 at 3:51

sssurii · Accepted Answer · 2020-04-19 04:01:35Z

1

Replace below with:

$('#newDiv').html(result['newContent']);

with:

$(document).find('#closestDiv #newDiv').html(result['newContent']);

When DOM updates dynamically, you need to access added elements with respect to the document.

answered Apr 19, 2020 at 4:01

sssurii

8405 silver badges19 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Stephanie Over a year ago

Brilliant! that does the trick. Thank you so much! You save me having to figure out how to post something to jsfiddle! ;o) Any ideas on how to get $(this).prop('selected', true); to work if it has to reference a parent? $('#closestDiv).find('.secondClick option[value='+value+']').prop('selected', true); doesn't seem to do the trick to display the selected option in the dropdown field (though it does appear "checked" in the dropdown itself), and submitting form does not post anything from the dropdown... I will try a few more things. thanks!

Collectives™ on Stack Overflow

ajax not updating html into javascript-dynamically created div

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related