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
});
}
});
Related
I'm struggling to get a button click to invoke an Ajax function which then posts to a controller action. Cannot even get a simple message to work (nothing happens when button is clicked). Clearly, I'm missing something fundamental. What is it?
The Ajax script in my Razor form:
<script type="text/javascript">
$('#UseShipAddr').click(function () {
$.ajax({
url: "#(Url.Action("UseShippingAddress", "Checkout"))",
type: "POST",
data: { id: 50 },
cache: false,
async: true,
success: function (data) {
alert(data);
}
});
});
</script>
The button that I want to use to invoke the Ajax function:
<input type="button" value="Use Shipping Address" id="UseShipAddr" />
The action in CheckoutController:
// Ajax POST: /Checkout/UseShippingAddress/5
[HttpPost]
public ActionResult UseShippingAddress(int id)
{
return Content("It worked!");
}
Please try this code.
$(document).ready(function(){
$('#UseShipAddr').click(function () {
$.ajax({
url: "Checkout/UseShippingAddress",
type: "POST",
data: { id: 50 },
cache: false,
async: true,
success: function (data) {
alert(data);
}
});
});
I use free jqgrid 4.8.
I use the jqgrid inside a modal dialog.
When I try to use the delete button of the pager, all the dialogs are disabled.
http://jsfiddle.net/9ezy09ep
$(function ()
{
$("#Ecran").dialog(
{
dialogClass: 'Ecran',
autoOpen: false,
width: 500,
height:400,
modal: true,
open: function (event, ui) {
$("#jqGrid").jqGrid({
url: 'http://trirand.com/blog/phpjqgrid/examples/jsonp/getjsonp.php?callback=?&qwery=longorders',
mtype: "GET",
datatype: "jsonp",
colModel: [
{ label: 'OrderID', name: 'OrderID', key: true, width: 75 },
{ label: 'Customer ID', name: 'CustomerID', width: 150 },
{ label: 'Order Date', name: 'OrderDate', width: 150 },
{ label: 'Freight', name: 'Freight', width: 150 },
{ label:'Ship Name', name: 'ShipName', width: 150 }
],
viewrecords: true,
width: 480,
height: 250,
rowNum: 20,
pager: "#jqGridPager"
});
jQuery("#jqGrid").jqGrid('navGrid', '#jqGridPager', {
del: true, add: false, edit: false,
beforeRefresh: function () {},
afterRefresh: function () {}},
{}, // default settings for edit
{}, // default settings for add
{}, // delete
{}, // search options
{}
);
},
close:function () {}
});
});
Any ideas ? thanks
I think that the origin of the problem by using jqModal inside of jQuery UI dialog. jqGrid is jQuery plugin. So it don't use only CSS from jQuery UI. It don't use jQuery UI Dialogs.
I recommend you to include the line
$.fn.jqm = false;
to switch off jqModal module and to use jQuery UI functionality. See http://jsfiddle.net/9ezy09ep/7/. I will examine the problem more detailed later to improve the code of free jqGrid for the described test case.
UPDATED: I made some additional modifications in free jqGrid, which allows alternative solution. One can now use the code like
$.jgrid.jqModal = $.jgrid.jqModal || {};
$.extend(true, $.jgrid.jqModal, {toTop: true});
to change the behavior of jqModal module. The next demo shows the results http://jsfiddle.net/OlegKi/9ezy09ep/9/
jqGrid should utilize ui-dialog class when it creates modal dialog.
you will have to modify jquery.jqGrid.min.js file.
As per version 5.0.0 ,
Just add ui-dialog class to follwing line,
modal: { modal: "ui-widget ui-widget-content ui-corner-all ",
e.g.
modal: { modal: "ui-widget ui-widget-content ui-corner-all ui-dialog",
As per free jqGrid version,
Add ui-dialog class to following line,
dialog: {
...
window: "ui-widget ui-widget-content ui-corner-all ui-front",
...
e.g.
dialog: {
...
window: "ui-widget ui-widget-content ui-corner-all ui-front ui-dialog",
...
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.
when i click the New Trade button in the form it opens jquery ui dialog. but, i have link button in the gridview when i click the link button it should open jquery ui dialog, it opens jquery ui dialog before clicking the new trade button. but, after clicking the new trade button, if i click link button in the gridview it invoke "ViewTradeDialog(id)" function, the dialog doesn't open, it shows error message "$vwdia.html(data).dialog is not a function". my code follows:
#using (Html.BeginForm("NewTrade", "Trade", FormMethod.Post, new { id = "searchForm" }))
{
<div id="searchbtn">
<input id="btn_newtrade" type="submit" value="New Trade" />
</div>
}
jquery code
<script type="text/javascript">
$(function () {
var $loading = $('<img src="../../loading.gif" alt="loading">');
var $dialog = $('<div></div>').append($loading);
$('#searchForm').submit(function (e) {
var url = this.action;
$.ajax({
autoOpen: false,
url: url,
success: function (data) {
$dialog.html(data).dialog({
zIndex:1,
width: 1400,
height: 600,
resizable: false,
title: 'New Trade Details',
modal: true,
buttons: {
"close": function () {
$dialog.dialog('close');
},
"Add Trade": function () {
$dialog.dialog('close');
$.ajax({
type: 'POST',
url: url
});
}
}
});
}
});
return false;
});
});
function ViewTradeDialog(id) {
alert(id);
var $vwdia = $('<div></div>');
var url = '/Trade/ViewTrades?tradeid=' + id;
$.ajax({
url: url,
success: function (data) {
$vwdia.html(data).dialog({
width: 600,
height: 600,
resizable: false,
title: 'View Trade Details',
modal: false,
buttons: {
"close": function () {
$vwdia.dialog('close');
}
}
});
}
});
return false;
}
You are probably overwriting the dialog plugin each time you click new trade, since it is applied to the same element:
$dialog.html(data).dialog(...
It is possible that by replacing the html of the dialog and reapplying the plugin that it is breaking. Are you seeing any other errors in the JS console?
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;
}
});
});