Use variable in new variable - javascript

I'm trying to add a variable within a new variable.
My first variable is:
var video5 = myObj.find('hosted-video-url').text(); (this returns a direct link to an mp4-file)
My second one should be something like:
var playvid5 = "playVideo('"video5"')";
Variable playvid5 should result "playVideo('http://link.to/video.mp4)')"
When I try to make variable playvid5 in the way I showed above, my whole code stops working and nothing is displayed. When I use var playvid5 = "playVideo('"+video5+"')";, the output is "playVideo('')", so that's not what I need either.
I'm trying to place the 2nd variable in this piece: ('Bekijk video')
In what way can I place the first variable in the second one?

Try to replace video5 string by its value.
var video5 = myObj.find('hosted-video-url').text();
var playvid5 = "playVideo('video5')";
playvid5 = playvid5.replace("video5", video5);

Why not just give the <a> tag an "id" value, drop it in the document, and then do:
$('#whatever').click(function() { playVideo( video5 ); });
Now, where you go to find the value, I don't think you've got the correct selector. Probably you need
var video5 = myObj.find('.hosted-video-url').text();
The "." before the string "hosted-video-url" is to select by class name. If "hosted-video-url" is an "id" and not a class, then you don't need to use .find(); you can select by "id" with $('#hosted-video-url').

Do you mean
var playvid5 = "playVideo('" + video5 + "')";
playvid5 will then be the string "playVideo('http://whatevervideo5is')
if video5 is blank then you will get "playVideo('')" so maybe that is the issue.

Related

Creating a link tag with parameters

Hi i have a link tag that i am creating from javascript. now i want to append a parameters to that link just like below example.so that when the user clicks that button it should go to that url along with the paramenters
var id="123456789";
var data = ' click' ;
this data tag i am appending to some other element.
now i can able to call /order/product. but when i give id also it is giving error "missing arguments"!!
can anyone please help me?
You'll have to unquote the string where the variable goes
var id = "123456789";
var data = ' click' ;
Or on really up-to-date JavaScript engines that support ES2015+ template literals:
var id = "123456789";
var data = ` click`;
But that won't work on any version of IE (does on Edge).
For easy create link you can use method link(str) of String:
var id="123456789";
var linkText = " click";
var href = "/order/product/" + id;
var data = linkText.link(href);
alert(data);
To make it easier both to write and read (and debug too), I'd recommend the following variant of how to organize the code:
var id = "1234566",
// It is more understandable now that hrefLink contains id concatenated with some other string
hrefLink = "/order/product/" + id,
link = document.createElemen('a');
link.href = hrefLink;
In this way you
See what variable means what
Control what your hrefLink consists of
Follow best practises when instead of multiple lines with var statement you explicitly "show" where the declaration section is:
var a = smth1,
b = smth2;
So just by looking at this code you easier understand that that is a code chunk of variables declaration
You just need to remove the quotes from id
just like below
var id="123456789";
var data = ' click' ;
If You have id within quotes means it will take as string not a variable name and so just remove the quotes. It will work

how to wrap a html string

Why won't this jquery object of p tags get wrapped by the div. I know the documentation says that it must be a dom element but there has to be a way?
WHY DOES IT ONLY ALERT test1?
http://jsfiddle.net/scwonubb/
var s = '<p>test1</p><p>test2</p><p>test3</p><p>test4</p><p>test5</p><p>test6</p><p>test</p>';
var $d = $(s).wrapAll('<div class="mydiv">');
var final = $d.html();
alert(final);
That is because you variable $d is the jQuery object of your variable s even if you have wrapped it. Try alerting the parent, it will be the div :
var final = $d.parent().html();
Fiddle : http://jsfiddle.net/scwonubb/1/
.html() gets the contents of what you have selected.
Change it to $d.parent().html() and it will work.

iterate inside a new JQuery object

