I use jquery ajax. I have created function: getDatalist ();
This function displays a table with data. I use this function on multiple places on your page. When you make a change in one table, I would like to see change in others. How to rebind all the tables? Is it a trick?
Thank you very much.
getDatalist: function(dataid)
{
$.post('ActionScripts/Load.php',{
}, function(data) {
$(dataid).html(data);
});
},
if you have all table ids or classes you can use each.
var ids = ["id1", "id2", "id3"]
getDatalist: function(dataid)
{
$.post('ActionScripts/Load.php',{
}, function(data) {
$.each(ids,function(index, value){
$("#"+value).html(data);
})
// or u can give same class name table then find and re insert them.
//for same class usage
//$(".commonTable").each(function(){
//$(this).html(data);
//})
});
}
Related
I have this datatable that is created inside a function call. But if I want to create new rows based on event listeners like this, it gives an error that the table variable is undefined, which is understandable because it is inside a function call and not global. So how do I create a workaround for this and add event listeners under $(document).ready() section?
The structure of my JS file is very shabby, but it's intended to be in that way.
$(document).ready(function()
{
var table=null;
$('#button').click(function()
{
callfunction1();
}
callfunction1()
{
$.ajax({
'success': function(response) //response contains the plain table
{
createDatatable(response)
}
})
}
createDatatable(response)
{
$('#division').html(response); //creating the plain table
table=$('#tableId').Datatable({}); //converting it to datatable
}
//I want to add event listeners here, because if I add
//it anywhere else, it doesn't work, because basically
//it's a function call.
}
You can create a instance of the table var in a wider scope, example:
//the table is now a window object variable window.table
var table = null;
$(document).ready(function()
{
$('#button').click(function()
{
callfunction1();
}
callfunction1()
{
$.ajax({
'success': createDatatable()
})
}
createDatatable()
{
table=$('#tableId').Datatable({})
}
//the table is binded in the window scope so you can use in your event listeners
}
The following should work if you choose one var table declaration and delete the other
var table; //accessible everywhere
$(document).ready(function()
{
var table; //accessible anywhere in this function
$('#button').click(function() {
callfunction1();
}); //); were missing
function callfunction1 ()
{
$.ajax({
'success': createDatatable //no () here, you want to pass a function, not the result of a function call
});
}
function createDatatable()
{
table=$('#tableId').Datatable({});
}
}
This should give no errors, but i'm not sure if this is what you want to do.
So after all your answers(which I am very grateful for) , I have found out a different approach for it. As per documentation here, I added a $.ajax({}_.done() (this is as good as accessing the dataTable variable outside ajax call) function to host my event listener for accessing my dataTable.
Once again, I thank you all for the answers.
Edit: As requested for the correct solution.
$(document).ready(function()
{
var table=null;
$('#button').click(function()
{
callfunction1();
}
callfunction1()
{
$.ajax({
'success': function(response) //response contains the plain table
{
createDatatable(response)
}
}).done(function()
{
//add event listener here,You can access the table variable here. but you can not access the variable outside, instead just pass the variable to another function.
console.log(table);//this will work.
});
}
createDatatable(response)
{
$('#division').html(response); //creating the plain table
table=$('#tableId').Datatable({}); //converting it to datatable
}
}
In an HTML file, I use JS to generate table rows to show data returned by database:
function appendResult(data) {
var result = JSON.parse(data);
var row = result.length;
if (row == 0) {
$("#productList").html("No matching result.");
} else {
$("#productList").html("");
var i = 0;
while (i < row) {
// For each return record, create a new row, then write data into cell accordingly. New records are always written to last cell.
$("#productList").append("<tr class='hightLight'><td class='sku'></td><td class='productName'></td><td class='description'></td><td class='qtyPerCtn'></td><td class='weight'></td><td class='upc'></td><td class='gtin'></td><td class='vendorCode'></td><td class='note'></td></tr>");
$("td.sku").last().html(result[i]["sku"]);
$("td.productName").last().html(result[i]["productName"]);
$("td.description").last().html(result[i]["description"]);
$("td.qtyPerCtn").last().html(result[i]["qtyPerCtn"]);
$("td.weight").last().html(result[i]["masterWeightLb"]);
$("td.upc").last().html(result[i]["UPC"]);
$("td.gtin").last().html(result[i]["gtin"]);
$("td.vendorCode").last().html(result[i]["vendorCode"]);
$("td.note").last().html(result[i]["note"]);
i++;
}
}
}
Then I have a function to highlight the row when the mouse rolls over it:
// high light row when mouse roll over
$(document).ready(function () {
$(".hightLight").hover(function () {
$(this).addClass("highLightOnRollOver");
}, function () {
$(this).removeClass("highLightOnRollOver");
});
});
But apparently this doesn't work. The highlight function doesn't work. But if I put a row in plain html, it works:
<table>
<tr class="hightLight"><td>test</td></tr>
</table>
Does it mean JS functions can't identify the elements generated by JS? How can I solve this problem?
This will work even if you add elements after the dom is ready:
// high light row when mouse roll over
$(document).ready(function () {
$("table")
.on('mouseenter', ".hightLight", function () {
$(this).addClass("highLightOnRollOver");
})
.on('mouseleave', ".hightLight", function () {
$(this).removeClass("highLightOnRollOver");
});
});
You'll have to use delegation, like this:
$(document).on("hover", ".hightLight", function () {
If the javascript is sourced before the DOM is created, it wont see it. Delegation gets around it by saying "look for a hover within document, if that hover is within .hightLight, then do this...
You could replace also document with a closer parent of .hightLight... it looks like #productList would probably work well.
I want to remove a parameter from the store of a comboBox before it shows to the user, I know more or less how to do it but it´s not working properly, any one could give some solution? Maybe I need to select an specific event, but I tried with all the events that make sense and didn´t work, Here is the code:
var combo = fwk.ctrl.form.ComboBox({
storeConfig: {
url: app.bo.type.type_find
,fields: ['id', 'code']
}
,comboBoxConfig:{
triggerAction: 'all'
,allowBlank:false
}
});
combo.on('beforeshow', function() {
combo.store.removeAt(2);
});
Thank you very much!!!
Try removing it inside 'afterRender' event,
sample code:
listeners: {
'afterrender': function(comboRef) {
comboRef.store.removeAt(2);
}
}
Here you have the solution,
combo.getStore().load({
callback: function (r, options, success) {
if (success) {
combo.store.removeAt(2);
}
}
});
Is necessary to change it before the load of the store because first is painted the combobox and then is charged with the store data I was erasing data in a empty store.
I have created one jquery jstree and it's working fine. Now the problem is how to get the the checked nodes details.
For Creating JStree The code is:
$(function () {
$("#tree").jstree({
"json_data" : {
"data" : [
{"data":"pe_opensourcescanning","id":0,"pId":-1,"children": [{"data":"tags","id":30,"pid":0},{"data":"branches","id":29,"pid":0},{"data":"trunk","id":1,"pid":0,"children":[{"data":"import-export","id":28,"pid":1},{"data":"custom_development","id":12,"pid":1},{"data":"Connectors","id":7,"pid":1},{"data":"support","id":6,"pid":1},{"data":"Installation-Configuration","id":5,"pid":1},{"data":"backup","id":2,"pid":1}]}]}
]
},
"plugins" : [ "themes", "json_data", "checkbox", "ui" ]
}).bind("select_node.jstree", function (e, data) { alert(data.rslt.obj.data("id")); });
Now while getting checked nodes i need all the attributes values for those checked elements. Say like for "tags" the json object looks like {"data":"tags","id":30,"pid":0}, so if user select tag i need the value of "data" And "id". i have tried to write some code but unfortunately that is not working.
Getting Checked Nodes.
$("#" +div2.childNodes[i].id).jstree("get_checked",null,true).each
(function () {
alert(this.data);
alert(this.id);
});
Kindly give me a solution.
As the Author of jstree (Ivan Bozhanov) points out on google-Groups Discussion regarding get_checked, it can also be achieved using the following:
$('#tree').jstree(true).get_selected();
This returns a List of the IDs, e.g. ["j1_2"] or ["j1_2", "j1_3", "j1_1"]
Check out the fiddle by Ivan Bozhanov himself on: jsfiddle-Example get_selected
function submitMe(){
var checked_ids = [];
$("#server_tree").jstree("get_checked",null,true).each
(function () {
checked_ids.push(this.id);
});
doStuff(checked_ids);
Go through this once
jstree google groups
$.each($("#jstree_demo_div").jstree("get_checked",true),function(){alert(this.id);});
$('#dvTreeStructure').on('changed.jstree', function (e, data) {
var i, j, r = [];
for (i = 0, j = data.selected.length; i < j; i++) {
r.push(data.instance.get_node(data.selected[i]).text.trim());
}
alert('Selected: ' + r.join(', '));
}
While using get_checked or get_selected pass the boolean as false to get the whole node where if you send as true, it will return only node Ids.
You have a look at https://www.jstree.com/api/#/?q=checkbox&f=get_checked([full])
You can also have a look at https://everyething.com/Example-of-jsTree-to-get-all-checked-nodes to get an idea of different kind of selected.
I have the following js:
$('.overview_table_header').click(function() {
header = $(this)
$.get("/sort", { col: $.trim($(this).text()), sort: header.data('sort') },
function(data) {
$('#pages').html(data.html);
header.data('sort', data.sort);
}
);
});
Which passes 2 parameters (A get request to /sort): {"col"=>"DATA", "sort"=>"OTHERDATA"}
I'm new to JQuery and Ajax. How do I store The above DATA and OTHERDATA in a hidden field tag within my html? Is using JQuery.data() the best method to accomplish this task?
.data() is what I would use. You can do:
$(header).data({"col":"DATA", "sort":"OTHERDATA"});
or
$(header).data("col","DATA");
$(header).data("sort","OTHERDATA");