Any function with mixed functionality of .ajax() and .load()?

Question

.ajax() can send a post request and get data in return where as .load() can get any element in the rendered page. How to create a form when submitted(asynchromously) instead of getting back some data should get the page element of the rendered page that would be generated had there been normal submission instead of ajax submission?

I dont want to write views(Django) for xhr, normal requests separately. So, When I submit a form by ajax I dont want to hijack default action but only want to get some element of the rendered post submission page instead of actually being redirected to that post submission page which would have happened hadn't it been an xhr request.

Community · Accepted Answer · 2020-06-20 09:12:55Z

2

Update:

load will do a POST rather than a GET if you supply the data to send as an object rather than a string. From the docs:

Request Method

The POST method is used if data is provided as an object; otherwise, GET is assumed.

So:

$("#target").load("/path/to/resource selector_for_relevant_elements", {});

..should convert the load from GET to POST. Of course, you'd replace {} with the arguments you want to send.

Original answer:

You can do the POST directly with ajax and then process the returned HTML yourself. For instance, to turn this load:

$("#target").load("/path/to/resource selector_for_relevant_elements");

..into a POST:

$.ajax({
    url: "/path/to/resource",
    method: "POST",
    dataType: "html",
    success: function(html) {
        // Build the elemnts of the result in a disconnected document
        var page = $("<div>").append(html); // See note below

        // Find the relevant elements and put them in target
        $("#target").html(page.find("selector_for_relevant_elements"));
    }
});

I've done the wrapper div because that's what jQuery's load function does. You may want to look at the source for load (that line number will rot, of course, but the filename is unlikely to change) to see if there are other tricks you need to replicate.

edited Jun 20, 2020 at 9:12

CommunityBot

11 silver badge

answered Feb 19, 2012 at 12:27

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

Kamal Reddy Over a year ago

Thanks.That solves one issue, other one being how to let the submit button do its default action and get the elements of rendered page into the existing page without going to that page.

Kamal Reddy Over a year ago

Seems like that's not possible with js.

T.J. Crowder Over a year ago

@KamalReddy: If you allow the default action, your page will be replaced by the results. But it's easy to create an object with the form's values. Start with a blank object {}, then loop through the form fields in document order, skipping any disabled ones, and add props to the object using the name of each field and its value. Only include checkboxes or radio buttons if they're checked. If you see a field name you've seen before (so the property is already set), turn the property value into an array and push the new value on the array. file fields are the only real problem.

Collectives™ on Stack Overflow

Any function with mixed functionality of .ajax() and .load()?

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related