CODEWITHSUNDEEP
jqueryhtmlajax
Kiran Gopalakrishnan
Kiran Gopalakrishnan

Reputation: 322

jquery ajax function not working

my html goes like this ,

<form name="postcontent" id="postcontent">
    <input name="postsubmit" type="submit" id="postsubmit" value="POST"/>
    <textarea id="postdata" name="postdata" placeholder="What's Up ?"></textarea>
</form>

The jquery code is as follows 

$("#postcontent").submit(function(e) {
    $.ajax({
        type:"POST",
        url:"add_new_post.php",
        data:$("#postcontent").serialize(),
        beforeSend:function(){
            $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
        },success:function(response){   
            //alert(response);
            $("#return_update_msg").html(response); 
            $(".post_submitting").fadeOut(1000);                
        }
    });
});

When I click on the submit button , my ajax request is not working , it looks as if the control is being passed to the JQuery submit function , but the ajax request is not executing/working properly,what is wrong ?

Upvotes: 10

Views: 155252

Answers (11)

ROHIT KUMAR SINGH
ROHIT KUMAR SINGH

Reputation: 1

you can also use Submit if you take input type submit then it will automatically submit the form or data so simply use button tag with its type or use input type button

Upvotes: -1

suraj gholap
suraj gholap

Reputation: 387

my html and js code

<script>
$(".editTest23").change(function () {

        var test_date = $(this).data('');id
        // alert(status_id);    

        $.ajax({
            type: "POST",
            url: "Doctor/getTestData",
            data: {
                test_data: test_date,
            },
            dataType: "text",
            success: function (data) {
                $('#prepend_here_test1').html(data);
            }
        });
        // you have missed this bracket
        return false;
    });
</script>

in php code

    foreach($patitent_data as $result){

        $result_html .="<tr class='test_record'>\
        <td><input type='text' name='test_name' value='$result->test_name' class='form-control'></td>\
        <td><textarea class='form-control' name='instruction'> $result->instruction </textarea>\
        </td>\
        <td><button class='close remove_test_record' aria-hidden='true'>&times;</button></td>\
     </tr>";
    }

    echo json_encode($result_html)

Upvotes: 0

Zach Pedigo
Zach Pedigo

Reputation: 426

I was having this issue and none of these answers were able to help me with the issue. For anyone else who happens to have the same problem, here is a possible solution that worked for me. Simply reformat the code to be the following:

$("#postcontent").submit(function(e) {
  $.ajax({
    type:"POST",
    url:"add_new_post.php",
    data:$("#postcontent").serialize(),
    beforeSend:function(){
      $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
    },
    success (response) {   
      //alert(response);
      $("#return_update_msg").html(response); 
      $(".post_submitting").fadeOut(1000);                
    },
    error (data) {
      // handle the error
    }
  });
});

The difference in the code is that this code has an error handler. You can choose to handle the error however you wish but it is best practice to have the error handler in case of an exception. Also, the formatting of the success and error functions within the ajax function are different. This is the only format for success/error that would work for me. Hope it helps!

Upvotes: 0

Dev Nath
Dev Nath

Reputation: 1

I am doing a code like this 

<!-- Optional JavaScript -->
<!-- jQuery first, then Popper.js, then Bootstrap JS -->
<script
    src="http://code.jquery.com/jquery-3.3.1.min.js"
    integrity="sha256-FgpCb/KJQlLNfOu91ta32o/NMZxltwRo8QtmkMRdAu8="
    crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.3/umd/popper.min.js" integrity="sha384-ZMP7rVo3mIykV+2+9J3UJ46jBk0WLaUAdn689aCwoqbBJiSnjAK/l8WvCWPIPm49" crossorigin="anonymous"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/js/bootstrap.min.js" integrity="sha384-ChfqqxuZUCnJSK3+MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW/JmZQ5stwEULTy" crossorigin="anonymous"></script>
