Submit a form inside colorbox with ajax

Question

Until now I was using this code to post data from within a colorbox window until I ran into encoding errors, data being submitted as "ΞΞΞ§Ξ‘Ξ©ΞΞ" instead of 'ΔΙΧΡΩΜΟ':

$("#productadd").submit(function(){
  $.post(
  $(this).attr('action'),
  $(this).serialize(),
  function(data){
    alert('Product added to cart!');  
    $().colorbox.close();
  }
);

After some searching I decided to change my code to this so I can set the encoding when posting but I need some help to complete it:

$.ajax({
    type: "POST",
    url: $(this).attr('action'),
    contentType: "application/json; charset=iso-8859-7",
    dataType: "json",
    data: "{id: '" + someId + "'}",
    success: function(json) {
        alert('Product added to cart!'),  
        $().colorbox.close(),
        $("#success").html("json.length=" + json.length);
        itemAddCallback(json);
    },
    error: function (xhr, textStatus, errorThrown) {
        $("#error").html(xhr.responseText);
    }
});

but none of the calls inside success: are made, with the page being redirected to the url in form action and neither the alert or $().colorbox.close() are being called whereas, with the previous code, it used to submit in the same window (without redirectiong to the action url) and showing the alert and finally, closing the colorbox window. Any suggestions?

score 0 · Answer 1 · answered Jul 12 '12 at 10:11

you have to prevent the normal form submit by preventing it to execute the default action, else it will perform a redirect to the url of the form as a normal form submission.

$("#productadd").submit(function(e){
e.preventDefault();
$.ajax({
    type: "POST",
    url: $(this).attr('action'),
    contentType: "application/json; charset=iso-8859-7",
    dataType: "json",
    data: "{id: '" + someId + "'}",
    success: function(json) {
        alert('Product added to cart!'),  
        $().colorbox.close(),
        $("#success").html("json.length=" + json.length);
        itemAddCallback(json);
    },
    error: function (xhr, textStatus, errorThrown) {
        $("#error").html(xhr.responseText);
    }
});
});

score 0 · Answer 2 · answered Jul 12 '12 at 10:14

0

i believe this solves you problem with form submission

$("#productadd").submit(function(event){
event.preventDefault(); // prevent submission of the form and send ajax
  $.post(
  $(this).attr('action'),
  $(this).serialize(),
  function(data){
    alert('Product added to cart!');  
    $().colorbox.close();
  }
);

as for the encoding it could depend on Browser encoding that you get that result, try changing to other greek encodings or UTF-8.

answered Jul 12 '12 at 10:14

Gntem

6,949
2
35
48

My current encoding is iso-8859-7 and all forms submit fine (in Greek), except the one I sumbit via jquery/ajax. – bikey77 Jul 12 '12 at 10:29
try UTF-8 it should work! also take a look at this, http://stackoverflow.com/questions/553463/jquery-ajax-character-encoding-problem , it for a different encoding but it shows some possible solutions to your encoding problem – Gntem Jul 12 '12 at 10:36
Unfortunately the data in the db uses Windows encoding so I need to stick with iso-8859-7 and work around that. – bikey77 Jul 12 '12 at 10:53
you can change encoding of database and use utf-8 which supports greek as well as many other, good luck though – Gntem Jul 12 '12 at 20:12

Submit a form inside colorbox with ajax

2 Answers2