0

My current code renders the complete HTML output while in reality I only need the contents of a certain DIV, and then I want the result to fade in.

$(function(){
setInterval(function(){
    $.ajax({
        url: "url",
        cache: false,
        dataType: "html"
    })

    .done(function( html ) {
        $( "#destination" ).html( html );
     });


},1000);
});

EDIT: I am looking for a way to make this work using the $.ajax, not with .load or $.get as I am trying to get a more low-level understanding of AJAX.

Remy Lagerweij
  • 177
  • 2
  • 7
  • You could try the solution listed here for the correct syntax: http://stackoverflow.com/a/5979660/1749630 – aaron-bond Feb 03 '14 at 15:34
  • It did work using the '$.get' function, but I really want to get it to work using the '$.ajax' function, because it's supposed to give me a more low-level understanding as I am pretty new to both AJAX as jQuery – Remy Lagerweij Feb 03 '14 at 15:38
  • Use `success` instead of `done`. I think `done` is deprecated. Also, get is just shorthand for ajax anyway - it's the same exact call. I understand you wanting to learn it properly though. +1 for that :) – aaron-bond Feb 03 '14 at 15:40
  • Why the anonymous downvote? This is a decent question... – aaron-bond Feb 03 '14 at 15:43
  • I tried this: `$(function(){ setInterval(function(){ $.ajax({ url: "ajax.html", cache: false, dataType: "html", success: function(html) { var div = $('#2', $(html)).addClass('done'); $('#div1').html(div); } }) },1000); });` But that gave me a blank load. – Remy Lagerweij Feb 03 '14 at 15:54
  • View kei's answer below. That should do it. – aaron-bond Feb 03 '14 at 16:03

2 Answers2

1

If you only want to load the content of a certain div, your url parameter should look something like:

url: "/somePage.html #someDiv"

Take a look here for more info

Edit

Okay, well you never said anything about running other scripts requirement. In this case, the above will not work.

What you can do now then is to try and dump what you're getting into a hidden container, then just grab and fade in what you need.

.done(function(data) {
    $("#someContainerSetToDisplayNone").html(html);
    $("#destination").empty().append("#someDiv");
 });
kei
  • 20,157
  • 2
  • 35
  • 62
  • That's not the solution I am looking for, because other scripts in the header of the source are not being executred thus displaying me the wrong content. I believe the only way is via $.ajax -> success: but that only gives me a blank page. – Remy Lagerweij Feb 03 '14 at 16:27
0

It took me a little time, but while working on a solution I came to release it as an jQuery plugin on GitHub.

It makes use of jQuery/AJAX and a little bit of PHP to clean up the output.

https://github.com/remylagerweij/ajaxbrowser

Remy Lagerweij
  • 177
  • 2
  • 7