I have in my database 2 rows of information so my code create will create positivoNegativo.png twice and the number 10 twice. When I click on the FIRST positivoNegativo.png my number FIRST 10 is incremented (exacly as I wanted to). Now my issue, when I click on the SECOND positivoNegativo.png, the FIRST number is incremented again! I just can't increment the SECOND number by clicking on the SECOND positivoNegativo.png
<html>
<body>
<?php
include_once("./classe/conexao.php");
$busca = $pdo->prepare("select * from anuncios");
$busca->execute();
$linha = $busca->fetchAll(PDO::FETCH_OBJ);
$classe = 0;
foreach ($linha as $lista) {
echo "<p class='demo'>10</p>";
echo "<img src='imagens/positivoNegativo.png'usemap='#mapa'>";
echo "<map name='mapa'>";
echo "<area shape='rect' coords='1,1,73,59' onclick='aumenta($classe)'>";
echo "</map>";
echo "<span>$lista->titulo</span>";
$classe++;
}
?>
<script>
function aumenta(classe) {
var numero = document.getElementsByClassName('demo')[classe].innerHTML;
numero++;
document.getElementsByClassName('demo')[classe].innerHTML = numero;
}
</script>;
</body>
You need to use different map for each image.
foreach ($linha as $lista) {
echo "<p class='demo'>10</p>";
echo "<img src='imagens/positivoNegativo.png'usemap='#mapa$classe'>";
echo "<map name='mapa$classe'>";
echo "<area shape='rect' coords='1,1,73,59' onclick='aumenta($classe)'>";
echo "</map>";
echo "<span>$lista->titulo</span>";
$classe++;
}
Try this:
<?php
include_once("./classe/conexao.php");
$busca = $pdo->prepare("select * from anuncios");
$busca->execute();
$linha = $busca->fetchAll(PDO::FETCH_OBJ);
$classe = 0;
foreach ($linha as $lista) {
echo "<p class='demo".$classe."'>10</p>";
echo "<img src='imagens/positivoNegativo.png' onclick='aumenta($classe)'>";
echo "<span>$lista->titulo</span>";
$classe++;
}
?>
<script>
function aumenta(classe) {
var numero = document.getElementsByClassName('demo'+classe).innerHTML;
numero++;
document.getElementsByClassName('demo'+classe).innerHTML = numero;
}
</script>;
I didn't test the code, but it might give you some hints.
I left out the whole <map> thing because it doesn't make sense in your code. There's only an up?
Related
I have a strange problem. I am getting the table values using PHP MySQL using a while loop and stored them in a array. Then I am displaying it one after another in a single page.
$sql = "select * from newsfeed order by id DESC";
$result = $db->query($sql);
$posts_array = array(); // Storing the result to an Custom Array
$index = 0;
if($result->num_rows > 0)
{
while($row = $result->fetch_assoc()) {
$posts_array[$index] = $row;
$index++;
}
}
I have successfully set the $post_id of the posts on to the HTML elements using the following code.
<?php
$array_size = sizeof($posts_array);
for($i = 0; $i < $array_size; $i++){
?>
<div class='wrapper' id='wrapper'>
<div class='user'>
<!-- Some Code -->
<?php
$post_id = $posts_array[$i][id];
?>
<input type='image' name='like' id='like' width='40' height='40' src='like_btn.png' value='<?php echo ($post_id);'?> />
<?php } ?>
Now I want to take that value using Jquery and do some Database Work. I have accessed the value using the following code:
<script type="text/javascript">
function justsomething() {
alert($(this).val());
}
</script>
The problem is I am only getting the last post's id as alert() for every post rather than getting different id's .
Please help me. I am confused whether the PHP script is loading every time I click and call the justsomething() function.
Note: I can display the $post_id of every post alone without any problem.
Beacuse the id should be unique to one html element try changing your code to this :
<?php $array_size = sizeof($posts_array); for($i = 0; $i < $array_size; $i++){ ?>
<input type='image' name='like_<?php echo $i ?>' id='like_<?php echo $i ?>' width='40' height='40' src='like_btn.png' value='<?php echo $post_id;?>' onclick='justsomething(this);' />
<?php } ?>
<script>
function justsomething(el) {
var img = el;
alert(img.value);
}
</script>
here is an example
function justsomething(el) {
var img = el;
alert(img.value);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type='image' name='like_1' id='like_1' width='40' height='40' src='like_btn.png' value='15454' onclick='justsomething(this);' />
It works for loop, I hope You can make use of it
$("input[id=like]").each(function(i){
alert($(this).val());
});
It will alert values from every <input id="like"...
Try this code:
onclick='justsomething(this)'
function justsomething(obj) {
alert($(obj).val());
}
How do I change the value of a SELECT tag in MATERIALIZE CSS. I'm trying show the selected item that was stored from the database. I tried adding .material_select() at the end of the select but it only retrieves the LAST one in the row. How do I show every try ? Here's what I've tried so far.
$(function() {
<?php
$q = $db->query("SELECT buildingID, buildingName,building_projectID, floorNumber FROM tblBuilding");
while($r = $q->fetch(PDO::FETCH_ASSOC)){
$buildingID = $r['buildingID'];
$buildingName = $r['buildingName'];
$building_projectID = $r['building_projectID'];
$floorNumber = $r['floorNumber'];
$t = $db->query("select projectName from tblProject where projectID = $building_projectID ");
while($u = $t->fetch(PDO::FETCH_ASSOC)){
$projectName = $u['projectName'];
?>
$("#editModal<?php echo $buildingID ?>").click(function(){
alert('<?php echo $projectName ?>');
$("#editBuildingName").val("<?php echo $r['buildingName'] ?>");
$("#editBuildingProject").val("<?php echo $projectName");
$("#editBuildingFloors").val("<?php echo $floorNumber ?>");
});
<?php }}?>
});
instead of:
$("#editBuildingProject").val("<?php echo $projectName");
use this:
$("#editBuildingProject").val("<?php echo $building_projectID ?>").material_select('update');
I have a certain number of images that are displaying per page. I want to set a maximum limit for the number of images shown on any page, for example setting a property such that no more than eight are shown. I've written this logic in PHP but I'm still seeing all images showing on any given page, ignoring any limit I set. The code:
$counter = 0;
foreach ($device as $value) {
$entry = $value;
echo "<head>";
echo '<script type="text/javascript">',
'window.setInterval(function() { ',
"document.getElementById('$counter').src='/latimage.php?&dev=$entry&random='+new Date().getTime();",
'},1000)',
'</script>';
echo "</head>";
echo "<body onLoad='setTimeout('refresh()',1000)'>";
echo "<td>$entry<img id= '$counter' width='100%' height='auto'></img></td>";
$counter = $counter + 1;
if ($counter == 4 || $counter == 8) {
echo " <tr>";
}
the best way is to fetch only 8 images from database instead of fetching all images at once.Use pagination to set limit and offset for each page.
You need to add a $_GET['variable'];
Something like this,
if(isset($_GET['last_image'])) {
$last_image = $_GET['last_image'];
}
else {
$last_image = 0;
}
$device[] = //however you get the images
$size_of_array = count($device);
for ($counter = $last_image; $counter < $counter + 8 && $counter < $size_of_array; $counter++) {
$entry = $device[$counter];
echo "<head>";
echo '<script type="text/javascript">',
'window.setInterval(function() { ',
"document.getElementById('$counter').src='/latimage.php?&dev=$entry&random='+new Date().getTime();",
'},1000)',
'</script>';
echo "</head>";
echo "<body onLoad='setTimeout('refresh()',1000)'>";
echo "<td>$entry<img id= '$counter' width='100%' height='auto'></img></td>";
}
Then next button
echo 'Next';
This is the basic idea behind a pagination.
I am currently having trouble with this. I would like to make one of my variables in Javascript have a PHP value. Here is what I mean:
<script>
JSvariable = <?php echo $PHPvariable; ?>;
</script>
For some reason that is not working. Here is my full (snippet) of code:
<script>
currentreplyid = <?php echo $allpostcomments[$key]['replyid']; ?>;
$('#parentcommentholder').val(currentreplyid);
</script>
I am sure it is some stupid mistake, but I can not seem to find it! What is the problem? Thank you!
PS #parentcommentholder is an input field, and it just had the value 0 after the field is supposed to of been changed.
Here is some source:
<?php
$postcommentsquery = "SELECT * FROM comments WHERE parent = :parent AND postid = :postid ORDER BY datecreated DESC";
$postcommentsparams = array(':parent' => $allreplies[$key]["postid"],
':postid' => $postid);
try{
$postcommentsstmt = $connection->prepare($postcommentsquery);
$postcommentsresult = $postcommentsstmt->execute($postcommentsparams);
}
catch(PDOException $ex){
echo ("Failed to run query: " . $ex->getMessage());
}
$allpostcomments = $postcommentsstmt->fetchAll();
foreach ($allpostcomments as $key => $value) {
?>
<script>
var currentreplyid = <?php echo $allpostcomments[$key]['replyid']; ?>;
$('#parentcommentholder').val(currentreplyid);
</script>
<input id="parentcommentholder"></div>
Don't forgot for give quotes ' or ". Use following:
<script>
var JSvariable = '<?php echo $PHPvariable; ?>';
//or
var JSvariable = "<?php echo $PHPvariable; ?>";
</script>
Reason: If php variable contains string and if while assigning it to javascript variable we shall not give quote like:
<?php $PHPvariable = 'String';?>
var JSvariable = <?php echo $PHPvariable; ?>;
Will transform into :
var JSvariable = String;//which will give error in javascript
But this will work fine if PHP variable contains a numeric value like:
<?php $PHPvariable = 2;?>
var JSvariable = <?php echo $PHPvariable; ?>;
Will transform into :
var JSvariable = 2;//which will work perfect
Complete code should be:
<script>
var currentreplyid = "<?php echo $allpostcomments[$key]['replyid']; ?>";
//or if you are sure your variable contains int value
var currentreplyid = parseInt("<?php echo $allpostcomments[$key]['replyid']; ?>");
$('#parentcommentholder').val(currentreplyid);
</script>
Try the below instead of using javascript (as I don't think you need it):
<?php
$postcommentsquery = "SELECT * FROM comments WHERE parent = :parent AND postid = :postid ORDER BY datecreated DESC";
$postcommentsparams = array(':parent' => $allreplies[$key]["postid"],
':postid' => $postid);
try{
$postcommentsstmt = $connection->prepare($postcommentsquery);
$postcommentsresult = $postcommentsstmt->execute($postcommentsparams);
}
catch(PDOException $ex){
echo ("Failed to run query: " . $ex->getMessage());
}
$allpostcomments = $postcommentsstmt->fetchAll();
foreach ($allpostcomments as $key => $value) {
?>
<input id="parentcommentholder" value="<?php echo ((int)$allpostcomments[$key]['replyid']>0) ? $allpostcomments[$key]['replyid'] : 0; ?>" />
<?php
}
?>
If your defiantly sure $allpostcomments[$key]['replyid'] is bringing back a value, this should work without any issues.
I made a gallery with images fetched from DB and using Fancybox for displaying it. I have some articles that are the same, just diferent color and I display just one and underneath color boxes for changing the color.
The problem is that when I click on the button to change the color, picture changes, Fancybox on click displays first picture, not the Current one
Part of the code:
JS:
function changeImage(element,id){
var img=document.getElementById(id).src=element;
return false;
}
PHP:
while($row = mysql_fetch_array($sql)){
$prikaz =$row['prikaz'];
$id = $row['id'];
$ime = $row['ime'];
$thumb = $row['thumbs'];
$boja = $row['boja_id'];
$slicka = $row['slika'];
$spec = $row['tekst'];
if ($prikaz == 1){
echo "<table style ='display: inline' align='center'>";
echo "<tr>";
echo "<td><a class='fancybox-effects-a' href='$slicka' ><img id='$id' src='$thumb' alt='' /></a></td>";
echo "</tr>";
echo "<tr><td>";
echo "Boja: ";
$bsql = mysql_query ("SELECT muski.tekst, muski.id,muski.thumbs,boja.bslika FROM boja INNER JOIN muski ON muski.boja_id = boja.id WHERE muski.ime = '$ime' " );
while($res = mysql_fetch_array($bsql)){
$slicica = $res['thumbs'];
$muid = $res['id'];
$kockica = $res['bslika'];
echo "<button id = 'boja' onclick =changeImage('$slicica','$id')><img src= $kockica ></button>";
}
echo "</br>";
echo nl2br($spec);
}
echo "</td>";
echo "</tr>";
echo "</table>";
I found the solution.... I modified js script to change the parent href of img... It works...
function changeImage(element,id,staza) {
var img = document.getElementById(id);
img.src= element;
img.parentNode.href=staza;
return false;
}
Firebug your Fancy Box pop-up and inside the you have to change back ground image as well