Question

i am having issue with loading my selector via a jquery ajax load call see below:-

         var $loading = $ ('<img src="/img/loading.gif" alt="loading">');

    $("#addAddressBtn").click(function(){

        var $dialog = $('<div></div>')
                .append($loading.clone());

            $dialog.load("/customer/profile#addressSel", [], function(response, status, xhr) {
                    if (status == "error") {
                        var msg = "Sorry but there was an error: ";
                        $dialog.html(msg + xhr.status + " " + xhr.statusText);
                    }
                    else{
                        $dialog.dialog({
                            title: "Add Address",
                            width: "auto", 
                            height: "auto", 
                            modal: "true"
                        });  
                        $dialog.dialog('open');
                        return false;
                    };
            });
    });            

All i want to display in the dialog is the addresssSel div and the whole profile page is loading why?

Answer 1

You have to put a space before the “#” character.

$dialog.load("/customer/profile #addressSel", ...

Be aware that when you do this, <script> tags in that <div> you select will not be executed after the page fragment is loaded and added to the DOM.