CODEWITHSUNDEEP
phpjqueryajaxhtmlrefresh
DobotJr
DobotJr

Reputation: 4049

Refreshing several Divs on page after GET

On my page I have a list of images. With each image you get a set a controls, like delete and edit. The delete link is as follows:

<a href='delete.php?imageid=xx'>Delete Image</a>

I have no form set up on the page, so when the user click on Delete image, it then goes to the delete.php page, removes the image from the database, and goes back to the previous page. What I'm trying to do when the user click on delete, it removes the image and just refreshed the DIV, with out having to go to the delete.php page, then back to the original page, I know this involved AJAX/Jquery, I'm just not sure how to get started because everything that I've looked at required a form.

How can I get this done using jquery?

Thanks.

Upvotes: 1

Views: 316

Answers (3)

aziz punjani
aziz punjani

Reputation: 25776

First off, i'd give all your delete links a class so they are easy to select.

<a href='delete.php?imageid=xx' class="delete">Delete Image</a>

Then for the javascript 

$(function(){ 
    $('.delete').click(function(e){ 
      var url = $(this).attr('href');   
      $.get(url, function(){ 
          $('yourdivid').load('put url here'); // this will load div with new content
      });  
      e.preventDefault(); 
    }); 
});

Edit: Say you have a div on the page that you would like to refresh 

<div id="images"> 

</div>

Then you could refresh in a number of ways 

$('#images').load('http://yoursite.com/show_images #images'); // this would be the current pages url

The above code would fetch the page then extract the images div and replace the current pages image div.

You could also refresh the current div with a view partial that you already have (this only contains html for the div, no other html)

$('#images').load('http://yoursite.com/show_image_div'); // this is the partial views url. This only sends back html for the div and no other html.

Remember the implications of refreshing the div, any event handlers that you currently have will no longer work, you would have to use live or delegate.

A better alternative is to delete the image off the div instead of refreshing the div. 

      $.get(url, function(){ 
          $image_div.remove();     
      });

Upvotes: 2

Samich
Samich

Reputation: 30095

Prbably you have delete button around each image. So on clicking on your delete button you need:

$('a[href^="delete.php"]').click(function() { // for all delete buttons
    var url = $(this).attr('href'); // ge delete image url
    var $img = $(this).parent(); // find image container element
    $.post(url, function() { // make call to delete image
       $img.remove(); // delete image on success call
    });
    return false;
});

In case if you have markup like:

<div>
    <a href='delete.php?imageid=xx'>Delete Image</a>
    <img src='...' />
</div>

In this case image will be deleted only on success request to the delete.php, and you don't need any refreshes on the page.

You can play with code in // find image container element to find right element for deletion.

Upvotes: 3

Manse
Manse

Reputation: 38147

You could listen for clicks on an image or a button or a link ....

$(myimage).click(function() {
  $.get('delete.php', function(data) {
    // this is processed once the delete.php has been processed
    postProcess();
  });
});

This is listen for a click then send the data to the server via the get() function and run a method called postProcess() on completion

Upvotes: 2

Related Questions