How to close a jquery dialog from inside the open function? - javascript

I want to open this dot_card.php page in a dialog box. I want to interrupt the the form submission to do some stuff and them do an ajax call. After the form is submitted via ajax, I want to close the dialog box. But the code below doesn't seem to close it.
What am I doing wrong?
Here is my code.
$('<div><div id="addDotDiv"></div></div>').appendTo('body').dialog({
modal: false,
title: 'title',
closeOnEscape: true,
zIndex: 10000,
autoOpen: true,
minWidth: 650,
resizable: false,
position: { my: 'top+50', at: 'center', of: '#id-top' },
open: function() {
$('#addDotDiv').load('dot_card.php', '', function() {
$('#create_dot_form').submit(function(e) {
e.preventDefault();
var actionUrl = $('#create_dot_form').attr('action');
$.ajax({
type: "POST",
url: actionUrl,
data: $('#create_dot_form').serialize(),
success: function() {
$(this).closest('.ui-dialog').dialog('close');
}
});
});
});
},
close: function() {
$(this).remove();
}
});

Related

How to trigger the function inside kendo window?

I have a page(A.html) that will open a kendo window with iframe(B.html) inside.
Here is my configuration to open the kendo window in A.html:
var contentUrl = 'B.html';
var window = $("<div id='dvB' />").kendoWindow({
title: "B", content: contentUrl, animation: false,
resizable: false, modal: false, draggable: true, iframe: true, height: 550, width: 430,
close: function () {
this.destroy();
}
}).data('kendoWindow');
window.open();
So now I want to call the retrieveFunction() in B.html from A.html.
I try to do it like below:
Window = $('#dvB').data('kendoWindow');
Window.retrieveFunction();//not work
var windowElement = $("#dvB");
var iframeDomElement = windowElement.children("iframe")[0];
var iframeDocumentObject = iframeDomElement.contentDocument;
iframeDocumentObject.retrieveFunction(); //not work
Anyone know how to achieve that?
You can trigger custom event from B.html and pass function as parameter and listening it on A.cshtml, something like this:
B.html
<script>
function retrieveFunction() {
console.log('retrieveFunction');
}
$(function () {
window.parent.$('body').trigger('customEvent', { func: retrieveFunction});
});
</script>
A.html
<script>
$(function () {
$('body').on('customEvent',
function(event, data) {
console.log('triggered');
data.func();
});
$("<div id='dvB' />").kendoWindow({
title: 'B', content: contentUrl, animation: false,
resizable: false, modal: false, draggable: true, iframe: true, height: 550, width: 430,
close: function () {
this.destroy();
}
}).data('kendoWindow').open();
});
</script>

How to use div.load properly when calling for a partial view in another controller?

So i have this code that calls a popup dialog that contains a partial view. The problem is that whenever i call the dialog div.load appends the entire string block to the address of the home controller.
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load("#Url.Content(~/Resend/_SendMessage.cshtml)", function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
smsContentId: smsContentId,
comments: comments
},
});
The MobileNumberUpload is the home controller for the project while Resend is the controller for the Partial View. Note that I cannot combine the two controllers as per the constraints of the project.
Error Message for when i click the button
This is the dialog that pops up when i click the button
Try below changes :
function OpenSendMessagePopUp() {
var div = $("#DivAppendToPartialView");
div.load('#Url.Content("~/Resend/_SendMessage.cshtml")', function () {
div.dialog({
modal: true,
width: 500,
height: 420,
show: 'blind',
hide: 'blind',
title: "Send Message",
draggable: false,
resizable: false,
buttons: {
"Cancel": function () {
$(this).dialog("close");
}
}
});
});
}
function SaveMessage() {
$.ajax({
type: 'POST',
url: '#Url.Content("~/Resend/_SendMessage.cshtml")',
data: {
"smsContentId": smsContentId,
"comments": comments
},
});
}
Also make sure smsContentId and comments should be declared in JS.

Open the Results of Autocomplete in Fancybox

