Are you encountering a malfunctioning AJAX Function? Seeking assistance with PHP/MySQL

Question

Are you encountering a malfunctioning AJAX Function? Seeking assistance with PHP/MySQL

I have a PHP-generated form that needs to submit data using AJAX. Here's what I have so far...

PHP Form

<div class="user">
    <span>Start a friendship with '.$row['screen_name'].'</span>
    <form method="POST" action="./create.php">
        <input type="hidden" value="'.$row['user_id'].'" name="follow_id" class="follow_id" />
        <input type="submit" class="follow-submit" value="Get '.$row['credits_offered'].' Credits" />
    </form>
</div>

AJAX

// AJAX for creating Friendship
$(".follow-submit").on("click", function() {

    var follow_id = $(".folow_id").val();

    var dataString = 'follow_id=' + follow_id;
    alert (datastring); return false;

    $.ajax({
      type: "POST",
      url: "update.php",
      data: dataString,
      success: function() {
        $('.message').html("<p>Friend request sent!</p>");
      }
     });
    return false;

});

The issue I'm facing is that the click event of my AJAX doesn't register, and instead, the form continues to post and redirect to create.php.

php jquery ajax

Answer 1

Answer №1

$("#follow-button").on("tap", function(e) {e.preventDefault();
...

Answer 2

$("#follow-button").on("tap", function(e) {e.preventDefault();
...

Answer 3

Answer №2

Try adding this debug code to identify any errors:

success: function($response) {
    console.log($response)
    $('.message').html("<p>Friend request sent!</p>");
  },
error: function($param1, $param2) {
    console.log($param1); 
    console.log($param2);
}

If there are any errors, you can view them in the browser's console using Firebug for Firefox.

Answer 4

Try adding this debug code to identify any errors:

success: function($response) {
    console.log($response)
    $('.message').html("<p>Friend request sent!</p>");
  },
error: function($param1, $param2) {
    console.log($param1); 
    console.log($param2);
}

If there are any errors, you can view them in the browser's console using Firebug for Firefox.

Answer 5

Answer №3

There is an issue with your AJAX function execution as it stops at the first return statement. To resolve this, simply remove the return statement and your code should work perfectly fine. Additionally, in order to prevent the anchor from redirecting to create.php, you need to include the event.preventDefault() method within your click handler function. The modified version of your code would look like this:

// Implementation of Friendship AJAX
$(".follow-submit").on("click", function(event) {
event.preventDefault();
    var follow_id = $(".folow_id").val();

    var dataString = 'follow_id=' + follow_id;
    //alert (datastring); return false;

    $.ajax({
      type: "POST",
      url: "update.php",
      data: dataString,
      success: function() {
        $('.message').html("<p>Friend request sent!</p>");
      }
     });
    return false;

});

Answer 6

There is an issue with your AJAX function execution as it stops at the first return statement. To resolve this, simply remove the return statement and your code should work perfectly fine. Additionally, in order to prevent the anchor from redirecting to create.php, you need to include the event.preventDefault() method within your click handler function. The modified version of your code would look like this:

// Implementation of Friendship AJAX
$(".follow-submit").on("click", function(event) {
event.preventDefault();
    var follow_id = $(".folow_id").val();

    var dataString = 'follow_id=' + follow_id;
    //alert (datastring); return false;

    $.ajax({
      type: "POST",
      url: "update.php",
      data: dataString,
      success: function() {
        $('.message').html("<p>Friend request sent!</p>");
      }
     });
    return false;

});

Answer 7

Answer №4

The issue lies in the failure to cancel the submit event. To do that, you need to include the event as a parameter in your click function and invoke preventDefault() on it. Also, using return false halts the execution of your function prematurely, before even initiating the AJAX request. Furthermore, there is a typo present wherein "follow_id" is incorrectly typed as "folow_id" on the second line of the JavaScript code. In my opinion, a better approach would be to utilize the submit() function offered by jQuery. Simply add an ID to your form and implement it as follows:

HTML:

<div class="user">
    <span>Connect with '.$row['screen_name'].'</span>
    <form id="follow-form" method="POST" action="./create.php">
        <input type="hidden" value="'.$row['user_id'].'" name="follow_id" class="follow_id" />
        <input type="submit" class="follow-submit" value="Get '.$row['credits_offered'].' Credits" />
    </form>
</div>

JavaScript:

// Make a Connection (AJAX)
$("#follow-form").submit(function(event) {
    event.preventDefault();
    var follow_id = $(".follow_id").val();

    var dataString = 'follow_id=' + follow_id;
    // alert (datastring); return false;

    $.ajax({
      type: "POST",
      url: "update.php",
      data: dataString,
      success: function() {
        $('.message').html("<p>Connection request sent!</p>");
      }
    });

    return false;
});

Answer 8

The issue lies in the failure to cancel the submit event. To do that, you need to include the event as a parameter in your click function and invoke preventDefault() on it. Also, using return false halts the execution of your function prematurely, before even initiating the AJAX request. Furthermore, there is a typo present wherein "follow_id" is incorrectly typed as "folow_id" on the second line of the JavaScript code. In my opinion, a better approach would be to utilize the submit() function offered by jQuery. Simply add an ID to your form and implement it as follows:

HTML:

<div class="user">
    <span>Connect with '.$row['screen_name'].'</span>
    <form id="follow-form" method="POST" action="./create.php">
        <input type="hidden" value="'.$row['user_id'].'" name="follow_id" class="follow_id" />
        <input type="submit" class="follow-submit" value="Get '.$row['credits_offered'].' Credits" />
    </form>
</div>

JavaScript:

// Make a Connection (AJAX)
$("#follow-form").submit(function(event) {
    event.preventDefault();
    var follow_id = $(".follow_id").val();

    var dataString = 'follow_id=' + follow_id;
    // alert (datastring); return false;

    $.ajax({
      type: "POST",
      url: "update.php",
      data: dataString,
      success: function() {
        $('.message').html("<p>Connection request sent!</p>");
      }
    });

    return false;
});

Are you encountering a malfunctioning AJAX Function? Seeking assistance with PHP/MySQL

Answer №1

Answer №2

Answer №3

Answer №4

Similar questions

How can I consistently position a dialog box (tooltip) on top of a JQuery UI modal Dialog?

Sending an ajax request to submit the results of jQuery.each loop

When using jQuery, the content loaded with the $ajax function only displays after refreshing the page

Leveraging depends alongside max for jQuery validation

Load the AJAX-enabled guestbook into the designated DIV element

Quick trick to strip decimal points from prices with jquery

When navigating a website, how can one prompt a popup window to appear with a form that, upon submission, will directly update a select element on the original page?

Exploring the use of asynchronous data retrieval with jQuery and JSON within MVC 2.0

Tracking page views through ajax requests on Google Analytics

The error message "GetListItems is not defined" indicates that the function is not recognized

Using AngularJS controllers: How can one trigger a controller from within a different controller?

What is the best method for assigning a default value to the file input tag in HTML?

Modifying CSS style according to the contents of an HTML element

How to use Ajax to update a Filefield in Django

Divide the MySQL results into two distinct groups and display them in separate div

Transforming the content of a <div> into a variable in PHP

Insert data into a database using PDO from a dynamic HTML table structure

Instantly Retrieving Form Data on Client Side

Iterate using jQuery through all child div elements

Javascript - Conceal a Dynamic Div Depending on its Text