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");
});
},
Related
I'm loading in a report and displaying it with jquery-ui in tab format. The report is returned by an ajax call in json, and a function is formatting it into HTML. Example code below:
<div id="reportdiv">
</div>
<script>
function displayreport(objectid)
{
$( "#reportdiv" ).hide();
$( "#reportdiv" ).html("");
$.ajax({
type: "GET",
headers: { 'authtoken': getToken() },
url:'/reportservice/v1/report/'+objectid.id,
success: function(data){
if(data == null)
{
alert("That report does not exist.");
}
else
{
var retHTML = dataToTabHTML(data.config);
$("#reportdiv").html(retHTML).fadeIn(500);
$(function() {
tabs = $( "#reportdiv" ).tabs();
tabs.find( ".ui-tabs-nav" ).sortable({
axis: "x",
stop: function() {
tabs.tabs( "refresh" );
}
});
});
}
}
});
}
</script>
This works fine the first time displayreport is called. However, if the user enters another value and runs displayreport again, the "tabs" format is completely lost (the tabs are displayed as links above my sections, and clicking on a link takes you to that section further down the page).
I figured completely re-setting the reportdiv html at the beginning of the function would bring me back to original state and allow it to work normally every time. Any suggestions?
After more testing, found that destroy was the way to go. If I've set up tabs already, run the destroy, otherwise, skip the destroy (http://jsfiddle.net/scmxyras/1/) :
if(tabs!=undefined)$( "#reportdiv" ).tabs("destroy");
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
});
});
Given the following script:
$(function () {
$(".editLink").button();
$('#editPersonDialog').dialog({
autoOpen: false,
width: 800,
resizable: false,
title: 'Edit Person',
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#updatePersonForm").submit();
},
"Close": function () {
$(this).dialog('close');
}
},
close: function (event, ui) {
$(this).dialog('close');
}
});
$(".editLink").click(function () {
var dialogDiv = $('#editPersonDialog');
var linkObj = $(this);
var viewUrl = linkObj.attr('href');
$.get(viewUrl, function (data) {
dialogDiv.html(data);
//validation
var $form = $("#updatePersonForm");
// unbind existing validation
$form.unbind();
$form.data("validator", null);
// check document for changes
$.validator.unobtrusive.parse(document);
// re-add validation with changes
$form.validate($form.data("unobtrusiveValidation").options);
// open dialog
dialogDiv.dialog('open');
});
return false;
});
});
function updateSuccess() {
if ($("#update-message").html() == "True") {
$('#editPersonDialog').dialog('close');
$("#commonMessage").html("Update Complete");
$("#commonMessage").delay(400).slideDown(400).delay(3000).slideUp(400);
}
else {
$("#update-message").show();
}
}
If I click the "X" button on the dialog the form closes fine. If I click the "Close" button then it does not close. I have verified that the code for the "Close" button is being called.
Both the "X" button and the "Close" button are both running the same statement: '$(this).dialog('close');'. Why would one work and the other not work?
As an aside the dialog will not open a second time unless I refresh the page. I imagine that these 2 problems may be related.
I have found many people with similar problems and a number of different solutions that worked for them. Unfortunately none of them worked for me.
Further Info:
The dialog displays a partial view in an Ajax form:
#using (Ajax.BeginForm("Edit", "Person", null,
new AjaxOptions
{
UpdateTargetId = "update-message",
InsertionMode = InsertionMode.Replace,
HttpMethod = "POST",
OnSuccess = "updateSuccess"
},
new { #id = "updatePersonForm" }))
{
#Html.ValidationSummary(true)
<div id="update-message" class="hiddenDiv"></div>
<div class="blockGraygradient">
#Html.Partial("_CreateEditCommon")
#Html.HiddenFor(model => model.SelectedPerson.Id)
#Html.HiddenFor(model => model.SelectedPerson.RowVersion)
#Html.HiddenFor(model => model.SelectedPerson.CreateTime)
</div><p/>
}
Try using this instead.
$(this).dialog('destroy');
We had exactly the same problem. In the end, every time you re-opened the dialog it was actually re-injecting the dialog markup into the DOM. Then, when you click close (for the second time) it only closes the first occurrence of the dialog, but not necessarily the one that's open. You can check this using a run-time DOM inspector like FireBug or Chrome's built-in developer tools.
I found out that the cause of both problems (the close button not working and being unable to show the dialog more than once without refreshing the page) was that I had included references to my script files in both my main page and the partial view being displayed by the dialog. Once I removed the script references from the partial view the problems disappeared.
(As an aside this has now raised another problem to do with an Ajax update back onto the main page when the dialog is closed. I think this is the reason that I put the scripts into the partial view in the first place).
You have too much recursion. You don't need to subscribe to the close event of your jQuery dialog and invoke $(this).dialog('close'); inside it. Simply comment this line or remove completely the close event subscription:
$('#editPersonDialog').dialog({
autoOpen: false,
width: 800,
resizable: false,
title: 'Edit Person',
modal: true,
buttons: {
"Save": function () {
$("#update-message").html('');
$("#updatePersonForm").submit();
},
"Close": function () {
$(this).dialog('close');
}
}
});
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?
with the below code, I'm able to add a page fragment to an other page. The page contains a form to be posted to a certain action method.
$("#ul-menu a").click(function () {
$.get($(this).attr("href"), function (response) {
$("#dialog-div div").replaceWith($(response));
});
return false;
})
Instead of having the form anywhere in the page, I'd like to get it as a modal JQueryUI dialog.
How can I do that.
Thanks for helping.
This will work for you. Also, I've added a better method of preventing the original click. Instead of returning false, which kills all bubbling, you should use event.preventDefault();
$("#ul-menu a").click(function (event) {
event.preventDefault();
$.get($(this).attr("href"), function (response) {
$(response).dialog({ modal : true });
});
})
You don't even need to insert the response into the page.
You can just do this:
var myDialog = $(response).dialog();
EDIT
Not the above snippet won't create a modal dialog, I assumed you know you need to pass in { modal: true } as part of your configuration.