I am using the jQuery tablesorter plugin (http://mottie.github.io/tablesorter/docs/index.html)
The tablesorter is working and I can disable sorting and filtering on a column using this code.
// Disable sorting and filtering on 1st column
$("table thead th:eq(0)").data("sorter", false).data("filter", false);
How can I use the .data method to do the equivalent of this?
$("table").tablesorter({
// sort on the 4th column, order asc
sortList: [[3,0]]
});
My problem is I can't determine how to use sortList: [[3,0]] with .data syntax. Any recommendations will be appreciated.
Well, you can use the data function like this to update the saved sort, but then you would need to actually trigger a sort to apply it:
$("table").data('tablesorter').sortList = [[3,0]];
$("table").trigger('update'); // apply the new sort
But really I think your best bet would be to just trigger a sorton event:
$("table").trigger("sorton", [[3,0]]);
"sorton event" like this
$("table").trigger("sorton", [[[3,0]]]);
Related
I have a select2 box in bootstrap modal, I want to change the value of the select2 box but it didn't work.
I tried every single solution in previous posts and results but none of them got it work.
I use select2 4.0.2, I tested:
$('#select_id').val('val').trigger('change.select2');
$('#select_id').val('val').trigger('change');
$('#select_id').val('val').change()
It works one or two times then it stops working (randomly)
It works fine only when I change the select2 back to 3.x.x
$('#select_id').val('val').trigger('change');
is the right way, see here
$('#select_id').select2('val', selectedValue);
For Select2 with Ajax call, I struggled with lot of options, but none worked. Then i came to following solution, which works like charm
$("#select_id").html($("").val('val').text('text')).trigger("change");
To programmatically select an option/item for a Select2 control, use the jQuery
$('#mySelect2').val('1'); // Select the option with a value of '1'
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
You can also pass an array to val make multiple selections:
$('#mySelect2').val(['1', '2']);
$('#mySelect2').trigger('change'); // Notify any JS components that the value changed
I have used the following code in 4.x.xx version and it is working
$('#select_id').val('val').select2();
If you, like me, have added a custom handler for the select2:selecting event the correct complete answer to changing a value and triggering the custom select2 event would be:
$('#select_id').val('val').trigger('change').trigger({
type: 'select2:event_name', // It worked for me with select2:selecting and select2:select
params: {
args: { // Only use 'args' if using select2:selecting, select2:select does not use it
data: varWithEventData
}
}
});
For those who facing an issue like this:
If you're using multiple select elements and have a common event handler (like $(".mySelect2Inputs").click(...) ) when you do $('#mySelect2').trigger('change') the click event handler is gonna trigger multiple times ($(".mySelect2Inputs").length times).
To prevent this situation, you must use $('#mySelect2').trigger('change.select2') (attention to .select2 namespace!).
From the select2 docs:
https://select2.org/programmatic-control/events#limiting-the-scope-of-the-change-event
It's common for other components to be listening to the change event, or for custom event handlers to be attached that may have side effects. To limit the scope to only notify Select2 of the change, use the .select2 event namespace:
$('#mySelect2').val('US'); // Change the value or make some change to the internal state $('#mySelect2').trigger('change.select2'); // Notify only Select2 of changes
I want to create a table in jQuery mobile. The table will be updated from mysql. Please tell me the procedure to create and update the table in jQuery mobile.I am completely new to the platform.
You should use AJAX to update your table without refreshing the page. From your jquery/html page you do an ajax call to update the table after you add new data to it (I assume this is why you need to update).
It works something like this:
Have a separate script to DISPLAY your table
Use JQUERY AJAX to display the table for you on page load
$(document).on("pageinit", "#visualUnitList", function () {
LoadVisualUnitTable();
});
Write the function to display the table
function LoadVisualUnitTable() {
$.post('unit_DisplayVisualTable.php', 'unitSearchBox=<?php echo $_POST ['unitSearchBox'];?>, function(data) {
$("#visualUnitListTable-popup-popup").remove(); //<!-- remove "select columns to display" popup from dom before reloading - fix for button not working after reload -->
$("#visualUnitTable").html(data).enhanceWithin();//<!-- load data to div -->
});
return false;
};
This will make your table appear on the screen. If you want to update it/edit the data in the table you need to write more ajax to POST the data to a separate php(?) script. After you have posted your data you will simply run LoadVisualUnitTable() as I have in point 1. within your AJAX.
I hope this can help.
p.s. For any future questions you might ask, it's much easier to write a response if you give more details about what you are trying to achieve, and even better if you can post existing code that you've been working on.
Is there any example out there that explains how to dynamically generate a tablesorter with the pager plugin using AJAX, with checkboxes and editable cells? Currently, all of the examples have hard-coded table data, i.e. <theader> and <tbody> are pre-defined.
I can get a basic example up and running with AJAX calls to fetch paginated data, but need to integrate checkboxes into the table.
Also, is it possible to group rows (and expand collapse them) using this plugin?
Here's a screenshot of what I'm trying to accomplish:
Much thanks in advance !
The included parser-input-select.js parser file allows for dynamically added and updated inputs, checkboxes & select boxes. All you need to do is set the parser for that particular column:
Place this in the header
<script src="../js/parsers/parser-input-select.js"></script>
and include this code:
$(function(){
$("table").tablesorter({
theme : 'blue',
headers: {
0: { sorter: 'checkbox' },
1: { sorter: 'inputs' }
}
});
});
This parser will also work with the pager addon. There isn't a demo of this parser being used with the pager, but you can see it working in the grouping rows widget demo.
I have a JQuery Mobile (1.0rc1) application that has a list view with a search filter implemented. It's similar to this sample.
Under certain conditions, I am dynamically loading additional items into the list with an ajax call. When this happens I want to clear anything entered in the search filter, otherwise I end up with a partially filtered list.
I've tried firing the clear button like this:
$('.ui-button-clear', $.mobile.activePage).click();
and clearing the form like this:
$("form > input", $.mobile.activePage).val('');
but neither worked. Can someone enlighten me to the proper way to accomplish this?
You should be able to clear clear the searchfilter with
$('input[data-type="search"]').val("");
Edit: To update the list you will also have to trigger the "change"-event on the searchfilter:
$('input[data-type="search"]').trigger("keyup");
JSFiddle
if you talking about Jquery mobile listview, then you need this
$('#autocomplete li').click(function () {
$('.ui-input-clear').trigger("click");
});
I use the following code:
$("form")[0].reset();
The [0] points to the DOM element method.
Also see How to reset (clear) form through JavaScript?
I'm working with a dynamic DOM here, and have called the jQuery UI datepicker to all inputs with a specific class name, in this case .date
It works great with the first, static, construct but when I clone it the event handlers don't seem to want to move over. I get the Firebug error:
inst is undefined
I tried looking into jQuery's new live() function but couldn't combine the two. Any ideas?
Ah, got it. Right after I append the HTML to the DOM I run this on all the inputs I'd like to have a datepicker pop up with. Datepicker adds a class to elements it has been attached to, so we can filter out existing inputs and only apply it to new ones.
$('.date').not('.hasDatePicker').datepicker();
I hope this helps people as I was Googling for days and didn't find anything!
You should also note that it would be faster to check for input.date in the new generated HTML by setting that as a context, rather than the whole page, as it will save time, due to this being a more efficient operation.
I had a similar Issue, I had multiple tables on a page and each had multiple datepickers, also on click of button "AddLine" it added a table row with dynamic HTML and datepicker.
I realized after a lot of search that my input date fields had no "id" defined they looked like this
<input type="text" class="datepicker" name="mDate1" value="" size=8 >
jquery was pointing all the date fields values to the very first date field defined on page, the calendar would popup on all the date fields but the value of 1st date field would change, I made a change to the html like this
<input type="text" class="datepicker" id="Date1" name="mDate1" value="" size=8 >
by adding a "id" and it started working, for the dynamic date fields I change the Id like this
var allColumns = $("#"+$tableId+" tr:last td");
$(allColumns).each(function (i,val) {
if($(val).find(":input").hasClass("datepicker")){
$(val).find(":input").attr("id",newId+$(val).find(":input").attr("id"));
}
});
You need to use the 'live' event to make it work with dynamic DOM. So, if the class for your datepicker inputs is 'date-input', following code will make it work:
$(document).ready(function() {
$('.date-input').live('click', function() {
$(this).datepicker('destroy').datepicker({showOn:'focus'}).focus();
});
});
This might be a little late, but all the suggestions above didn't work for me, I came up with an easy solution for this.
First, what is causing the problem:
JQuery assign datepicker to element id. if you are cloning element, then same id might be cloned as well. which jQuery doesn't like. You might end up with either receiving null reference error or the date being assigned to first input field regardless which input field you click on.
Solution:
1) destroy datepicker
2) assign new unique ids to all input field
3) assign datepicker for each input
Make sure your input is something like this
<input type="text" name="ndate[]" id="date1" class="n1datepicker">
Before you clone, destroy datepicker
$('.n1datepicker').datepicker('destroy');
After you clone, add these lines as well
var i = 0;
$('.n1datepicker').each(function () {
$(this).attr("id",'date' + i).datepicker();
i++;
});
and the magic happens
Use
$j(id or class).removeClass('hasDatepicker').datepicker();
It is working
Use jQuery selectors:
$(".mydatepicker:not(.hasDatepicker)").datepicker()
Multiple instances of the jquery-ui library on the page will cause this error too. Removing redundant instances work for my case
I experienced the same symptom, in this caused by having a td containing element with the same id attribute as the input,
<td id="fld_xyz"><input id="fld_xyz" class="date" /></td>
I know this isn't ideal anyway, but it's worth knowing that the datepicker component seems to be relying on the uniqueness of the id.
I had this problem. My situation ended up being I had another element with the same ID as the input with the datepicker.
Today I faced the same issue... I am using datetimepicker plugin in my application.
Also using jquery's default datepicker too. When ever I am invoking them both on document ready I am getting the error inst is undefined.
$(document).ready(function(){
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$("#MainForm").validationEngine('attach');
....
});
So I changed the code to invoke before document ready like below:
$(".datepickerCustom").datetimepicker();
$(".datepicker").datepicker();
$(document).ready(function(){
$("#MainForm").validationEngine('attach');
....
});
Now every thing is working fine. No problems.
I had a similar problem with data picker not working after a first call. I found an answer to my issue here:
http://www.stemkoski.com/problem-with-jquery-ui-datepicker-dynamic-dom/
I was cloning sections dynamically from template and inadvertently including the class that datepicker adds once its called:
hasDatepicker
I placed my first datepicker call after I clone the template and that did it. I then added a datepicker call after each instance of clone:
$(source).clone().appendTo(destination).find(".datepicker").datepicker();
After trying many of the answers here, this is what worked for me and is showing on the first click/focus
function vincularDatePickers() {
$('.mostrar_calendario').live('click', function () {
$(this).datepicker({ showButtonPanel: true, changeMonth: true, changeYear: true, showOn: 'focus' }).focus();
});
}
this needs that your input have the class 'mostrar_calendario'
live is for JQuery 1.3+ for newer versions you need to adapt this to "on"
See more about the difference here http://api.jquery.com/live/
If it still doesn't work, it is because of the cloned id. You can completely remove datepicker like this:
$(selector).removeClass('hasDatepicker').removeAttr('id').datepicker();