My favorites | Sign in
Project Home Downloads Issues
READ-ONLY: This project has been archived. For more information see this post.
Search
for
  Advanced search   Search tips   Subscriptions
Issue 377: nyroModal doesn't work on ajax loaded content
4 people starred this issue and may be notified of changes. Back to list
Status:  WontFix
Owner:  ----
Closed:  Apr 2010


 
Reported by eveBlack...@gmail.com, Nov 11, 2009
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
Project Member #1 nyro...@gmail.com
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.
Nov 11, 2009
#2 eveBlack...@gmail.com
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
Project Member #3 nyro...@gmail.com
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
#4 eveBlack...@gmail.com


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
Project Member #5 nyro...@gmail.com
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
#6 IamPersi...@gmail.com
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
#7 IamPersi...@gmail.com
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
Project Member #8 nyro...@gmail.com
(No comment was entered for this change.)
Status: WontFix
Aug 6, 2010
#9 gamer.li...@gmail.com
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.

Powered by Google Project Hosting