Обновление нескольких Div на странице после GET - PullRequest
Новая
       14

Обновление нескольких Div на странице после GET

1 голос
/ 07 ноября 2011

На моей странице у меня есть список изображений.С каждым изображением вы получаете набор элементов управления, таких как удаление и редактирование.Ссылка для удаления выглядит следующим образом: 

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

У меня не настроена форма на странице, поэтому, когда пользователь нажимает кнопку Удалить изображение, он затем переходит на страницу delete.php и удаляет изображение избазы данных, и возвращается на предыдущую страницу.То, что я пытаюсь сделать, когда пользователь нажимает на удаление, он удаляет изображение и просто обновляет DIV, без необходимости переходить на страницу delete.php, а затем обратно на исходную страницу, я знаю, что это связано AJAX / JqueryЯ просто не знаю, с чего начать, потому что все, на что я смотрел, требовало формы.

Как мне это сделать с помощью jquery?

Спасибо.

Ответы [ 3 ]

3 голосов
/ 07 ноября 2011

Возможно, у вас есть кнопка удаления вокруг каждого изображения.Поэтому при нажатии на кнопку delete вам необходимо: 

$('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;
});

В случае, если у вас есть разметка, например: 

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

В этом случае изображение будет удалено только при успешном запросе кdelete.php, и вам не нужно никаких обновлений на странице.

Вы можете поиграть с кодом в // find image container element, чтобы найти нужный элемент для удаления.

2 голосов
/ 07 ноября 2011

Во-первых, я бы дал всем вашим ссылкам на удаление класс, чтобы их было легко выбрать. 

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

Затем для 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(); 
    }); 
});

Редактировать: скажем, у васdiv на странице, который вы хотите обновить 

<div id="images"> 

</div>

Затем вы можете обновить несколькими способами 

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

Приведенный выше код извлекает страницу, а затем извлекает div изображенийи заменить текущую страницу изображения Div.

Вы также можете обновить текущий div с уже имеющимся частичным представлением (оно содержит только html для div, никакого другого 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.

Запомните последствия обновления divлюбые обработчики событий, которые у вас есть, больше не будут работать, вам придется использовать live или делегировать.

Лучшей альтернативой является удаление изображения с div вместо обновления div.

      $.get(url, function(){ 
          $image_div.remove();     
      });
2 голосов
/ 07 ноября 2011

Вы можете прослушивать clicks на изображении, кнопке или ссылке .... 

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

Это прослушивание щелчка, а затем отправка данных на сервер через get ()функция и запустить метод с именем postProcess () по завершении

...