I am creating a website and have a jqGrid on my page. I am using the advanced search feature by adding a custom button to my navgrid (pager) that calls the jqGrid 'searchGrid' function.
$('#My_Grid_Id').jqGrid(settingsObject)
.navGrid('My_Grid_Id_toolbar1',{del:false,add:false,edit:false,refresh:false,search:false})
.navButtonAdd('My_Grid_Id_toolbar1',
{
caption: 'Search',
buttonicon: 'ui-icon-search',
title: 'Search',
onClickButton: function() {
$(gridSelector).jqGrid ('searchGrid', {
caption: 'Search',
multipleSearch:true,
overlay: false,
multipleGroup:true,
recreateFilter: true
});
}
});
I would like to be able to save the search settings when the user leaves the page so I can reload them when the user returns. I almost have a working solution, but after I have saved and reloaded the search settings, the 'Reset' button on the search dialog window does not work as expected. The search setting do seem to be reset in the background but the window does not refresh and the grid still shows the old results.
To explain a bit more. I catch the window unload event and store the search settings by sending the potdata.filters parameter to the server with an ajax call. I then store the data in a cookie which I can load later.
$(window).unload( function () {
$.ajax({
type: "POST",
url: saveUrl,
dataType: 'json',
traditional: true,
async: false,
data: {
searchSettings: $('#My_Grid_Id').getGridParam('postData').filters
}
});
});
When I reload the grid I check if my cookie has a value then insert the saved filters back into the grid in the constructor.
postData: {
filters: mySavedSearchSettings
},
At this point the grid works well, the search has been saved and the results show as expected. When I open the search window dialog the search options appear as expected. But when I click the 'Reset' button the window does not update properly and neither do the grid results. I have attempted to add an onclick event to the reset button to manually reset the search but nothing seems to happen.
afterShowSearch: function() {
$('.fm-button-icon-left').click(function(){
$('#My_Grid_Id').jqGrid('setGridParam', { search: false, postData: { "filters": ""} }).trigger("reloadGrid");
});
}
Can anyone offer any help? I think I am close, I just need to reset the search window somehow then reload the grid.
The answer turned out to be two things.
Firstly, the grid was not reloading the correct data as I did not correctly handle the server side code. I have recently started using php and I had a bug where the code did not correctly identify that the filter post data was null/empty.
Secondly, I was able to reset the search window dialog by calling the 'searchGrid' function to open it again. So after the search is shown I add an on click event to the reset button as follows:-
$(gridSelector).navButtonAdd(gridSelector + '_toolbar1',
{
caption: 'Search',
buttonicon: 'ui-icon-search',
title: 'Search',
onClickButton: function() { OpenAdvancedSearchDialog(gridSelector); }
});
}
function OpenAdvancedSearchDialog(gridSelector) {
$(gridSelector).jqGrid ('searchGrid', {
caption: 'Search',
multipleSearch:true,
overlay: false,
multipleGroup:true,
recreateFilter: true,
afterShowSearch: function() {
$('.fm-button-icon-left').click(function(){
OpenAdvancedSearchDialog(gridSelector);
});
}
});
}
Related
I have this problem with my JQuery UI Modal window. Its used when i click a button, then it opens up and append contents to it trough an Ajax call to a php file. Works perfectly the first time i open it, but then when i click another button that should show different content, it still shows the old content in it, and i have to refresh the page for it to work.
This is my Dialog open event which is triggered by a switch, and the last part which appends data to my select box on creation.
$( "#attack" ).dialog({
resizable: false,
width:"400px",
buttons: {
Attack: function() {
$(this).dialog("close");
},
Cancel: function() {
$(this).dialog("close");
}
}
});
$("#users").selectmenu({
create: function( event, ui ) {
$.ajax({
type: "POST",
url: "mapfunctions/FetchUsers.php",
data: {RegionID: RegionID},
success: function(data) {
$("#users").append(data);
}
});
}
});
The dialog looks like this: http://i.imgur.com/02a2GYB.png
The HTML for it is a bit long, so i hope you dont need that dialog code, if so, let me know and i will add.
Its the Select menu which keeps the old data from the first ajax call.
I tried using Destroy and such on close, but then the dialog would simply never open again heh.
Thanks a lot people, hope this is enough for a clear understanding
This is very common problem with ajax and modal windows.. on clicking next button you have to reset the form and load it new.
for eg:
If you are using form with id "myForm" then on clicking another button reset the form like $("#myForm").trigger('reset'); in jQuery. or any other way
I am having an issue with popup blockers. I want to open a window for my users only after I receive some data from server, in other words I need it on success.
Issue is that popup blocker will stop the window in the success section as it thinks that script is currently executing. I am using jQuery 1.7.1.min and I have tried using (as you can see below)
async:false, but for some reason that doesn't work. The only workaround that I was able to do is to open a fake window and when the response comes back
overwrite the fake window. It works in Chrome but it gives problems in Firefox. Need some help.
function mypopup() {
$j.ajax({
type: 'POST',
url: "/my/phppage",
data: mydata,
async: false,
success: function (response) {
window.open(response, 'Dialogue Message', 'width=650,height=550,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes');
}
});
window.open("openfakewindow", 'Dialogue Message', 'width=650,height=550,left=50,top=50,location=no,status=yes,scrollbars=yes,resizable=yes');
}
The issue is Firefox only allows popups if it is created from a user generated event, for example a click event.
You can get around this by opening a blank window before the Ajax call, keep a reference to it and then set the URL after the ajax call is complete.
Why don't you use a dialogue box that is essentially a element that you identify and then open?
$(document).ready(function () {
$("#divAccountDialog").dialog(
{
modal: true,
autoOpen: false,
width: 700,
buttons: { Cancel: function () { $(this).dialog("close"); } }
}
);
});
someotherfunction () {
$('#divAccountDialog').dialog('open');
How can I disable form submit using ajax? The user must click first the button in the ajax dialog before the form will be submitted.
//on form submit
//I'm using input type submit and not button (as much as possible, I don't want to change that)
$.ajax({
type: "POST",
url: "<?=url::base(TRUE)?>prompt",
data: $('#formname').serialize(),
async: false,
success: function(response){
$("#dialogpromt").html(response);
$("#dialogpromt").dialog({
autoOpen: true,
height: 'auto',
width: '100',
resizable: 'false',
dialogClass: 'dFixed'
});
//onlcick event would change a hidden field to '1'
//works fine
},
});
//Is there a way I can ensure that the dialog above is closed first before the below lines will execute?
if(document.getElementById('submitInd').value == "0")
return false;
else
return true;
Thanks in advance!
$("Your Submit button Id").click(function (event) {
event.preventDefault(); // this will be used to stop the reloading the page
$.ajax({
type: "POST",
url: "<?=url::base(TRUE)?>prompt",
data: $('#formname').serialize(),
async: false,
beforeSend: function () { /// use beforeSend to open a dialog box
$("#dialogpromt").dialog({
autoOpen: true,
height: 'auto',
width: '100',
resizable: 'false',
dialogClass: 'dFixed'
});
},
success: function (response) {
$("#dialogpromt").html(response);
//tried the if else here, no luck.
//the dialog will just load but the form will still continue to submit
}
});
});
There are a few ways to make buttons not submit. The way I learned when I started using forms was to use spans instead of buttons.
A better, simpler way, because it allows you to keep your button structure, is to simply write
<button type='button'>....</button>
I'm not sure exactly what it does, but including the type='button, as opposed to the type='submit' which is default in forms, suppresses the default form submit action.
There are other ways to change this using javascript, such as manually suppressing the default action, not even using a form in the first place and instead wrapping the items in a div with the class 'form', and a ton of other versatile ways that fit your needs.
I am trying to disable close on click when clicking the overlay behind the edit form Modal that opens when I edit a row, but I dont know how I have to do it. I were trying something like:
editOptions: {
url: 'foo/edit.html',
mtype: 'PUT',
//some other options
closeAfterEdit: true,
reloadAfterSubmit: true,
onClose: function() {
alert('Hi ^_^');
}
}
But this only triggers if I click at 'X' button. If I click at overlay (out of modal) it closes the modal and that alert never triggers. What I want is to disable that closing function when I click out of modal or remove that overlay.
Thanks.
It's interesting problem. onClose callback will be not called if one clicks on the overlay (if one clicks out of the modal dialog) and the dialog will be closed.
It's funny, but jqModal.js already has the option which would be perfect to implement your requiremens. It's closeoverlay option of $.fn.jqm (see the line). The problem is that jqGrid don't have any public property which allows to set the option. If you just modify jquery.jqGrid.src.js the closeoverlay : true to closeoverlay : false (it corresponds changing closeoverlay:!0 to closeoverlay:!1 in jquery.jqGrid.min.js) then you will have the behavior which you need.
The problem is that I don't see any simple way to realize your requirements without modification of the code jqGrid.
UPDATED: I analysed the code of jqModal.js module one more time and I'v found simple way without changing the source code of jqGrid. The analyse is difficult because the module exist only in minimized form. So it's difficult to read the code.
The solution: you should include the following line which changes defaults of jqModal.js module:
$.jqm.params.closeoverlay = false;
Description: the lines of jqModal.js module initialize $.jqm as
$.jqm = {
hash: {},
open: function (s,t) { ... },
close: function (s) { ... },
params: {}
};
So everywhere after you includes jquery.jqGrid.min.js you have $.jqm.params as empty object. It can be used to provide default values of parameters of jqModal.js (which are not directly specified in the list of parameters of $.jqm). So you can include $.jqm.params.closeoverlay = false; somewhere after jquery.jqGrid.min.js (or jquery.jqGrid.src.js) to deny closing of jqGrid dialog on clicking on the overlay.
jgGrid contains inline add button in toolbar and save action button in action column.
Remote json data is used.
If save action button is pressed to terminate inline add and server returns error,
added row is removed from grid and entered row data is lost.
I added restoreAfterError:false to formatoptions
and to inline add button as shown in code below but those settings are ignored if save action button is pressed.
How to keep row in inline add mode so that edit can continue after error if save action button is pressed?
colModel: [ {
name:"_actions",
formatter:"actions",
formatoptions:{
editbutton:true,
keys:true,
// this is ignored if action column save button is pressed:
restoreAfterError:false,
delbutton:true
}
} , ...
],
editurl: '/Grid/Edit',
datatype: "json",
inline add button is added using:
$grid.jqGrid('inlineNav', '#grid_toppager', {
addParams: {
position: "beforeSelected",
rowID: '_empty',
useDefValues: true,
addRowParams: {
keys: true,
// this is ignored if action column save button is pressed:
restoreAfterError: false,
}
},
editParams: {
keys: true,
// this is ignored if action column save button is pressed:
restoreAfterError: false,
},
add: true,
edit: false,
save: true,
cancel: true
});
I tested the settings restoreAfterError: false inside of addParams.addRowParams or editParams and it works good. In case of error the editing (or new added row) stay in the editing mode after the error message are displayed by my custom errorfunc. I suppose you had problems only in case of usage of formatter: 'actions'.
If you use the formatter: 'actions' you have no way to define restoreAfterError directly (at least in the current jqGrid version 3.4.1). So I recommend you to change the default value of restoreAfterError to false:
$.extend($.jgrid.inlineEdit, {
restoreAfterError: false
});
Additionally I recommend you remove trailing comma (like here restoreAfterError: false,}) from the addRowParams or editParams. Trailing commas are ignored by many (but not all) of web browsers, but there are still an error.