Jquery + Ajax. What Is Wrong In My Javascript Function? Delete Record, Add Record Without Refreshing

January 31, 2024 Post a Comment

What is wrong with my JavaScript? It is breaking somewhere to add a record without refreshing the page. i finished deleting completely now with the aid of some experienced users. b

Solution 1:

I notice a few things right off the bat.

jQuery Syntax

First of all, your JavaScript syntax is off. In your first file (index.php) you have the following line:

 $("#add").load("add.php") {

That's not the proper syntax of the .load() method. Basically, you have this:

$("#add").load("add.php") {
  // ... stuff to happen after add.php loads
}

What you should have is this:

$("#add").load("add.php", function() {
  // .. stuff to happen after add.php loads
});

Remember, you need to add this extra functionality in the form of a callback otherwise it's not going to work.

Inconsistent calls

In the first code block I addressed, it looks like you're trying to load add.php and then fire some JavaScript commands after you've loaded it. But looking at the source of your add.php file, you don't want to do this. Your add.php file contains the server-side code to process adding a record to the database ... you don't load it directly, you just submit POST requests to it.

Invalid data

You're not sending your data to the server properly. With the add routine, you're first creating a data string:

var dataString = 'ID=' + id'name='+ name + '&username=' + type + '&password=' + rating + '&gender=' + release;

Then you're sending that in your data package via AJAX:

$.ajax({
    type: "POST",
    url: "add.php",
    data: dataString,
    success: function(){
        $('.success').fadeIn(200).show();
        $('.error').fadeOut(200).hide();
    }
});

The problem here is two-fold. Firstly, you're not encoding the data right. 'ID=' + id 'name=' is missing a + character and will break. But even with that fixed, you'd be concatenating data improperly. Your dataString variable would end up looking like:

ID=1name=Bob&username=my_user&password=password&gender=male

You see how you're missing a & symbol? This is an easy mistake to make, so instead send a data object. You're less likely to miss characters:

$.ajax({
    type: "POST",
    url: "add.php",
    data: {

    },
    success: function(){
        $('.success').fadeIn(200).show();
        $('.error').fadeOut(200).hide();
    }
});

Data mismatch

Next, you're passing data to the server but checking for different values. Your JavaScript to add data looks like it wants to send:

ID
name
username
password
gender

But your add.php is checking for:

Submit
name
type
score
Yreleased

Missing Data

With your delete routine, you're checking for the value of "ID" in a GET. That means this value needs to be passed as a query argument appended to the URL. For example: delete.php?ID=5 to delete a game with the ID of 5.

You're checking for this just fine in the PHP, but you're not actually sending the data in your AJAX request. Your code should look more like this:

$("a.deletebutton").click(function(){
    var del_id = $(this).attr("id");
    var info = 'id=' + del_id;
    var parent = $(this).parent();
    if(confirm("Sure you want to delete this game? !")){
        $.ajax({
            type: "get",
            url: "delete.php?" + info,
            context: document.body,
            success: function(){
                $('.p'+del_id).html('deleted');
            }
        });
    }
    returnfalse;
});

See url: "delete.php" becomes url: "delete.php?" + info? This will append your ID to the url and make $_GET['id'] available in PHP.

Solution 2:

From the first look I can tell that the id is not passed as a parameter to the delete.php script. Try adding data: info to the ajax call. This might be a first step to get it working.

Another problem I see is that $(this).attr("id") will not give you the id of the game to delete but the id of the button element ("Submit"). Instead you should use $("#ID").val() to get the value from the hidden field.

JavaScript Site