Say I have two different functionalities/filters (e.g. calculation and sorting) in form of plugins for a table. The user can choose which one he wants to use right now. But both together have conflicts and therefore when one is chosen, the other should be stopped/removed (without reloading the table itself). How can I achieve that?
For example I use the dataTable jQuery plugin which is initialized by
$('#myTable').dataTable();
But when the user chooses a different filter, I somehow need to 'deactivate' this plugin for the other filter to work without conflict. I tried the unbind event handler, but without success.
In general the logic would look like this:
$('.js_trigger').on('click', '.calculation' function() {
//Deactivate
$('#myTable').dataTable();
//Activate
$('#myTable').dataCalculation();
}
$('.js_trigger').on('click', '.sorting' function() {
//Deactivate
$('#myTable').dataCalculation();
//Activate
$('#myTable').dataTable();
}
I hope you get what I mean and that this question is not to broad.
Solution:
With the hint of #V31, I made use of the empty() function.
1.) On page load I put all the content from the table in a variable before any additional scripts change the table.
tableContent = $('#myTableContainer').html();
2.) When a different plugin needs to be loaded I empty the container and add the content of the variable before I execute the plugin.
$('#myTableContainer').empty();
$('#myTableContainer').html(tableContent);
$('#myTable').dataTable();
You can empty the parent div (of that element) so that the binding is removed. Something like this:
$('#myTable').empty();
Related
I have a table built that comes from data in the server. I have a button that will activate or deactivate a category. If the category is active, it will show the action of "inactivate" and so the way around. So I need the table to refresh so when the user clicks activate it will automatically switch. I am almost done with this. Issue is that when I use the jQuery load function, it seems like it's adding one additional line instead of just refreshing it.
This is my code, I send a request to the server, then wait for it to finish to load.
My code is below:
async function cambiarStatus(tipo_transa, ruta, estadoCat, idCat, div, file)
{
await modStat(tipo_transa, ruta, estadoCat, idCat);
$(div).load(file+div);
}
With the table I built with PHP I only have one ... but then it goes and another one which ends up in making the table go nuts.
Many thanks for your help!!!!!
I'm going to have to guess that the value of the variable div is something like #c-i-1, or # plus the id of whichever table row you're trying to replace.
In that case, the code as written is telling jQuery to replace the content of the table row, not the table row itself, with the matching table row loaded from the file. That's going to cause exactly the problem you're showing, a table row being put inside a table row.
You need to replace the table row itself with the retrieved table row. For that, as convenient as jQuery's load method is, it doesn't offer the functionality you need.
Something like this should work better:
$.get(file, table => {
const row = $(table).find(div);
$(div).replaceWith(row);
});
I have a table on my site, whenever you click on the first checkbox, all others are selected and are also performed other actions that does not matter.
Once the site opens, these data are loaded directly on the page with PHP.
http://i.imgur.com/GRIFbzN.png
Just above, I have a 'select' field with some options, whenever you change the option, you made an ajax request that returns other data, but with the same structure in HTML with the same checkbox and others like elements.
This data is loaded into the table, but after loading the javascript events does not work anymore. How to solve this?
HTML: http://pastebin.com/jU5nZURs
Javascript: http://pastebin.com/XT1ty019
Thanks!
Events are bound to existing DOM nodes.
When you replace / remove the nodes, the events bound to them go away, too.
You need to run this again after you load new content:
$(".checkData").on( "click", countChecked );
$("#checkAll").click(function(){
$('input:checkbox').not(this).prop('checked', this.checked);
countChecked();
});
p.s.
Put it in a function so you don't duplicate code.
I have a web app which uses jQuery to append rows onto the end of a table. Each row has a textarea to make notes, and an edit button which pops up a window so more information can be entered. The code to do so looks something like this: http://jsfiddle.net/H3m4z/
That is a trimmed down version of the actual code because the real code it involves an AJAX call to save data from each table row into a database when it is added. rowID is unique in the proper script so I can refer to the textareas of each row by 'notes[rowID]'.
This is what I do when users enter more info on the edit popup window. Any new notes entered are saved into the database but to make the web app feel more 'live' and responsive the new notes are copied across from the edit window to their corresponding notes field in the parent table like so:
window.opener.$('#notes[' + rowID + ']').text(newnotes);
This works absolutely fine for rows which already existed when the parent page was loaded, like the first table row in my example. However it does not work for table rows which were dynamically added by jQuery. I'd guess the answer involves live(); somehow but I'm not exactly sure where or how.
To make use of event delegation with on() (which replaces live()):
$('#table').on('click', 'td button', function(e){
});
Or you could just wrap your html in a jQuery function and bind the events right away (simplified example):
var $tr = $('<tr><td>foo</td></tr>').on('click', function(e){
});
$tr.appendTo('#table');
This would obviously bind the event to the actual <tr>, but you get the idea.
On my page, I have a form with three <select> drop down lists. All these lists use DropKick to make them look nice.
With DropKick added, the DDLs are no longer conventional lists and so cannot be accessed as such.
From what I've found, you can only call onchange by setting a class on the <form> tag and then using the following script:
function submitIt(){
alert('test');
}
$('.deviceChosen').dropkick({
change: submitIt
});
This works, and alert shows. But also doesn't work for a couple of big reasons.
The first <select> field is the only field that gets shown as a result. And everything else on the web page after that element gets removed from the page.
So what I have is three DDLs and I want to be able to set up a function that gets called when the deviceChosen id DDL gets changed. I don't want an onchange event for the other two lists.
Is this something that is doable?
I've tried things like the below, but it just will not work.
$('#deviceChosen').on('change', function() {
alert('dsf');
});
I couldn't get this working, so I ended up using selectBox instead
http://labs.abeautifulsite.net/jquery-selectBox/
I am able to makeit work, you can use the below mentioned code for sample purpose.
$("#ID_OF_SELECT_TAG").dropkick({
change: function (value, label) {
//Logic that you want to apply onchange event.
}
});
Thanks
Will a javascript library like Prototype/Scriptaculous or jQuery help me create a dynamic form on a webpage where I can show a different set of checkboxes based on the value chosen in a combobox?
Yes. You can easily show/hide the desired checkbox-s in onChanged event of the combo box. You even don't need special JavaScript libraries to do that.
Yes, because all these libraries (frameworks) help make easy the cross-browser fiddling with the DOM..
Something along the lines of (in jQuery)
$(document).ready( //when the DOM is loaded invoke the following function
function(){
$('combobox_selector').change( // when someone changes the value of the combobox invoke the following function
function(){
$('some_checkbox_selector').hide(); // hide some checkboxes..
$('some_other_checkbox_selector').show(); // show some other checkboxes..
}
)
}
);
The selector parts of the code above should be replaced by the logic that determines which items gets hidden and which shown when the value of the combobox changes..