So I have this jQuery ui dialog that loading in a html file. But it takes a few seconds to load in the information, so I was curious how using jquery dialog can I add a loading div until the content finishes loading.
<div class="loadingIt"></div>
$('<div />').load('http://PathToURL', { something : el }, function() {
more logic
}).dialog({
modal: true,
width: 800,
draggable: false,
resizable: false,
title: "Results",
position: {
my: 'top',
at: 'top',
of: '#nav_wrapper',
},
You could also do something more elaborate like:
jQuery.ajaxSetup({
beforeSend: function() {
$('#loadingIt').show();
},
complete: function(){
$('#loadingIt').hide();
}
});
You can then put some loading spinner gif in your loadingIt div. Note that this solution would show the loading div for every ajax call you will make.
before the ajax call set the innerHTML of the div to an img with loading-gif of your choice. Then replace the innerHTML with response data on ajax.success() callback.
Related
I have a site here...
When you arrive at the site...
autoOpen: true, is working, but it's not loading the ajax request (jquery-ajax.html).
But, if you click the button at the top-left, that says "Compliance & Ethics", then the ajax request goes through and opens the dialog.
What am I doing wrong, that it doesn't autoOpen properly?
$(function() {
$("#dialog").dialog({
autoOpen: true,
modal: true,
width: 750,
height: 'auto',
show: 'fade',
hide: 'fade',
position: {my: "center top", at:"center top", of: window },
buttons: {
"Dismiss": function() {
$(this).dialog("close");
}
}
});
Here's what calls the ajax request on click...
<script type="text/javascript">
jQuery('#dialog').load('jquery-ajax.html').dialog('open');
</script>
I went over your pages sourcecode and perhaps the reason is, that your function call happens before the div-box is created in the DOM. Also, you wouldn’t need to set the dialog autoOpen since you call dialog('open') by hand.
Try this:
<script type="text/javascript">
$(document).ready( function() {
jQuery('#dialog').load('jquery-ajax.html').dialog();
});
</script>
Iam in parent view while clicking the button in the parent view I want to load content of another view in jquery ui dialog. I tried with the following code. but jquery ui dialog initially show the content of the another view, then it doesn't show the content of the another view.
<button id="btn_newtrade" name="btn_newtrade" class="newtrade">New Trade</button>
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen:false,
width: 1400,
height:600,
resizable: false,
title: 'New Trades',
modal: true,
open: function(event, ui) {
$(this).load('#Url.Action("NewTrade","Trade")');
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
});
$('.newtrade').click(function () {
$('#dialog').dialog('open');
});
</script>
<div id="dialog" style="display:none;"></div>
You could try something like this
$('.newtrade').click(function () {
$('#dialog').load('#Url.Action("NewTrade","Trade")').dialog('open');
});
and remove the open event handler.
I have a column in JQGRID with two controls (textbox & button) on click of button I should show a dialog box with partial view content. Here is the code I'm using:
function RenderModalPopup(rowid, event) {
debugger;
$("#dvedit_showDialog").dialog({
modal: true,
autoOpen: false,
width: 500,
height: 800
});
$.ajax({
url: '/Edit/GetPopupPartial',
type: 'POST',
success: function () {
debugger;
//$('#dvedit_showDialog').html(Data);
$('#dvedit_showDialog').load("#Url.Action('GetPopupPartial','Edit')").dialog('open');
}
});
}
My intention is I need to create a modal dialog which can be reused across the project. The partial view may vary. Please help. Thanks in advance.
first load the partial view then create modal dialog.
$.ajax({
url: '/Edit/GetPopupPartial',
type: 'POST',
success: function (data) {
debugger;
$('#dvedit_showDialog')
.html(data)
.dialog({
modal: true,
autoOpen: true,
width: 500,
height: 800
});
}
});
Okay... I am still fairly new to using jquery and javascripting. I have successfully implemented the Jquery FullCalendar on my site and linked it to GCal events.
Is there any way I can have the events, when clicked, to popup in a Modal Window? ie. just like how the embedded calendar that google provides.
My code:
$(document).ready(function () {
$('#calendar').fullCalendar({
theme: true,
header: {
left: 'prev,next today',
center: 'title',
right: 'month,agendaWeek,agendaDay'
},
editable: true,
events: $.fullCalendar.gcalFeed(
"http://www.google.com/calendar/myxlmfeed"
),
eventClick: function (event) {
if (event.url) {
window.open(event.url);
return false;
}
}
});
});
The code I provided has an eventClick but it opens a new window, anyway I can code that so it opens a simple modal popup?
Any help on this would be so appreciated!
Jay
use nyromodal, a popular jQuery plugin, and modify your code appropriately:
<script type='text/javascript'>
$(document).ready(function () {
$('#calendar').fullCalendar({
editable: true,
events: "some json URL",
eventClick: function (event) {
$.nyroModalManual({
url: event.url
});
return false;
}
});
});
How will you display a JQGrid within a dialog?
in html page place table tag which will be used to construct grid inside dialog div like
<div id="dialog-div">
<table id="JqGrid">
</table>
<div id="pager" style="text-align: center; </div>
</div>
then in js first set dialog settings like
$("#dialog-div").dialog({
width: 'auto',
resizable: false,
height: '395',
autoOpen: false,
open: function (event, ui) {
ConstructJqGrid();
},
});
function ConstructJqGrid(){
jQuery("#JqGrid").jqGrid({
...
colModel: [
...
{name:'price', ..., editable:true, edittype:'custom', editoptions:{custom_element: myelem, custom_value:myvalue} },
...
]
...
})
}
This is how I did it, with AJAX to get the page containing my jqGrid :
$.ajax({
[...],
success: function( data ){
var popup = document.createElement( "div" );
// Appending
$( popup ).append( data );
$( "body" ).append( popup );
// Dialoging
$( popup ).dialog({
[...]
});
}
});
PS : I don't know the rules about necroposting but since the answer was never given, I chose to answer it.
If you are using the jquery-ui dialog use this page,the first example will show you how to create a dialog with #dialog. Then this page will have a have a basic JQGrid example which you will embed into your #dialog. If you are using a different type of a dialog, the process should be similar.