I've searched and can find things that almost seem like they would work but I can't seem to find a definitive answer so here goes...
Using this code I have a jQueryUI modal window showing...
<script>
jQuery(function() {
$( "#dialog" ).dialog({ closeOnEscape: true, modal: true, draggable: false, resizable: false, width: 500, height: 500, close: function(event, ui) { location.href = 'http://www.page.com' } });
});
</script>
<div id="dialog" title="WELCOME!">
<form id="wp_signup_form" action="" method="post">
<label>Email address</label><br />
<input type="text" name="email" class="text" value="" /> <br />
<input type="submit" id="submitbtn" name="submit" value="SignUp" />
</form>
</div>
But when I click submit on the form the whole page reloads inside the modal window.
How do either get just the modal window to reload with the form content in it (and some PHP I will add after this works), or reload the whole page?
Thanks!
Chris
I solved this by loading an iFrame inside my modal window:
$(document).ready(function() {
$("#modalIframeId").attr("src","http://site.com/wordpress/wp-content/themes/theme/registration.php");
$("#divId").dialog({
autoOpen: true,
modal: true,
closeOnEscape: true,
draggable: false,
resizable: false,
dialogClass: 'no-close',
height: 500,
width: 500,
title: 'Sign Up'
});
});
</script>
<div id="divId" title="Dialog Title">
<iframe id="modalIframeId" width="100%" height="100%"
marginWidth="0" marginHeight="0" frameBorder="0" scrolling="none"
title="Dialog Title">Your browser does not suppr</iframe>
</div>
and calling registration.php into the iframe, which is my form as needed.
Thanks!
Related
I want to implement Nivoslider for a slideshow as well as jQueryUI pop-op boxes. When I implement them as separate entities, then the pop-up boxes stop working as they should.
Is there a way to implement them together, or is there a fatal error?
By the way, I am a complete noob when it comes to js - please be kind and spell things out for me please :D
This is the code for Nivoslider:
<script type="text/javascript" src="scripts/jquery-1.7.1.min.js"></script>
<script type="text/javascript" src="scripts/jquery.nivo.slider.pack.js"></script>
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider({
effect: 'fade', // Specify sets like: 'fold,fade,sliceDown'
animSpeed: 2000, // Slide transition speed
pauseTime: 6000, // How long each slide will show
});
});
</script>
and this is the code for jQuery UI pop-up box:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script>
<script>
$( "#dialog" ).dialog({ autoOpen: false });
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
</script>
My implementation based on the demo script provided with Nivo Slider, just add in jquery UI and use this code. It stores the slider information and re-creates the slider each time the dialog is opened.
HTML Code
<div id="wrapper">
dev7studios
<button id="btnTestMe">Open Slideshow</button>
</div>
<div id="dlgTestMe">
<div class="slider-wrapper theme-default">
<div id="slider" class="nivoSlider">
<img src="images/toystory.jpg" data-thumb="images/toystory.jpg" alt="" />
<img src="images/up.jpg" data-thumb="images/up.jpg" alt="" title="This is an example of a caption" />
<img src="images/walle.jpg" data-thumb="images/walle.jpg" alt="" data-transition="slideInLeft" />
<img src="images/nemo.jpg" data-thumb="images/nemo.jpg" alt="" title="#htmlcaption" />
</div>
<div id="htmlcaption" class="nivo-html-caption">
<strong>This</strong> is an example of a <em>HTML</em> caption with a link.
</div>
</div>
</div>
JQuery Code
$('#btnTestMe').click(function(e){
e.preventDefault();
$('#dlgTestMe').dialog({
open: function(){
var data = $('.slider-wrapper').html();
if (typeof($(this).data("slider")) == "undefined"){
$(this).data("slider", data);
}
$('#slider').nivoSlider();
}, beforeClose: function(){
$('#slider, .nivo-controlNav, .nivo-html-caption').detach();
$(this).children('.slider-wrapper').html($(this).data("slider"));
}
});
});
I am using a jQuery UI modal dialog on a JSF page that also has primefaces components inside the dialog div. When I set the modal property to true the overlay covers up the dialog content as well. Here is my dialog definition:
if (jQuery("#rangeChoice").val() == 'Custom') {
jQuery("#rangeDialog").dialog({
modal: true,
draggable: false,
minHeight: 375, minWidth: 450,
resizable: false,
title: 'Create Custom Date Range',
closeOnEscape: false,
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); }
});
return;
}
and my content for the div:
<div id="rangeDialog" style="display: none;">
<div class="customRangeButtons" style="z-index: 4999;">
<!-- Clipped for brevity, the buttons alone are covered by the overlay -->
<span>
<p:commandButton value="Cancel" actionListener="#{bean.cancelCDR}" update="pGraphs"/>
</span>
<span style="margin-left: 300px;">
<p:commandButton value="Submit" type="submit" action="#{bean.saveCDR()}" update="pGraphs"/>
</span>
</div>
I am using Primefaces 2.2.1, and I have a feeling related to who is controlling the overlay div. I did try adding my own overlay div in the page and showing it in the open event of a non modal dialog. It also covered the dialog for z-index values > 3. Values 1 and 2 were okay though some other controls on the page were above that. Note this is a workaround to using a p:dialog as it was causing my actionListeners not to fire.
What else can I try?
The problem is the z-index on the div tag is being overridden by the .dialog itself. The .dialog's default z-index is 1000. You can change this when you create the dialog by changing the zIndex option like so:
jQuery("#rangeDialog").dialog({
modal: true,
draggable: false,
minHeight: 375, minWidth: 450,
resizable: false,
title: 'Create Custom Date Range',
closeOnEscape: false,
open: function(event, ui) { jQuery(".ui-dialog-titlebar-close").hide(); },
zIndex: 4999
});
See the options tab in the documentation for more info:
http://jqueryui.com/demos/dialog/
In an .aspx page, I have a div with a asp:textbox and asp:linkbutton with visibility set to false. I have a link in the page that would open a modal window and show the content of the div. when the asp:linkbutton is clicked on the serverside code textbox value is not set.
Click here
<div id="ShowModal" visible="false">
<asp:textbox id="txtName" runat="server" width="200"></asp:textbox>
<asp:linkbutton id="btnCreate" runat="server" text="Save" onclick="btnCreate_OnClick"/>
</div>
<script type="text/javascript">
$(document).ready(function(e) {
$('#ShowModal').dialog({
autoOpen: false, height: 200, width: 400, modal: true
});
$('a#OpenModal').click(function() {
$('#ShowModal').dialog({ modal: true });
$('#ShowModal').dialog('open');
return true;
});
});
</script>
On the server-side event handler the text of the textbox is "".
Could anyone help on this issue
answering my own question for future reference.
$("#ShowModal").dialog({
height: 200, width: 400,
modal: true,
width: 433,
modal: true,
open: function () {
$('#ShowModal').parent().appendTo($("form:first"));
}
});
I use the the following code to show a dialog with jQuery UI:
var $dialog = $('<div></div>')
.text(msg)
.dialog({
autoOpen: false,
height: 140,
modal: true,
title: "Confirm",
buttons: {
"Yes": function() {
$(this).dialog('close');
},
"Cancel": function() {
$(this).dialog('close');
}
}
});
$dialog.dialog('open');
However, the buttons have no styles. I notice that the HTML generated for the buttons are:
<div class="ui-dialog-buttonset">
<button>Yes</button>
<button>Cancel</button>
</div>
From the jQuery UI demos it is:
<div class="ui-dialog-buttonset">
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Ok</span></button>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-text-only" role="button" aria-disabled="false"><span class="ui-button-text">Cancel</span></button>
</div>
I.e. the CSS styles are missing.
Do you know why?
If you use Bootstrap and JQueryUI, jquery-ui.js must be included AFTER bootstrap.js.
Perhaps because the CSS files are missing? Do you actually include them? Then use firebug or httpfox to see if there's a 404 somewhere...
Edit: I include a jQuery-ui css like this: <link type="text/css" href="blah/css/smoothness/jquery-ui-1.8.custom.css" rel="stylesheet" />
I'm newbie on this, I'm trying to apply the shake effect to a dialog that has an embedded form but not success on this.
When I try to trigger the effect
$("#restore_password").effect("shake",
{times: 3}, 80);
only the fields inside the form tag is taking the effect but the dialog box itself doesn't.
My div
<html>
<body>
<div id="restore_password" title="Confirmation code" class="ui-widget-content ui-corner-all" >
<form> <fieldset> <label for="code">Code</label> <input type="text" name="codecon" id="codecon" class="text ui-widget-content ui-corner-all" /> </fieldset>
</form>
</div>
</body>
</html>
My dialog
$("#restore_password").dialog({
height: 220,
width: 310,
autoOpen: false,
modal: true,
draggable: false,
resizable: false,
show: 'puff',
hiden: 'puff',
buttons: {
"Confirm": function(){
$("#change_password").dialog('open');
},
"Cancel": function(){
$(this).dialog('close');
$("#forgot_data").dialog('close');
$("#dialog-form").dialog('open');
setTimeout(function(){
$("#name").focus();
}, 800);
}
},
close: function() {
allFields.val('').removeClass('ui-state-error');
}
});
Any ideas?, it would be helpful.
Nalum's solution worked, but was a little ugly. Try this one:
$('#restore_password').parent().effect("shake", {times: 3}, 80);
$(...).dialog(...); creates a new element without an id.
e.g.
<div id="testingDiv">...</div>
becomes
<div style="..." class="..." tabindex="..." role="dialog" aria-labelledby="ui-dialog-title-testingDiv">
...
<div id="testingDiv">...</div>
...
</div>
So your code is working. What you need to do is target the dialog div e.g.
$('div[aria-labelledby=ui-dialog-title-testingDiv]').effect("shake", {times: 3}, 80);