0

I'm a stuck with the following function:

<script type="text/javascript">
function removeElement($parentDiv, $childDiv){


     if (document.getElementById($childDiv)) {    
          var child = document.getElementById($childDiv);
          var parent = document.getElementById($parentDiv);
          parent.removeChild($child);
     }
}
</script>

<a href=\"javascript:;\" onClick=\"removeElement('$parent','$child');\">x</a>

This function deletes a child element, and its content, which works great client-side! But I am wanting to pass a value to the server, in the same instance, so the content of the element can be deleted from the mysql database too. I have no idea how to do this, so any suggestions will be very appreciated!

Notes: $child, and $parent are strings generated within the php file, that I use to give each element a unique ID.

Improve this question
5
  • I'm not a great server side programmer, but I'm picking stuff up quickly. I am a pretty good javascript programmer, if there is such a thing. Question for you: Can you, within the same removeElement function, send a cgi, restlike, or dynamic script tag request via XMLHttpRequest back to the server? Commented Dec 3, 2009 at 7:14
  • @jeremyosborne -> urmmm? I wouldnt have the slightest clue? I am a total noob when it comes to javascript. Commented Dec 3, 2009 at 7:19
  • are you using some clientside framework, Jquery, scriptaculos, moo tools. it all becomes super easy then. Commented Dec 3, 2009 at 7:21
  • We're starting a good comment thread here, but maybe we can get your question answered. @Ori has a point, it's very easy, but can you tell us what the url would look like were we to simply send a query to your CMS to delete the content? Commented Dec 3, 2009 at 7:28
  • @jeremyosborne - page.php?delete=elementID Commented Dec 3, 2009 at 7:34

3 Answers 3

Reset to default
3

To make your life easier, use jQuery or similar framework. Here's how you would do it in jQuery:

$(function() {
    $('.delete').click(function() {
        var link = $(this);
        var id = link.attr('id').replace('element_', '');
        $.ajax({
            url: 'handler.php',
            data: {
                element: id
            },
            type: 'post',
            success: function() {
                link.remove();
                // Or link.closest('tr').remove() if you want to remove a table row where this link is
            }
        });
        return false;
    });
});

The HTML:

<a href="#" class="delete" id="element_20">Remove</a>

And handler.php:

mysql_query("DELETE FROM `table` WHERE id = '".mysql_real_escape_string($_POST['element'])."'");

Always remember to escape database input!

If you're a total noob as you said, you probably won't understand all of this so I suggest you read something about jQuery's AJAX capabilities and about overall development using jQuery or similar JavaScript framework.

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

2 Comments

Hi, Thanks!! It all works fine, except instead of the element being deleted, only the link is being deleted? I tried link.closest('tr').remove(), and just changed the tr, to div... but its not working? Any suggestions?
Depends on what you want to delete. If the delete link is inside the element you are trying to delete, then .closest('div'); should work. If it's not, you must try something else. Check out jQuery's documentation on traversing and selectors on docs.jquery.com.
1

Lets say I want to delete an entity using a ID

JQUERY - $.post() This is an easy way to send a simple POST request to a server without having to use the more complex $.ajax function. It allows a single callback function to be specified that will be executed when the request is complete (and only if the response has a successful response code). Jquery post docs

On the server assuming you have an open database connection.

mysql_query("DELETE FROM TABLE WHERE ID = ".$_POST['ID']);

more on mysql_query found here

EDIT:

So the following will only remove the element when the ajax post is complete. Note the first arg is the url to the script that will take the action , second is the data to be sent, in this case the ID post value will be {child.id} and the third is a anon inline callback function that will take action to remove the element client side.

<script type="text/javascript">
function removeElement($parentDiv, $childDiv){
if (document.getElementById($childDiv)) {
          var child = document.getElementById($childDiv);
          var parent = document.getElementById($parentDiv);  
          $.post('{URLTOSCRIPT}', 'ID=$child.id',function () { parent.removeChild($child); });

}}
</script>
Improve this answer

4 Comments

Thanks! So how would I integrate this into the existing code without breaking the removeElement() functionality? Could you give me an example please?
Thanks again! I am receiving an error from firebug *missing formal parameter using your snippet. Also URLTOSCRIPT -? Do I replace this with url to the page that will handle data? Sorry if my noobness is annoying
Yes replace urltoscript inclusive of the {} and replace in the second param $child.id with the actual value required. ie ID=3 or ID=SWK01 ...
Sorry I take so long... I couldnt get your snippet to work. It doesnt post, and it returns the error missing formal parameter
1

When you call the function, you'd want to put your PHP variables in tags like so:

<?php echo $parent; ?>

and

<?php echo $child; ?>

In the function definition, you will want to get rid of the PHP style variables and use something like:

function removeElement(parentDiv, childDiv) { //CODE }

Improve this answer

1 Comment

The JS function is sitting in a PHP page of functions. It still outputs as your code would suggest to.

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.