| Issue 377: | nyroModal doesn't work on ajax loaded content | |
| 4 people starred this issue and may be notified of changes. | Back to list |
|
I have on my website a calendar. You can browse trough month with little arrows. The months are dynamicly loaded in a container div without page reload. So the month it fetched with ajax. Now my problem: If I have a link within my normal main file, it will work with nyroModal. But if there is a link in the ajax loaded content it doesn't work with nyroModal... The calendar is pure html fetched by ajax and placed in container div. no iframe or something, so the content IS actually on the page.. So the links in the ajax loaded content are not affected. I use the latest version. Why I find this strange is: other javascript functions (which are declared in the main file) CAN be called upon from the ajax loaded content. But nyroModal doesn't work on it :) Thank you, Ewout
Nov 11, 2009
Hmm it doesn't..
What I have now is this:
in my main file (calendar.php):
<script type="text/javascript" src="java/nyroModal.pack.js"></script>
<script type="text/javascript">
$.nyroModalSettings({
bgColor: '#6FA9AF',
width: 533,
height: null,
minWidth: 533, // Minimum width
//minheight: 294, // Minimum width
resizeable: true, // Indicate if the content is resizable. Will be set to false for swf
autoSizable: true, // Indicate if the content is auto sizable. If not, the min size
will be used
title:true
});
$('.nyroModal', '#KalenderTable').nyroModal();
</script>
In my ajax loaded page (mod_calendar.php):
<table class="KalenderTable" id="KalenderTable">
...
...
<div class='container'><a href='demoSent.html' class='nyroModal'>link</a></div>
...
...
</table>
The ajax loaded content is loaded when a button is clicked, so not immediatly.. is
that a concern?
Thank you
Nov 11, 2009
Yes, it's kind of a concern.
Because nyroModal bind the click event of your link on the document load only.
Which means the new link that you're adding with Ajax after the document has load
aren't binded.
the simple solution will be to call again:
$('.nyroModal', '#KalenderTable').nyroModal();
once your ajax content is written in your calendar.
Nov 11, 2009
Having this added to the bottom of mod_calendar.php (the ajax loaded page) doesn't
active the links in the page:
<script type="text/javascript">
$('.nyroModal', '#KalenderTable').nyroModal();
</script>
:/
Nov 11, 2009
Are you sure this script is executed? Are you sure this script is executed once the content is filled in your calendar?
Nov 27, 2009
It seems to me that the problem is with the line url = jFrom.attr(from.nodeName.toLowerCase() == 'form' ? 'action' : 'href'); inside of fileType() (line 804 for me) I think it should return the action for the form in the loaded file, but it doesn't. I'm wondering if this is the same problem with issue 386
Nov 27, 2009
replacing that line with
url = from.nodeName.toLowerCase() == 'a' ? jFrom.attr('href') :
jFrom.parents('form').attr('action')
seems to fix the problem
Apr 16, 2010
(No comment was entered for this change.)
Status:
WontFix
Aug 6, 2010
After your HTML has been updated through ajax, run this javascript:
$('.nyroModal', document).nyroModal();
It will re-activate all links in the document that have the nyroModal class.
|
||||||||
I don't know why other link works but to solve your problem, you can simply make the link just loaded and added in your calendar with something like: $('.nyroModal', myCalendar).nyroModal(); so of course the myCalendar var would be the div containing your calendar. please let me know if you fixed your problem with that.