Using a variable as a classname - javascript

I am trying to put a class name stored in a variable into my JQuery where I want the class to be, this should change which class is affected depending on the parameter passed through the URL query string.
I have built the class name and stored it in the 'param' variable as below.
var param = '".' + "proj" + location.search.substring(6) + '"';
$(param).css('display', 'inline');
And want to change the css on the class inside of it but this does not seem to work for me. Perhaps because it tries to change the css of the variable rather than what is inside of it.
If not how can I solve this or if so, is there a better way I could go about this?

You're confusing a string literal to be only enclosed by double quotes ", while that is not the case. Remove them
var param = '.' + "proj" + location.search.substring(6);

Set the param variable as the location substring (assuming that this substring is correctly getting the desired result from your URL) - then use that in the jQuery by joining with the common portion as follows.
var param = location.search.substring(6);
$('.proj' + param).css('display', 'inline');
You will need to ensure that a) you have the jQuery library and b) you have the jquery code wrapped in a $(document).ready(function(){}) wrapper.
Also - its usually better to add / remove a class rather than directly affecting the CSS in the jquery
var param = location.search.substring(6);
$('.proj' + param).addClass('displayInline');
//CSS
.displayInline{display: inline}

Related

Can I use the % symbol in javascript or it is considered aspecial character?

I need some help.
I need to know if it is possible to use the % symbol in javascript.
I ask this question because I have an html table with the following ID= MRRMFBSY_%_CEC.
When I try to keep the TD of the second TR of this table the results is undefined, so it seems that it doesnt find the Table with this ID and also when it is defined well.
See my code below:
function getColumnsVal(id) {
var header = $("table#" + id + " thead tr:eq(1)");
var header_fields = $("td", header);
// If ID = MRRMFBSY_%_CEC when I try to do an alert of one of my TD,
// example the firstone it returns undefined
alert(header_fields[0]);
}
The question if you think that the problem is the % symbol or not, because when I have the other ID it works perfectly.
Thanks in advance
% is a reserved character, since its an operator (see).
It's not recommended, but you can use it as ID in an HTML element.
See this example:
const element = document.getElementById('MRRMFBSY_%_CEC');
console.log(element); // returns the div element
<div id="MRRMFBSY_%_CEC">
My div with a specific ID
</div>
ISSUE:
There is a problem when using certain special symbols %, ^, +, #, and so on, inside a jquery selector. They should be escaped with a backslash(\) when used because they are also used in forming the queries for the selector.
For instance '#divid' is a valid string in JavaScript but would be confusing to use in jQuery if the string was an actual id of an element. To get this element you have to use
$('#\#divid').
So, in your case to get your target element, $('#MRRMFBSY_\%_CEC') will get the element easily. However, you can either insert the escape character(\) manually or programmatically as done in this post with regular expression. Therefore, using the square brackets or the native getElementById in this answer, is just another way out of this problem.
You can definitely use % symbol in an id attribute (or in any string) as you would use the dash symbol -. However, you cannot use either of both for JavaScript variable names as they are reserved symbols.
SOLUTION:
Though this question has its own intricacies, #misorude has pointed out a solution here. So there lies your answer. use the square brackets [] or document.getElementById like this.
function getColumnsVal(id) {
// var element = $('[id="' + id + '"]'); // this line is equivalent to the next line.
var element = $(document.getElementById(id));
var header = element.find($("thead tr:eq(1)"));
var header_fields = $("td", header);
// If ID = MRRMFBSY_%_CEC when I try to do an alert of one of my TD,
// example the firstone it returns undefined
alert(header_fields[0]);
}

Multiple attribute on href using onclick

I Tried this code to get multiple value in href but it does not work. any problem on this one ?
Print
You are missing a + sign between a string and a value.
The error is between this two
document.getElementById('CUS_CODE_MX').value '&AGE='
Correct format
document.getElementById('CUS_CODE_MX').value + '&AGE='
Every time you join a value and a string, you need a + sign
Even if you are joining two strings
'Hello'+ 'World'
Pliss avoid long js as an inline atribute. I will recommend you call a function as the onclick attribute.
Hope this helps :)
Print
It's better to use external script for that rather than inline format. And just add missing + to your code. Also, using variables would clean up the code.
function func() {
var CUS_CODE_MX = document.getElementById('CUS_CODE_MX').value;
var AGEID = document.getElementById('AGEID').value;
this.href = 'printsales.php?CUSTOMERID='+CUS_CODE_MX+'&AGE='+AGEID;
}
Print

string interpolation with jQuery

I'm trying to pass in the value of a variable to a jQuery selector but I can't seem to get it right. Here is what I'm working with:
jQuery
var state = $("<%= #state %>").selector;
that captures this value -> "pending"
I'm trying to pass that value into this selector:
jQuery
$(".snitches-index-header + .tags-column .#{state}_count")
As you can see I'm trying to pass the string into the jQuery selector. But this is not working as I expect. What am I doing wrong so that the selector would read:
$(".snitches-index-header + .tags-column .pending_count")
but obviously use the variable state instead of pending?
You can concatenate the variable with the string:
$(".snitches-index-header + .tags-column ." + state + "_count")
If you are trying to use a Template literal then you need to use backticks and the dollar sign not #:
$(`.snitches-index-header + .tags-column .${state}_count`)
its just basic js syntax issue.
$(".snitches-index-header + .tags-column ."+state+"_count");

My Jquery variable can't recognize other variable inside

I'm doing a function in Jquery and my code works when I manually add the term inside the find parentheses, the problem is when I change the value to some variable string.
Code:
var name = $("#certfieldf").val();
var ale = $("#dat").contents().find("td:contains('name')" ).siblings("td").eq(1).text();
How can I use name inside td:contains?
find("td:contains('" + name + "')" )

Replace element with text with javascript (no jquery)

I'm trying to create a link which has a dynamic value in it
http://my.link/index.php?action=huh&id=X
The X is what i want to replace dynamically with javascript variable.
I don't want to use jquery for it.
AND, i do not want to replace the whole url(href) because some part of URL needs to parsed by the template engine.
I think it'd be better if i inserted an element in place of X and replaced it with JS
only replace id
var elLink = document.getElementById("link");
elLink.href = elLink.href.replace(/id=(.*)/, function(){return "id=2"});
if id=X is constant
elLink.href = elLink.href.replace("id=X", "id=2");
You can use something like
document.getElementById("YourAnchorId").href= document.getElementById("YourAnchorId").href + id;
or
document.getElementById("YourAnchorId").href= document.getElementById("YourAnchorId").href +"?id" + id;
And that id variable get it from a textbox or however you need it.
And whats its the reason for not using jquery?

Categories

Resources