I need to hide the operator in the search popup, but I cannot get it to work.
I tried this, but both operators still appear:
jQuery("#grilla").navGrid("#paginador",
{del:false,add:false,edit:false},{},{},{},{
groupOps: [{ op: "OR", text: "any" }], multipleSearch:true});
Any ideas?
Thanks!
There are no option which can directly do what you need. Moreover if you would hide the ADD/OR operand from the searching dialog at the dialog initialization (for example inside of beforeShowSearch event handler) with $('select.opsel').hide() the select element will be hidden only at the beginning. After the user click on any button the dialog contain will be repaint without calling of any event handler and the select element will be again visible.
So I suggest to solve the problem with overwriting the method reDraw of the filter dialog. The code which do this can look like
jQuery("#grilla").jqGrid("navGrid","#paginador",
{del: false, add: false, edit: false}, {}, {}, {},
{
multipleSearch: true,
beforeShowSearch: function($form) {
var searchDialog = $form[0],
oldrReDraw = searchDialog.reDraw, // save the original reDraw method
doWhatWeNeed = function () {
// hide the AND/OR operation selection
$('select.opsel', searchDialog).hide();
setTimeout(function () {
// set fucus in the last input field
$('input[type="text"]:last', searchDialog).focus();
}, 50);
}
searchDialog.reDraw = function () {
oldrReDraw.call(searchDialog); // call the original reDraw method
doWhatWeNeed();
}
doWhatWeNeed();
}
}
);
You can see on the demo that the way really works.
UPDATED: After writing of the answer I posted some suggestions to trirand to improve jqGrid. Now jqGrid has many features which simplify the above work. For example there are exist afterRedraw callback which can be directly used. So the code from the answer will look like
grid.jqGrid("navGrid", "#pager",
{add: false, edit: false, del: false}, {}, {}, {},
{
multipleSearch: true,
afterRedraw: function (p) {
var $form = $(this);
$form.find("select.opsel").hide();
setTimeout(function () {
// set fucus in the last input field
$form.find('input[type="text"]:last').focus();
}, 50);
$form.find("input.add-rule,input.delete-rule").button();
}
}
);
See the modified demo here:
I added one more line in the code of afterRedraw
$form.find("input.add-rule,input.delete-rule").button();
only to improve the look of buttons in the Searching Dialog. I suggested to make such settings default in jqGrid, but this was not accepted by trirand. In any way everyone who includes jQuery UI can add such line in afterRedraw to make the buttons flat.
The accepted answer didn't work for me with 4.4.0.
Much simpler seems to be to hook the afterRedraw event and remove the opsel select element:
jQuery("#grilla")jqGrid(
"navGrid","#paginador", {del:false,add:false,edit:false},{},{},{},
{
multipleSearch:true,
afterRedraw: function($p) {
$("select.opsel").remove();
}
}
);
see here !
//own add edit del search
jQuery("#gridTable3").jqGrid('navGrid', '#gridPager3',
{
//options
},
{
// edit options
height: 250,
reloadAfterSubmit: false,
closeAfterEdit: true,
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
},
{
// add options
height: 250,
reloadAfterSubmit: false,
closeAfterAdd: true,
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
},
{
// del options
reloadAfterSubmit: false,
closeAfterDel: true,
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
},
{
// search options
multipleSearch: true,//more search write there,don't pop
afterSubmit: function(r, data) {
var messageString = r.responseText;
var mesObj = eval('(' + messageString + ')');
return [mesObj.state, mesObj.message];
}
});
Related
I am trying to overwrite few defaults value for databale js
Below code is working fine
$.extend($.fn.dataTable.defaults, {
"scrollCollapse": true
});
But i want to make it conditional basis like first checking id of datable
I tried below code
$.fn.dataTableExt.aoFeatures.push({
"fnInit": function (oSettings) {
console.log('d');
return new TableTools({
"oDTSettings": {
"scrollCollapse": true
}
});
},
"cFeature": "T",
"sFeature": "TableTools"
});
But not working, I also thought to give try below
$.fn.dataTable.ext.feature.push({
fnInit: function (settings) {
console.log(settings);
var setting = new $.fn.dataTable.Filtering(settings);
return filter.node(); // input element
},
cFeature: 'F'
});
But i found this is not being called.
Fiddle
Any help appreciated
Thanks
I have a search form that submits with ajaxForm, and I want to get the html inside of a specific div, and it tried:
$(function search() {
$("#socialSearchUsers").validate({ // initialize the plugin
// any other options,
onkeyup: false,
rules: {
query: {
required: true
}
}
});
$('form').ajaxForm({
beforeSend: function() {
return $("#socialSearchUsers").valid();
},
success : function(result) {
var page = $(result);
var statusText = page.find('#status').innerHTML;
console.log(statusText);
$("#results").html(statusText);
}
});
});
but that (in the console) tells me "undefined" (no quotes).
I'm new to JS and JQuery so if there's an easy way to do it I don't know.
.innerHTML is a POJS property, not jQuery.
Try :
var statusText = page.find('#status').html();
So I am using the multiselect widget from here: http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/ and it is working fine in this instance. When I use strictly the same dropdown styling (to appear consistent) with a normal (only choose 1 option) dropdown my problem is that the drop down says 1 Selected. I need to change this to show the selected option, so 'Red' from Red, Yellow, Blue. The code that determines the selected option text is as follows:
$.widget("ech.multiselect", {
// default options
options: {
header: true,
height: 175,
minWidth: 225,
classes: '',
checkAllText: 'Check all',
uncheckAllText: 'Uncheck all',
noneSelectedText: 'Select options',
selectedText: '# selected',
selectedList: 0,
show: null,
hide: null,
autoOpen: false,
multiple: true,
position: {},
appendTo: "body"
}
So, I need the selectedText to show the selected option if the dropdown has the class .normal. Any ideas? Thanks in advance.
You have to change some code in the jquery.multiselect.js file.
Replace the update function with this code:
// updates the button text. call refresh() to rebuild
update: function() {
var o = this.options;
var $inputs = this.inputs;
var $checked = $inputs.filter(':checked');
var numChecked = $checked.length;
var value;
if(numChecked === 0) {
value = o.noneSelectedText;
} else if( numChecked===1){
value = $checked.val();
} else {
if($.isFunction(o.selectedText)) {
value = o.selectedText.call(this, numChecked, $inputs.length, $checked.get());
} else if(/\d/.test(o.selectedList) && o.selectedList > 0 && numChecked <= o.selectedList) {
value = $checked.map(function() { return $(this).next().html(); }).get().join(', ');
} else {
value = o.selectedText.replace('#', numChecked).replace('#', $inputs.length);
}
}
this._setButtonValue(value);
return value;
},
I haven't tested this but tell if it works for you.
I have the same problem and im using javascript 1.7.2
The problem is the selectedText only taken into account for the first time loading and when i change the checkbox, slectedText of my button is not changing. Finally, i manage to fix the problem by modifying the jquery.multiselect.js like this :
In _create: function ()
Edit buttonlabel to:
buttonlabel = (this.buttonlabel = $(''))
.html(o.noneSelectedText)
.appendTo(button)
.attr("id", "buttonlabel_" + this.element.attr('id')),
In update: function ()
Change this.buttonlabel.html( value ) to $("#buttonlabel_" + this.element.attr("id")).text(value);
Hope this helps.
Cheers
I have the following code which is run at the end of a long table that has several button.enter-match elements:
$("button.enter-match")
.button()
.on('click', function() {
$("form.enter-match").dialog({
modal: true,
height: 'auto',
width: 200,
close: function() {
$("form.enter-match input[name='code']").val('');
},
open: function() {
$("form.enter-match input[name='code']").val('').focus();
},
buttons: {
Set: function() {
pid = $(this).parents("[data-pid]").data('pid');
if ($("form.enter-match input[name='code']").val() == '') {
alert('Code empty!');
return false;
}
$.post(
request_url,
{
'action': 'set_match',
'pid': pid,
'code': $("form.enter-match input[name='code']").val()
},
function (data) {
error_handler(data);
if (data['error'] == null) {
$("tr#pid-" + pid + " td.code:first div").html('<i>' + $("form.enter-match input[name='code']").val() + '</i>');
$("form.enter-match").dialog('close');
}
},
'json'
);
}
}
});
});
The line pid = $(this).parents("[data-pid]").data('pid'); does not get the pid data value because form#enter_match is created at the very top of the document to be reused in the code as needed. It therefore will not have a parent with the [data-pid] attribute, however, button.enter-match will. How do I get the value in [data-pid] for this particular button.enter-match from within the $("form.enter-match").dialog() portion of the code?
Could not figure out a way to get the next object up, so I simply moved pid = $(this).parents("[data-pid]").data('pid'); to the next scope up under the line .on('click', function() { which solved the problem in all instances.
Thanks to all who pointed out my bad coding practice with regards to IDs and classes. I've updated my coding style to reflect the better principals.
This question is continuation of the following question Add JSON data to the view that unfortunately ended up unresolved yet.
In my main view which has a form with 2 controls and placeholder for flexigrid I added the following at the bottom
<div id="add-edit-dialog" style="display: none" title="Add / Edit Client">
#Html.Partial("_ClientForm", Model)
</div>
The flexigrid pluglin instantiates in run-time and adds 3 buttons: Add, Edit, Delete.
For Edit button I need to get the current row information from the server and then display it in the Form. For Add button I do not need to go to the server (I think).
This is my current code for the Edit button:
function edit(com, grid) {
$('.trSelected', grid).each(function () {
var id = $(this).attr('id');
id = id.substring(id.lastIndexOf('row') + 3);
currentId = id;
$('#fntype').val('Edit');
var ClientName;
ClientName =$('.trSelected td:eq(2)').text();
var url = '/Client/Edit/' + id ;
$.getJSON(url, function (html) {
// setFormControls(data.Id, data.Role, data.Location, data.JobType,
// data.Description);
// alert(data);
$($dlg).html(html);
});
//location.replace(url);
RunModalDialog("Edit Client: " + ClientName);
});
So, it is going to Edit controller action and returns that same partial view _ClientForm with correct information passed as a model. If I look at the response result returned in FireBug I can see that the returned HTML is correct and all the textboxes have correct information in their values.
However, the dialog that opens looks exactly the same as the dialog for the Add button - in other words, all form controls come blank. I can not figure out what is wrong and why it is not working the way I want it.
This is what I have for the RunModalDialog:
var validator = $("#add-edit-form").validate();
var $dlg = $("#add-edit-dialog").dialog({
autoOpen: false,
show: "blind",
closeOnEscape: true,
resizable: true,
width: 1200,
height: 750,
minHeight: 600,
minWidth: 950,
buttons: {
"Save": function () {
if ($("#add-edit-form").valid()) {
// jobPost.setVals(txtId.val(), txtRole.val(),
// txtLocation.val(), txtJobType.val(),
// txtDescription.val());
$.ajax({
type: 'POST',
//data: JSON.stringify(clientInformation),
url: '/Client/Save',
dataType: 'json',
contentType: 'application/json',
success: function (result) {
// insert new list into grid
$('#flexClients').flexAddData(result);
}
});
$(this).dialog('close');
} else return false;
},
Cancel: function () {
$(this).dialog("close");
clearForm();
if (validator)
validator.resetForm();
}
},
close: function () {
clearForm();
},
open: function () {
//$("#add-edit-dialog").parent().appendTo($("#add-edit-form"));
}
});
function RunModalDialog(title, url) {
if (title) {
$dlg.dialog("option", {"title": title });
}
if (url) {
$dlg.load(url).dialog("option", { "title": title }).dialog("open");
//$dlg.load(url, function () {
// var validator = $("#sform").validate();
// if (validator)
// validator.resetForm();
// $dlg.dialog("option", { "title": title }).dialog("open");
//});
} else {
$dlg.dialog("open");
}
}
The code with the load (and commented code) was another attempt to solve this problem. That sort of worked (the form displayed with the info), but the main Client view was also reloaded so I was seeing double grid.
Do you see what should I change in my code to get this thing working?
Thanks a lot in advance.
With Jazzen Chen from MS help we solved this problem. All I needed to do to display the data correctly was to change getJSON to just get jquery function. Now my form comes with data populated correctly and the next challenge will be to save the data.
I posted a blog post with what I have so far - hope it may help
http://blogs.lessthandot.com/index.php/WebDev/UIDevelopment/AJAX/asp-net-mvc-project-with