Ajax data returned to Symfony partial_include that is recognized by current jQuery / DOM? -
i trying return ajax data recognized jquery. able interact jquery when page loads having content load in between div tag so:
<div id="edit-features-id"> include_partial( 'user/favoriteseditfavorites', array('vrs_allfav_data' => $vrs_allfav_data) ); </div>
this div tag attached jquery dialog . , make things more interesting dialog opened dialog before it. explanation lets call first dialog ( listview ) , second dialog ( editmode ).
therefore when page loads include_partial loads include_partial in between div tags therefore when editmode opened jquery recognizes jquery commands. works able delete, modify , reorder data nothing happens until click save.
when click save, data posted ajax, updates database , if successful returns alert confirmation. when alert closed this:
- closes editmode dialog
- first function updates listview dialog div tag
- second function updates editview dialog div tag
since listview view loads new data saved , go. when editmode dialog called listview time, nothing interactive jquery no longer able click or sort in editmode.
the content returned loaded editmode dialog div tags replacing current html information loaded there partial_include on page load:
<div id="edit-features-id"></div>
i have successful loaded content between div tags using these different ways data editmode:
note: using var $j = jquery.noconflict();
favoritesreloadeditfavorites = function() { $j.ajax({ url: favoriteseditfavoritesurl, cache: false }).done(function(html) { $j('#vrs_favorites_edit').append(html); }); };
or this:
$j('#vrs_favorites_edit').load(favoriteseditfavoritesurl);
or this:
$j.ajax({ url: favoriteseditfavoritesurl, cache: false, success: function(response) { $j('#vrs_favorites_edit').html(response); }; });
as noticed go favoriteseditfavoritesurl translates symfony 1.3.11 route "user/favoriteseditfavorites" calls action:
if ($request->isxmlhttprequest()) { // retrieve data db $vrs_allfav_data loaded editmode using renderpartial. return $this->renderpartial( 'user/favoriteseditfavorites', array('vrs_allfav_data' => $vrs_allfav_data) ); }
this works great load content not content needs interactive jquery in order allow clicks drag , drop capability.
with being said able find solution resolve jquery click function allow start working changing jquery .on code this:
$j('.canceleditfavorites').on('click', function() {
to this:
$j(document).on('click', '.canceleditfavorites', function() {
unfortunately drag , drop aka sortable not work nested sorting using jquery plugin jquery_sortable , code below:
$j("ol.vertical").sortable({ group: 'favorites', handle: '.handle', isvalidtarget: function($item, container) { if ($item.is(".link")) { return true; } else { return $item.parent("ol")[0] == container.el[0]; } }, ondragstart: function($item, container, _super) { if ($item.is(".folder")) { $j('ol.vertical ol').sortable('disable'); _super($item, container); } }, ondrop: function($item, container, _super) { if ($item.is(".folder")) { $j('ol.vertical ol').sortable('enable'); _super($item, container); } }, });
and question, there way load data ajax or other type call recognized dom allowing interactive jquery on initial load or if refreshed page?
refreshing browser doable cause both dialogs disappear , leave end user thinking happened have reclick open first dialog reopen second me not user experience.
to answer own question, reason why not work because ajax call bringing in new data jquery not use page loaded therefore added onclick buttons of new content loaded when fired recognized jquery solving problem.
Comments
Post a Comment