I need to pass some html code as a parameter, however, before I pass it, I need to change some src attribute values.
I cannot use lastIndexOf or any of those to modify the html value since I don't know which value the src's will have.
What I'm trying to do then, is to create an object containing the html, and then alter that object only. I don't want to alter the actual webpage.
is this possible??
What I did first was this:
$('[myImages]').each(function() {
var urlImg = "../tmpFiles/fileName" + counter;
$(this).attr('src', urlImg);
counter++;
});
So finally, I had the desired code like this:
myformData = { theChartCode: $('#TheDivContainingTheHTML').html() }
However, this actually changes the image sources on the webpage, which I don't want to.
Then I thought I could create a JQuery object with the html so I could alter that object only like this:
var $jQueryObject = $($.parseHTML($('#TheDivContainingTheHTML').html()));
But now, I can't figure out how to iterate within that object in order to change the src attribute's values of the desired images.
Any help will be really appreciated ;)
There are several ways to do It. First would be creating a clone of target element and use the same on the Fly. You can do like below:
var Elem = $('#TheDivContainingTheHTML').clone();
now do whatever you want like iterate, alter,insert,remove.
var allImages =$(Elem).children("img");
Thanks Much!
Depending on when you want to change the object, solution will be different. Let's pretend you want to change it after you click another element in the page. Your code will look like that :
var clonedHTML;
$('#clickable-element').click(function() {
var $originalHTML = $(this).find('.html-block');
var $cloneHTML = $originalHTML.clone();
$cloneHTML.find('.my-image').attr('src', 'newSrcValue');
clonedHTML = $cloneHTML.clone();
return false; //Prevents click to be propagated
});
//Now you can use `clonedHTML`
The key point here is the clone method : http://api.jquery.com/clone/.
You can clone the elements:
var outerHTML = $collection.clone().attr('src', function(index) {
return "../tmpFiles/fileName" + index;
}).wrapAll('<div/>').parent().html();
You can also use the map method:
var arr = $collection.map(function(i) {
return $(this).clone().attr('src', '...').prop('outerHTML');
}).get();

How can I get the first element of this array in this var declaration?

If I do this with the element id 10_food_select:
var id = $(sel).attr("id").split("_");
I get an array like this:
["10", "food", "select"]
What I want is for id = 10 (or whatever the first element is). I can get this later by writing id[0], but how do I simply make id equal to the value of the first element of the split array, in that first var declaration?
[] is pretty much just like any other operator.
var id = $(sel).attr("id").split("_")[0];
Since everybody seems to be offering regular expressions now, here’s mine:
var id = +/[^_]*/.exec($(sel).prop("id"));
If it’s going to be a number, you can do this too:
var id = parseInt($(sel).prop("id"), 10);
I think that pretty much covers the useful one-liners.
Another way though
var id = +($(sel).attr("id").replace(/_.+$/,''));
You can do this:
var id = $(sel).attr("id").split("_")[0]; // returns 10
This will give you the proper id straight away, without even doing
var id = $(sel).attr("id").split("_"); // returns ["10", "food", "select"]
id = id[0]; // returns "10"
I think you are looking for this:
var id = $(sel).attr("id").split("_")[0];
Or you could use a regex replace if all you need is the first one from the split:
var id = sel.id.replace(/^([^_]+).*/, '$1')
Note: $(sel).attr('id') is not needed. sel.id is sufficient.

why is my string no string anymore after give it to a function?

SOLVED: read edit below
First of all i create a string like this:
var child_id = "childId"+this.id;
alert(child_id);
the alert shows the correct string. this.id is a string and i also made a temp variable and put it again into a string (var tmp_child_id = child_id.toString()) to get sure it is a string.
after this i give this string to the function goToNextNode with a href link like this:
this.svgImageDiv.innerHTML = '<img src="img/transparent.png"/>
in the function goToNextNode i fire an alert at first and it dont show the string like the alert above, it says "[Object HTMLDivElement]".
function goToNextNode(childId){
alert(childId);
}
What happend to my string and how do i transport the string correctly?
EDIT:
SOLVED:
when i do var child_id = this.id; instead of var child_id = "childId"+this.id; and put the "childId" string to the id in the function goToNextNode() everything works. Dont ask me why it does behave like this, i dont get it...
END EDIT
You forgot the quotes for the argument inside the brackets:
this.svgImageDiv.innerHTML = '<img src="img/transparent.png"/>';

Categories

Resources