Jquery Load particular Div - javascript

I am using jQuery UI Modal. I have created common function to create modal dialog.
Below is the code
function createDialogWithClose(sourceDivId, url, targetDivId)
{
var dialog = jQuery(sourceDivId).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
close:function(event,ui){
jQuery(targetDivId).load(url + " " +targetDivId);
}
});
}
Now inside the dialog, I am perfoming some operation which need to reflect in the parent page.
So on close I have written to load that div. which on request set parameter in init() method and on loading it displays new result.
But problem is div get inside the div
Any other way to obtain above steps?

A good way to use $.ajax request
function createDialogWithClose(sourceDivId, url, targetDivId)
{
var dialog = jQuery(sourceDivId).dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
close:function(event,ui){
$.ajax({
url: url,
type: "POST",
data: "",
cache: true,
success: function(response){
$("#targetDivId").html(response);
}
});
}
});
}

Related

Why does my jquery modal stop working after full page ajax load?

Ive discovered that I have an issue with the jQuery dialog (using jquery 1.3 , pretty old but I cannot update it).
When I do
var request = $.ajax({
url: "${Request.context}/info/" + userId,
success: function(response) {
$("#userInfo").html(response);
}
});
$("#divUserInfo").dialog('open');
}
where
$('#divUserInfo').dialog({
width: 700,
height: 250,
autoOpen: false,
modal: true,
title: "User Info",
resizable: false
});
The dialog itself works fine, opens everytime when it has no content or when I do $("#userInfo").html("any string possible");
But when I load the entire page of the ajax response, I see no error on my console but I cannot re-open the dialog. Is there any way I can avoid that happening? should I reload the DOM or something similar? or extract the body of the response?
You need to re-initialize dialog plugin after replacing DOM with ajax response, so that it works for updated DOM elements as well
Try this:
var request = $.ajax({
url: "${Request.context}/info/" + userId,
success: function(response) {
$("#userInfo").html(response);
$('#divUserInfo').dialog({
width: 700,
height: 250,
autoOpen: false,
modal: true,
title: "User Info",
resizable: false
});
}
});

jquery dialog add button after ajax call

