Jquery ajax html return not working

Question

I have written these 100+ times... so forgive my stupidity in advance.

Simple ajax -> php -> html

So far the beforeSend appears, and then nothing occurs from that point. Everything else works fine. I have tried on doc ready, using the ajax function within the main function, re writing the ajax 4 different ways... and each time it still acts the same... before send.. and then the page returns to what it was without the Ajax:success happening!?

The JQ/JS

$(function() {
  $('.error').hide();
  $(".add_item_btn").click(function() {
    // validate and process form here

    $('.error').hide();
    var itemTitle = $("input#add_item_item_title").val();
      if (itemTitle == "") {
      $("label#add_item_item_title_error").show();
      $("input#add_item_item_title").focus();
      return false;
    }

    //var groupID = $("input#add_item_unit_price").val();  
    var groupID = $("select#add_item_groupid option").filter(":selected").val();

    var unitPrice = $("input#add_item_unit_price").val();

    if (unitPrice == "") {
    $("label#add_item_unit_price_error").show();
    $("input#add_item_unit_price").focus();
    return false;
    }

    if (isNaN(unitPrice)) // this is the code I need to change
    {
        //alert("Must input numbers");
        $("label#add_item_unit_price_error2").show();
        return false;
    }

    var dataString = 'itemTitle='+ itemTitle  + '&groupID=' + groupID + '&unitPrice=' + unitPrice;
    //alert (dataString);return false;

    //add_item();
    nu();

  });
});


function nu(){
var a = "1";
var url = "test2.php";
$.ajax({
            type: 'POST',
            url: url,
            dataType: 'html',
            data: {
                a: a
            },
            beforeSend: function() {
                    document.getElementById("message").innerHTML="<span class='blink_me'>Sending..</span>"  ;
            },
            success: function() {
                    document.getElementById("message").innerHTML="<span class='blink_me'>Done</span>" ;

            }
});
}

The PHP

<?    
echo "Test Success";
?>

The Html

<form name='add_item_form'>
    <div class="panel panel-info">
          <div class="panel-heading">
            <h3 class="panel-title">Add Item</h3>
          </div>
          <div class="panel-body">
            <div class="input-group">
              <span class="input-group-addon">Title</span>
              <input type="text" id='add_item_item_title' name="add_item_item_title" class="form-control" placeholder="Max 50 Chars" />
            </div>
            <label class="error" for="add_item_item_title" id="add_item_item_title_error">This field is required.</label>

            <br />

            <div class="input-group">
                <span class="input-group-addon">Select Group</span>
                <select id='add_item_groupid' class="form-control">
                    <option value="1">Drink</option>
                    <option value="2">Food</option>
                    <option value="3">Deli</option>
                    <option value="4">Shelf</option>
                </select>
            </div>

            <br />

            <div class="input-group">
              <span class="input-group-addon"><span class="glyphicon glyphicon-gbp"></span></span>
              <input type="text" id='add_item_unit_price' name='add_item_unit_price' class="form-control" placeholder="Unit Price" /> 
            </div>
            <label class="error" for="add_item_unit_price" id="add_item_unit_price_error">This field is required.</label>
            <label class="error" for="add_item_unit_price" id="add_item_unit_price_error2">This field must be a price!</label>

            <br />
            <button class='add_item_btn'>Add Item</button>
          </div>

          <div id='message'>
            message here
          </div>

    </div>  
</form>

Try putting return false; at the end of the click handler. — Barmar
– Barmar, Commented Mar 19, 2014 at 16:32
thats stopped it going back to original, but now its hung on "Sending..." — Derple
– Derple, Commented Mar 19, 2014 at 16:40
Do you see any errors in the JS console? If you check the Network tab, does it show that the AJAX call returned? — Barmar
– Barmar, Commented Mar 19, 2014 at 16:42
no js errors at all, "excuse me while i tap this wall with my head" :/ — Derple
– Derple, Commented Mar 19, 2014 at 16:45
And what about the network tab, does it show the AJAX call returning successfully? — Barmar
– Barmar, Commented Mar 19, 2014 at 16:47

ericglasser · Accepted Answer · 2014-03-19 16:40:24Z

1

You have the return false; too high in the function. In Javascript nothing runs below a return statement. Also since all of your return false; statements are in conditionals there is a chance they never run and the browser redirects before the AJAX call has a chance to complete.

answered Mar 19, 2014 at 16:40

ericglasser

1063 bronze badges

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

2 Comments

Barmar Over a year ago

The AJAX call happens when he calls nu(). If it's executing the beforeSend: code, then it must have gotten there.

ericglasser Over a year ago

I understand, the problem was if return false was run it was above nu(); would not have a chance to fire. When none of the conditions were met return false would not be fired and the browser would redirect before the operation was finished. Both of us had the same solution, I may have just not explained it properly.

Derple · Accepted Answer · 2014-03-19 16:55:28Z

Thanks to Barmar the solution was found.

I required to add

return false;

to the end of the click function.

JQ/JS Edited

$(function() {
  $('.error').hide();
  $(".add_item_btn").click(function() {
    // validate and process form here

    $('.error').hide();
    var itemTitle = $("input#add_item_item_title").val();
      if (itemTitle == "") {
      $("label#add_item_item_title_error").show();
      $("input#add_item_item_title").focus();
      return false;
    }

    //var groupID = $("input#add_item_unit_price").val();  
    var groupID = $("select#add_item_groupid option").filter(":selected").val();

    var unitPrice = $("input#add_item_unit_price").val();

    if (unitPrice == "") {
    $("label#add_item_unit_price_error").show();
    $("input#add_item_unit_price").focus();
    return false;
    }

    if (isNaN(unitPrice)) // this is the code I need to change
    {
        //alert("Must input numbers");
        $("label#add_item_unit_price_error2").show();
        return false;
    }

    var dataString = 'itemTitle='+ itemTitle  + '&groupID=' + groupID + '&unitPrice=' + unitPrice;
    //alert (dataString);return false;

    //add_item();
    nu();

    return false; // <-- added this


    });
    });

Collectives™ on Stack Overflow

Jquery ajax html return not working

2 Answers 2

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related