CODEWITHSUNDEEP
javascriptjqueryhtmlajax
noy-hadar
noy-hadar

Reputation: 169

Replace string or html onload in AJAX using JS and JQuery

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?

Upvotes: 2

Views: 2021

Answers (5)

Ashar Zafar
Ashar Zafar

Reputation: 402

/* 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>

Upvotes: 0

rickythefox
rickythefox

Reputation: 6851

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.

Upvotes: 1

Lalji Nakum
Lalji Nakum

Reputation: 380

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

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

Upvotes: 0

Domain
Domain

Reputation: 11808

<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

Upvotes: 0

Amrinder
Amrinder

Reputation: 79

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

Upvotes: 0

Related Questions