Use a variable for a datatable - javascript

I'm trying to doing something in jquery.
This is a part of my jquery:
console.log(tableid);
var table = $('"#'+tableid+'"').DataTable();
tableid = "Data-user1"
table is null....
but when i put table = $("#Data-user1").DataTable() it works. Whats wrong?

Because how you're initializing the datatable is incorrect. You don't need to explicitly quote quotes in the selector; you just need to concatenate the strings like this:
var table = $("#" + tableid).DataTable();
That should work.

You mean this?
console.log(tableid);
var table = $('#' + tableid).DataTable();

ID Selector correct format -> $(“#id”)
Description: Selects a single element with the given id attribute.
var table = $('#' + tableid).DataTable();
Take a look at documentation: https://api.jquery.com/id-selector/

Related

How to get row data using row id

var $grid = $("#grid"),
var dataFromTheRow = jQuery('#grid').jqGrid ('getRowData', rowId);
Tried this but no luck.
As commented before rowId should be valid - i.e row with this id should exists. If you do not know the id of the rows you can use the method getDataIDs to see all the available id of the rows
You can try:
var dataFromTheRow = jQuery('#grid').getRowData(rowId);

How can I reuse result from JQuery for javascript textual matching?

I have html elements coming into function as string, then I am injecting elements into it as string however to my surprise it didn't work.
something like:
var replacement = $(row).find('td:last').append("<script type=\"text/javascript\"> function remove" + override.SessionKey + "(){ $('tr[session-key=\"" + override.SessionKey + "\"]').remove(); }</script><input type=\"button\" value = \"Remove\" onClick=\"remove" + override.SessionKey + "()\" />")
row.replace($(row).find('td:last')[0],replacement[0])
After some further investigation I have narrowed it down to matching failing in replace function, basically after you search with JQuery result cannot be used for textual matching
Here is an example of what I mean:
var r = "<tr class=\"hide\" session-key=\"SessionProductDataMotorEnrichmentSagaFactorScore\" session-key-data-type=\"Decimal\"><td id=\"tdDisplayName91\">SagaFactorScore</td><td id=\"tdValue91\"></td></tr>"
$('div').text(r.indexOf($(r).find('td:last')[0]));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div></div>
One would expect to always have a match as I am using contents of original html string.
How can I reuse result from JQuery for textual matching?
I think you're looking for .outerHTML:
var r = "<tr class=\"hide\" session-key=\"SessionProductDataMotorEnrichmentSagaFactorScore\" session-key-data-type=\"Decimal\"><td id=\"tdDisplayName91\">SagaFactorScore</td><td id=\"tdValue91\"></td></tr>"
$('div').text(r.indexOf($(r).find('td:last')[0].outerHTML));
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<div></div>
That is a terrible way of doing what you're trying to do.
var btn = $("<button></button>");
btn.attr("type","button").text("Remove").on("click",function() {
var tr = $(this).closest("tr");
tr.remove();
});
This creates the button with associated event bound directly to it. You can then append it to all rows, for instance, like so:
$("tr>td:last-child").append(function() {return btn.clone(true);});

How to add a javascript variable to div?

I have some code that is roughly along the lines of this:
exportValue = [];
function reduceArray() {
//does something
exportValue = parseFloat(exportValue)
}
From that, I get that exportValue is 73951. I then have to add that number to the page... so I tried both of these:
$("#exportValueDiv").append(exportValue);
$("#exportValueDiv").append("<li>" + exportValue + "</li>");
But that doesn't work.. I'm confused on how to add something like a variable to the DOM....
If I do something like:
$( "#exportValueDiv" ).append( "<li>value</li>")
it works, but I don't want to add a string, I want to add the value of the variable. I looked this up, but I'm still confused, so any help would be greatly appreciated!!!
Look into jQuery manipulation
$("#exportValueDiv").text(exportValue); //Replaces text of #exportValueDiv
$("#exportValueDiv").html('<span>'+exportValue+'</span>'); //Replaces inner html of #exportValueDiv
$("#exportValueDiv").append('<span>'+exportValue+'</span>'); //Adds to the inner html of #exportValueDiv
The .append() contract expects a DOM element or HTML String. You will need to do:
$("#exportValueDiv").append("<div>" + exportValue + "</div>");
Try this:
$("#exportValueDiv").append("<div>" + exportValue + "</div>");
The following appends your variable to a div that already has information:
<div id="exportValueDiv">
<p>
Some information.
</p>
</div>
<script>
var exportValue = "Hello world.";
$("#exportValueDiv").append('<p>'+ exportValue +'</p>');
</script>
https://jsfiddle.net/supadave57/f9tqw0d4/

Using a variable in jquery selector

I want to change the src of an image file. Tried the below using with the variable, but it actually doesnt change it. Where did I made a mistake on using variable ?
jquery
var p2begen = "416";
$("[id=i'" + p2begen + "']").attr("src", "check.png");
html
<img src="nocheck.png" id="i416" \>
To reference an id in jquery you need to add the #. See here in the jquery docs. It is important to note that ids must be unique, but you can use a class on as many elements as you like.
var p2begen = "416";
$("#i" + p2begen).attr("src", "check.png");
If you wish to use classes instead your code should look like this:
<img src="nocheck.png" class="i416" \>
var p2begen = "416";
$(".i" + p2begen).attr("src", "check.png");
add the # at the start.
var p2begen = "416";
$("#i" + p2begen).attr("src", "check.png");
if you want to stick with the attribute selector, use:-
var p2begen = "416";
$("[id='#i" + p2begen + "']").attr("src", "check.png");
by adding the # and moving the ' back 2 places.
The simplest way for doing that is to use selector for ids, and your selector will looks like this:
var p2begen = "416";
$('#i' + p2begen).attr("src", "check.png");

Javascript handle 2 data attribute

I need to use data attribute in my html
like
<div id="userlist" data-user="A.A.M"></div>
then I need to alert the data-user
I used
var userlist = document.getElementById("userlist");
var show = userlist.getAttribute("data-user");
alert(show);
My question is how to handle many data-user in the html like
<div id="userlist" data-user="A.A.M"></div>
<div id="userlist2" data-user="A.A.M2"></div>
to alert A.A.M and A.A.M2
Thanks in advance and sorry for my bad English.
You could select your elements by attribute.
$("div[data-user]").each(function() {
var user = $(this).data("user");
alert(user);
});
If you have multiple attributes per element (<div data-user='something' data-another='another'></div>), you can also access those in the same way:
$("div[data-user]").each(function() {
var user = $(this).data("user");
var another = $(this).data("another");
alert(user + ", another: " + another);
});
you know how to alert 1, alert 2:
alert at the same time:
var data1 = document.getElementById("userlist").getAttribute("data-user");
var data2 = document.getElementById("userlist2").getAttribute("data-user");
var data = data1 +"\n" + data2; //"\n" can be other separators you like
alert(data)
if you have many of them, you can use jQuery:
add this in your , before any other js code.
<script src="http://code.jquery.com/jquery-2.1.1.min.js"></script>
then :
$("div[id^=userlist]").each(function(){
alert($(this).attr("data-user"));
});
Calling getElementById on both should work. If you want to iterate you can try to use getElementsByTagName or getElementsByClassName. If you want to select any arbitrary element with the attribute data-user, you can either use querySelectorAll, or check out jQuery, and use $("[data-user]") as a selector.
Does that answer your question?

Categories

Resources