<script>
    $(document).ready(function () {

        $(".work-category a").click(function (e) {
            e.preventDefault();
            var id = $(this).attr('data-id');
            $.ajax({
                url: 'process.php',
                method: 'POST',
                data: {
                    clickCategoryID : id
                },
                dataType: 'JSON',
                success: function (data) {
                    $("#content-area").html(data.Content);
                    $(".container-area").animate({top: '100px'}, 1000);
                    $(".single-content").animate({opacity:1}, 1000);
                }
            });
        });

    });
</script>

But the code is not running and the console saya process.php not found though I have the code on it.

Upvotes: 0

lalaland
lalaland

Reputation: 71

Give this a go:

<form name="postcontent" id="postcontent">
    <input name="postsubmit" type="submit" id="postsubmit" value="POST"/>
    <textarea id="postdata" name="postdata" placeholder="What's Up ?"></textarea>
</form>
<script>
    (function() {
        $("#postcontent").on('submit', function(e) {
            e.preventDefault();
        $.ajax({
            type:"POST",
            url:"add_new_post.php",
            data:$("#postcontent").serialize(),
            beforeSend:function(){
                $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
            },success:function(response){   
                //alert(response);
                $("#return_update_msg").html(response); 
                $(".post_submitting").fadeOut(1000);                
            }
        });
   });
})();
</script>

Upvotes: 0

Byron
Byron

Reputation: 21

For the sake of documentation. I spent two days working out an ajax problem and this afternoon when I started testing, my PHP ajax handler wasn't getting called....

Extraordinarily frustrating.

The solution to my problem (which might help others) is the priority of the add_action.

add_action ('wp_ajax_(my handler), array('class_name', 'static_function'), 1);

recalling that the default priority = 10

I was getting a return code of zero and none of my code was being called.

...noting that this wasn't a WordPress problem, I probably misspoke on this question. My apologies.

Upvotes: 1

Pravin Tukadiya
Pravin Tukadiya

Reputation: 487

I think you have putted e.preventDefault(); before ajax call that's why its prevent calling of that function and your Ajax call will not call.

So try to remove that e.prevent Default() before Ajax call and add it to the after Ajax call.

Upvotes: 1

Ashwin Sinha
Ashwin Sinha

Reputation: 95

Try this

    $("#postcontent").submit(function() {
  return false;
};

$('#postsubmit').click(function(){

// your ajax request here
});

Upvotes: 1

java seeker
java seeker

Reputation: 1266

put the event handler function inside $(document).ready(function(){...}). it shall work now

also add preventDefault() to restrict page refreshing

$(document).ready(function() {

            $("#postcontent").submit(function(e) {
                e.preventDefault();
                $.ajax({
                    type : "POST",
                    url : "add_new_post.php",
                    data : $("#postcontent").serialize(),
                    beforeSend : function() {
                          $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
                    },
                    success : function(response) {
                        alert(response);
                        $("#return_update_msg").html(response);
                        $(".post_submitting").fadeOut(1000);
                    }
                });
                e.preventDefault();
            });

        });

Upvotes: 14

Drixson Ose&#241;a
Drixson Ose&#241;a

Reputation: 3641

you need to prevent the default behavior of your form when submitting

by adding this:

$("#postcontent").on('submit' , function(e) {

  e.preventDefault();

  //then the rest of your code
}

Upvotes: 2

Janak Prajapati
Janak Prajapati

Reputation: 886

try this code

<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<Script>
$(document).ready(function(){

$("#postcontent").click(function(e) {

        $.ajax({type:"POST",url:"add_new_post.php",data:$("#postcontent").serialize(),beforeSend:function(){
            $(".post_submitting").show().html("<center><img src='images/loading.gif'/></center>");
        },success:function(response){   
                    //alert(response);
                    $("#return_update_msg").html(response); 
                    $(".post_submitting").fadeOut(1000);                
            }
        });
   });
});
   </script>

<form name="postcontent" id="postcontent">
              <input name="postsubmit" type="button" id="postsubmit" value="POST"/>
              <textarea id="postdata" name="postdata" placeholder="What's Up ?"></textarea>
 </form>

Upvotes: 4

Related Questions