| Issue 87: | endFillContent not working? | |
| 2 people starred this issue and may be notified of changes. | Back to list |
Problem:
I'm trying to get jQuery focus, and select content in newly loaded
nyroModal content. (In other cases which are not shown here, I have tried
to bind function to the click event on similar content without success.)
The Code:
$("#modal_citation").click(function(){
$.nyroModalManual({
minHeight: 90,
url: "#modal_citation_content",
endFillContent: "selectModalBox"
});
});
$.selectModalBox = function() {
alert('running');
$(".modal_box").select();
};
Thanks for looking at this issue! Any help is greatly appreciated.
Oct 3, 2008
The select function is jQuery's built in function to select the text within a field. (This will make it easy for my users to copy the text in the box.) I found out why this is not working... When nyromodal creates the modal from an inline div, it duplicates the code instead of re-positioning it. So basically, I have two identical ID's, and that means browsers won't be able to reference those elements correctly. I'm pretty sure thickbox could handle this, I'm going to look at the thickbox code, and then get back to you. (Thanks again for the support/reply!)
Oct 3, 2008
I think this could from the thickbox jquery is what I'm thinking of (line 222 if you
have the source):
$("#TB_ajaxContent").append($('#' + params['inlineId']).children());
$("#TB_window").unload(function () {
$('#' + params['inlineId']).append( $("#TB_ajaxContent").children() ); // move
elements back when you're finished
});
So basically, thickbox moves the inline content to the thickbox div instead of
duplicating it. This resolves the problems of duplicate element IDs.
Oct 3, 2008
Another problems I was having was getting Firefox to automatically insert the username and password for saved modal fields. Solved: I just did a test on copying (.html()) versus moving (children()). It is up at http://illumin.javconcepts.com/ as the content on the homepage. Results: Firefox (at least) will not populate fields with previous usernames / passwords upon creating new html. It probably tags the saved fields with the possible values only on the initial load of the page. Fix: actually moving the original html is the best solution. The moved modal content is generally hidden anyway, so nobody notices. Also, while the children() method moves the text, it only removes children, so stay text that isn't inside of another element is left behind. Thus, a simple wrapper would be needed.
Oct 3, 2008
So I've started taking a look at your code, and you use .contents, which is like children but it doesn't need the wrapper that I suggested. So, it seems the best solution. Now I just have to figure out why my modal isn't being processed in this way...
Oct 3, 2008
OKK!! I found an inconsistency I think. (Sorry that this thread has kinda gone to two topics.) I set up two username / passwords forms. The first I call with a normal, non-manual modal call, and FF populates the fields just fine. The manual call, however, load the content through ajax (boo!) and FF doesn't not populate those fields of course. Class time... Will look into more, later.
Oct 5, 2008
FIXED!!!!!!!! Suggestion: Add to the if statement in line 34: || req == '' In manual modal calls, I think it should be assumed that the user wants to load an inline div unless a URL is explicitly stated. This reduces the extra server call, and prevents duplicate IDs with manual modal calls. What do you think?
Oct 5, 2008
Crap, I meant line 634.
Oct 14, 2008
Hi clappro33, thanks for all your remarks. I used the contents() function because of some bug in IE with flash content. But it should work. regarding the loading content via Ajax content instead of simply take the content from the DOM, I can't reproduce the bug. It's working on the demo page for example. Could you send some code or give me more information please?
Oct 14, 2008
Hello there,
Just trying to clarify how I should be manually adding a inline div, that is moved
into the modal window, not copied, as I have a unique id's in the div.
This works, but duplicates;
$.nyroModalManual({
content: $('#testDiv').html()
});
This doesn't work, i just get the loading icon;
$.nyroModalManual({
url: '#testDiv'
});
Thanks
Jozz
Oct 15, 2008
Jozz,
My call to Nyromodal looks like this:
$("#copyright").click(function(e){
//$.scrollTo(0, 400, {axis:'y'});
//$("#page_sidebar div.editor").animate({opacity: 1.0}, 500).slideDown('medium');
if($("#modal_login_content").html() != "") {
$.nyroModalManual({
minHeight: 100,
minWidth: 230,
url: "#modal_login_content",
endShowContent: function(elts, settings) {
$("#username").focus();
}
});
}
});
Also, as stated above, I changed line 632 (not 634) in the nyromodal js file from:
if (req == curLoc)
to:
if (req == curLoc || req == '')
Oct 15, 2008
Cedric, If you visit http://illumin.javconcepts.com/, I have changed line 632 back to the original to show you the loading of another page. If you click on the copyright symbol in the footer, the login modal pops up. If you have the Firebug Console opened, you will see a GET request to http://illumin.javconcepts.com/?nyroModalSel=MODAL_DIV. The code to luanch this modal is shown above in my message to Jozz. Hopefully you can see the bug now. (And how simply adding || req == '' would fix this.) Thanks! Josh
Oct 16, 2008
On my local test page: 1) Using the current version (1.2.8), I experienced the same issue (ajax load) 2) Using my current dev version (coming soon), the issue disappear
Status:
Accepted
Oct 22, 2008
The new version 1.3.0 is now released and fix this bug.
Status:
Fixed
Oct 22, 2008
Works like a charm! Thanks again for your support, and you willingness to update this great plugin. |
Firstly I would recommend to use the endShowContent callback to add a focus on a field to avoid some trouble with IE6. Then, here is how should looks like your code : $("#modal_citation").click(function(){ $.nyroModalManual({ minHeight: 90, url: "#modal_citation_content", endShowContent: function(elts, settings) { alert('running'); $(".modal_box", elts.content).select(); } }); }); What's the select function in your code?