CODEWITHSUNDEEP
ajaxfunctionjqueryload
Alex
Alex

Reputation: 1606

Change .load() to $.ajax jQuery

I want to disable/prevent loading of the page until a JS call has been completed. I understand that the only way to do that is with $.ajax like so:

$.ajax({
 url: "/acme/confirm_authentication.html",
 async: false,
 cache: false,
 success: function(data) {
    // loaded
 }

Currently, I’m loading a partial page with .load() function like so:

var linkUrl = $('.js-dialog--on-load').attr('dialog-href')  + ' #lga';
showDialogWindow(linkUrl);

function showDialogWindow(linkUrl) {
    $('.container').append($("<div>").load(linkUrl, function(){

    }).addClass('js-dialog'));
}

See demo: http://jsfiddle.net/SQDDD/1/

How can I translate this into an $.ajax call?

Remember, the reason I’m using .load() is so that I can load only part of the website (#lga).

Upvotes: 0

Views: 1020

Answers (2)

jbl
jbl

Reputation: 15413

asyc: false is (most of the time) evil ;-)

You may try something like :

function showDialogWindow(linkUrl) {
    $.ajax({
     url: linkUrl,
     async: true,
     cache: false,
     success: function(data) {
         $('.container').append($("<div>"+data+"</div>").addClass('js-dialog'));
     }
    });
}

Be aware that you lose the selector feature available in the load

Upvotes: 1

Royi Namir
Royi Namir

Reputation: 148524

Take a look at this example :

I have this html : 

...
<body>
  <a href=""> aaa</a>
  <p>bbb</p>

</body>
...

now getting the p element from ajax : 

 $.ajax(
    {
        url: 'http://jsbin.com/oFUMOtO/3/quiet',
        type: "GET",
        dataType: 'html',
        success: function (data)
        {
          alert($("<div>").html(data).find( "p" ).text()); //alerts bbb

        }
    });

Upvotes: 0

Related Questions