I have a div:
<div id="mproEmailAccountPopUp"></div>
I declare a Dialog
var popupdiv = $( '#mproEmailAccountPopUp' );
popupdiv.dialog({
width: 650,
autoOpen: false,
modal: false
});
I then get some html form stuff (this works fine) from a server and update the dialog content:
function ShowEdit(accountId) {
$.ajax({
type: "POST",
async: false,
url: "<%=EmailHandler %>?action=GetEmailAccountEdit",
data: { accountId: accountId },
success: function (result) {
alert("Success GetEmailAccountEdit");
popupdiv.html(result);
popupdiv.dialog("open");
//popupdiv.dialog( "moveToTop" )
}
});
}
This works beautifully the first time, but if you press the close button, and then recall the function. The dialog is updated with the new html, but you can't type in ANY of the text boxes. I have narrowed it down to the modal overlay (as it works with modal:false). The z-index seems to be 1 less than the modal form, and I have even deleted (via firebug) the modal overlay div, but I can still not edit the text boxes.
If I turn modal:false then it works fine, modal:true is causing these problems.
As you can see, i have tried the "moveToTop" method, no effect.
I have also tried destroying the popup, and reinitialising it entirely from within the ShowEdit function.
Anyone have any clue about what I can do to fix this?
Related
I have a jQuery UI Dialog that is displayed when there are form errors.
Heres the code:
function alert_field_errors (errors)
{
$('<div></div>').dialog({
modal: true,
title: "Error",
open: function () {
$(this).html('The following are required:<br /><br />'+errors+'<br />Please complete these in order to continue.');
},
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
}
the errors variable would contain something like First Name<br />Last Name<br />Email Address<br />
It works great, except for the fact that it is not centered. It seems to be positioning itself before the content is loaded, so that when it is displayed, the bottom margin of the dialog is closer to the bottom of the window compared to the top margin of the dialog.
I tried using the position option, but nothing seems to work.
Any help would be greatly appreciated.
Heres how I fixed it:
I created an empty div on the page with the id of error-dialog and gave it css display: none;.
Then I changed my code to this:
$('#error-dialog').html('The following are required:<br /><br /><i>'+$errors+'</i><br />Please complete these in order to continue.');
$('#error-dialog').dialog({
modal: true,
title: "Error",
buttons: {
Ok: function () {
$(this).dialog("close");
}
}
});
Now it is populating the dialog with content before display it, therefore allowing it to center itself properly.
I have a view showform.phtml that is loaded into a div via jquery dialog. In the view I am loading a javascript with a $(form).submit() listener. The problem is, the javascript is never loaded. I have tried a couple of different methods, including $this->headScript()->appendScript(script), $this->headScript()->appendScript(file). I even tried just including the script in the layout and index view so that it was sure to be available... but the popup never fires it.
I suspect it has something to do with the fact that I am using setTerminal(true) on the form view... but I don't know what the alternative is.
Anyone have any advice on troubleshooting? Or any experience with this issue?
thanks
EDIT :
This is sample javasctipt that loads in the index.phtml view
$(function()
{
$("form#News").submit(function()
{
$.ajax(
{
type: 'POST',
url: '/main/manage/validateajax',
data: $('form#News').serialize(),
success: 'success'
});
return false;
});
});
The body of the view is a div that showform.phtml loads into
showform creates a form called #News.
When I insert the js code into the body of showform, it works. When I append this to the headScript, it does not work.
Maybe it's a solution for you.
Requirement: scripts of your modal view have to be already loaded (for example inside the application.js)
$("#loadModalBtn").click(function(e){
e.preventDefault();
var url = $(this).attr("href");
$("#modalContainer").load(url, function(){ // that's the point
var urlForm = $("form#News").attr("action");
$("form#News").submit(function(){
$.ajax({
type: 'POST',
url: urlForm,
data: $('form#News').serialize(),
success: 'success'
});
return false;
});
}).dialog({
height: 140,
modal: true
});
});
I have a partial view named xyz and I have a lot of buttons on it which implements different functionality.
$('#dialog').dialog({
autoOpen: false,
width: 700,
resizable: false,
modal: true,
open: function (event, ui) { $(this).load('<%=Url.Action("PushButton","Body",new {Parm="text",Parm1="Value"}) %>'); },
position: 'top'
});
I'm opening this partial view XYZ in a jQuery modal dialog box. I have some buttons in the partialview XYZ. I'm not getting how to fire the event explicitly. Like if I want to close the dialog box by click of the button created in Partialview.
You will need to wire the button events once the load is complete. You can add a callback to the load to notify you: http://api.jquery.com/load/
I had the same problem. I want my partial view to be independent and submit using Ajax. It's similar to creating a user control.
I am now planning to use a publisher/subscriber mechanism to listen to an event from my partial view. The parent can listen to this event and close the dialog box.
I came across Ben Alman's Pub/Sub gist.
Another good article for the observer pattern in JavaScript is Learning JavaScript Design Patterns, The Observer Pattern.
Here is the code for the callback on the load event:
$('#dialog').dialog({
autoOpen: false,
width: 700,
resizable: false,
modal: true,
open: function (event, ui) { $(this).load('<%=Url.Action("PushButton","Body",new {Parm="text",Parm1="Value"}) %>', function(){
$("#buttonId").click(function(){
//Stuff you want to do with the button here
});
}); },
position: 'top'
});
You can do this inside document.ready as well:
$(document).on('click', '#idOfControlInsideDialog', function() {
//Stuff you want to do here
});
I hope someone can help as I'm at my wits end with this. What I'm trying to do is this.
"Draggable" Item is Dropped into a "Droppable" area (this works)
This posts the id of the item to my controller which returns the type of item it is (this works)
I pass the returned item name to a function which opens a modal and renders a partial view in the modal depending on the particular item.
The last bit is where the issue is. All the steps above work fine, the modal is popped and the partial view is rendered to the modal. But the button to close the dialog throws the error ".dialog is not a function" and after closing the modal using the 'x' in the corner subsequent attempts to open the modal will not work throwing a similar error.
Here's the example I'm working with to try get this working.
$(function () {
$('.draggable').draggable({ containment: '#imageboundry', revert: 'valid' });
$('#droppable').droppable({
drop: function (event, ui) {
$.ajax({
type: "POST",
url: '/Home/AddToCart/' + $(ui.draggable).attr("id"),
success: function (data) {
getItemType(data);
}
});
}
});
});
function getItemType(itemName) {
$('#dialogs').dialog({
open: function () {
$(this).load("AdditionalContent", { itemName: itemName }, function () {
alert("This happened");
});
},
modal: true,
resizable: false,
title: itemName,
width: 400,
autoOpen: false,
buttons: {
"Confirm": function () {
$(this).dialog('close');
}
}
});
}
This is my controller which returns the partial view to the modal
public PartialViewResult AdditionalContent(string itemName)
{
return PartialView("_" + itemName + "Attributes");
}
The close button works once I take out the open: function () { ... } bit and I can reopen the modal again and again but once I put this back in the error gets thrown. This is obviously the cause but cannot for the life of me figure out why.
Thanks in advance for your help and sorry for the very long post.
UPDATE:
I've attempted initializing the modal in document.ready and call it from my "drop" function in the first main function. From doing this I've narrowed it down to this line of code which loads the partial view from my controller. Without this line the functionality works. Any ideas on what is wrong with this.
$(this).load("AdditionalContent", { itemName: itemName }
I figured it out. Included in the partial views was a second call to the jQuery library which was added automatically when the view was created. Plus it was version 1.4.4 while I was using 1.5.1 straight from Google in the _Layout page. The second jQuery library was obviously breaking the functionality as there was a conflict between the two versions. It wasn't until I watched the FireBug console that I noticed the second loading of the 1.4.4 library.
Thanks to all for your help, feel like a bit of an idiot but lesson learned..... for now
could try this but i am not sure
$('#dialogs').dialog({
var self = this;
open: function () {
$(self).load("AdditionalContent", { itemName: itemName }, function () {
alert("This happened");
});
},
I use several jquery ui dialogs in my application to collect input from users and for CRUD operations. When in a page I need a dialog I do the following steps:
First I define the minimum markup and code necessary to initialize the dialog like this
<div id="dialogPanel" style="display:none" title=""></div>
and, when the DOM is ready,
$("#dialogPanel").dialog({
autoOpen: false, hide: 'slide', show: 'bounce', resizable: false,
position: 'center', stack: true, height: 'auto', width: 'auto',
modal: true, overlay: { opacity: 0.5, background: "white" }
});
Then I load content in the dialog when I need it using ajax calls, like this
<button id="addCustomer">Add Customer</button>
and this
$("#addCustomer").button().click(function(event) {
event.preventDefault();
loadDialog("/Customer/Create", "", "Add New Customer");
});
function loadDialog(action, id, title) {
$("#dialogPanel").dialog("option", "title", title);
if (id != "")
action = action + "/" + id;
$.ajax({
type: "get",
dataType: "html",
url: action,
data: {},
success: function(response) {
$("#dialogPanel").html('').html(response).dialog('open');
}
});
}
The ajax call returns a strong typed view that will show inside the dialog and even resize it dinamically. The strong typed view has some buttons that, in turns, does other ajax calls (for example to the controller action that validate and persist on the database). These calls usually returns back HTML code that will be added to the dialog DIV.
Now my question is: How do I close the dialog? I can do it by clicking the "X" button on top right corner of the dialog or by pressing the ESC key but I would like to do it as a consequence of the click to the button that is inside the strong typed view .
However I do not wish to use this kind of code
$("#dialogPanel").dialog('close');
inside a strong typed view that does not defines the #dialogPanel DIV in itself.
What could be a good solution?
Create a closeDialog function in the main form, and call that function from within the dialog. Then any other page that hosts the dialog also needs to define a "closeDialog" function.
Also, you could pass a delegate pointing to the closeDialog function to separate things further.