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>
Related
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.
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 am a completely new to mvc and trying to create a dummy application to learn mvc 3.
I have worked my way through the music store example and now I am trying to extend it slightly into a more real world application.
With the example whenever you want to any new item you are redirected to the Create view which is fine however I want instead of doing a full page post back I want to use the jquery.dialog to open a modal popup which will allow the user to insert a new item.
so far I have
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: "hi there",
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});}); </script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
#Html.Partial("_CreateAlbumPartial")</div>
Problems with this is the partial view is loaded everytime not through ajax and I dont really know where I should be placing the partial view. Shoukld it be in the shared location or in the folder with the other views?
How do I update the controller class to cater for the partial view?
Sorry if these are easy to do, im 3 days into mvc :)
Try something like this:
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
open: function(event, ui) {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$(this).load("#Url.Action("CreateAlbumPartial")");
},
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
$('#dialog').dialog('open');
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
We used the open function which is triggered when the dialog is opened and inside we send an AJAX request to a controller action which would return the partial:
public ActionResult CreateAlbumPartial()
{
return View("_CreateAlbumPartial");
}
To improve Darin answer, we can move the div loading code in the button click event.
In this way all position's alghorithms of the dialog works on the new text, and so the dialog is placed correctly.
<script type="text/javascript">
$(function () {
$('#dialog').dialog({
autoOpen: false,
width: 400,
resizable: false,
title: 'hi there',
modal: true,
buttons: {
"Close": function () {
$(this).dialog("close");
}
}
});
$('#my-button').click(function () {
//Load the CreateAlbumPartial action which will return
// the partial view _CreateAlbumPartial
$('#dialog').load("#Url.Action("CreateAlbumPartial")",
function (response, status, xhr) {
$('#dialog').dialog('open');
});
});
});
</script>
<div id="dialog" title="Create Album" style="overflow: hidden;">
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.