I am validating a form which has bit complex logic. where one after another validation is done. I mean if one validation is run then next validation depends upon first validation
Eg, there are multiple select boxes if one box has negative value then another cannot have +ve value it must have negative value. and a message box is to be shown with showing the error and a message with a checkbox that says it is correct. and if it checks the box then they can enter both positive and negative value. so to do this i used a jquery modal dialog-confirm box. but like these there are multiple cases and logics. for whom i used the dialog box with a single div with id dialog_modal and i passed the message dynamically with jquery. But what happened was the jquery modal dialog box only appears for the last validation
so i want is to break the page loading process when the dialog modal is called and only continue after any button is pressed. I have a function for the dialog modal like this...
function dialog(param){
$("#dialog_modal").addClass(param);
$( "#dialog_modal ."+param ).dialog({
resizable: false,
modal: true,
buttons: {
Yes: function() {
eval(param+'_ok()');
$( this ).dialog("close" );
},
No: function() {
eval(param+'_cancel()');
$( this ).dialog( "close" );
}
}
});
}
If it is bit messy to understand than you can ask me....Its a bit complex
Related
Calling .qtip twice on the same element erases the previous qtip. Is it possible to have 2 styles of qtip on the same element (one is right click, one is mouse over)
You cant have 2 on the same element but you can wrap the element in a span and call qtip on that with a different trigger.
I just upvoted Bruian's answer as I have tried the other technique that I found through Googling which says to create a qtip and to add removeData('qtip') before adding another one :
$('.selector')
.qtip() // tooltip 1
.removeData('qtip') // remove it's data
.qtip(); // tooltip 2
This technique will work for simple cases, but you are setting yourself up for a lot of problems down the line with duplicate ids and other issues.
For those still interested using one description for multiple item. You can use this method:
1) Make one div with all the description item you want.for example:
<div id='description' class='describe_content' style='display:none;'>
<div id='test'>this is description</div>
<div id='test2'>teeest</div>
</div>
2) Use the following code for the qtip. You can see the comment on what each item do.
$(document).on('mouseover','input ,select ,dl , .dropdown2 .mutliSelect li',function(event)
{
string = $("#test2");
$(this).qtip({
overwrite: true, //to allow it the same item be paste to other part.
position: {
my: pos[pos_c+3], // Position my top left...
at: pos[pos_c], // at the bottom right of...
target: $(this) // my target
},
content: {
text: string, // the text
},
show:{
event: event.type, //use the same show event as the one that triggered
ready: true //show the tooltip as soon as it's bound.
},
'font-size': 16
},event);// have to pass event as second parameter, because qtips positioning
}
Note that the position is just a extra option, you could remove it if you want.
I have a JQuery Modal Form and when i add the submit event, it cannot display as dialog but rather than embedded into browser window. If I uncomment the click event below, it will embedded into browser window rather than show as dialog.
$(document).ready(function(){
//$("#moveTicketBtn").click() {
// $("#moveUnknownTicket").submit();
//};
$("#moveUnknownTicketDialog").dialog(
{
title: "Move Unknown Ticket",
autoOpen: true,
modal: true,
resizable: true,
stack: true,
width: 500,
height: 350
});
});
Does anyone have any idea why it is like this? Please help. Thanks.
EDIT Question:
I have a form inside this dialog and upon submission(onsubmit, onblur) the javascript is not called. What is the reason?
try
$("#moveTicketBtn").click(function() {
$("#moveUnknownTicket").submit();
});
you have to insert your function within the () of the click event.
more information here: http://api.jquery.com/click/
That should do the trick:
http://jsfiddle.net/uQCKJ/
As you can see the form is submitted, since the alert box is triggered
$("#moveTicketBtn").click(function() {
$("#moveUnknownTicket").submit();
});
I have put submit inside click function though works great.
I am using jqgrid.
I really need help with this, and have no clue how to do it, but i am sure its possible... can any one give me even a partial answer? were to start from?
I now have a requirement saying that for searching and filtering the grid I dont want the regular model form pop op thing opening, instead the filter should be open when entering the page but not as a pop up form , but should be on the top of the page but still have all the functions to it.
Needs to look like this:
And again having the select tag filled with the correct information (like they do in the popup form) and when clicking on "Save" it should send the request to the server, like regular.
Is this possible?
*******EDIT*******
The only thing i basically need is to have the filter with out the dialog part of it.
The solution of the problem for the old searching dialog you can find here. I modified the demo to the current implementation of the searching dialog in the jqGrid.
You can see the results on the demo:
The corresponding code is below:
var $grid = $('#list');
// create the grid
$grid.jqGrid({
// jqGrid opetions
});
// set searching deafauls
$.extend($.jgrid.search, {multipleSearch: true, multipleGroup: true, overlay: 0});
// during creating nevigator bar (optional) one don't need include searching button
$grid.jqGrid('navGrid', '#pager', {add: false, edit: false, del: false, search: false});
// create the searching dialog
$grid.jqGrid('searchGrid');
var gridSelector = $.jgrid.jqID($grid[0].id), // 'list'
$searchDialog = $("#searchmodfbox_" + gridSelector),
$gbox = $("#gbox_" + gridSelector);
// hide 'close' button of the searchring dialog
$searchDialog.find("a.ui-jqdialog-titlebar-close").hide();
// place the searching dialog above the grid
$searchDialog.insertBefore($gbox);
$searchDialog.css({position: "relative", zIndex: "auto", float: "left"})
$gbox.css({clear:"left"});
Here's the way I implemented it, using Oleg's excellent help.
I wanted my users to be able to immediately type in a search criteria (in this case, a user's name) and for the jqGrid to show the results. No messing around with the popup Search dialog.
Here's my end result:
To do this, I needed this HTML:
Employee name:
<input type="text" name="employeeName" id="employeeName" style="width:250px" />
<!-- This will be my jqGrid control and pager -->
<table id="tblEmployees"></table>
<div id="pager"></div>
and this JavaScript:
$("#employeeName").on('change keyup paste', function () {
SearchByEmployeeName();
});
function SearchByEmployeeName()
{
// Fetch the text from our <input> control
var searchString = $("#employeeName").val();
// Prepare to pass a new search filter to our jqGrid
var f = { groupOp: "AND", rules: [] };
// Remember to change the following line to reflect the jqGrid column you want to search for your string in
// In this example, I'm searching through the UserName column.
f.rules.push({ field: "UserName", op: "cn", data: searchString });
var grid = $('#tblEmployees');
grid[0].p.search = f.rules.length > 0;
$.extend(grid[0].p.postData, { filters: JSON.stringify(f) });
grid.trigger("reloadGrid", [{ page: 1 }]);
}
Again, my thanks to Oleg for showing how to use these search filters.
It really makes jqGrid much more user-friendly.
I am trying to build a chrome extension. In it I want the context menu to change according to the selected text on the page.
For example, if its a number I want a menu that says divisibility test for this numbr is ...
and if it is a string, it should have a something else, but not both at the same time.
I cant figure out how to do that.
You will have to set a listener for mouse down. There is no other way to get the selected text before the menu is created.
See this SO question:
chrome extension context menus, how to display a menu item only when there is no selection?
Here is part of the code the rest is at the link.
document.addEventListener("mousedown", function(event){
//right click
if(event.button == 2) {
if(window.getSelection().toString()) {
chrome.extension.sendRequest({cmd: "createSelectionMenu"});
} else {
chrome.extension.sendRequest({cmd: "createRegularMenu"});
}
}
}, true);
I have this script below that will call my browse window;
var $dialog = $('<div></div>')
.load('scripts/browsecharges.jsp')
.dialog({
width: 800,
height: 500,
modal: false,
title: 'Browse Charges',
buttons: {
Ok: function() {
$(this).dialog('destroy');
}
},
close: function(event, ui) {
$(this).dialog('destroy').remove();
}
});
$dialog.dialog('open');
This browse window contains a jqgrid in it. At first my jqgrid works fine, I can see the data. But calling this browse window for the second time, my jqgrid will not show anymore. What should I do to open it as many times as I want?
Perhaps you need to call GridUnload prior to creating the grid, to ensure any elements from the previous grid are cleaned up.
I had this problem when a page was load via a .ajax call. The page contained dialogs with grids. On the first call everything worked great, on the second call (loaded another page and then reloaded the page) I would get an empty jqGrid, event though msg.d was clearly being set properly. The answer was when I left the page (loaded another page via .ajx) to destroy and remove the grid ($(this).dialog('destroy').remove()).