We Keep Coding

Give a GET value to a javascript Pop Up

I'm currently working on a page which loops some content. When you click on the image, more information appears in a javascript popup. I want to give every popup an unique link (with a $_GET). Any ideas how I can do this with PHP or Javascript (or both).
Pop-up script:
<!----- JAVASCRIPT FOR EACH ELEMENT ---->
<script type="application/javascript">
function openPopup<?php echo $persona->{'User ID'}; ?>() {
document.getElementById('<?php echo $persona->{'User ID'}; ?>').style.display = "block";
}
function closePopup<?php echo $persona->{'User ID'}; ?>() {
document.getElementById('<?php echo $persona->{'User ID'}; ?>').style.display = "none";
}
</script>
The pop-ups are created inside a foreach loop (PHP) with the onClicks in it.
Thanks in advance!

you can do like this:
<?php if (isset($_GET['my_get_var']) && !empty($_GET['my_get_var']) : ?>
<div class="my-popup">
<!-- my popup code -->
</div>
<?php endif; ?>
no need for js at all - just CSS, HTML and PHP

hide span when i click on it despite the automatic page refresh

html (quotazioni.php)
<?php
$azioni = $db_handle->runQuery("SELECT idAzione,nome,prezzo FROM azioni");
foreach($azioni as $azione){
?>
<tr>
<td style="text-align:center;border-bottom:#F0F0F0 1px solid;"><?php echo $azione["nome"]; ?></td>
<td style="text-align:center;border-bottom:#F0F0F0 1px solid;"><?php echo $azione["prezzo"]; ?></td>
<td style="text-align:center;border-bottom:#F0F0F0 1px solid;">
<a href="compraVendi.php?action=segui&idAzione=<?=$azione["idAzione"]?>" id="<?=$azione["nome"]?>" style="text-decoration:none;" class="preferiti" >
<span style="color:yellow;font-size:200%;" id="<?=$azione["idAzione"]?>" >&star;</span>
</a>
</td>
</tr>
<?php
}
?>
php (compraVendi.php)
case "segui":
$db_handle->query("INSERT INTO preferiti (visibile,idAzione) VALUES (1,'".$_GET["idAzione"]."')");
header("location: quotazioni.php");
break;
javascript
$(document).ready(function(){
<?php
$preferiti = $db_handle->runQuery("SELECT * FROM preferiti");
foreach($preferiti as $preferito){
if ($preferito["visibile"]==1){
?>
var element = document.getElementById(<?=$preferito["idAzione"]?>);
element.hide();
<?php
}
}
?>
});
I must hide the span inside the link after I click on it. How do I keep the span disabled considering the page contains an automatic refresh? I provide an example of code which not work, please help me to solve the problem. In the sql database, the table preferiti contains idPreferito,visibile and idAzione. The row preferito contains 1 if i clicked on the respective prefer.

When user clicks on the the star - you need to save this data to a persistent storage, e,g your backend. This is the only way you will be able to regain this state after page refresh.
So when serving the page to the client, you will consider another field, for example 'disabled' which contains string 'disabled'
It could be something like this:
<a href="#" id="<?=$azione["nome"]?>" class="preferiti" >
<span class="favourites-star <?=$azione["disabled"]?>" id="<?=$azione["idAzione"]?>" >&star;</span>
</a>
Consider not using insline styles and instead using classes for styling - this is a general good practice.
.favourites-star {
color:yellow;
font-size:200%;
}
Classes are also better when dealing with events.
$(document).ready(function(){
$('.prefereti').on('click', function(evt){
// Save the state first and then disable the star - try it yourself!
$.post()
.done(function () {
$(evt.currentTarget).addClass('disable');
})
.fail(function () {
// Don't disable - instead show error
});
});
});
One more thing that you need to keep in mind while the state is being saved, your page might reload - so you might like to prohibit it from reloading for that time.

Echo WordPress post featured image URL inside Javascript

I am trying to echo WordPress post featured image URL inside JS file.
Below code will get the URL of wordpress post featured image:
<?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?><img src="<?php echo $url ?>" />
I have embedded the above code inside the below JS file.
var fapDom = '<div id="fap-wrapper" class="'+(options.wrapperPosition == 'top' ? 'fap-wrapper-top' : 'fap-wrapper-bottom')+' mjv-playlist-bg" style="'+options.wrapperPosition+': 0; height: '+totalHeight+'px;"><?php $url = wp_get_attachment_url( get_post_thumbnail_id($post->ID), 'thumbnail' ); ?><img src="<?php echo $url ?>" /><div id="fap-main" style="color:'+options.mainColor+';"><div id="fap-wrapper-switcher" style="background: '+options.wrapperColor+'; border-color: '+options.strokeColor+'" class="fap-'+options.wrapperPosition+'"></div><p id="fap-init-text">Creating...</p></div></div>';
But this is not working. PHP code not working inside the JS file, so is it possible to fetch the WordPress post featured image URL which is compatible to insert in the place of PHP code.

HTML executes different php function onclick

I have the following problem. No matter which image I click, function 2 gets executed. Thanks a lot for your help.
<l href='<?php echo function1(); ?>' onclick='alert("ON!")'> <IMG STYLE="position:relative; margin-top: 40px" SRC="/img/on.png" page="control.php"></l>
<l href='<?php echo function2(); ?>' onclick='alert("OFF!")'> <IMG STYLE="position:relative; margin-top: 40px; margin-left: 80px" SRC="/img/off.png" page="control.php"></l>
The purpose of it is to execute different sql queries but they both execute the same query. The functions are included in a separate php. My only guess at the moment is that it is related to the styling.
The l> tag:
$( document ).on(
"click",
"l",
function( event ){
// Stop the default behavior of the browser, which
// is to change the URL of the page.
event.preventDefault();
// Manually change the location of the page to stay in
// "Standalone" mode and change the URL at the same time.
location.href = $( event.target ).attr( "page" );
}
);

As you haven't provided your php code yet here are my assumptions about your case:
function1() does some mysql query like that: UPDATE t SET state='on'...
function2() does almost the same: UPDATE t SET state='off'...
By using this code:
<?php echo function1(); ?>
<?php echo function2(); ?>'
You are basically calling both functions. First one switches something on then second one turns it off again and makes you think that only second query was executed. There is a problem with the logic of your code.
You can achieve your goal by using GET variables and running first or second function depending on its value. Here's example script
PHP:
<?php
if (isset($_GET['action'])) {
if ($_GET['action'] == "on") {
function1();
elseif ($_GET['action'] == "off") {
function2();
}
}
?>
HTML:
<span onclick="alert('ON!')"> <IMG STYLE="position:relative; margin-top: 40px" SRC="/img/on.png" page="control.php?action=on"></span>
<span onclick="alert('OFF!')"> <IMG STYLE="position:relative; margin-top: 40px; margin-left: 80px" SRC="/img/off.png" page="control.php?action=off"></span>

How do i limit results in a while loop with jQuery and PHP

I didn't really know how to set up the question without making it extremely long, so I will explain the thick of it in here.
Basically my code is pulling images from a directory on another server. I am using a jQuery pagination script I found online. The script works, but only after every single image loads on the page (there are a lot of images, so it takes a while to load).
What I'm wanting to accomplish is basically being able to load the page quickly by only showing 36 results at a time. I'd like the jQuery pagination to work, but what'd be even more ideal is just loading is as you scroll down. I've tried using a few different endless scrolling scripts on this, but for some reason it never works properly.
Hopefully I'm making it very clear on what I'm trying to do.
Here is the link to the page: http://habbolicious.com/v2/testing.php
...and here is the code:
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="js/jquery.pages.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$("div.holder").jPages({
containerID : "test",
perPage: 36
});
});
</script>
</head>
<div class="holder"></div>
<div id="test">
<?php
$url = "http://habbo.it/gamedata/external_flash_texts/0";
$data = file_get_contents($url);
$newlines = array("\n" ,"\r", "\r\n", ">", "<", "/");
$content = str_replace($newlines, "", html_entity_decode($data));
$Statushtml= '/badge_desc_(.+?)=/';
preg_match_all($Statushtml,$content,$Statusraw);
$badges = implode("-", $Statusraw[0]);
$badgevar = explode("=-badge_desc_", $badges);
$number = ($badgevar);
$badgevar2 = str_replace("=","",$badgevar);
$badgevar3 = str_replace("badge_desc_","",$badgevar2);
$number = count($badgevar3);
while ($number != 0) { ?>
<script>
$("img").error(function () {
$(this).parent().css({display:"none"});
});
</script>
<?php
$number = $number - 1; ?>
<?php
$imageUrl = "http://images.habbo.it/c_images/album1584/$badgevar3[$number].gif";
echo '<div class="derpy" style="width:10%; height:70px; line-height:10px; overflow:hidden; border-radius:5px; background:#eaeaea; color:#585858; float:left; margin:5px; padding:10px; text-align:center;"><img class="lazy" src="' . $imageUrl . '" onerror="this.style.display=none" /><br/>' . $badgevar3[$number] . '</div>';
if(file_exists($imageUrl))
{
} else {
}
}
?>
<div style="clear:both;"></div>
</div>

in your script:
$number = count(**);
and the 'while' make a countdown for the $number to the 0.
if you want only 36 pictures, then you need the line 10 "$number = 36;" , instead of "$number = ($badgevar);"