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"));
});
Related
I use a jQuery UI dialog in which there is another pop-up.
$("#dialog").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$("#opener").click(function() {
$("#dialog").dialog("open");
return false;
});
// BUTTONS
$('.fg-button').hover(function() {
$(this).removeClass('ui-state-default').addClass('ui-state-focus');
}, function() {
$(this).removeClass('ui-state-focus').addClass('ui-state-default');
});
// MENUS
$('#hierarchybreadcrumb').menu({
content: $('#hierarchybreadcrumb').next().html(),
backLink: false
});
See here the live version: http://jsfiddle.net/nrWug/1
If I open the iPod menu and than drag the dialog, the iPod menu is displaced. How can I bind these two to make the dialog draggable and resizable?
To make it work you have to use the "drag" event from jQuery dialog and adjust with that the position of the menu.
If you want to add custom callback functions into the iPod style menu, go into fg.menu.js line 244 and add your custom functions.
If you are here because of the neat iPod style menu, wait for jQuery UI to update to version 1.9. This feature will be integrated directly taken from Filament Group (a major contributor). You can see the actual status and download the 1.9 version. here is the current demo which did not yet include the iPod style menus.
I decided not to use that menu since there are major cross browser compatibility issues with the menu if used with jQuery UI (especially dialog). If jQuery UI has taken over the feature in 1.9 stable, there will be no-doubt that this space-saving menu/selectbox will be seen more regularly on the web.
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"
I have a really odd behavior here: I created a little popup dialog in jQuery UI, and in my test HTML page, it works flawlessly. When I click on the button, the popup comes up, covers the background, and remains on screen until I click on one of the two buttons (OK or Cancel) provided.
So now I wanted to add this into my ASP.NET 3.5 app. I wanted to add it to a GridView inside a user controls (ASCX), which is on a page (ASPX) contained inside a master page.
The jQuery 1.4.2 and jQuery UI 1.8.1 scripts are referenced on the master page:
<body>
<form id="XXXXXX" runat="server">
<Ajax:ScriptManager ID="masterScriptManager" runat="server" ScriptMode="Auto">
<Scripts>
<asp:ScriptReference Path="~/Scripts/jquery-1.4.2.min.js" />
<asp:ScriptReference Path="~/Scripts/jquery-ui-1.8.1.custom.min.js" />
</Scripts>
</Ajax:ScriptManager>
I had to change this to use the Ajax script manager, since adding them to the as never worked.
So in my gridview, I have a column with image buttons, and when the user clicks on those, I am calling a little javascript function to show the jQuery UI dialog:
function showDialog()
{
$("#dlg-discount").dialog('open');
$("#txtAmount").focus();
}
When I run this page in MS IE 8, I get a separate page, and at the top of the page, I get the contents of my , with proper background color and all. In Firefox 3.5.6, I do get the dialog as a popup.
In both cases, the dialog page/popup disappears again after a second or less - without me clicking anything!
It seems similar to this question but the solution provided there doesn't work in my case. This one here also seems similar but again: the solution presented doesn't seem to work in my case...
Any ideas / hints / tips on what the h**** is going on here??
Thanks!
Update: OK, one problem is solved - it appears that for whatever reason, the default MS Ajax stuff is adding some kind of an "observer" to my popup dialog and closes it right away after it shows up :-(
So I changed the OnClientClick="showDialog();" to OnClientClick="showDialog(); return false;" and how that doesn't happen anymore - the dialog box pops up and stays there until I click on either of the two buttons (OK and Cancel).
Where are you creating the dialog? There should be some code like this which gets called when the DOM is ready;
$(document).ready(function(){
var dialogOpts = {
autoOpen: false,
modal: true,
width: 620,
height: 660
};
$("#dlg-discount").dialog(dialogOpts);
}
And then you can call $("#dlg-discount").dialog('open') in your onclick method.
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');
}
...
});
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();
}
});
}