I have a dialog window that has some confirmation stuff in it as the result of a form submit:
$('#newUserDialog').dialog({
autoOpen: false,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
alert(result);
$('#newUserDialog').html('User has been built');
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
when the user clicks complete, it fires off the ajax call and does checkdata.php stuff. when that is complete I want to remove "Complete" and "Cancel" and add a button "Continue". The continue button will reload the page. how can i accomplish this?
currently in this code, it works as desired but if the user doesn't like what he sees in confirmation window before he clicks Complete, if he clicks cancel, it reloads page. I only want to reload page after the ajax call.
You can use following for adding new button in ajax callback;
var buttonSet = $('#newUserDialog').parent().find('.ui-dialog-buttonset');
var newButton = $('<button>Continue</button>');
newButton.button().click(function () {
window.location.reload(true);
});
buttonSet.html(newButton);
You can see demo here: jsfiddle
<script>
var myModalExample;
$(function() {
myModalExample = $( "#newUserDialog" ).dialog({
autoOpen: true,
width: 600,
modal: true,
resizable: false,
close: function() {
window.location.reload(true);
},
buttons: {
"Complete": function() {
$.ajax({
type: "POST",
url: "checkData.php",
data: formData+"&complete=1",
success: function(result){
myModalExample.dialog({ buttons: [ { text: "Continue", click: function() { $( this ).dialog( "close" ); } } ] });
}
});
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
</script>

Popup window opens once after close unless refresh

I have a problem that I'm stuck with. I have MVC 3 application and in this application I have the concepts of Survey and Training. Each Training having 1 Survey. To let the users take Survey I open a pop-up page when the HTML actionlink clicked. Below is the code for this in DetailsSurvey.cshtml:
<tr> <td class="view_detail_label">
Eğitim Adı
</td>
<td>
#Html.ActionLink(
training.Name.Name,
"AddSurvey",
new {
employeeId = Model.Id,
trainingId = training.Id
},
new {
#class = "addSurvey"
}
)
<div class="result" style="display:none;"></div>
</td>
</tr>
Then in javascript side I have following functions to open popup:
$(document).ready(function () {
$('.addSurvey').click(function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
} //enf of success function
}); //end of ajax call
return false;
});
});
$(document).delegate('.addSurvey', 'click', function () {
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: false,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
} //enf of success function
}); //end of ajax call
});
There can be 1 or more Survey links. What happens is when I click the button, pop up windows opens for the first time but when I close the popup window and try to reopen it, it does not open at all. If i open it in new tab or window it opens respectively. I used delegate subscribe the event but it does not work. Is this caused by the action taken by close button, it somehow loses the functionality after closing. Are there are any fixes?
<tr> <td class="view_detail_label">
Eğitim Adı
</td>
<td>
#Html.ActionLink(
training.Name.Name,
"AddSurvey",
new {
employeeId = Model.Id,
trainingId = training.Id
},
new {
#class = "addSurvey"
#onclick="javascript:OpenSurveyPopup();"
}
)
<div class="result" style="display:none;"></div>
</td>
</tr>
<script type="text/javascript">
function OpenSurveyPopup()
{
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true
}); //end of dialog
} //enf of success function
}); //end of ajax call
return false;
});
}
</script>
Also remove $(document).ready() and $(document).delegate().
This will work. Thanks.
I solved problem using the following live function, what i did is: In close action of popup I called my controller and re render the page now it works like a charm.
$('a.addSurvey').live('click', function (e) {
var $this = $(this);
e.preventDefault();
$.ajax({
url: this.href,
type: 'GET',
cache: false,
context: this,
success: function (result) {
$(this).next('.result').html(result).dialog({
autoOpen: true,
title: 'Anket',
width: 500,
height: 'auto',
modal: true,
close: function () { console.log("onClose"); $('.surveyTable').load('Home/DetailsSurvey', {id:#Model.Id}); }
}); //end of dialog
console.log($(this).next('.result'));
}, //enf of success function
complete: function () {
console.log("Complete");
},
error: function () {
console.log("Error");
}
}); //end of ajax call
}); //end of live

Open ajax jstree results in popup window

Ok, so I spent a lot of time getting jstree to open in a dialog box upon a successful ajax call. Now they want a popup window instead. Seems like it should be easy, but my window gives a 404 error. I'm using Grails, btw. Here's the current code (re-typing, so forgive any syntax errors):
$.ajax({
type: 'POST',
url: 'resultsView/viewAsdf'
traditional: true,
data: {
documentID: contentID
},
success: function (data) {
var data1 = {'data':data}
var $genericDialog = $("#genericDialog");
$genericDialog.jstree({
"html_data": data1
[snip]
}),
$genericDialog.dialog({
title: "ASDF"
modal: true,
height: 700,
width: 450,
buttons: {
"OK": function() {$genericDialog.dialog("close");}
}
});
}
});
So now my question is how do I substitute a window for what's currently the dialog box? What would the url of the window be, since I've already called the url in the ajax method?

JQuery UI Multiple Dialog Issue

I have functionality where I dynamically create Dialog. Some time I require Modal or Confirm Dialog
So I created to Function
function createDialogWithOutClose()
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
height: 450,
width: 650,
modal: true,
open: function(event, ui){
jQuery('body').css('overflow','hidden');
}
});
jQuery('#divPopup').dialog('open');
}
and
function createConfirmDialog(url,params)
{
jQuery('#divPopup').dialog('destroy');
var dialog = jQuery('#divPopup').dialog({
autoOpen: false,
resizable: false,
modal: true,
show: "blind",
hide: "explode",
open: function(event, ui){
jQuery('body').css('overflow','hidden');
},
buttons: {
Ok: function() {
jQuery( this ).dialog( "close" );
jQuery.ajax({
type: "POST",
url: url,
data: params
});
},
Cancel: function() {
jQuery( this ).dialog( "close" );
}
}
});
jQuery('#divPopup').dialog('open');
}
Problem here is when I give call to this function, It opens previously opened Dialog.
I guess previous instance is not get removed.It doesnt dynamically create Dialog
Any solution??
Have a look at http://docs.jquery.com/UI/Dialog/dialog#method-destroy
jquery: How to completely remove a dialog on close
http://groups.google.com/group/jquery-ui/browse_thread/thread/4f9804ccb01c1bc8/5b1971d1f0abf1fa?pli=1
Simply use a flag to check dialog state (close/open)
var Open = false;
$('button').click(function () {
if (!Open) {
Open = true;
$(newDiv).dialog({
close: function (event, ui) {
Open = false;
}
});
} else {
alert("Close opened dialog first");
}
});

Categories