Question

I am playing with things here above my head but am desperately trying to learn.

I have an administration page, using jquery I display a hidden div that displays a another page inside.

I do this using:

$(document).ready(function(){
  $("a#fadeoutblog").click(function(){
    $("#page").fadeTo("slow",0.25)
    $("#terms4").fadeIn("slow")
    $("#back2").fadeIn("slow")
    $("#terms4").load("blogpageload.php")
     }); });

So terms4 is the div on the admin page and it diplays the page blogpageload.php!

On this page is a table that displays all the posts of a really simple blog, ‘a’ delete post a tag and an approve post ‘a’ tag (which just sets the approved column to ‘Y’ in the database). What i want is for the page inside this div to refresh when a post in the table is deleted(or the delete ‘a’ tag is clicked). The problem is that when you click on the delete ‘a’ tag we are sent to the ammendblogdatabase.php page first so that the post can be deleted!.

I have tried multiple methods but they all have problems!

The main part that is causing problems is that to view this div that contains a page the user must first click on another a tag that uses a jquery to stop the ‘display: none;’.

Im not sure what code you may need to see but please ask….

This is the information in the table cell with the delete button:

echo "<a id='refreshblog' href='deleteblogentry.php?username=".$usn."&timeleft=".$tml."'>Delete</a>";

Thank you!

Answer 1

The problem you’re most likely having is binding to “future” elements (e.g. elements that will be on the page, but aren’t yet). To overcome this, you can use .on() to avoid this.

$('#terms4').on('click','a',function(){
  // will bind to anchor elements in #terms4 at the time of execution
  // (most likely page ready) and look for future anchors added (in
  // the case of .load() completing)
});

From there, you can bind your own show/hide event, maybe call an ajax method that deletes the entry behind the scenes, and make a re-call to .load again and refresh the page.