jQuery UI Widgets › Forums › Editors › Button, RepeatButton, ToggleButton, LinkButton › Binding click event on jqxToolBar button
This topic contains 4 replies, has 2 voices, and was last updated by rishisahi 9 years, 9 months ago.
Viewing 5 posts - 1 through 5 (of 5 total)
-
Author
-
Hi,
I am trying to bind “click” event on button which is on tool bar but when I press the button it executes the code but submits the form too which I don’t want. Usually we add “return false” attribute on button to avoid submissions but no idea how do do here,
var button1, buttonMin1; case 5: tool.jqxButton({ width: '120'}); tool.text("Apply filter"); if (menuToolIninitialization === false) { button1= tool; } else { buttonMin1= tool; } break;Here is adding click event on this button,
button1.bind('click', function (event) { alert('Filter code goes here'); });Hi rishisahi,
Is the toolbar positioned in a form? Please provide a larger code sample, including your HTML.
I would also like to note that unless there is some special case (such as Cascading dropdown list on jqxToolBar), tool event bindings can be simplified as:
case 5: tool.jqxButton({ width: '120' }); tool.text("Apply filter"); tool.click(function() { alert('Filter code goes here'); }); break;Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar. Actually when I add “click” function in tool bar code it submits the form which I don’t expect to happen. Here is full code
<!DOCTYPE html> <html lang="en"> <head> <script type="text/javascript"> $(document).ready(function () { var url = "<Computed Value>"; // prepare the data var source = { datatype: "xml", datafields: [ { name: 'date', type: 'date' }, { name: 'event_no', type: 'string' }, { name: 'opcenter', type: 'string' }, { name: 'brief_desc', type: 'string' }, { name: 'risk_level', type: 'string' }, { name: 'status', type: 'string' }, { name: 'hazard_source', type: 'string' }, { name: 'hazard_effect', type: 'string' }, { name: 'where_observed', type: 'string' }, { name: 'activity', type: 'string' }, { name: 'work', type: 'string' }, { name: 'project_name', type: 'string' }, { name: 'country', type: 'string' }, { name: 'violated_rules', type: 'string' }, { name: 'support_departments', type: 'string' }, { name: 'employed_by', type: 'string' }, { name: 'job_position', type: 'string' }, { name: 'author_name', type: 'string' }, { name: 'confidentiality', type: 'string' }, { name: 'nrm_type', type: 'string' }, { name: 'non-conformity', type: 'string' } ], root: "documents", record: "document", id: "docid", url: url }; var dataAdapter = new $.jqx.dataAdapter(source, { downloadComplete: function (data, status, xhr) { }, loadComplete: function (data) { }, loadError: function (xhr, status, error) { } }); // create jqxgrid. $("#jqxgrid").jqxGrid( { width: 850, source: dataAdapter, pageable: true, sortable: true, groupable: true, autoheight: true, filterable: false, autoshowfiltericon: false, columnsresize: true, altrows: true, columns: [ { text: 'Date', datafield: 'date', cellsformat: 'dd-MMM-yyyy' , filtertype: 'range', width: '13%' }, { text: 'Event Number', datafield: 'event_no' }, { text: 'OpCenter', datafield: 'opcenter' }, { text: 'Brief Description', datafield: 'brief_desc' }, { text: 'Risk Level', datafield: 'risk_level' }, { text: 'Status', datafield: 'status', hidden: true }, { text: 'Hazard Source', datafield: 'hazard_source', hidden: true }, { text: 'Hazard Effect', datafield: 'hazard_effect', hidden: true }, { text: 'Where Observed', datafield: 'where_observed', hidden: true }, { text: 'Activity', datafield: 'activity', hidden: true }, { text: 'Work', datafield: 'work', hidden: true }, { text: 'Project Name', datafield: 'project_name', hidden: true }, { text: 'Country', datafield: 'country', hidden: true }, { text: 'Violated Rules', datafield: 'violated_rules', hidden: true }, { text: 'Support Departments', datafield: 'support_departments', hidden: true }, { text: 'Employed By', datafield: 'employed_by', hidden: true }, { text: 'Job Position', datafield: 'job_position', hidden: true }, { text: 'Author Name', datafield: 'author_name', hidden: true }, { text: 'Confidentiality', datafield: 'confidentiality', hidden: true }, { text: 'NRM Type', datafield: 'nrm_type', hidden: true }, { text: 'Non-Conformity', datafield: 'non-conformity', hidden: true } ] }); var listSource = [ { label: 'Status', value: 'status', checked: false }, { label: 'Hazard Source', value: 'hazard_source', checked: false}, { label: 'Hazard Effect', value: 'hazard_effect', checked: false}, { label: 'Where Observed', value: 'where_observed', checked: false}, { label: 'Activity', value: 'activity', checked: false}, { label: 'Work', value: 'work', checked: false}, { label: 'Project Name', value: 'project_name', checked: false}, { label: 'Country', value: 'country', checked: false}, { label: 'Violated Rules', value: 'violated_rules', checked: false}, { label: 'Support Departments', value: 'support_departments', checked: false}, { label: 'Employed By', value: 'employed_by', checked: false}, { label: 'Job Position', value: 'job_position', checked: false}, { label: 'Author Name', value: 'author_name', checked: false}, { label: 'Confidentiality', value: 'confidentiality', checked: false}, { label: 'NRM Type', value: 'nrm_type', checked: false}, { label: 'Non-Conformity', value: 'non-conformity', checked: false} ]; var dropdownlist1, dropdownlist1Min, dropdownlist2, dropdownlist2Min, listbox, listboxMin, button1, buttonMin1, button2, buttonMin2; $("#jqxToolBar").jqxToolBar({ width: 850, height: 35, tools: 'custom | dropdownlist | custom | dropdownlist | custom | button | button | custom', initTools: function (type, index, tool, menuToolIninitialization) { switch (index) { case 0: tool.append("<div style='font-weight: bold;padding: 3px;'>Select Level :</div>"); break; case 1: var levelsource = <Computed Value>; tool.jqxDropDownList({ width: 150, source: levelsource, placeHolder: "Select..."}); if (menuToolIninitialization === false) { dropdownlist1 = tool; } else { dropdownlist1Min = tool; } break; case 2: tool.append("<div style='font-weight: bold;padding: 3px;'>Select :</div>"); break; tool.append("<div style='padding: 3px;'></div>"); // tool.append("<div style='font-weight: bold;'>Select</div>"); // dropdownlist1.add(dropdownlist1Min).on('select', function (event) { // tool.append("<div style='font-weight: bold;'>Select "+event.args.item.label+"</div>"); // }); break; case 3: var resultsource = <Computed Value>; tool.jqxDropDownList({ width: 150, source: [], placeHolder: "Select..."}); if (menuToolIninitialization === false) { dropdownlist2 = tool; } else { dropdownlist2Min = tool; } break; case 4: tool.append("<div style='padding: 10px;'></div>"); break; case 5: tool.jqxButton({ width: '120'}); tool.text("Apply filter"); if (menuToolIninitialization === false) { button1= tool; } else { buttonMin1= tool; } break; case 6: tool.jqxButton({ width: '120'}); tool.text("Clear filter"); tool.click(function() { $("#jqxgrid").jqxGrid('clearfilters'); //event.preventDefault(); }); break; case 7: tool.jqxListBox({source: listSource, width: '100%', height: 300, checkboxes: true }); if (menuToolIninitialization === false) { listbox= tool; } else { listboxMin= tool; } break; } } }); listbox.add(listboxMin).on('checkChange', function (event) { $("#jqxgrid").jqxGrid('beginupdate'); if (event.args.checked) { $("#jqxgrid").jqxGrid('showcolumn', event.args.value); } else { $("#jqxgrid").jqxGrid('hidecolumn', event.args.value); } $("#jqxgrid").jqxGrid('endupdate'); }); dropdownlist1.add(dropdownlist1Min).on('select', function (event) { level= event.args.item.label; switch (level) { case "Project": dropdownlist2.jqxDropDownList({ source: <Computed Value>}); dropdownlist2Min.jqxDropDownList({ source: <Computed Value>}); break; case "Vessel": dropdownlist2.jqxDropDownList({ source: <Computed Value>}); dropdownlist2Min.jqxDropDownList({ source: <Computed Value>}); break; case "Client": dropdownlist2.jqxDropDownList({ source: <Computed Value>}); dropdownlist2Min.jqxDropDownList({ source: <Computed Value>}); break; case "Maritime Manager": dropdownlist2.jqxDropDownList({ source: <Computed Value>}); dropdownlist2Min.jqxDropDownList({ source: <Computed Value>}); break; case "Global": dropdownlist2.jqxDropDownList({ source: <Computed Value>}); dropdownlist2Min.jqxDropDownList({ source: <Computed Value>}); break; case "Region": dropdownlist2.jqxDropDownList({ source: <Computed Value>}); dropdownlist2Min.jqxDropDownList({ source: <Computed Value>}); break; case "Subgroup": dropdownlist2.jqxDropDownList({ source: <Computed Value>}); dropdownlist2Min.jqxDropDownList({ source: <Computed Value>}); break; } }); var applyFilter = function (datafield) { $("#jqxgrid").jqxGrid('clearfilters'); var filtertype = 'stringfilter'; var filtergroup = new $.jqx.filter(); var filter_or_operator = 1; var filtervalue = dropdownlist2.jqxDropDownList('getSelectedItem').value; if(filtervalue!="Select...") { var filtercondition = 'equal'; var filter = filtergroup.createfilter(filtertype, filtervalue, filtercondition); filtergroup.addfilter(filter_or_operator, filter); $("#jqxgrid").jqxGrid('addfilter', datafield, filtergroup); // apply the filters. $("#jqxgrid").jqxGrid('applyfilters'); } } button1.bind('click', function (event) { var datafield= dropdownlist1.jqxDropDownList('getSelectedItem').value; switch (datafield) { case "Vessel": applyFilter("opcenter"); break; case "Project": applyFilter("project_name"); break; } event.preventDefault(); }); // button2.bind('click', function (event) { // $("#jqxgrid").jqxGrid('clearfilters'); // event.preventDefault(); // }); }); </script> </head> <body class='default'> <table id='jqxWidget' border="0"> <tr> <td> </td> <td> <div style="float: left;" id="jqxToolBar"> </div> </td> </tr> <tr> <td valign=top> <!-- <div style="float: left;" id="jqxlistbox"></div> --> </td> <td> <div style="float: left;" id="jqxgrid"></div> </td> </tr> </table> </body> </html>Hi rishisahi,
Your usual approach is also applicable in this situation, too:
case 5: tool.jqxButton({ width: '120' }); tool.text("Apply filter"); tool.click(function() { alert('Filter code goes here'); return false; }); break;Best Regards,
DimitarjQWidgets team
http://www.jqwidgets.com/Thanks Dimitar
-
AuthorPosts
Viewing 5 posts - 1 through 5 (of 5 total)
You must be logged in to reply to this topic.