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.
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>
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.
At this moment i am using the code bellow to bring up a dialog box to edit mysql records but my issue is the button im using to bring up the dialog box is going thru a while loop to allow me to edit any record but whats happening is that the top button will bring up the dialog box but the 2nd 3rd and so on i have worked out why this is happening, it is because they all have the same "id" but my question is that is there any way to bring up the dialog box when ever i click on any of the buttons without writing 100's of dialog boxs in..
$( "#edit" ).dialog({
autoOpen: false,
draggable: false,
modal: true,
width: "322",
buttons: {
"Add to Log": function() {
$( this ).dialog( "close" );
},
Exit: function() {
$( this ).dialog( "close" );
}
}
});
$( "#editi" ).click(function() {
$( "#edit" ).dialog( "open" );
return false;
});
</script>
<button id="editi">Edit</button> // normally goes thru a while loop and is reapeted 5 or 6 times but only the frist one genrated works
<div class="edit" id="edit" title="Edit Entry" style="font-size:15px">
<p>hello</p>
$("#edit").dialog({
autoOpen: false,
draggable: false,
modal: true,
width: "322",
buttons: {
"Add to Log": function() {
$( this ).dialog( "close" );
},
Exit: function() {
$( this ).dialog( "close" );
}
}
});
/*this is the area that is looped*/
$(".editi").click(function() {
$( "#edit" ).dialog( "open" );
return false;
});
</script>
<button class="editi">Edit</button>
<div class="edit" id="edit" title="Edit Entry" style="font-size:15px">
<p>hello</p>
Are you repeating the same id (editi) several times? You may want to create a class like buttonClass and hook up the button this way:
$( ".buttonClass" ).click(function() {
$( "#edit" ).dialog( "open" );
return false;
});
keep the class as editi rather keeping it as a id and for that do:
$('.editi').click(function(){
//do what you want to do
})
I am loading a partial view in a popup using the following code
$(document).ready(function () {
//define config object
var dialogOpts = {
title: "Mypopup",
modal: true,
autoOpen: false,
height: 300,
width: 700,
open: function () {
//display correct dialog content
$("#Mydiv").load("MyAction");
}
};
$("#Mydiv").dialog(dialogOpts); //end dialog
$("#MyButton").click(
function () {
$("#Mydiv").dialog("open");
return false;
}
);
});
the action MyAction loads a partial view say "Myview" successfully, "Myview" contains a close button and on the click of this button I want to close the popup, How can I do this? I tried following code but this does not work.
$('#Close').click(
function () {
$(this).parent("close");
return false;
});
Can you please help?
Here is my html for the partial view.
#Code
Using (Html.BeginForm())
#<div id="master">
<img alt ="" src ="../../Images/Question.gif" height ="50" width ="50" />#Html.DisplayFor(Function(model) model.ConfirmationMessage) #Html.HiddenFor(Function(model) model.Key )<br /><br />
<div><input id="Yes" type="submit" class ="btn" name="button" value="Yes" /><input id="No" type="submit" class ="btn" name="button" value="No" /></div>
</div>
End Using
End Code
<script type="text/javascript">
$("#No").live("click", function(){ $("#MyDiv").dialog("close"); }); </script>
You could try:
$("#MyDiv").dialog("close")
or add the close buttons in the initialization of it
$( "#MyDiv" ).dialog({
resizable: false,
height:140,
modal: true,
buttons: {
"Close": function() {
$( this ).dialog( "close" );
}
}
});
I think i see it now. That button is loaded dynamically so
$("#MyButton").live("click", function(){ $("#MyDiv").dialog("close"); });
It will work we need to refer the following jQuery,jquery-ui.js and jquery-ui.css.
$(function () {
$("#dialog").dialog({
modal: true,
autoOpen: false,
title: "jQuery Dialog",
width: 500,
height: 250
});
$("#btnShow").click(function () {
$('#dialog').dialog('open');
});
});
function Close() {
$('#dialog').dialog('close');
};
</script>
for more details http://www.infinetsoft.com/Post/How-to-open-and-close-a-popup-in-asp-net-mvc-using-Jquery/99#.V0LlETV97cs