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"));
}
});
Related
i have some problem with ie9 and jquery ui but still cant find solution please help me
When i click Detail dialog must be open and it works on ie7,ie8,FF,Chrome but don't in ie9
$(function() {
var popup = $("#popup"),
allFields = $([]).add(popup);
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 1200,
modal: true,
buttons: {},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
function dialogOpen(id) {
$('#dialog-form').dialog('open');
}
<div id="pageopen" onclick="dialogOpen('dialog-form')">
<div id="detail" style="text-decoration:underline;">Detail</div>
</div>
<div id="dialog-form" title="Detail"></div>
Add the following code in document.ready. You trying to open the dialog before it is being created.
$(document).ready(function(){
$("#dialog-form").dialog({
autoOpen: false,
height: 800,
width: 1200,
modal: true,
buttons: {},
close: function() {
allFields.val("").removeClass("ui-state-error");
}
});
});
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/
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!
There are several posts on StackOverflow on the subject but none of the answers helped me.
I am using the DataList control that is populated by a SELECT through a DataAdapter.
A concept is recommended that only one instance of the dialog must be open but could not apply this method
The structure of the html is:
<asp:DataList ID="DataList" runat="server">
<ItemStyle />
<ItemTemplate>
<a href="" class="link"/></a>
<div class = "dialog" id="dynamicID" style="display:none">
</ div>
</ ItemTemplate>
</ asp: DataList>
The jQuery code I'm using is:
<script language="javascript" type="text/javascript">
$ (function () {
$ (". link. ") click (function () {
var id = '#' + ($ (this). siblings ('. dialog'). attr ('id'));
$ (id). dialog ({
AutoOpen: false,
closeOnEscape: true,
resizable: false,
draggable: false,
modal: true,
width: 800,
height: 600,
overlay: {backgroundColor: "# 000", opacity: 0.5},
top: 20,
show: 'fade',
hide: 'fade',
buttons: {
"Close": function () {
$ (id). dialog ('close');
}
}
});
$ (id). dialog ('open');
});
});
</ script>
Imagine this HTML
<asp:DataList ID="dataList" runat="server">
<ItemTemplate>
<div class="row">
<p>
Result: <strong>
<%# Container.DataItem.ToString() %></strong></p>
<a href="#" class="link" data-open="dialog_<%# Container.ItemIndex %>" />Click
To Open</a>
<div class="dialog" id="dialog_<%# Container.ItemIndex %>">
<h2>
This is the text inside the dialog #
<%# Container.ItemIndex %>.</h2>
<p>
</p>
</div>
</div>
</ItemTemplate>
</asp:DataList>
with this javascript
$(function () {
// create dialogs
$(".dialog").dialog({
autoOpen: false,
closeOnEscape: true,
buttons: {
"Close": function () {
$(id).dialog('close');
}
}
});
// hook up the click event
$(".link").bind("click", function () {
// console.log($(this).parent());
// open the dialog
var dialogId = $(this).attr("data-open");
$("#" + dialogId).dialog("open");
return false;
});
});
works lovely.
Working example can be found here
What is wrong with your approach?
you are creating the dialog's inside a method, and this should be created inside the $(document).ready() so, everytime you click, it creates a dialog, but... it already exists and screws up everything.
When working with dialogs:
First you create them using .dialog()
You just need to use .dialog('open') to make that dialog visible
And use .dialog('close') to hide that dialog
by default jQuery UI CSS will hive the dialogs automatically (display:none;) so you don't need to do anything like that.
Usually just destroying the dialog on close will fix the issue.
$( "#dialogbox" ).dialog({
close: function (event, ui) {
$(this).dialog("destroy");
}
});
When dialog has displayed it fall out from the markup flow. So when you call var id = '#' + ($ (this).siblings('.dialog').attr('id')); you don't get anything. You can add dialog's id to array first time it opens and then if $(this).siblings ('.dialog') result is empty you may get dialog element id from array.
<script type="text/javascript">
var registeredDialogs = [];
function registerDialog(link, dialogDiv) {
var linkId = $(link).attr("id");
if (!registeredDialogs[linkId])
registeredDialogs[linkId] = dialogDiv;
}
function getDialog(link) {
var linkId = $(link).attr("id");
return this.registeredDialogs[linkId];
}
$(function () {
$(".link").click(function () {
var dialogDiv = $(this).siblings('.dialog');
if (dialogDiv.length !== 0) {
registerDialog(link, dialogDiv);
}
else {
dialogDiv = this.getDialog(link);
}
dialogDiv.dialog({
AutoOpen: false,
closeOnEscape: true,
resizable: false,
draggable: false,
modal: true,
width: 800,
height: 600,
overlay: { backgroundColor: "# 000", opacity: 0.5 },
top: 20,
show: 'fade',
hide: 'fade',
buttons: {
"Close": function () {
$(id).dialog('close');
}
}
});
$(id).dialog('open');
});
});
</script>
If you are calling a modal dialog box in jquery, but have the image file location in an array, how would you call this dialog box where if they clicked the link, the image would pop up? Right now, because of a loop it is obviously only using the last file name.
function showDialog(){
$("#image_viewer").html('<iframe id="modalIframeId" width="100%" height="100%" marginWidth="0" marginHeight="0" frameBorder="0" scrolling="auto" />').dialog("open");
$("#modalIframeId").attr("src","image_view.cfm");
return false;
}
$(document).ready(function() {
$("#image_viewer").dialog({
autoOpen: false,
modal: true,
height: 800,
width: 600
});
});
You're trying to use an iframe as a modal dialog, you should just use a DIV.
<!--- HTML --->
<div id="imageDialog" class="dialog" style="display:none;"></div>
Then you can output a list of links to your images like this:
<!--- CFML --->
<cfoutput query="qImages">
#qImages.label#<br />
</cfoutput>
Finally, you can open the URL for the image directly into the modal dialog using a bit of class trickery.
<!--- jQuery --->
$(document).ready(function(){
$('.dialog').dialog(
{
autoOpen: false,
modal: true,
width: 440,
height: 330,
title: "Image Viewer"
}
);
$('a.image').click(function(e){
$('#imageDialog').load( $(this).attr('href') ).dialog("open");
e.preventDefault();
});
});