0

I want when I click a link with attribute "linkdata" = "page" to change the body's code to a loading image and after it's done to change the whole document's HTML to the result. Here is the current code I have:

$('a[linkdata="page"]').each(function() {
  $(this).click(function () {
    var attribute = $(this).attr("href");
    $("body").html('<center><img src="/ajax-loader.gif" /></center>');
    $.ajax({ type: "GET", url: attribute }).done(function (data) { 
      $(document).html(data); 
    });
    return false;
  });
});

The result: It changes the body's HTML code to the image and always fails with the request (which is http://somelink.com/home - using CodeIgniter, tried with .fail(function() { window.location="/error/404" });)

Hashem Qolami
  • 97,268
  • 26
  • 150
  • 164
user3174947
  • 37
  • 1
  • 6
  • 1
    write like this `$('a[linkdata="page"]').click(function() {` .. don't write each & then click function. – Venkata Krishna Jan 24 '14 at 21:23
  • There is more code to that object, that's why I use .each before it. – user3174947 Jan 24 '14 at 21:25
  • 2
    Not trolling, just curious for learning purposes - What is the point of refreshing the entire document via ajax as opposed to just linking to the page or forcing a refresh? – Dutchie432 Jan 24 '14 at 21:28
  • Looks like there might be some limitation preventing you from accessing or setting `$(document).html()`: http://jsfiddle.net/qL3sE/. This person has trouble as well: http://stackoverflow.com/questions/982717/how-do-i-get-the-entire-pages-html-with-jquery – Jason P Jan 24 '14 at 21:35

2 Answers2

0
$('a[linkdata="page"]').click(function(e){
  e.preventDefault();
  $("body").html('<center><img src="/ajax-loader.gif" /></center>');
  $.ajax({url:$(this).attr("href") })
   .success(function(data){$(document.body).html(data);})
   .error(function(x,s,e){alert('Warning! '+s+': '+e)});
});
BenMorel
  • 34,448
  • 50
  • 182
  • 322
Igor Popov
  • 924
  • 8
  • 14
0
$('a[linkdata="page"]').on('click',function(k,v){
   var attribute = $(this).attr("href");
   $("body").html('<center><img src="/ajax-loader.gif" /></center>');
    $(document).load({ type: "GET", url: attribute });
  })
luisvale
  • 1