I am using jquery.dataTables.yadcf.js and //cdn.datatables.net/1.10.6/js/jquery.dataTables.js with sAjaxSource
I'm trying to use external filters that triggers several columns to a pre-selected filter at once. So you click a button and there, three columns are picked out so you don't have to go in each drop down.
But the way I'm doing it seems wrong, because I'm seeing two JSON requests instead of one every time they're triggered.
All I have in my script is
function doTrigger(){
yadcf.exFilterColumn(oTable, [[0,"zero"],[1,"one"]]);
$("#yadcf-filter--oTable-" + 1).val("one");
oTable.fnDraw();
}
Your code should look like this: I haveadded third argument true, its undocumented, but needed when calling the exFilterColumn after table finished loading
function doTrigger(){
yadcf.exFilterColumn(oTable, [[0,"zero"],[1,"one"]], true);
}
The rest of your code is not needed at all...
Related
I have several dynamic actions that are fired with change event on page load. It seems like all of them are fired at same time. When that happens it adds filter to the interactive grid. Now, the problem is some of the filters are duplicated. How can I solve this problem?
I mean when page loads, it changes bunch of things in the form (like checkboxes and values of textfield), that fires the dynamic action, which then calls addFilter function like this
function newFilter(){
var vals = apex.item('P12_VALUE').getValue();
if(!(vals.includes('DI'))){
deleteExistingFilters('emp', 'IS_ON');
}
if(vals.includes('DI')){
if(!filterAlreadyExist('emp', 'IS_ON')){
addFilter('emp', 'IS_ON','Y','EQ');
}
}
}
Create only one dynamic action that fires on page load, but let it execute several ("true"?) actions, i.e. every action would be one or none of those "several" dynamic actions you have now. "None" means that you'd exclude it if it is already set.
I have grid and want to apply default sorting on it, I am getting parameters from an API. My flow is as below.
Store.sort(sorters), where this code do load operation and after refreshing grid, It fires an event sortchange event on first load. How can i prevent it?
Update: I tried sortOnLoad:false. But, it is not working.
in sortchange event there is one parameter called column
so,when it will called just check column.hasFocus. if it will true that means user sort from grid header.
and if it return false that means it's called by loading or removing data.
Hope, this information will help you..:)
I used twitter bootstrap for my system. For displaying all of my data from the database, I used dataTables for it. I've added a new column as "Action" that contains 2 buttons, edit and delete. But when the record reaches more than 10 for the first pagination, all of the rows which contains my buttons on the second pagination and next pagination does not execute my jQuery code that handles the delete and edit function.
Can anyone help why is this happening? What are the possible solution for this problem? Really need it. Thanks.
Supposing you bind your delete and edit function on $(document).ready() then the explanation is simple: at that point only the first page is available in the DOM and only the buttons on the first page will bind.
What you need to do is to rebind your events every time you change the page. For this, you need to call your binding jQuery code (let's say you have a method named BindEvents() that does that) on the fnDrawCallback event of your DataTable:
var dataTable = $("#YourTable").dataTable({
// additional data table params,
"fnDrawCallback": function () {
BindEvents();
};
See http://legacy.datatables.net/usage/callbacks#fnDrawCallback for more details.
I have three drop down lists, one list is populated on page load and doesn't change. The 2nd and 3rd lists may change depending on the selection. This functionality is working fine.
I have tried to add Bootstrap selectpicker to the selectors and I can see it is working - unfortunately the lists are not refreshing based upon the selection. I actually think "behind the scenes" they are as I can see the queries being passed but via the front end nothing happens.
Part of the HTML:
<!-- SelectPicker -->
<link href='//cdnjs.cloudflare.com/ajax/libs/bootstrap-select/1.6.2/css/bootstrap-select.min.css' rel='stylesheet' type='text/css'>
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery-easing/1.3/jquery.easing.min.js"></script>
The first two DDL's are created via php but are
<select id='ddl_first_lookup' onchange='ajaxFirstOnChange(this.value)' value='' class='selectpicker'></option>
<select id='ddl_second_lookup' onchange='ajaxSecondOnChange(this.value)' class='selectpicker'>
<select id="ddl_third_lookup" onchange='ajaxThirdLookup(this.value)' class='selectpicker'></select>
I have the following Javascript:
$(document).ready(function() {
$(".selectpicker").selectpicker();
});
This is the point where I have discovered the problem, I am trying to implement this within the ajax on change functions without success - not even sure if it is correct.
$('.selectpicker').selectpicker('refresh');
I am pretty new to all of this so would like some help.
I found your question after having the same problem. Adding $('.selectpicker').selectpicker('refresh'); exactly after adding items to my list did the job.
So you probably need to find the correct place to put it. Maybe in the success part of your ajax call.
What I understood from my experience with this so far -
If you are adding dynamically options to the dropdown then you must need to call below function just before adding option
$(".selectpicker").selectpicker();
Once you completed adding options then call below function (if you are using ajax to add option then put this function into success part as just answered Athina)
$('.selectpicker').selectpicker('refresh');
If you are facing any weird issue like showing dropdown not data or sometime dropdown not showing properly then definitely you must have made mistake in placing about function and nothing else.
if refresh method doesn't help, try adding some delay.
setTimeout(() => {
jQuery('.selectpicker').selectpicker('refresh');
}, 500);
In my Ajax successCallBack I am trying to manipulate drop down list having id as reasonCode based on dynamicId (value get from server) as below:
$('#reasonCode option[value='+dynamicId+']').prop('selected', true);
but unfortunately this had not worked until I added another line after this as below:
$('#reasonCode').selectpicker('refresh');
Changing selectpicker class name when hidden:
<select name="key" class="selectpicker_oncreate">
When refreshing:
$('.selectpicker_oncreate').selectpicker('refresh');
I've added destroy before refresh, thats solved my issue.
// ... option:selected manipulation
$('.selectpicker').selectpicker('destroy');
$('.selectpicker').selectpicker('refresh');
I have a problem with initialization of dynamically filled dropdowns in jQuery.
Basically, I have function fillCityList and it makes AJAX call to fill the cities by the passing country.
Because this is used in Edit form, I have a default City value in id_cityHidden field.
Actually the code below works well.However, because fillCityList takes long time to fill the city list, while default city is selected, the city list may not be ready.
$(document).ready( function() {
fillCityList(1);
$('#city').val($("#id_cityHidden").val());
});
I know there is a solution like "call function at complete stage of AJAX call" but I just need it during initialization.
One solution might be setting a timeout or delay between fillCityList and
$('#city').val($("#id_cityHidden").val()) however, it is not a good solution of course.
What is the best way to do this ?
Thanks
I would suggest you build your ajax to use the 'complete' function, then update the value.
http://api.jquery.com/ajaxComplete/