how to use variable inside .wrap() - javascript

This might sound silly but i'm having trouble printing a variable in this code -
var clsuffix = "something";
$("#box").wrap('<div class="boxy" />');
I want to print the clsuffix variable inside the class=" here "
so it could be like
<div class="boxysomething">
But when i use the variable inside class="", it comes up as it is (not being treated as variable)

Just concatenate it in. Ultimately, your goal is to build a string consisting of the literal "boxy" and the contents of the variable clsuffix. That is done with "boxy" + clsuffix in JavaScript:
$("#box").wrap('<div class="boxy' + clsuffix + '" />');
If you were just trying to insert the variable into the string (such as you might do in a PHP double-quoted string), it won't be interpreted by JavaScript:
// Doesn't work in JavaScript:
$("#box").wrap('<div class="boxyclsuffix" />');

I'd suggest:
$('#box').wrap('<div />', {'class' : 'boxy' + cslsuffix});
Which effectively creates the div element, and uses the map to assign values to the defined attributes.

Related

Using a variable as a classname

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}

Store data having a double quote in a javascript var

I have a var in script which has data like . But when i add this to another variable its not working.
var x = '32"';
onclick="javascript:selectSize(' + "'" + x + "'" + ');"
I want
onclick="javascript:selectSize('32"');"
But it becomes
onclick="javascript:selectSize('32"');""=""
i don't know whats happening
onclick="javascript:selectSize('32"');"
^ ^
The HTML parser will parse the attribute value before passing the value of it to the JS engine for execution.
You are using a " to delimit the attribute value.
The second " ends the attribute value.
If you want to use " as data in an attribute value delimited with " then you must express it as an entity (e.g. ").
var html_x = x.replace(/"/g, """);
Escaping becomes very painful when you start generating nested languages.
You have JavaScript embedded in HTML embedded in JavaScript.
Avoid mashing strings together to construct your DOM. Use DOM methods directly instead.
var x = '32"';
var button = document.createElement("button");
button.addEventListener("click", function (event) {
selectSize(x);
});
from comment, Make use of encode/decode URI Component as follows
var a=encodeURIComponent('abc"');
console.log(a);
console.log(decodeURIComponent(a));

How to use paratheses inside a Javascript string

I'm writing a function for creating images from an array and I need to put some extensive HTML inside a javascript string. Unfortunately whenever I use parentheses, it throws off the whole thing.
Any help?
This:
listItem.innerHTML = "<img src='" + listData[i] + "'>"; */
This doesn't:
listItem.innerHTML = "<div class='item square' style='background-image: url(" + listData[i] + ")'></div>";
Your code depends on listData[i] being valid when tossed into three places:
CSS’s url()
CSS
HTML
It shouldn’t. Building HTML in JavaScript isn’t a very good idea in the first place. If you truly have enough markup that must be built dynamically that you can’t use the DOM, use a template engine that knows its target. In this and most cases, use the DOM!
var itemImage = document.createElement('div');
itemImage.className = 'item square';
itemImage.style.backgroundImage = 'url("' + encodeURI(listData[i]) + '")';
listItem.appendChild(itemImage);
This creates one element, assigns values to some of its properties, and appends it to listItem, and it will always do that; you don’t have to hope that your quotes matched up properly or that you remembered to escape absolutely everything.
Footnote: the combination of encodeURI and double quotes around the url() value will almost certainly fix any potential problem – quotes or parentheses – regardless of which method you use to add them, but that doesn’t mean you should keep using innerHTML.

Creating a JavaScript global array with static elements?

Creating a JavaScript global array with static elements?
The problem isn't that removeFunction doesn't have access to bigArray. The problem is in your onclick attribute, and the id you're putting on the link:
$('#div').append("<a href='#' id='bigArray[i]' onclick='removeFunction(bigArray[i])'>Element bigArray[i]</a><br />");
In the onclick, you're referring to i, but A) I'm guessing i isn't a global, and B) Even if it is, it will not have the value of i that you used to render that row. The code will look for the value of a global i variable as of when the link is clicked.
Separately, you're creating multiple elements with the same id value, which is bigArray[i] (not bigArray[0], bigArray[1], etc.)
You could use the value instead, like this:
$('#div').append("<a href='#' id='bigArray[" + i + "]' onclick='removeFunction(" + i + ")'>Element bigArray[i]</a><br />");
The changes there are:
For the id, I changed it to: "...id='bigArray[" + i + "]'", which will output id='bigArray[0]', then id='bigArray[1]', etc., instead of repeatedly outputting id='bigArray[i]' (literally.
I just pass the index into removeFunction, again by putting the value there, not a reference to the variable i: "... onclick='removeFunction(" + i + ")' ..."
Then your removeFunction would be:
function removeFunction(i) { // <== i, not id
bigArray.splice(i, 1); // <== real code, not pseudocode
renderArray(bigArray);
}
I would not recommend doing it that way, but it's the minimal fix.
There's no need to pass bigArray to anything. It's a global.
FWIW, I would recommend refactoring so you don't have to re-render the whole thing every time.
Define a variable at the global scope first that will hold your "bigArray", then assign the value to it once you receive the data through your ajax call.
var bigArray;
$.ajax({
bigArray = bigArrayFromAjax;
renderArray(bigArray);
});
... then your other functions should have access to it.

Dynamic string wont change when changing the values that make it

http://jsfiddle.net/zzTsc/
I have a JSON that holds some values which get concatenated into a string but when I change the value of the JSON the string doesn't take the name values. How can I make the string take the new values without re-declaring the same string?
See I could easily put string = name.first + "<br />"+name.last; right below where I change the JSON value but then when I wanna edit the format of that string I'll have to change it twice.
That's not how variables work. You have to set the value of string again for it to update.
Here's an improved version so you don't have to change it twice if you want to edit something:
function generateString(name) {
return name.first + "<br />"+name.last;
}
var string = generateString(name);
​Demo
That's not going to work as you describe it, but you could declare a function which returns the appropriate string.
So instead of
string = name.first + "<br />" + name.last;
You'd have:
var stringfunction = function() {return name.first + "<br />" + name.last;}
and when you wanted to use it you'd call it:
alert(string); //old
alert(stringfunction()); //new
EDIT: I just realized you're talking about changing the format (presumably at runtime). There are a number of ways to use string formats in javascript, meaning that you could have a "format" variable used inside the stringfunction, which you could change at runtime to modify how the resulting string is formatted. It's been too long since I used one of those tools though, so I'll leave it to someone else to explain how to do string formatting in javascript.
This is because your string is a basic type and therefore holds the actual data instead of a pointer. When you change the data you think should change the string, it only changes the data. This can be seen by just re-issuing the code used to construct the string
$('#test').empty().append(name.first + "<br />"+name.last);
http://jsfiddle.net/zzTsc/4/

Categories

Resources