I am populating a list from php, and using the onClick event to run a javascript function once the link has been clicked, I need to associate the value for the engine to the link that has been clicked..and at the moment it is by having the value assigned to the TITLE tag as shown in the code below, I know this is not the proper way of doing this, so instead how could I store the values on the page and be able to access them in the javascript function, so depending on the link that is clicked it retrieves the corresponding value, I was thinking of a storing them as a javascript array or object? or something associative so I could access them from the id of the link so if the link is clicked with the id of e213, once it is clicked then inside the javascript function I could use, 'objectname'.value + 'idvariable', and the property names would be "value" + the id's of the links.
Any help would be great thanks!
<?php
connect();
$sql = "SELECT engine_id, engine, image, value FROM engines";
$result = mysql_query($sql);
while ($row=mysql_fetch_array($result) ) {
echo "<li><a style=\"color:#FF6600;\" id='e".$row['engine_id']."' title = '".$row['value']."' onclick='return enginepic(this)' onfocus='this.hideFocus=true;' href='".$row['image']."'>".$row['engine']."</a></li>";
}
?>
HTML5 allows attributes that start data- for this case. Eg...
<div data-whatever-property="some value" id="some-id"></div>
You can then fetch this data using:
document.getElementById('some-id').getAttribute('data-whatever-property')
Or with jquery...
$('#some-id').attr('data-whatever-property')
Or even easier...
$('#some-id').data('whateverProperty')
Notice that the data method on jQuery turns one-two-three to oneTwoThree. This is conforming to the dataset part of the html5 spec.
Also, consider adding your events via JavaScript rather than using onclick/onfocus/etc attributes. For a list of links, you'll get better performance out of delegated events, jquery makes these easy.
You could just pass in the data you want to the enginepic function as a parameter.
Your onclick would look something like this
onclick='return enginepic(this, \''" . $row['value'] . "\')
And your function declarations would look something like
function enginepic(oLink, data){
.
.
.
}
Related
My JavaScript function is called by several CGI scripts, and thus I would like to pass the script-specific HTML id attribute as an argument to my function. Then, in the function body, I would like to use the parameter holding this argument in the jQuery shortcut. However, my parameter keeps getting interpreted as a string literal when I use the jQuery syntax.
Writing out the long-form JavaScript to use the parameter works, but because I use the jQuery shortcut everywhere else, I would like to use the same syntax for this case as well. Each page can have multiple tables, so selecting on the table element will not work. I cannot find any documentation for what I am trying to accomplish. In Perl, this would be similar to using ${parameter_name} instead of $parameter_name.
deleteItem.cgi (Perl):
my $rows;
my $counter = 0;
for (#array) {
$rows .= "
<tr id='del$counter' class='bg-dark' onclick='setRowBackground(\'deleteItems\', $counter)'>
<td>$_</td>
</tr>
";
$counter++;
}
<head>
<script type="text/javascript" src="setBackground.js"></script>
</head>
<body>
<table id="deleteItems" class="bg-dark">
$rows
</table>
</body>
setBackground.js:
$(function() {
// this uses the id name and is what I am trying to avoid so that
setBackground.js can be used by multiple CGI scripts //
$('#deleteItems').DataTable();
});
function setRowBackground(tableID, rowNumber) {
// after removing class "bg-dark"
none of these work: //
$("#tableID").DataTable().row(rowNumber).nodes().to$().addClass("bg-white");
$(#"tableID").DataTable().row(rowNumber).nodes().to$().addClass("bg-white");
$(#tableID).DataTable().row(rowNumber).nodes().to$().addClass("bg-white");
$(#(tableID)).DataTable().row(rowNumber).nodes().to$().addClass("bg-white");
// these do work:
...but this one can only be used for a table with this id, and table ids
are not consistent accross multiple CGI scripts! //
$(#deleteItems).DataTable().row(rowNumber).nodes().to$().addClass("bg-white");
// ...but this one is what I am trying to avoid since the rest of the code
uses jQuery. //
document.getElementById(tableId).DataTable().row(rowNumber).nodes().to$().addClass("bg-white");
}
$("#" + tableID)
Thank you, Barmar for the solution! Concatenation did not occur to me.
I have following code which i echo (print) via PHP on every video for thumbnail preview. All div ids are numeric like id="1246575". Is there a foreach like possibility to achieve this for example, for every numeric div do this function in javascript or jquery?
$(function(){
$("#'.$id.'").mouseenter(function(){
fadeimg("'.$json.'","'.$id.'","'.$site.'");
});
});
use the PHP to add the needed stuff as data attribute to the tag
... "<sometag data-targetID='".$id."' class="fadeable" />"; and give the tags a class
use the jQuery (delegated if needed)
$(".fadeable").mouseenter(function(){ var id = $(this).data("targetID"); fadeImg(id);
You can pass $json, $id and $site variables as data-* attributes and retrieve it's values on mouseenter and pass to a function like this:
echo "<div id='123' data-json='$json' data-id='$id' data-site='$site'></div>"
And then:
$('div[id]').filter(function(){
return (this.id && this.id.match(/^[0-9]+$/))
}).on('mouseenter', function(){
var data = $(this).data();
fadeimg(data.json, data.id, data.site);
})
I hope someone has an answer for me,
I am currently trying to create a PHP product page for my shop website, I have an sql table that stores the name of an image prefix eg if the image file is 'test_1.png' then the table stores 'test'. using embedded php
src="images/shop/<?php echo $row['item_img'], '_1.png';?>"></img>
what I would like to do is using js, dynamically update the src on a mouse click.
something like eg.
var imgSwitch = function(i){
Document.getElementById('js-img').src = "images/shop/
<?php echo $row['item_img'], '_';?>i<?php echo '.png';?>";
}
Even to me this seems wrong which is why I've turned to the GURU's here
Is there anyway this would be possible? If not, any suggestions would be GREATLY appreciated
I am trying to figure out what you are asking, and I think this is your way to go:
var imgSwitch = function(i){
document.getElementById('js-img').src = "images/shop/<?php echo $row['item_img'], '_';?>" + i + ".png";
}
The change is in the i, you have to cut the string and add it as a variable.
But remember that the PHP code is executed at the server, and will not change once the page is sent to the client. When you execute that function, $row['item_img'] will always be the same.
A simple example which you can adapt. What I do in the code below is give the element an id and attach an onclick to it.
In the function we pass the id as a parameter (onclick(changeSrc(this.id))) and we manipulate the src using the getElementById as we have the id.
<img src="http://ladiesloot.com/wp-content/uploads/2015/05/smiley-face-1-4-15.png" id="test" onclick="changeSrc(this.id);" height="400" width="400" />
<script>
function changeSrc(id) {
document.getElementById(id).src = "http://i0.wp.com/www.compusurf.es/wordpress/wp-content/uploads/2014/04/smiley.jpeg?fit=1200%2C1200";
}
</script>
http://jsfiddle.net/tq1Lq5at/
Edit 1
You're using Document when it should be document, notice the lowercase d.
I'm trying to extract data from a JS function that only renders an element's HTML - and I need the element's ID or class.
Example:
JS Element Value:
x = '<div class="active introjs-showElement introjs-relativePosition" id="myId">Toate (75)</div>';
I need to do get the element's id or class (in this case the id would be myId).
Is there any way to do this? Strip the tags or extract the text via strstr?
Thank you
The easiest thing to do would be to grab the jQuery object of the string you have:
$(x);
Now you have access to all the jQuery extensions on it to allow you to get/set what you need:
$(x).attr('id'); // == 'myId'
NOTE: This is obviously based on the assumption you have jQuery to use. If you don't, then the second part of my answer is - get jQuery, it's designed to make operations like these very easy and tackle compatibility issues where it can too
You may want to take a look at this:
var div = document.createElement('div');
div.innerHTML = '<div class="active introjs-showElement introjs-relativePosition" id="myId">Toate (75)</div>';
console.log(div.firstChild.className);
console.log(div.firstChild.id);
I'm trying to find the best way to provide some information to ajax handlers from html markup.
The scenario is:
for i=0; i<5; i++
print <div class="clickable"></div>
Let's say that div will be clicked to add a product to a shopping cart. Like
$('.clickable').click(function{
cart.add(this.somethind);
})
I would like to transmit to that handler the unique sql id of that product clicked.
1) one ideea would be to add an attribute to that div, and store the information there. what do you think about this ideea?
2) is there any other way to achive this, without using html markup?
info: Client side-jquery, Server side-PHP, not xml-xsl transformation used.
Thanks!
There is a jQuery metadata plugin just for those scenarios
<?php
print '<div class="clickable {id: 1}"></div>';
// or (HTML5-like)
print '<div class="clickable" data-id="1"></div>';
?>
// jQuery
$('.clickable').click(function{
cart.add($(this).metadata().id);
})
There are several other ways of providing metadata, check out project page
You could store it using jquery's data on the div.
$('.clickable').click(function{
cart.add(jQuery.data($(this), "id"));
});
EDIT
In response to your comment use this data link:
You could have you id as an HTML5 attribute:
<?php
print '<div class="clickable" data-id="1"></div>';
?>
Then you would access that id using data this way:
$('.clickable').click(function{
cart.add($(this).data("id"));
});
Note that this requires jquery 1.4.3 and above to work.