Check for change in inner html by html Tag

Question

I currently load a html page into a <DIV> in my page. using this code

$.ajax({
        url: 'myApi.php?user=' + user + '&url='+ URL2add, 
        success: function(html) {                    
            var newHTML = "<object id='webloader' data='" + html + "'></object>";
            $("#exweb").fadeOut(500, function () {
                $("#exweb").html(newHTML).fadeIn(5000, function() {
                    alert("done");
                });
            });
        }
});

So i want to do a check or preferably get a alert once that page loaded changes. which is in the data tag that comes from the html coining back from the ajax call.

I have tried document.getElementsByTagName

I know there has to be a way to get the new data info in that object .

i would prefer an alert each time the page changes from what comes back from the ajax call

i have updated the code like this...

 $(document).on('contentchanged', '#exweb', function() {

        alert('WOO?');
    });

     $.ajax({
                url: 'Api.php?user=' + user + '&url='+ URL2add, 
                success: function(html) {                    
                var newHTML = "<object id='webloader' data='" + html + "'></object>";
                $("#exweb").fadeOut(50, function () {
                    $("#exweb").html(newHTML).fadeIn(50, function() {
                    $('#exweb').trigger('contentchanged');

                            });
                    });
                }     
                });

But this is only working on initial change

i need to know when that page changes again.. say if someone clicks on a link that will change the page in DIV or if its a redirect page.

i want to know whenever that page changes to something after i loaded it from my ajax call

should it not be as easy as getting the information between data=""

<object id="webloader" data="http://google.com"></object>

and how do i get back that info? i have tried document.getElementsByTagName

i want to be able to check if page has changed after ajax call is already done. there mus be a way to be able to find the url of most current page in the data= — Dynamite Media, Apr 16 '17 at 19:57
Have a look at this http://stackoverflow.com/questions/3219758/detect-changes-in-the-dom — gaganshera, Apr 16 '17 at 19:59
can you help me understand how to get that to work with my example code? cause i am NOT seeing the solution — Dynamite Media, Apr 16 '17 at 21:01

score 0 · Answer 1 · answered Apr 16 '17 at 19:27

0

you can do something like this after ajax.

$.ajax({...}).done(function() {
alert('page loaded');
});

answered Apr 16 '17 at 19:27

dotsinspace

661
7
21

Keshav Thosar · Answer 2 · 2017-04-16T20:03:23.380

0

I think you could try this $("div").load("your_url.php?parameters"); the page you want to load could have the following <body onload="alert('Page Loaded')"> Update:- if you dont have the access of the webpage then use this $("div").load("your_url.php?parameters",function(){alert("Page loaded")});

edited Apr 16 '17 at 20:03

answered Apr 16 '17 at 19:29

Keshav Thosar

5
6

what if i do not have control over page loaded? – Dynamite Media Apr 16 '17 at 19:55
then use `$("div").load("your_url.php?parameters",function(){alert("page loaded");});` – Keshav Thosar Apr 16 '17 at 20:01
can you check my updated code and see if that could still work cause i cant incorporate it to work – Dynamite Media Apr 16 '17 at 21:06

score 0 · Answer 3 · answered Apr 16 '17 at 19:30

0

$.ajax({/* your AJAX */}).done(function() {
  alert(/*your text*/"page loaded!");
});

answered Apr 16 '17 at 19:30

Radi Cho

680
7
21

While this code may answer the question, providing additional context regarding how and/or why it solves the problem would improve the answer's long-term value. – Adam Apr 16 '17 at 23:11

Check for change in inner html by html Tag

3 Answers3