CODEWITHSUNDEEP
jqueryajaxgetforms
martincarlin87
martincarlin87

Reputation: 11052

How to access the URL of a GET AJAX request?

I had a look at some other questions but I'm still not sure how to achieve this.

The situation is I had a complex form that worked fine statically but I 'made it better' by making it submit using an AJAX request.

Now the url of the page doesn't change to have the parameters in it like before but I can see the fully qualified url using firebug.

What I am aiming to do is get this url and make a button to link to it so that the user can bookmark it because at the moment search results cannot be bookmarked.

Sorry if this is in anyway an exact duplicate but any help and advice is greatly appreciated.

This is my AJAX request(s) (they are basically the same but I have two forms presented as one form to the user, a simple search and a toggled advanced search) :

// setup AJAX request for simple search
$simpleform = $('#search');
$simpleform.submit(function() {
    $.ajax($simpleform.attr('action'), {
        data: $simpleform.serialize(),
        dataType: 'html',
        url: 'docsearch.php',
        type: 'GET', 

        beforeSend: function() {
            var $load = $('#loadingmessage');
            $('#search_results').fadeOut(1000);
            $load.hide().fadeIn(1000);

            if (!$load.length)
            {
                $load = $('<div id="loadingmessage">').appendTo($('#placeholder'));
            }

            $load.html('Searching... Please wait...');

            // disable both search buttons
            $('.submit').attr('disabled', 'disabled');
            $('.submit').addClass("disabled");

            $('#advancedsearchbutton').attr('disabled', 'disabled');
            $('#advancedsearchbutton').addClass("disabled");
        },

    success: function(response) {
        // response is the text sent back by server

        // find the search_results div in the response and insert it after the placeholder div
        $(response).find('#search_results').insertAfter($('#placeholder')).fadeIn(1000); 
        // re-initialise lightbox and dataTable plugins
        $('a.lightbox').lightBox();
        $('#test-docs-table').dataTable( {
                "sPaginationType": "full_numbers",
                "sDom": 'Rlfrtip',
                "aoColumns": [
                    null,
                    null,
                    { "sType": "title-numeric" },
                    null
                ]
        });
    },

    complete: function() {
        // hide loading message:
        $('#loadingmessage').fadeOut('slow');

        // enable both search buttons
        $('.submit').removeAttr("disabled");
        $('.submit').removeClass("disabled");

        checkDropdowns();
    }
});

return false; // Cancel default event
});
// end AJAX request

// setup AJAX request for advanced search
$form = $('#advancedsearchform');
$form.submit(function() {
    $.ajax($form.attr('action'), {
        data: $form.serialize(),
        dataType: 'html',
        url: 'docsearch.php',
        type: 'GET', 

        beforeSend: function() {
            var $load = $('#loadingmessage');
            $('#search_results').fadeOut(1000);
            $load.hide().fadeIn(1000);

            if (!$load.length)
            {
                $load = $('<div id="loadingmessage">').appendTo($('#placeholder'));
            }
              $load.html('Searching... Please wait...');

            // disable both search buttons
            $('.submit').attr('disabled', 'disabled');
            $('.submit').addClass("disabled");

            $('#advancedsearchbutton').attr('disabled', 'disabled');
            $('#advancedsearchbutton').addClass("disabled");
        },

    success: function(response) {
        // response is the text sent back by server

        // find the search_results div in the response and insert it after the placeholder div
        $(response).find('#search_results').insertAfter($('#placeholder')).fadeIn(1000); 
        // re-initialise lightbox and dataTable plugins
        $('a.lightbox').lightBox();
        $('#test-docs-table').dataTable( {
                "sPaginationType": "full_numbers",
                "sDom": 'Rlfrtip',
                "aoColumns": [
                    null,
                    null,
                    { "sType": "title-numeric" },
                    null
                ]
        });
    },

    complete: function() {
        // hide loading message:
        $('#loadingmessage').fadeOut('slow');

        // enable both search buttons
        $('.submit').removeAttr("disabled");
        $('.submit').removeClass("disabled");

        $('#advancedsearchbutton').removeAttr("disabled");
        $('#advancedsearchbutton').removeClass("disabled");
    }
});

return false; // Cancel default event
});
// end AJAX request

Upvotes: 2

Views: 1222

Answers (5)

Matt Ball
Matt Ball

Reputation: 359906

I'm not sure why this is even a question. The URL of the HTTP request is the first argument to $.get(). In this case, it's the value returned by

$('#search').attr('action');

and

$('#advancedsearchform').attr('action');

respectively.

Perhaps I'm missing something here?

Edit:

how to utilise the string that is being returned? i.e. to begin with, print it anywhere on the page.

You can stuff the string inside of a jQuery object, and then append it somewhere:

var action = $('#search').attr('action'),
    $span = $('<span/>', {text: action});

$('#placeholder').after($span);

Upvotes: 1

BumbleB2na
BumbleB2na

Reputation: 10743

I was looking for an easy way to bookmark the page through script but every browser handles it differently and it might cause you more harm than good. Deep-linking is a nice solution to making dynamic pages bookmark-able, but with all your varying search parameters I can't imagine it being very easy to implement.. I would just have a button or a link you can press that reloads the same page with querystring parameters attached, so I'd say that you're on the right track.

I would do what @Keith recommends but, since bookmarking pages is a client-side issue, I would piece together the url on the client-side, within the 'success' handler.

Upvotes: 1

rciq
rciq

Reputation: 1309

jQquery passes the original XHR object to event handlers. You can make use of it. In your case it might be something like this:

success: function(response, status, hxr) {
    var whereFrom = xhr.responseXML.baseURI;

    (...)
}

Upvotes: 1

Jimmy Sawczuk
Jimmy Sawczuk

Reputation: 13614

I think you'll want to use deep linking to help you link directly to search results. You could use the query string if you want (i.e. domain.com/search.php?q=Whatever) but it might make more sense to use a hash and decode that instead (i.e. domain.com/search.php#q=Whatever).

Upvotes: 1

Keith
Keith

Reputation: 5381

Perhaps you might consider returning the fully-qualified URL (with parameters) as part of your response, and then handle that within the success: block.

Upvotes: 1

Related Questions