jquery - progressive enhancement and ajax

Question

So right now, I have a few forms where as one is submitted, it retrieves another in a modal. So right now, I might have a link to example.com/modal/1, which opens the first modal. However, if javascript is not enabled (so the browser actually follows the link), then some html displays (the html that was going to be retrieved.). I'd like to be able to style this, so I'm guessing I should make an entire html page with stylesheets and all, but here's what I'm wondering:

With jquery's load(), I know you can choose an element id like '#form' which will parse what the request gets back and just use the #form element. I'd like to be able to use something like that, but I'm using the post() functionality.

Ideas on how to do this?

Answer 1

If you pass an object (key/value pairs) as second (data) parameter to $.load, it will perform a POST request. From the manual:

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

Answer 2

Hey there!

I've had a similiar question to what you're trying to do. My solution was to use .load, but that is not the most elegant, because jQuery has to parse the content that you don't want inserted in the DOM.

My solution is to use either $.ajax or $.post and set a variable to ajax=true, and on the server side, wrap the header and footer in a php if ajax='' (undefined) then echo out the header and footer, else if ajax=true, PHP will not send the header and footer, and you will save bandwidth only sending the DOM elements that you need on the client.

Let me know if this can work with your app, if not, I'll find a way to use $.post and parse the response.