I'm inserting images into dom with javascript and I would like to pass in the second classname and some other properties of the images while calling the function.
So I have functions containing code this:
function movieCreator(movieName){
'<img class="clip terminator" src="images/terminator.png" onclick="imageControl(this);" alt="terminator" />','
};
function movieCreator(movieName){
'<img class="clip rambo" src="images/rambo.png" onclick="imageControl(this);" alt="rambo" />'
};
There is some other stuff inside those functions too but I'm trying to simplify the question a bit. I would like to pass in the words "terminator" and "rambo" while calling the functions like
movieCreator(terminator);
movieCreator(rambo);
but my head gets really stuck while I try to think where to place the quotes and things like that in order to replace those words correctly from the code.
So my question is this: what would be the correct syntax of replacing the word "terminator" with a dynamical value that is passed in when the function is called?
Call function like
movieCreator('terminator');
movieCreator('rambo');
Create function like
function movieCreator(movieName){
'<img class="clip '+movieName+'" src="images/'+movieName+'.png" onclick="imageControl(this);" alt="'+movieName+'" />','
};
Something like this?
'<img class="clip ' + movieName + '" src="images/' + movieName + '.png" onclick="imageControl(this);" alt="' + movieName + '" />'
function movieCreator(movieName) {
return '<img class="clip ' + movieName + '" src="images/' + movieName + '.png" onclick="imageControl(this);" alt="' + movieName + '" />';
};
movieCreator('terminator');
movieCreator('rambo');
Try this
function movieCreator(movieName){
var imgTag= '<img class="clip '+ movieName +'" src="images/'+ movieName + '.png" onclick="imageControl(this);" alt="'+ movieName+'" />'
};
Simple:
function movieCreator(movieName){
alert(movieName);
}
movieCreator('terminator');
movieCreator('rambo');
You're creating a dependency on the file name / location with this kind of code. What happens if the sever admin moves the images folder? Or if you misspell a movie title when calling the function?
This kind of situation us normally better suited for server code to generate based on a data source of actual movie information (including file name and location).
Related
I have the following output code, which is taking information from a JSON variable and presenting in a map:
marker.info_window_content = place.image + '<br/>' +"<h4>" + place.name + "</h4>" + place.description + '<br/>' + place.belongs_to + '<br/>' + '<br/>' + place.categories
self.markers[place.id] = marker
The output however is not displaying the image, but instead the link to the image.
Like so:
https://imagelocationishere.jpg
I have tried the following, which will show an image icon which makes me think that I am close, but I am still unable to display the image.
'<img src=' + place.image + '/>'
How do I adjust so I can display the image, or even just display the output better?
Thank you.
Forgot to add the double quotes.
Here is the solution:
'<img src= " ' + place.image + ' " />'
i am creating a search suggestion and i want to create a div and put suggestion elements like full name, image and ... in it.
so i have a empty div in my HTML code that my suggestions will be added to it.
<input type="text" name="query" autocomplete="off" id="base_main_search_box">
<button type="button" value="" id="base_main_search_box_button"></button>
<div id="main_searchSuggestion">
</div>
i want to appear search suggestions when user key up in input type.
so i create jQuery function.
my jQuery function is:
$('#base_main_search_box').keyup(function () {
$.ajax({url:'http://localhost:8000/search_suggestion/',success:function(result){
$(addSuggestion).append('<div class="base_searchSuggestionItem">' +
'<img src="' + result.movie_images[i] + '" class="base_searchSuggestionItem_image">' +
'<div class="base_searchSuggestionItem_info">' +
'<p class="base_searchSuggestionItem_info_name">' +
'<a href="">' +
result.movie_names[0] +
'</a>' +
'(' +
result.movie_yearProduction[0] +
')' +
'</p>' +
'<p class="base_searchSuggestionItem_info_description">' +
result.movie_descriptions[0] +
'</p>' +
'</div>' +
'</div>');
console.log('final: '+addSuggestion.innerHTML);
}
}});
});
the output is:
"final: undefined"
it is not correct.
As per the docs
.html() is not available on XML documents so you need to add it to DOM before setting or checking its HTML.
change the sequence as following
$(addSuggestion).append(search_item);
$(search_item).html(
div_innerHTML
);
console.log('div_innerHTML: '+div_innerHTML);
console.log('search_item: '+$(search_item).innerHTML);
I am trying to insert an email link using jquery, but if the email body has a & in it, it will not work.
$('#em_button').html('<img src="' + homeUrl + '/' + tUrl + '/img/email.png" title="Email this photo" />');
The part that is breaking it is &img=. I've tried using & but that didnt work either. Any suggestions?
Note: If there is no &, everything works fine.
You can try this, hope it works
'%26img='
Without knowing what is in js_images[getImg], it's hard to say what is going wrong.
One thing to keep in mind is that you should always encode components before creating a URL. For example:
var x = encodeURIComponent(js_images[getImg].title)
$('#em_button').html('<a href="mailto:?subject=A Photo: '+ x +'&body...')
Furthermore, if you're creating something like a link, you might want to make things clearer by writing it as follows:
var url = 'mailto:subject=A Photo: ' + encodeURIComponent(js_images[getImg].title) +
'&body=I thought you would like this photo: ' + encodeURIComponent(thisPage) +
'&id=' + encodeURIComponent(getGall) +
'&img=' + encodeURIComponent(js_images[getImg].filename);
var src = encodeURIComponent(homeUrl) + '/' +
encodeURIComponent(tUrl) + '/img/email.png'
var $a = $('<a/>', {
href: url
});
var $img = $('<img/>', {
src: src,
title: 'Email this photo'
});
$a.append($img);
$('#em_button').html($a);
$('#em_button').html('<img src="' + homeUrl + '/' + tUrl + '/img/email.png" title="Email this photo" />');
If you just append the URL parameters and the body text into one string, the & from inside the body text would be parsed as URL argument. In PHP i would use urlencode to encode occurrences of such characters into %xx-values.
Looking at the answer of Константин Рекунов, I would assume you could use encodeURIComponent to encode the body contents.
encodeURIComponent( thisPage + '?id=' + getGall + '&img=' + js_images[getImg].filename )
See: https://developer.mozilla.org/en-US/docs/JavaScript/Reference/Global_Objects/encodeURIComponent
You could avoid that problem by using URL rewriting on your server for the image files.
Instead of:
thisPage + '?id=' + getGall + '&img=' + js_images[getImg].filename
…it might be:
thisPage + '/' + getGall + '/img/' + js_images[getImg].filename
I think your problem is you have a second ? in your query string.
You should substitute the second ? with &. Also all your & should be written as &
$('#em_button').html('<img src="' + homeUrl + '/' + tUrl + '/img/email.png" title="Email this photo" />');
Instead of using "&" try using &
use +encodeURIComponent('&')+
I saw in the firebug the ID is like this whereas I want the value of existingProductArray[i] to be the ID. What am I doing wrong?
var html ='<li id="existingProductArray[i]">'
+ '<input type="image" id="existingProductArray[i]" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ existingProductArray[i]
+ '</li>';
Try this
var id = existingProductArray[i];
var html ='<li id="' + id + '">'
+ '<input type="image" id="' + id + '" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ id
+ '</li>';
But
ID hence the name should be unique you are giving 2 elements the same ID ( that's a bad idea )
Try changing:
+ '<input type="image" id="existingProductArray[i]" src="...>'
to
+ '<input type="image" id="'+existingProductArray[i]+'" src="...>'
So in your line of code it was just using it as text string. You need to break out of the string and do it.
You just need to close the quotes and concatenate it in with +:
var html ='<li id="existingProductArray[i]">'
+ '<input type="image" id="' + existingProductArray[i] + '" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ existingProductArray[i]
+ '</li>';
your reference is inside the quotations
var html ='<li id="'+existingProductArray[i]+'">'
+ '<input type="image" id="'+existingProductArray[i]+'" src="images/subtract.png" onclick="javascript:deleteProduct(this.id)" href="#">'
+ existingProductArray[i]
+ '</li>';
I stumbled upon the same problem, I know my problem is not 100% the same as yours but I bet I can help other people out who search for this kind of problem.
I was trying to add a variable as a ID name for a div. I tried several methods mentioned above but none of those seemed to work.
I did the following:
div.id = array[i];
which in your case would have simply been:
id=existingProductArray[i];
No " " or + needed, don't forget to declare the i variable. This might be very obvious for some people with more experience.
I am using a dynamic jquery carousel to show thumbnail images in the home page....The carousel is working fine...and i want to add a tooltip to each image....for this i am using jquery tooltip....on hover tooltip should display the original image,uploaded by and so on...
The javascript that adds the tooltip to each image is as follows...
function mycarousel_getItemHTML(url)
{
var url= url.split(",");
return '<img src="' + url[0] + '" width="75" height="75" alt="" />';
};
url[5]=original img src
url[1]=title
url[6]=category name
url[2]=no of views
url[3]=uploaded by
url[0]=thumbnail img source
the above javascript gives me the following error
missing ) after argument list
how can i escape single and double quote properly...Please help me...-
I think the onmouseover portion is wrong, and you want:
onmouseover="Tip(\'<img src=\\\''+url[5]+'\\\' /><br/><b>'+url[1]+'</b><br />Category:'+url[6]+'<br/>Views:'+url[2]+'<br/>Uploaded by:'+url[3]+'\')"
Let me know if that doesn't work - my head's hurting from trying to be a JavaScript interpreter. I think that's on the right lines though.
p.s. I fixed your <img> tag - I think in general <img> tags should be self-closing <img... />, not <img...></img>.
Assuming the HTML " entity gets interpreted properly (and reformatting so people can see what's going on.):
function mycarousel_getItemHTML(url)
{
var url= url.split(",");
// wrapping attributes in double-quotes, so use double-quote
// entity within attribute values:
return '<a href="' + url[4] + '" ' +
'onmouseover="Tip(\'<img src="' + url[5]+'"/><br/>' +
'<b>' + url[1] + '</b><br />' +
'Category:' + url[6] + '<br/>' +
'Views:' + url[2] + '<br/>' +
'Uploaded by:' + url[3] + '\')" ' +
'onmouseout="UnTip()">';
};
Note: you should probably entity-encode all the < to < inside the onmouseover attribute too. That might leave less scope for browsers to bork the tooltip