I'm trying to open a jQuery dialog using AJAX. The content of the dialog is loaded from a querystring and contains server controls inside a form tag.
I have a GridView where a link in each row spawns the dialog.
The first time, the dialog loads fine, but subsequently I need to open another dialog on the page, then the first dialog will load. I can't open the same dialog subsequent times. Inspecting the DOM in Firebug shows multiple 'containers' at the end of the page. I have a GridView where one column contains a link and an empty div. I've simplified the control IDs because they're mangled by ASP.NET, but this is my code:
$('#linkId').click(function() {
$('#panelId').dialog({
autoOpen: true,
height: 600,
width: 680,
modal: true,
show: 'blind',
hide: 'blind',
title: 'More Information',
open: function () {
$(this).load(url).parent().appendTo("form");
},
close(){
// I've also tried using these (not both at the same time)
$(this).dialog('destroy').remove();// dialog never opens again
$(this).dialog('disable').remove();// dialog never opens again
}
});
return false;
});
});
I've tried adding the included functions to the close event, but I get the same effect. Otherwise, when the dialog eventually opens, everything works perfectly (despite there being multiple dialog containers at the end of the page).
From the jq dialog api documentation:
"If you want to reuse a dialog, the easiest way is to disable the
"auto-open" option with: $(foo).dialog({ autoOpen: false }) and open
it with $(foo).dialog('open'). To close it, use
$(foo).dialog('close'). A more in-depth explanation with a full demo
is available on the Nemikor blog"
Related
I cannot seem to get Chrome to pop up an "alert" page. The alert page has code in it, so it can't really be a DIV or I would just do it that way. It worked for many years, but likely do to a Chrome update it will no longer function. Still works fine in IE11, though.
The following code is used to pop up an "alert" page when there is an alert that is queried from a Database. It has always worked until recently (15 years and running)
CODE:
ClientScript.RegisterStartupScript(GetType(Page), "Alarm", "<script language='javascript'>window.showModalDialog('Alarm.aspx?ID=" & AlarmID & "', null, 'dialogWidth=460px;dialogHeight=310px;status=no;resizable=yes');document.frmA.submit();</script>")
I've tried a few things like windows.open and creating a hidden button on the asp.net page and then using the click event. Nothing works. I do not see a blocked popup in Chrome and I have even went into settings and did the following:
Set Safe Browsing to "No Protection"
Set allow pop-ups and redirects on the server name (http://servername and http://localhost)
As noted, near all browsers quite much have clamped down on popup windows. this makes things more difficult for web developers.
There are two good approaches. one I don't fancy at all is using bootstrap dialogs, but they tend to "sort of work all on their own" kind of deal based on class settings for divs etc. - really hard to debug.
Since near all sites these days include jQuery for your js code, then I quite much hands down recommend you introduce jquery.UI. It has a whole slew of nice things such as date pickers etc. But it also has a rather nice dialog pop option. They just work, and when you code them up? They follow "normal" like code approaches.
it not quite clear if your message/dialog pops after say a button click (and post back), and the at the end of that process, you need/want some dialog message to display. But all in all, I would high recommend jQuery.UI for this dialog/message that you need.
jQuery.UI in most cases expects the content you want to "display/pop" exists in a simple div in the current existing page. However, it also works VERY well if you supply the dialog another existing web page. The only REAL big issue to keep in mind? That dialog page you pop cannot handle multiple post-backs. (so, some buttons, or ONE post back in that dialog is fine - but you ONLY get the ONE post-back.
So, if that page display allows some input, or some interaction and ONLY requires ONE post-back, then jQuery.UI is again great. If that pop page requires several buttons and several post-backs, then you are in for a world of pain and hurt - jQuery.UI dialogs (like most) cannot survive or handle multiple postbacks. Any post-back means the dialog closes (collapses). So in those cases, you have to adopt ajax calls (web methods) if you need/have/want that page to have more then one active post-back button or event.
So, you could have/place a script in even your master page, and little function code stub that your register script can call.
Or, I suppose you could inject the whole script, but the script would look like this:
So, the pop page actualy is SHOVED into a div. So we have a div that "holds" the page.
The jQuery.UI code script then looks like this:
<div id="poppagearea">
</div>
<script>
function showpage() {
var mydiv = $('#poppagearea');
mydiv.dialog({
autoOpen: false, modal: true, title: 'My cool other page', width: '30%',
position: { my: 'top', at: 'top+150' },
buttons: {
'ok': function () {
mydiv.dialog('close');
alert('user click ok');
},
'cancel': function () {
mydiv.dialog('close');
alert('user click cancel');
}
}
});
mydiv.load('Default.aspx');
// Open the dialog
mydiv.dialog('open');
}
So, in above, we loaded "default.aspx" into that dialog and thus displayed it on the page.
So, I would consider jQuery.UI - but it does mean adopting a new js library into your existing project.
The pop page does gray out the full page, and you do get a title bar, and your own ok, cancel button. The above thus looks like this:
So, it does a great job - but as noted, that page can only have one post-back, and it can't be a general working aspx page with lots of buttons and post backs - but it will render and display rather well.
I have got a jqgrid, and i would like to put a link in it to open up more details on the row in a modal window.
Everything i have read about modal windows uses a div that gets shown when you click the link, but i want to pass an id so i can just get the info i need. I know i could do it with a new window quite easly but i would like to use a modal window if poss.
Any ideas how i could do this. I'm using asp.net if thats going to be relevent.
Cheers
Luke
I'd suggest using the jQuery UI Dialog plugin for custom modal windows. You can find demonstration and documentation here:
http://jqueryui.com/demos/dialog/
In theory, to do what you're asking for, you could follow these steps:
Add a “dialog” div tag to your page.
Build the link into your data feed. If you’re using a XML data type make sure you use a CDATA flag to encapsulate your link so that they XML may be parsed correctly.
< cell>< ![CDATA[< a href=”javascript:showDialog(‘551’)”>text]]>< /cell>
In this instance, since we know the actual id at the time the link is create, I pre-populated the id (e.g. 551) in the function. This could also be retrieved from jqGrid API with the selrow property. It’s your call. If you use a JSON data type, the idea would similar. You wouldn’t have to worry about the CDATA qualifier.
Create a local function (e.g. showDialog (id)) to correspond to your link.
Add code in the showDialog function to populate and open the modal dialog. Using an AJAX call to gather specific data for this record, create the dialog content and populate the dialog using the jQuery .html method.
function showDialog (id) {
$.ajax({
url: "feed.aspx?id=" + id,
success: function(data) {
var content = // TODO: create dialog layout here
$("#dialog").html(content);
$("#dialog").dialog({
title: 'Record Details',
modal: true,
closeOnEscape: true,
width: 300,
height: 200,
buttons: false,
position: "center",
});
$("#dialog").dialog("open");
}
});
}
This is just one way to skin the cat. You should be able to use more of a jQuery approach with the link creation. If desired, rather than building the specific link the data feed, you could add jQuery click event bindings to handle the request. It’s your call. You could also add the dialog div dynamically to your page using jQuery rather than just placing it manually like I described above. It might be a little more elegant looking but would achieve the same goal.
I am attempting this late. May be you have an answer. Thought this will help others.
The #dialog code can be done as suggested by gurun8. This needs to be wired to the jqgrid. There is a onSelectRow event which triggers whenever a row is selected in jqgrid. Refer documentation. I usually add autoOpen: false, to the dialog constructor.
You need to add the onselectrow event to the grid (jqgrid function as shown below) and you can pass the id to the function. This id is the unique identifier in the jqgrid. Make sure there are no syntax errors, add comma wherever appropriate.
$s("#list").jqGrid({
...
onSelectRow: function(id){
console.log("row is selected"+id);
$url = "your_url/";
$s('#dialog').load($url);
$s('#dialog').dialog('open');
}
...
});
I'm using the jQuery UI Dialog() function on an ASP.NET webform, on a particular panel.
After Dialog() is applied, the buttons become useless and will not post back at all; I'm not even getting a Page_Load event firing, let alone any button events.
Is the Dialog function messing with my button events? If so, is there a way to fix this?
My guess is since you are using WebForms your actaul dialog is outside the one tag you get in WebForms. You can check this by viewing the source, or better yet opening the IE Developer tools (F12) and then selecting the dialog. You can then see where your buttons are in the DOM.
The other thing, remember in WebForms all the controls have to well be controls that runat=server. If you are using pure HTML then you need to assign the acciont of the button's click event in the JavaScript.
You are close to the solution, just getting the wrong object. It should be like this:
jQuery(function()
{
var dlg = jQuery("#dialog").dialog({
draggable: true,
resizable: true,
show: 'Transfer',
hide: 'Transfer',
width: 320,
autoOpen: false,
minHeight: 10,
minwidth: 10
});
dlg.parent().appendTo(jQuery("form:first"));
});
So I have a rather odd issue that I wanted to see if anyone has some insight into.
I have a page in which I display a grid of files that have been uploaded to our server. The toolbar for the grid provides them with the ability to upload more files. When they click the "Add File" button on the toolbar, a jQuery UI Dialog modal window appears with a simple file upload control in it. After they select a file, they click the "Upload" button on the Dialog which submits the underlying form for uploading. Also note that because I'm using asp.net, there is only one form on the page so I'm not submitting the wrong form.
Now... when I attempt to look for uploaded files on the backend, no files are uploaded. What's worse, if I move the upload control out of the dialog div and use it straight from the page without a dialog, the uploads work fine.
This leads me to believe that even though I am defining the div that will become my dialog within the main form to allow it to submit with a postback, jQuery is somehow moving it or disassociating it from the form.
Is this possible? Or is there something else I may be missing? I can't seem to find any documentation that says either way. Thanks in advance!
You need to move the dialog to inside the form.
var dialog = $("#dialog").dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons: {
"Upload": function() {
__doPostBack('uploadfile', '');
$( this ).dialog( "close" );
},
Cancel: function() {
$(this).dialog("close");
}
}
});
dialog.parent().appendTo($("form:first"));
You're right. Dialog moves its content outside of its form, and appends it to body. Probably to gain better control of the DOM, to make sure it always displays in the center, above everything else, and is not contained in some absolutely positioned DIV or so...
What is occurring here is that the Block UI removes all click functionality on buttons within its modal. To get around this the best solution I have found is to have a hidden button which will then do the desired processing.
Here is an example:
HTML
<asp:Button runat="server" ID="btn_Upload" OnClientClick="UploadFiles(); return false;" />
<asp:Button runat="server" ID="btn_UploadClick" OnClick="btn_UploadFiles_Click" style="display:none;" />
Javascript/Jquery
function UploadFiles()
{
$.unblockUI({
onUnblock: function() {
$('[id$=btn_UploadClick]').click();
}
});
}
I've got an asp.net page containing a Textbox with an Autocomplete extender on it.
It's setup so the user can type a short reference code into the textbox and then choose from the list of matching codes returned by the autocomplete.
On the "select", I then call the server using JQuery. I'm currently using $.get here....
The callback function from $.get checks for "success" and then displays a simple-modal dialog containing info about the item they've just selected.
if (sStatus == "success") {
$.modal(sText, {
overlayClose: true,
appendTo:'form',
onShow: function(dialog) {
$("#ccTargets_tabContainer").tabs();
},
onClose: function(dialog) {
$("#<%=TextBox1.ClientID%>").val("");
$.modal.close();
}
});
$.ready();
}
One of the bits of info being loaded here is a JQuery TABS setup, so the onShow function of the simplemodal is used to initiate the tabs which are within the simplemodal.
Now to the crux of my problem.
If I do multiple consecutive "autocompletes" on the same page it all works fine Unless I have selected a different tab on the tabs in the simplemodal ....If I select a different tab, close the simplemodal and then do another autocomplete I get a JQuery error which seems to relate to a selector doing something with the "old" selected tab that was on the "closed" modal.
I'm clearly missing some sort of cleardown / initialisation somewhere, but can't find what it is. Help?
I've tried "tabs.destroy" before the modal call in the code above and I've tried a $.ready() call as indicated too....
UPDATE: Is it something to do with JQuery Tabs appending my addressbar URL with the selected tab's ID?
I've found the problem.
It's with the "history" script that the tabs plugin normally uses. Obviously as I am continually creating and destroying popups there is no history to speak of - it's all done outside of the normal app navigation.
I've removed the jquery.history_remote script and now it works just great!
Dave