error in ajax code

Question

I am trying to implement ajax when the button is clicked, but the ajax is not wroking, can anyone tell me what's wrong, many thanks! what I want is that when click the "Move marked to set" button, in the "formstatus" div should display some message I defined in the addtoset.php, but currently it direct to to "#"page instead of remain on the same page

here is my ajax code

    $('#movetoset').click(function() {
   var fail="";
   var hint="";
              if ($('#selectsett').val() === 'General') {

         fail += "Please chooose a set.\n";
    }

  for(j=0;j< array_str_idnum.length;j++)
  {



              if( document.getElementById('check' + array_str_idnum[j]).checked ==false){
                  hint='1';

              }


  }
        if(hint=="1"){
                  fail += "Please check all the box.\n";
              }

      if(fail == ""){

           var str = $("#complicated").serialize();
            $.ajax({
               type: "POST",
               url: "addtoset.php",
               data: str,
                               cache: false,
               success: function(msg)
               {
                    $("#formstatus").ajaxComplete(function(){


                                               $(this).fadeIn("slow").html(msg)

                    });
                }

             });

          return true;
      }else{
          alert(fail);
          return false;
      }


     });

here is my html code

    <form id ="complicated" method = 'post' action = '#'>


    <div class="fancybuttonwrapper" style="margin-left:480px;"><span class="button"><span>
       <input type="submit" class="form_button" id="movetoset" value="  Move Marked to  Set"></span></span> </div>




       <select name="sets" id ="selectsett">
        <option value="General">Select Set</option>
        <option value="Ceremony">Ceremony</option>
        <option value="Lunch">Lunch</option>
        <option value="Garden">Garden</option>
        <option value="Longname">This is max length</option>
      </select>
      </div>

   <div id="formstatus"></div>

  </form>

What evidence do you have that it's not working? Describe in detail if you can. — webbiedave, Sep 15 '11 at 20:52

score 0 · Answer 1 · answered Sep 15 '11 at 20:53

0

Add fail handler to Ajax call and see what you get as error

   error: function(xhr, textStatus, errorThrown){       

       }

answered Sep 15 '11 at 20:53

Gregory Nozik

3,296
3
32
47

score 0 · Answer 2 · answered Sep 15 '11 at 21:04

0

The problem is you do not prevent the default action from executing. So the request may be started, but the page immediately redirects to different URL (defined in form's action).

Change the following part of the code:

$('#movetoset').click(function() {
    var fail="";

into the following:

$('#movetoset').click(function(event) {
    event.preventDefault(); // prevent form from submitting
    var fail="";

It should help. Please let me know if it did.

answered Sep 15 '11 at 21:04

Tadeck

132,510
28
152
198

@tony: You said `...but currently it direct to to "#"page...` - is the page still redirected, when you click on the button with ID of `movetoset`? – Tadeck Sep 15 '11 at 21:18
no, it's not, but give me nothing, the formstauts div doesn't show any message I defined in the php file – tony Sep 15 '11 at 21:24
@tony: ok, so first of all the "doesn't work" doesn't say anything to us - my solution fixed one part and without it the script would not work anyway. Now you need to solve the other part of the problem. As evildead mentioned in the comment to his/her answer. – Tadeck Sep 15 '11 at 22:12

evildead · Accepted Answer · 2011-09-15T21:25:40.403

0

your array array_str_idnum is not defined. Further, you have to return false, else your form gets posted and so no ajax call at all.

Try this script. (always return false when you are in a form, else it gets send)

$('#movetoset').click(function() {
    console.log("here")
    var fail = "";
    var hint = "";
    if ($('#selectsett').val() === 'General') {

        fail += "Please chooose a set.\n";
    }
        var str = $("#complicated").serialize();
        $.ajax({
            type: "POST",
            url: "addtoset.php",
            data: str,
            cache: false,
            success: function(msg) {
                $("#formstatus").ajaxComplete(function() {


                    $(this).fadeIn("slow").html(msg)

                });
            }

        });

        return false;
 });

check out: http://jsfiddle.net/wRNQv/5/ there is a running version.

edited Sep 15 '11 at 21:25

answered Sep 15 '11 at 21:06

evildead

4,607
4
25
49

hi I defined that assay just didn't include it here, I need that loop to check which box is checked, so shouldn't be a problem I think, thanks – tony Sep 15 '11 at 21:17
please check again. Corrected some stuff. You need to return false, else your form is posted. – evildead Sep 15 '11 at 21:22
if you return true to a "submit" input field, it gets posted and your ajax call is aborted. – evildead Sep 15 '11 at 21:55
Hi! I posted an ajax script that also displays messages (and an image) by calling some php script. Unfortunately is not jquery, its XmlHttp, however it works fine and is asynchronous, and might be of some help. http://stackoverflow.com/questions/7407292/optimize-php-script-to-prevent-max-execution-time-limit/7408116#7408116 – Melsi Sep 15 '11 at 22:18

error in ajax code

3 Answers3