Problem Submitting Form By Ajax

I am making a dynamically updated search results page and am having trouble with the 'add to cart' form submit.

Firstly, I tried to just rely on the ajax microformats and basically reproduced the DOM structure of an existing add to cart form with qty changer.

The result works but causes a page reload instead of showing the cm-ajax-status-middle indicator and not reloading the page like the static form does.

I came to suspect that this was because the form is relying on the attached event listener that runs the function '_check(form)'.

So I made my own event listener. I can't directly call the _check function (it's undefined if called in my add-on script), so I tried to reproduce the final outcome which looks like this:

// event listener for all 'add to cart' forms in container
$('#container').on('submit', function (event) {
  var clicked_elm = $(event.target);
  var form = $(event.target);
  return $.ceAjax('submitForm', form, clicked_elm);
});

Originally I thought clicked_elm and form would be the 'a' element and the 'form' element respectively, but watching the variables showed them both to be the 'form' element on the working static version. Anyhow, I get the status indicator, but the form doesn't submit and gives an error notification:

Error Oops, something went wrong (SyntaxError: JSON.parse: unexpected end of data at line 1 column 1 of the JSON data). Please try again.

So the post request is not getting passed as JSON, probably because I'm bypassing the _check function.

Any ideas to correct the problem?

Side question - the docs imply that using microformats is sufficient to achieve the 'background' form submit without a page reload and don't mention the event listener. Is that just an oversight?

Make sure the div that contains your form the the id in comments just before the closing div tag.

Make sure the div that contains your form the the id in comments just before the closing div tag.

What do you mean? Like this:


I tried this and it gives the same error... but some of the input data does get dynamically rewritten just under the comment.

You should be able to subimit a form via ajax without re-rendering any part of the page. However, if the result from the server side has html content returned, then it will effectively reload the page. If the server just exits without output, then no re-rendering is done since the JS simply sent data to the server.

To render a certain area within a page in cs-cart from an ajax request, it uses JS to figure out what portion of the fully rendered page to apply from the response. A 'result_ids' request parameter contains the id's of elements to re-render upon return.

Example

Your html here

Just look for some examples where cm-ajax is used in common templates like products, cart, checkout, etc.. Using cm-ajax should cause an ajax request, but to render the response, you need the comment before the closing div and these need to be in a result_ids request element.

What this does is sends the form via ajax and then the whole page is re-rendered on the server side. It's sent to the browser and the JS in the browser finds the appropriate areas to update within the DOM. It keeps things pretty simple on the server side since the whole page is always re-rendered.

Hope this makes sense. Don't want to do a tutorial here, no time.

I think I get what you are saying... to dynamically update a DOM element you pass the id to 'result_ids' and include a comment at the end of the DOM element. I don't think that is the problem though.

I found the JSON error issue (just a bad parameter), but the form still doesn't work with AJAX. Might be easier to give a sample form:

  
  
  
  

Now, with no event listener, the form works, the cart is updated, but there is no ajax status indicator and the page reloads to the redirect URL (without the redirect URL it goes to the cart page) and gives the pop-up for product added. It works but I don't like it.

When I add my listener:

$('#parentcontainer').on('submit', function (event) {
  var clicked_elm = $(event.target);
  var form = $(event.target);
  return $.ceAjax('submitForm', form, clicked_elm);
});

I get the ajax status indicator for a second but nothing really happens, the cart does not update. The request looks good except is has an empty 'product_form_####' parameter (dunno why), and the response is different in that its html is an unchanged 'cart_status*' and has no 'notification' in it.