jquery ajax function not working

Question

my html goes like this     lt form name  postcontent  id  postcontent  gt       lt input name  postsubmit  type  submit  id  postsubmit  value  POST   gt       lt textarea id  postdata  name  postdata  placeholder  What s Up    gt  lt  textarea gt   lt  form gt    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   lt center gt  lt img src  images loading gif   gt  lt  center gt               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

User · Answer

I am doing a code like this    x000D   x000D   lt  -- Optional JavaScript -- gt  x000D   lt  -- jQuery first  then Popper js  then Bootstrap JS -- gt  x000D   lt script x000D      src  http   code jquery com jquery-3 3 1 min js  x000D      integrity  sha256-FgpCb KJQlLNfOu91ta32o NMZxltwRo8QtmkMRdAu8   x000D      crossorigin  anonymous  gt  lt  script gt  x000D   lt 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  gt  lt  script gt  x000D   lt script src  https   stackpath bootstrapcdn com bootstrap 4 1 3 js bootstrap min js  integrity  sha384-ChfqqxuZUCnJSK3 MXmPNIyE6ZbWh2IMqE241rYiqJxyMiZ6OW JmZQ5stwEULTy  crossorigin  anonymous  gt  lt  script gt  x000D   lt script gt  x000D        document  ready function      x000D   x000D              work-category a   click function  e    x000D              e preventDefault    x000D              var id     this  attr  data-id    x000D                ajax   x000D                  url   process php   x000D                  method   POST   x000D                  data    x000D                      clickCategoryID   id x000D                     x000D                  dataType   JSON   x000D                  success  function  data    x000D                          content-area   html data Content   x000D                          container-area   animate  top   100px    1000   x000D                          single-content   animate  opacity 1   1000   x000D                    x000D                  x000D              x000D   x000D          x000D   lt  script gt  x000D   x000D   x000D    But the code is not running and the console saya process php not found though I have the code on it

User · Answer

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

User · Answer

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   lt center gt  lt img src  images loading gif   gt  lt  center gt                                                success   function response                            alert response                               return update msg   html response                               post submitting   fadeOut 1000                                                             e preventDefault

User · Answer

Give this a go    lt form name  postcontent  id  postcontent  gt       lt input name  postsubmit  type  submit  id  postsubmit  value  POST   gt       lt textarea id  postdata  name  postdata  placeholder  What s Up    gt  lt  textarea gt   lt  form gt   lt script gt       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   lt center gt  lt img src  images loading gif   gt  lt  center gt                   success function response                        alert response                       return update msg   html response                        post submitting   fadeOut 1000                                                           lt  script gt

User · Answer

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   lt center gt  lt img src  images loading gif   gt  lt  center gt                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

User · Answer

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

User · Answer

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

User · Answer

Try this          postcontent   submit function       return false          postsubmit   click function        your ajax request here

User · Answer

try this code   lt script src    ajax googleapis com ajax libs jquery 1 11 0 jquery min js  gt  lt  script gt   lt Script gt    document  ready function         postcontent   click function e               ajax  type  POST  url  add new post php  data     postcontent   serialize   beforeSend function                    post submitting   show   html   lt center gt  lt img src  images loading gif   gt  lt  center gt               success function response                            alert response                           return update msg   html response                            post submitting   fadeOut 1000                                                            lt  script gt    lt form name  postcontent  id  postcontent  gt                 lt input name  postsubmit  type  button  id  postsubmit  value  POST   gt                 lt textarea id  postdata  name  postdata  placeholder  What s Up    gt  lt  textarea gt    lt  form gt

User · Answer

my html and js code   lt script gt      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           lt  script gt    in php code      foreach  patitent data as  result             result html     lt tr class  test record  gt            lt td gt  lt input type  text  name  test name  value   result- gt test name  class  form-control  gt  lt  td gt            lt td gt  lt textarea class  form-control  name  instruction  gt   result- gt instruction  lt  textarea gt            lt  td gt            lt td gt  lt button class  close remove test record  aria-hidden  true  gt  amp times  lt  button gt  lt  td gt         lt  tr gt               echo json encode  result html

[jquery] jquery ajax function not working

Examples related to jquery

Examples related to html

Examples related to ajax