I have the following autocomplete searchbox code
$("#searchbox").autocomplete({
source: function(request,response) {
$.ajax({
type: "POST",
dataType: "json",
data: { term: request.term },
url: "/Settings/Find?searchString="+request.term,
success: function(data) {
response($.map(data,function(item) {
return { label: item.Name ,value: item.Type, ID: item.ID};
}
))
}
})
},
messages: {
noResults: "No Results",results: "Results"
},
select: function(e, ui) {
window.location.assign('/Item/Details/'+ui.item.ID);
}
},
});
When the user clicks on the autocompleted items, I redirect them to the detail page of the item using this
window.location.assign('/Item/Details/'+item.ID);
Now, I want to display the details of the item in a fancybox without redirect the user to another page. So when the user clicks on the autocompleted results, a fancybox opens up with the details of the selected item.
Here is the fancybox code That i would like to call.
$('.fancyboxdisplay').fancybox({
fitToView: false,
autoSize: false,
closeClick: false,
width: '550px',
height:'680px',
padding: 15,
closeBtn:true,
'afterClose': function() {
window.location.reload();
},
});
I looked everywhere for a possible solution but i can't figure it out. Can you please help !
Thanks
Within your select setting, try replacing window.location.assign by the fancybox script like :
select: function (e, ui) {
// window.location.assign('/Item/Details/' + ui.item.ID);
$.fancybox({
href: '/Item/Details/' + ui.item.ID,
type: "iframe",
fitToView: false,
autoSize: false,
closeClick: false,
width: 550,
height: 680,
padding: 15,
closeBtn: true,
afterClose: function () {
window.location.reload();
}
});
}
It's assumed you have previously loaded fancybox js and css files

Dynatree is stuck loading the icon

I use dynatree to display a list of documents. When I load the template, the dynatree was stuck in the loading icon. What could be wrong?
$("#tree").dynatree({
checkbox: true,
selectMode: 2,
initAjax: {
url: "/getTree/",
dataType: "json",
data: {}
},
onSelect: function(node) {
},
onActivate: function (node) {
},
persist: true,
noLink: false,
fx: { height: "toggle", duration: 200 },
onPostInit: function (isReloading, isError) {
if (getStringOfSelectedTreeNodes() != '') {
}
}
}); });
</script>
Did you have an example maybe on CodePen to check what the issue is. It seems the last }); end braces was not needed, was this because it was within a jQuery $(document).ready(); method. Otherwise this would be the correct code: Some good examples on the dynatree example page which I'm sure you've seen.
$("#tree").dynatree({
checkbox: true,
selectMode: 2,
initAjax: {
url: "/getTree/",
dataType: "json",
data: {}
},
onSelect: function(node) {
},
onActivate: function (node) {
},
persist: true,
noLink: false,
fx: { height: "toggle", duration: 200 },
onPostInit: function (isReloading, isError) {
if (getStringOfSelectedTreeNodes() != '') {
}
}
});

iframe calls Action method twice while setting src attributes

I am calling action method from controller side through iframe.src attributes and it returns partial view but it calls twice what is the reason can any body help me on this
find my code here
$('#testdailog').dialog({
autoOpen: false,
title: 'Split Fax',
height: 'auto',
width: '80%',
position: ['top', 50],
draggable: false,
show: 'blind',
hide: 'blind',
modal: true,
open: function (event, ui) {
var frameSet = document.getElementById("testdailogFrame");
frameSet.src='#Url.Action("TestPage", "Fax")';
},
close: function (event, ui) {
var frameSet = document.getElementById("testdailogFrame");
frameSet.src="about:blank";
});
solved this issue by changing the code of iframe content change instead of src attribute
$('#testdailog').dialog({
autoOpen: false,
title: 'Split Fax',
height: 'auto',
width: '80%',
position: ['top', 50],
draggable: false,
show: 'blind',
hide: 'blind',
modal: true,
open: function (event, ui) {
$.ajax({
url: '#Url.Action("TestPage","Fax")',
type: 'GET',
cache:false,
success: function(data){
var frameSet = document.getElementById("testdailogFrame");
var iframedoc = frameSet.document;
if (frameSet.contentDocument)
iframedoc = frameSet.contentDocument;
else if (frameSet.contentWindow)
iframedoc = frameSet.contentWindow.document;
if (iframedoc){
iframedoc.open();
iframedoc.writeln(data);
iframedoc.close();
}
},
error: function () {
window.location.href = '#Url.Action("Index","Error")';
}
});
},
}
});

Categories