My phpcode is
<?php for($i = 1; $i < 5; $i++) { ?>
<div class="upperBoxContainer" id="test1<?php echo $i; ?>">
<img id="test<?php echo $i; ?>" src="images/midimages/<?php echo $i; ?>.jpg">
</div>
<?php } ?>
And my javascript code is
jQuery(document).ready(function() {
for (var i = 1; i < 5; i++) {
alert('images/midimageshover/' + i + '.jpg');
$('#test1' + i).hover(function() {
$('#test' + i).attr('src', 'images/midimageshover/' + i + '.jpg');
});
$('#test1' + i).mouseout(function() {
$('#test' + i).attr('src', 'images/midimages/' + i + '.jpg');
});
}
});
There is some error due to this code is not work. can you please find this.
Thanks in advance
Enclose your events in a Immediately-Invoked Function Expression (IIFE)
jQuery(document).ready(function(){
for (var i = 1; i < 5; i++) {
(function(i){
$('#test1'+i).hover(function(){
$('#test' + i).attr('src', 'images/midimageshover/' + i + '.jpg');
});
$('#test1'+i).mouseout(function(){
$('#test' + i).attr('src', 'images/midimages/' + i + '.jpg');
});
})(i);
}
});
Your code is rewriting the value of $('#test1'+i) until it reaches 4, so at the end of the loop you'll only have $('#test14').
The code above create different scope by using the IIFE hence $('#test1'+i) won't be overwritten, instead you'll have $('#test11'), $('#test12'), $('#test13'), $('#test14')
Here is a demo to demonstrate the difference with your initial code
Related
I want to draw a pattern like this in php. I could not figure it out.
1 6 11
2 7 12
3 8 13
4 9 14
5 10 15
How can i make it?
I tried
for($i=1;$i <= 5;$i++) {
echo $i;
echo ' ';
echo $i + 5;
echo ' ';
echo $i + 10;
echo "<br/>";
is this the best way to do.
Would be nice to see what you tried, however:
echo '<pre>';
$i=0
do {
echo ($i + 1).' '.($i + 6).' '.($i + 11).'
';
} while(++$i < 5);
echo '</pre>';
I tried your script here and it works:
http://phptester.net/
for($i=1;$i <= 5;$i++) {
echo $i.' '.($i + 5).' '.($i + 10)."<br/>";
}
What error did you have? Maybe you forgot to close the loop with "}"?
for($x=1; x<=5; x++){
echo $x." ".$x+5." ".$x+10.+"\n";
}
You are looking for this... I have made in javascript. You can simply turn that code into php
var m = 1;
var str='';
for(var i=0;i < 5; i++ )
{
for(var j = 0; j < 3; j++)
{
str = str + parseInt(m+(j*5));
str +='\t';
}
m=m+1;
str = str+ '\n';
}
console.log(str)
In my dynamic dropdown list, how would I change the option value ='" + data[i].toLowerCase() + to be a value of different column from database table? My PHP is returning two jsonencode values, "ID" and "Outcome." JSQuery works when it is just "Outcome" return but not when both "ID" and "Outcome." I have tried.
options += '"<option value ="+ value[i] + "'>" + data[i] + "</option>";
Below is my code.
$(document).ready(function () {
$.getJSON("getOutcome.php", success = function(data, value)
{
var options = "";
for(var i = 0; i < data.length; i++)
{
options += '"<option value ="+ value[i] + "'>" + data[i] + "</option>";
}
$("#slctOutcome").append(options);
$("#slctOutcome").change(); //<-Here
});
$("#slctOutcome").change(function()
{
$.getJSON("getProxies.php?outcome=" + $(this).val(), success = function(data)
{
var options = "";
for(var i = 0; i < data.length; i++)
{
options += "<option value ='" + data[i].toLowerCase() + "'>" + data[i] + "</option>";
}
$("#slctProxy").html("");
$("#slctProxy").append(options);
});
});
You have to return in your values from php in json array so you can use it like data[i].id and data[i].outcome, Or you can use $ajax instead of $getJSON and you use the succes function to display result.
in my program user can create by clicking on button (jquery). But php does not send data to another page.
jquery:
$(document).ready(function(){
var counter = 2;
$("#addButton").click(function () {
if(counter>10){
alert("Only 10 textboxes allow");
return false;
}
var newTextBoxDiv = $(document.createElement('div'))
.attr("id", 'TextBoxDiv' + counter);
newTextBoxDiv.after().html('<label>ویژگی '+ counter + ' : </label>' +
'<input type="text" name="txt' + counter +
'" id="textbox' + counter + '" class="form-control" style="margin:5px">');
newTextBoxDiv.appendTo("#TextBoxesGroup");
counter++;
});
});
php :
$x = 1;
while ($x<11)
{
$name = 'txt' . $x ;
if(isset($_POST[$name]) && $_POST[$name]!='')
{
object::object_Insert($_POST[$name],$s);
}
$x++;
}
A while ago, I created (with much help) a program that uses php and javascript to make some ambient music by randomizing an array of .ogg files. Now I am trying to re-write it with js alone.
The new code immediately below does not work (the .ogg files do play properly when clicked individually, but nothing happens when you press the 'start' button, which is the main feature). (The code below that (containing php) does work.) I've been over the new code several times and I think I've got the 'typos'. I'm pretty sure the problem is in the syntax of the window.setTimeout line, but haven't quite figured out how it should be.
Thanks for any help you can offer!
<!DOCTYPE html>
<html>
<head>
<title>Audio Testing</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
function getRandInt (min, max)
{
return Math.floor(Math.random() * (max - min + 1)) + min;
}
function shuffle(o)
{
for(var j, x, i = o.length; i; j = parseInt(Math.random() * i), x = o[--i], o[i] = o[j], o[j] = x);
return o;
}
</script>
<script type="text/javascript">
var tonesTotal = 150;
function getDelays(tonesTotal)
{
var return_array = array();
for (var i = 0; i < tonesTotal; i++)
{
var r = getRandInt(0, 600);
var delay = r * 1000;
return_array.push(delay);
}
return return_array;
}
var delays = new Array();
delays = getDelays(tonesTotal);
$(document).ready(function()
{
$("#start").click(function()
{
var base = 'sound';
for(var i = 0; i < tonesTotal; i++)
var id = base + ((i + 1) );
window.setTimeout ("document.getElementById('" + id + "').play()", delays[i]);
});
});
</script>
</head>
<body style="background-color: #999;">
<button id="start">Start</button>
<br><br>
<script>
var tonesTotal = 150;
var samples = new Array("tone0.ogg", "tone2.ogg", "tone4.ogg", "tone6.ogg", "tone7.ogg", "tone9.ogg", "tone11.ogg", "tone12.ogg");
for (var i=1; i <= tonesTotal; i++)
{
shuffle (samples);
var samplepick = samples[0];
document.write ("<audio controls id='sound" + i + "'><source src='" + samplepick + "' type='audio/ogg'></audio>");
}
</script>
</body>
</html>
PREVIOUS CODE:
<!DOCTYPE html>
<html>
<head>
<title>Audio Testing</title>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<?php
//$randC = rand(1,4);
$C = 150;
function getDelays($C)
{
$return_array = array();
for($i = 0; $i < $C; $i++)
{
$r = rand(0, 600);
$delay = $r * 1000;
array_push($return_array, $delay);
}
return $return_array;
}
echo "<script type=\"text/javascript\">\n";
echo "var delays = new Array();";
$delays = getDelays($C);
for($i = 0; $i < sizeof($delays); $i++)
{
echo "delays[" . $i . "] = " . $delays[$i] . ";\n";
}
echo "
$(document).ready(function()
{
$(\"#start\").click(function()
{
var base = 'sound';
for(i = 0; i < $C; i++)
{
var id = base + ((i + 1) );
window.setTimeout (\"document.getElementById('\" + id + \"').play()\", delays[i]);
}
});
});
</script>
";
?>
<style type="text/css">
</style>
</head>
<body style="background-color: #999;">
<button id="start">Start</button>
<br><br>
<?php
$samples = array("tone0.ogg", "tone2.ogg", "tone4.ogg", "tone6.ogg", "tone7.ogg", "tone9.ogg", "tone11.ogg", "tone12.ogg");
for ($i=1; $i<= $C; $i++) {
shuffle ($samples);
$samplepick = $samples[0];
echo '<audio controls id="sound'.$i.'">
<source src='.$samplepick.' type="audio/ogg">
</audio>';
}
?>
</body>
</html>
When I tested it locally I found a Javascript error in the getDelays() function: First line of code should be:
var return_array = new Array();
I have this php code
$jsonArray = array();
$sql = "SELECT ID,CLIENT FROM PLD_SERVERS";
$result = mysql_query($sql);
while($row = mysql_fetch_array($result)) {
$jsonArray[] = array('id'=>$row['ID'],'client'=>$row['CLIENT']);
}
echo json_encode($jsonArray);
And this js
function autosearchLoadServers()
{
$.post("php/autosearch-load-servers.php",function(data){
var toAppend = "";
for(var i = 0; i < data.length; i++){
toAppend += '<option value = \"' + data[i].id + '\">' + data[i].client + '</option>';
}
$("#serverSelect").empty();
$("#serverSelect").html(toAppend);
});
}
The problem is that i get only undefined values. How can this be? The values are in the JSON, i checked using firebug in mozilla so there has to be something with the data variable but i can't understand what. I tried different ways and no results.
Try specifying the datatype in the post call like this:
$.post("php/autosearch-load-servers.php",function(data){
var toAppend = "";
for(var i = 0; i < data.length; i++){
toAppend += '<option value = \"' + data[i].id + '\">' + data[i].client + '</option>';
}
$("#serverSelect").empty();
$("#serverSelect").html(toAppend);
}, "json");