Replace string or html onload in AJAX using JS and JQuery

Question

I'm having a problem changing the string content of a particular DIV tag when using AJAX.

For some reason I can change string content when using an onclick function. This works;

<div id="demo">Will change on click? </div>

<button onclick="myFunction()">Try it</button>

<script>
    function myFunction() {
        document.getElementById("demo").innerHTML = "Yes, Successfully changes" ;
    }
</script>

However this does not;

<div id="demo2">Will this change?</div>
<script>
    window.onload = function() {
        document.getElementById("demo2").innerHTML = "Yes, Successfully changes" ;
    }
</script>

Both approaches work on the page itself, but import that page using AJAX, and only the onclick method works. This issue persists when trying both JavaScript and JQuery. What am I missing?

Maybe that was the wrong term. But basically, using AJAX to filter results from the db. The external file AJAX is using within the page contains these commands. — noy-hadar
– noy-hadar, Commented Oct 30, 2015 at 0:25
Do you mean that the above snippet is added to DOM via AJAX call? — Hamlet Hakobyan
– Hamlet Hakobyan, Commented Oct 30, 2015 at 0:27
Yes sir, that's exactly what I mean. Please excuse my lack of clarity. This is all so new to me. — noy-hadar
– noy-hadar, Commented Oct 30, 2015 at 0:33

rickythefox · Accepted Answer · 2015-11-01 18:52:51Z

1

Try registering an event handler using jQuery's .ajaxcomplete http://api.jquery.com/ajaxcomplete/ . This event gets fired when an AJAX request finishes which is probably what you are looking for.

answered Nov 1, 2015 at 18:52

rickythefox

6,8697 gold badges44 silver badges65 bronze badges

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

Comments

Amrinder · Accepted Answer · 2015-10-30 02:25:23Z

0

User the following way to update the content using Ajax

<div id="demo">Let AJAX change this text</div>

<button type="button" onclick="loadDoc()">Try it</button>

<script>
function loadDoc() {
    var xhttp = new XMLHttpRequest();

    xhttp.onreadystatechange = function() {
        if (xhttp.readyState == 4 && xhttp.status == 200) {
            document.getElementById("demo").innerHTML = xhttp.responseText;
        }
    }
    xhttp.open("GET", "ajax_info.txt", true);
    xhttp.send();
}
</script>

Go to following link for more ajax examples. Ajax Examples

answered Oct 30, 2015 at 2:25

Amrinder

796 bronze badges

2 Comments

noy-hadar Over a year ago

But this still requires a button, which is what I'm trying to eliminate.

Amrinder Over a year ago

What exactly is your requirement?

Domain · Accepted Answer · 2015-10-30 05:58:24Z

0

<script>
$(document).ready(function(){
$.ajax({
  url: "ajax_info.txt"
}).done(function( data ) {
    $("#demo").html(data);
  });

});
</script>

on ready function you can call ajax and change the content

answered Oct 30, 2015 at 5:58

Domain

11.8k3 gold badges26 silver badges45 bronze badges

Comments

Lalji Nakum · Accepted Answer · 2015-10-30 11:59:47Z

0

Use jquery ready function and call your function inside ready function. like this :

$(document).ready(function(){
  myFunction();
});

edited Oct 30, 2015 at 11:59

answered Oct 30, 2015 at 6:07

Lalji Nakum

3801 silver badge15 bronze badges

2 Comments

noy-hadar Over a year ago

Such as this? $("document").ready(function() { $("#demo").text("Yes, changed"); $("#demo").html("Yes, changed"); }); -- Bcuz again it works on the page alone, but used with AJAX and it does not. What is sooooo strange, is that I have it working just fine on another site, but I can't seem to isolate what the difference is.

Lalji Nakum Over a year ago

You can use on click instead of ready function with ajax. something like this : $(document).on('click',function(){myFunction(); }); OR call function after ajax success

marc_s · Accepted Answer · 2018-09-04 17:12:27Z

0

/* jQuery Onload String Replace OR jQuery Onload String Change */

<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript"> 
$(document).ready(function() {
    var strNewString = $('body').html().replace(/\On hold/g,'Processing');
    $('body').html(strNewString);
});

</script>

edited Sep 4, 2018 at 17:12

marc_s

760k186 gold badges1.4k silver badges1.5k bronze badges

answered Jul 27, 2018 at 13:57

Ashar Zafar

4123 silver badges11 bronze badges

Collectives™ on Stack Overflow

Replace string or html onload in AJAX using JS and JQuery

5 Answers 5

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

5 Answers 5

Comments

2 Comments

Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related