HTML/PHP question

Question

My question is fairly straight forward. I am creating a table from a mysql table and each row in the table holds records from the database. For each new record a new row is made and so on until there are no more records returned. I want to give them an option to delete a record and so I want to give each row it's own class name and so i am trying to echo php code into the class name.

It looks like this:

<tr class="name<?php echo $row['id'];?>">

Would the class then be name1 if $row['id'] was 1?

Alright so now that I got confirmation on this I am using jQuery to delete the record and not reload the page.

What i am trying to do is when a user clicks a button I use AJAX to delete a record in the db and on the screen. I have it working to delete from the db, but I am having trouble deleting it on the screen without re-loading the page.

Here is my jQuery code:

$(".delete").click(function(){
    var delete_id = "delete_id="+$(this).attr("id")
    $.ajax({
        type: "POST",
        dataType: "HTML",
        url: "deleteScript.php",
        data: delete_id,
        success: function(data) {
            $(".name"+$(this).attr("id")).remove();
        }
    });
});

Shouldn't this remove anything with the class name on the screen? I have used alert to make sure that .name"+$(this).attr("id") was right, and it returned what I thought it would. So I am now confused where I went wrong.

Help?

everything mend sense until you said "so I want to give each row it's own class name" -- what's that got to do with deleting records? — mpen
– mpen, Commented Jan 7, 2011 at 18:44
Nope not homework. Its a cart system I am doing for the company I worked for this summer. — Chris
– Chris, Commented Jan 7, 2011 at 18:57

lonesomeday · Accepted Answer · 2011-01-07 18:58:58Z

1

The problem with your code is in the following line:

$(".name"+$(this).attr("id")).remove();

Since you are inside an AJAX success handler, this refers to the XMLHTTPRequest object, not to the element on which the event is triggered. You should cache the element for use inside the success handler.

Your code should eventually look like this:

$(".delete").click(function(){
    var delete_id = "delete_id="+this.id,
        self = this; // cache this
    $.ajax({
        type: "POST",
        dataType: "HTML",
        url: "deleteScript.php",
        data: delete_id,
        success: function(data) {
            $(".name"+self.id).remove(); // use self rather than this
        }
    });
});

Note also that I have used this.id because it is far, far quicker (20x or more) than $(this).attr('id').

answered Jan 7, 2011 at 18:58

lonesomeday

239k54 gold badges330 silver badges329 bronze badges

Sign up to request clarification or add additional context in comments.

3 Comments

mpen Over a year ago

20x? Where'd you find that stat? I figured jQuery would just use that attribute if it existed. Regardless, it's insignificant in this scenario.

lonesomeday Over a year ago

@Ralph jsPerf example. Note that 20x is a very conservative estimate. And it's always good to promote good practices!

mpen Over a year ago

interesting. cool site. you appear to be correct. (38x in FF)

mpen · Accepted Answer · 2011-01-07 19:04:05Z

1

Yes, the class name would be "name1" if $row['id'] is 1. You could have looked at the output HTML to confirm that though.

Also, I'm not sure how this helps you with the deleting records problem. I'd add an extra column to the effect of

<td><a href="/delete-row.php?id=<?=$row['id']?>">Delete</a></td>

And then this is where the fancy-pants-omg-you-have-to-use-POST-guys start screaming, so that should probably take you to a confirmation page where you can use a form with a delete button.

If you're using jQuery, then you should technically be using an "id" instead of a "class" attribute, but I'd still do it this way, and then ajaxify the link so it doesn't take you to another page. This way, it won't explode if the user has JS disabled, they'll just have a slightly use user-friendly way of deleting things.

edited Jan 7, 2011 at 19:04

answered Jan 7, 2011 at 18:44

mpen

285k290 gold badges896 silver badges1.3k bronze badges

2 Comments

gnome Over a year ago

Ralph is correct (and he beat me to the answer -- good job). Your example is fine. No need to use a class or even Id unless you are using a the DOM or a lib like jQuery to get the row by Id or class. Oh and Ralph -- SCREAM SCREAM SCREAM!!

Chris Over a year ago

yeah I am trying to get the row by class using jQuery.

Collectives™ on Stack Overflow

HTML/PHP question

2 Answers 2

3 Comments

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

3 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related