I have a page that loads a jQuery UI Dialog with an iFrame in it. This iFrame has a login form, however I want a link in this iFrame that says "click here if you are a member" that they can click that will redirect the PARENT to a different page (and thereby close the modal).
Right now any links in the modal (and so in the iFrame) just redirects the iFrame)
Here is the code that calls the modal with the iFrame in it:
$(document).ready(function() {
$("#modalIframeId").attr("src","http://site.com/wordpress/register-now/?the_email_address=<?php echo $the_email_address; ?>");
$("#divId").dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
draggable: false,
resizable: false,
dialogClass: 'no-close',
height: 570,
width: 500,
title: 'Sign Up',
close: function(event, ui) { window.location.href = window.location.pathname; }
});
});
This is all within a Wordpress framework and the page that is called above has the form in it (that works) and the is where a need to have a link to redirect the parent to another page.
Any thoughts?
Thanks! Chris
I guess sometimes the old=school "lo-tech" way is the one we often forget. Found this thread:
Stack Overflow
Which reminded me that target="_top" would do what I needed...and it did. Tested in FF and Android and works well in both (wider testing expected to work well too).
Thanks
Related
I has three page in my jquery mobile apps. For example page1.html->page2.html ->page3.html . I navigate to each other page by using mobile change
Here is the example code
$.mobile.changePage("contact-listing.html",
{
allowSamePageTransition: false,
transition: 'none',
showLoadMsg: false,
reverse: true,
}
This work very nice when page1->page2->page3 . but the problem cum when page3->page2 . All javascript function inside page2 is not able to work. Any solution?
Thanks
I have an ASP.NET MVC 3.0 partial view which is render inside a jquery ui dialog.
Inside this partial view I have some link which help me to display some more info.
#foreach (StatusType status in ViewBag.Status)
{
<li>#status.StatusMessage<a href='#' status='#status.StatusCode'><img src=#Url.Content("~/Content/Images/information.png") alt="See detail"/></a></li>
}
I've bound those link with the click event:
$('a[status]').live('click', function (e) {
if (e.preventDefault)
e.preventDefault();
else
e.returnValue = false;
var status = $(this).attr('status');
alert('#Model.Code');
...});
What is happening is when I click the first time on the link it will display me the correct Code (let's say 12). When I will load the partial view again for another code (66) it will display me two alert message, the first one with 12 (the old value I've clicked before) and the second one with 66.
The more partial view I will load the more value I will have in my alert.
I don't understand why it is keeping me like an history of all the code I've clicked.
If somebody have any idea on this problem, it will be welcomed, it just driving me mad.
Thanks in advance.
UPDATED
The use of the on instead of the live works, but I still have an issue with the dialog.
I've change the code with the solution proposed:
$('#StatusDiv').on('click', 'a[status]', function (e) {
e.preventDefault();
var status = $(this).attr('status');
alert('#Model.Code');
$('#StatusDialog').dialog({
autoOpen: false,
width: 800,
resizable: true,
title: 'Status Info',
modal: true,
open: function (event, ui) {
alert('#Model.Code');
$(this).load('#Url.Action("ViewStatusInfo")', { clientId: clientId, Code: '#Model.Code', status: status
});
}
});
$('#StatusDialog').dialog('open');
});
The first alert display the correct code, but the second alert inside the open function display the old one. On the second click it will work correctly but I don't understand how it can pick the old value since the first display is correct...
Thanks again for your help.
First of all: do not use live in last versions of jquery.
$('#list').on('click', '.status', function(e){
e.preventDefault();
alert(this.href);
});
Here we bind event to #list and when we will insert new links, everything will work.
Demo: jsfiddle.net/wPSH2/
I have a few links on my site that will need to show a modal dialog when the user clicks on one of them. The modal will contain a message like: You are now leaving the "SECTION NAME" part of "SITE NAME". The user will then either accept which will allow the user to continue on with their request or cancel which will keep the user where they are.
An example of a link would be: My Interests
So as you can see the class of leaving-section would cause the link to do what I have specified above, and will also open the link in a new tab/window BUT the user must first accept that they are aware they are being taken to another part of the site.
I have looked at the docs but I haven't seen any examples where a) the dialog is created on the fly rather than hiding and showing a div and b) allowing the user to confirm and being sent to their original location i.e. the url which they clicked.
This is what I have so far:
$("#leaving-section").dialog({
resizable: false,
modal: true,
buttons: {
"I understand, take me there": function () {
$(this).dialog("close");
},
"I want to stay where I am": function () {
$(this).dialog("close");
}
}
});
$('.leaving-section').click(function (event)
{
event.preventDefault();
var $dialog = $('#leaving-section');
$dialog.dialog('open');
});
But I want to the modal to be created by jquery instead of the div being embedded in the page! Also how do I get the first button to send them off to their original destination?
Thanks to all who can help. Thanks
I just had to solve the same problem. The key to getting this to work was that the dialog must be partially initialized in the click event handler for the link you want to use the confirmation functionality with (if you want to use this for more than one link). This is because the target URL for the link must be injected into the event handler for the confirmation button click. I used a CSS class to indicate which links should have the confirmation behavior.
Here's my solution, abstracted away to be suitable for an example.
<div id="dialog" title="Confirmation Required">
Are you sure about this?
</div>
<script type="text/javascript">
$(document).ready(function() {
$("#dialog").dialog({
autoOpen: false,
modal: true
});
});
$(".confirmLink").click(function(e) {
e.preventDefault();
var targetUrl = $(this).attr("href");
$("#dialog").dialog({
buttons : {
"Confirm" : function() {
window.location.href = targetUrl;
},
"Cancel" : function() {
$(this).dialog("close");
}
}
});
$("#dialog").dialog("open");
});
</script>
<a class="confirmLink" href="http://someLinkWhichRequiresConfirmation.com">Click here</a>
<a class="confirmLink" href="http://anotherSensitiveLink">Or, you could click here</a>
I believe that this would work for you, if you can generate your links with the CSS class (confirmLink, in my example).
I think this plugin may be help
http://jqueryui.com/demos/dialog/#modal-confirmation
Heres an example of how you can do it:
http://jsfiddle.net/yFkgR/3/
Or to do something besides cancel
http://jsfiddle.net/yFkgR/4/
You can just define your own buttons. You can style the dialog box anyway you want, i just used the default.
also to use ajax to load the html you can take a look at:
jQuery UI Dialog window loaded within AJAX style jQuery UI Tabs
There is an open option you can use to load html from a remote web page. I jquery you can create a div just be doing
$("<div>");
it will create the closing tag too. Or as suggested in the post you can also use
$('a.ajax')
I have Page A which calls Page B using AJAX. Page B will be put in a div container in Page A. Within the result (which is Page B), there's a code that will initiate a jQuery UI Dialog. The div for the dialog is also in Page B. However, it doesn't work. I'd have to put the initiation code in Page A. So, if I want to put the initiation code in Page B, what should I do ?
The initiation code:
$('#dialog').dialog({
bgiframe: true,
autoOpen: false,
width: 300,
height: 300,
modal: true,
resizable: false,
buttons: {
'Create an account': function() { },
Cancel: function() { }
},
close: function() { }
});
I've also tried using $('div.dialog') as the selector (changed the id to class) and it does work, but everytime I request Page B (without reloading Page A), the dialog will multiply. For an example, the first time I requested Page B, one dialog will be opened. The second time I requested Page B, two dialogs will be opened.
Your approach isn't far off, you're just duplicating the dialog on the call when loading each time, so destroy the previous one, so instead of this:
$('div.dialog').dialog({ ...options... });
Call this:
$('div.dialog').dialog('destroy').dialog({ ...options... });
This prevents multiple dialogs from being instantiated for the same element. Alternatively, you can check if the dialog has been created on that element yet, like this:
$('div.dialog').filter(function() {
return $(this).closest('.ui-dialog').length === 0;
}).dialog({ ...options... });
This creates the dialog only on <div class="dialog"> elements that aren't already wrapped in a dialog.
You could do that using jQuery live function with custom event binding.
Everytime you make a call to Page B, you would have to trigger your custom event, so that the new dialog element can be binded in the event handler. The initiation code would have to be still in Page A if you follow this method.
I have a login page which detects if silverlight is installed and will degrade to html when it is not.
I'm using jQueryUI.dialog to display both; the dialog box appears but is too small to see the content completely and i have to resize it manually.
I think it's something to do with the order the javascript is running on the page. Can anyone help ?
I had a similar problem. What I did was change from using an OBJECT tag to creating the Silverlight control using Javascript.
Example:
$('#silverlightControlHost').dialog({
title: 'My app',
width: 800,
height: 600
});
Silverlight.createObjectEx({
source: 'ClientBin/SilverlightApplication1.xap',
parentElement: document.getElementById('silverlightControlHost'),
id: 'SilverlightObject',
properties: {
width: '100%',
height: '100%',
version: '4.0.50401.0'
},
events: {
onError: onSilverlightError,
onload: null
}
});
I hope that helps you out.