Solved

jQuery Ajax function not working

Posted on 2011-02-13
3
345 Views
Last Modified: 2013-11-19
I am trying to use this code, a variation of which I have used successfully in the past, and I can't get it to work. I assume there must be some syntax or logic error that I can't find. Perhaps your eyes can discover it.

<script type=\"text/javascript\">

$(function(){
      var vehicle = $("#vehicle");
      var pickup = $("#PICKUP");
      var error = $("#error");
      var postwrap = $("#postwrap");
      $("#vsearch").submit(function(){
            if((pickup.val() == "") || (dropoff.val() == "")){
                  error.text("The post must have both a pickup and a dropoff location").fadeIn(300).delay(900).fadeOut(300);
                  return false;
                  }
            else{
                  $.ajax({
                        type: "POST",
                        url: "AJAX_process.php",
                        data: "vehicle="+vehicle.val()+"&pickup="+pickup.val()+"&add=true",
      success:
      function(r){
      postwrap.html(r);
      postwrap.hide().show(1000);$("#success").text("Post added").fadeIn(300).delay(900).fadeOut(300),
},
      error: function(){$("#error").text("Could not add post").fadeIn(300).delay(900).fadeOut(300)}
                  });
                  return false;
                  }
      }
)});
</script>

The form has the id of vsearch.

With this installed, and the form statement as simple as <form id="vsearch"> (no action statement), the form still refreshes and does not show the result in the divs

I have jQuery running OK on the page, powering some other functions. I am using it in som PHP code.

Any ideas?
0
Comment
Question by:birwin
[X]
Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people just like you are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
  • 2
3 Comments
 
LVL 18

Accepted Solution

by:
Sudaraka Wijesinghe earned 500 total points
ID: 34882153
Couple of things I found:

1. Following line should end with a semicolon, not a comma
postwrap.hide().show(1000);$("#success").text("Post added").fadeIn(300).delay(900).fadeOut(300),

Open in new window


2. In the following line you are using variable/object dropoff, but I don't see it defined or initialized.
 if((pickup.val() == "") || (dropoff.val() == "")){

Open in new window

0
 
LVL 6

Author Closing Comment

by:birwin
ID: 34882332
Thank you for pointing out my rather obvious errors. I had been staring at it for too long. I am quite sure I tried the code with a comma and a semi-colon, but you caught the problem with the undeclared variable, that I completely missed.

Thank you!
0
 
LVL 18

Expert Comment

by:Sudaraka Wijesinghe
ID: 34882749
Glad to help. Thanks for the points.
0

Featured Post

Containers & Docker to Create a Powerful Team

Containers are an incredibly powerful technology that can provide you and/or your engineering team with huge productivity gains. Using containers, you can deploy, back up, replicate, and move apps and their dependencies quickly and easily.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

When it comes to write a Context Sensitive Help (an online help that is obtained from a specific point in state of software to provide help with that state) ,  first we need to make the file that contains all topics, which are given exclusive IDs. …
Q&A with Course Creator, Mark Lassoff, on the importance of HTML5 in the career of a modern-day developer.
Video by: Mark
This lesson goes over how to construct ordered and unordered lists and how to create hyperlinks.
The is a quite short video tutorial. In this video, I'm going to show you how to create self-host WordPress blog with free hosting service.

623 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question