I have a table and within the first <td> is a hidden <div>. I want to show the div using a jQuery ui dialog which I have the following code
example tr
<tr>
<td>
<div id="subscriberNote" style="display: none;">
long message text........
</div>
long mess...
</td>
<td>
<a id="notedetails" href="#">View note</a>
</td>
</tr>
jQuery
function subscriberNotes_onload() {
$("#subscriber_notes tr").bind("click", function() {
openDialog(this);
});
}
function openDialog(row){
$(row).closest("tr").find("td:eq(0)").find("#subscriberNote").dialog({
title: "Message",
modal: true,
width: 600,
height: 530,
buttons: {
"OK": function () { $(this).dialog("close"); }
}
}).show();
}
After the dialog is shown and closed it is removing the hidden div and so has nothing to show until the page is refreshed.
Make the last function like:
function openDialog(row){
$(row).closest("tr").find("td:eq(0)").find("#subscriberNote").dialog({
title: "Message",
modal: true,
width: 600,
height: 530,
buttons: {
"OK": function () { $(this).dialog("close"); }
},
close: function(){ $(this).dialog("destroy")}
}).show();
}
According to the docs it should revert to its original state.
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");
}
});
});
<div id="dialog"></div>
<table>
<tr>
<td style="text-align: right">
#Html.ActionLink("Craete New Set1", "CreateNewSet1", "ClaimAuditAdmin", null, new{ #class = "openDialog", data_dialog_id = "emailDialog", data_dialog_title = "Create New Claim Audit Set"})
</td>
<td>
</td>
</tr>
$.ajaxSetup({ cache: false });
$(document).ready(function () {
$(".openDialog").live("click", function (e) {
e.preventDefault();
// $(".divContainer")
// $("<div></div>")
$("#dialog")
// .addClass("dialog")
.attr("id", $(this).attr("data-dialog-id"))
.appendTo("body")
.dialog({
title: $(this).attr("data-dialog-title"),
close: function () { $(this).remove() },
modal: true,
height: 325,
width: 325,
draggable: true,
resizable: false,
position: 'center',
scrollable:false
})
.load(this.href);
});
$(".close").live("click", function (e) {
e.preventDefault();
$(this).closest(".dialog").dialog("close");
});
});
Jquery PopUp in MVC showing in Chrome but not in IE.Also No issues showing in IE.
Try this once, Basically, you 'load' the content from the other page first.
$("#dialog")
.load(this.href)
.dialog({
autoOpen: false
}).open();
or
var link = this.href;
$("#dialog")
.dialog({
open: function (event, ui) {
$(this).load(link);
},
});
Pretty new to ajax.
So I have this div:
<div id="authentication" title="Authentication" >
<b>Please Generate a new token to continue!</b>
<br /><br />
<table>
<tr>
<td>Token:</td>
<td><input type="text" id="txtToken"/></td>
</tr>
<tr>
<td></td>
<td><label id="lblError"></label></td>
</tr>
</table>
</div>
which is not being displayed on my mvc view because it is a being used as a dialogue box by Ajax code below:
$('#authentication').dialog({
autoOpen: true,
width:500,
resizable: false,
beforeclose : function() { return false; },
title: 'Authentication',
modal: true,
buttons: {
"Cancel": function () {
window.location.replace("#Url.Action("Index", "Home")");
},
"Submit": function () {
var token=$('#txtToken').val();
var dlg = $(this);
$.ajax({
type: 'POST',
data: { 'token': token},
dataType: 'json',
url: '#Url.Action("CheckNewToken", "Account")',
success: function (result) {
if(result==true)
{
window.parent.jQuery('#authentication').dialog('destroy');
}
else{
$('#lblError').html("Incorrect credentials. Please try again");
}
},
error: function (xhr, ajaxOptions, thrownError) {
}
});
}
}
});
However when the codes goes to success and result == result, the dialog box is destroyed but the div (dialog box) is then being displayed on my view which I don't want. What am I doing wrong?
Close the dialog and then destroy. This will hide the dialog completely and then destroy its dialog features. if you just do .dialog('destroy') it will just remove the dialog functionality completely and display the element as is on the page but it wont hide.
success: function (result) {
if(result==true)
{
$('#authentication').dialog('close').dialog('destroy');
}
else{
$('#lblError').html("Incorrect credentials. Please try again");
}
},
Another thing is beforeclose : function() { return false; }, you are returning false which will prevent the close event from happening. it should be beforeClose though you can remove it safely.
if the above doesnt work another option to remove the div is by subscribing to close event:-
$('#authentication').dialog({
autoOpen: true,
width:500,
resizable: false,
title: 'Authentication',
modal: true,
close:function(){
$(this).dialog('destroy').hide();
},
buttons: {
"Cancel": function () {
},
"Submit": function () {
var token=$('#txtToken').val();
var dlg = $(this);
$('#authentication').dialog('close');
}
}
});
$(function(){
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function() {
$(this).dialog("close");
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
// Dialog Link
$('#dialog_link').click(function(){
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
});
i m use dialog box jquery in which i want use datepicker
it show me outsde of the dialog box.....thats problem....
<div id="dialog" title="Find Patient">
<p>
<table style="table-layout: fixed; width: 550px;">
<tr>
<td><label class="form-item-label form-item-label-right">Patient Id :</label> </td>
<td><input type="text" name="byId" id="byId" style="width: 90%" /></td>
<td><a class="button" href="#"><span>Find</span></a></td>
</tr>
<tr>
<td><label class="form-item-label form-item-label-right">Patient`s Name :</label></td>
<td><input type="text" name="byName" id="byName" style="width: 90%"/></td>
<td><a class="button" href="#"><span>Find</span></a></td>
</tr>
<tr>
<td></td>
<td><input type="text" id="dob" name="dob" style="width: 90%"></td>
<td><a class="button" href="#"><span>Find</span></a></td>
</tr>
</table>
</p>
</div>
when i m use the datepicker Jquery in last row of table in dialog box
load my html page Datepicker is load on page first
I dont know if this is your solution, but try this out if you are tend to use the Jquery datepicker you should add it to the element directly on load mabye and not on focus, it will append when you focus the textbox anyway. Notice the line of code $('#dob').datepicker();
$(function () {
// Dialog
$('#dialog').dialog({
autoOpen: false,
width: 600,
buttons: {
"Ok": function () {
$(this).dialog("close");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
$('#dob').datepicker();
// Dialog Link
$('#dialog_link').click(function () {
$('#dialog').dialog('open');
return false;
});
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function () { $(this).addClass('ui-state-hover'); },
function () { $(this).removeClass('ui-state-hover'); }
);
});
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>