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.

Javascript: How to hide div if Label inside is empty

I would like to hide the div with the class= "form-group" if the label inside doesn't have anything to display
here is my html code:
echo'<div class="form-group">';
echo'<label for="exampleInputFile" class="tbh">'.$query2['req_1'].'</label>';
echo'<input type="file" name="my_image" accept="image/*" id="exampleInputFile"> ';
echo'</div>';
And my javascript is here:
<script type="text/javascript">
if($('label.tbh:empty')){
$('div.form-group').hide();
}
</script>
Is there any other way to do that? In my code it doesn't seem to work.
Thanks in advance for the help.

Using .text() is a safer option. If the label is empty, .text() will return an empty string and negating it will give true. Refer to the interactive snippet with example below. I placed the relevant code in a button click handler to prove that it works after you click on it.
$('button').click(function () {
if (!$('.tbh').text()){
$('.form-group').hide();
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="form-group">
<label for="exampleInputFile" class="tbh"></label>
<input type="file" name="my_image" accept="image/*" id="exampleInputFile"></div>
<button>Click to hide</button>

If you are using jQuery, you may do it by that way:
$("div.form-group label.tbh:empty").parent().hide();
It's a right way to do in inside document.ready callback:
$(document).ready(function(){
$("div.form-group label.tbh:empty").parent().hide()
});
To include jQuery, add
echo '<script src="https://code.jquery.com/jquery-3.1.1.js"></script>';
to head of your script.
But it seems like you are using PHP or something like at your backend side?
If so, you may do it on server-side code like this:
if(strlen($query2['req_1']) == 0)
{
echo'<div class="form-group">';
echo'<label for="exampleInputFile" class="tbh">'.$query2["req_1"].'</label>';
echo'<input type="file" name="my_image" accept="image/*" id="exampleInputFile"> ';
echo'</div>';
}
in this case you would not transfer unneeded data to the client.

Try this:
if($('label.tbh').html() == ""){
$('div.form-group').hide();
}

You can do it like this:
/* Be sure that your dom is loaded */
$( document ).ready(function() {
/* Checking that the label is empty */
if($("label").html().length == 0) {
$('div.form-group').hide();
}
});
You can also use size() instead of length.

Multiple Summer note divs on one page

I am trying to get the code of a specific summer note div with multiple ones on a single page.
My summer notes are created from a database with php as follows:
<div class="tab-content">
<?php $i=-1; foreach($contents as $content): ?>
<?php $i++; ?>
<div class="tab-pane" id="<?php echo $content->contentName; ?>">
<div class="summernote" data-id="<?php echo $i; ?>">
<?php echo $content->content; ?>
</div>
</div>
<?php endforeach; ?>
</div>
And then my javascript is:
<script>
$('.summernote').summernote({
onblur: function(e) {
var id = $('.summernote').data('id');
var sHTML = $('.summernote').eq(id).code();
alert(sHTML);
}
});
</script>
It always gets the first $('.summernote').eq(0).code(); summernote code never the second or third one.
What I'm trying to do is when each summernote gets a blur, have that code update in a hidden textarea to submit back to the database.
(btw) I am initilizing the summer notes like this:
<script>
$(document).ready(function() {
$('.summernote').summernote({
height: 300,
});
});
</script>

After selecting all summernote's you need to access their attributes by specifying one element like:
<script>
$('.summernote').each(function(i, obj) { $(obj).summernote({
onblur: function(e) {
var id = $(obj).data('id');
var sHTML = $(obj).code();
alert(sHTML);
}
});
});
</script>

To display multiple editors on a page, you need to place more than two <div> elements in HTML.
Example:
<div class="summernote">summernote 1</div>
<div class="summernote">summernote 2</div>
Then run summernote with jQuery selector.
$(document).ready(function() {
$('.summernote').summernote();
});
For more information click
Note: Multiple Editor summernote not work with id

I Finally got the code working for multiple summernote editors and image uploading!
To fix
"undefined"
, try:
var id = $(obj).data('id');
to
var id= $(obj).attr('id'))
Source:
https://github.com/neblina-software/balerocms-enterprise/blob/master/src/main/resources/static/js/app.js
Regards!

For anyone looking to use summernote to output multiple content with foreach, loop/repetitive statement etc
Summernote works for the first output only but you can make it work for others by using the class twice:
<div class"summernote summernote"> </div>
Provided your script is like this:
<script>
$(document).ready(function() {
$('.summernote').summernote();
});
</script>

if you are using summernote inside a textarea in a form and you intend to apply it on multiple textarea(s) on the same form, replace id=summernote with class="summernote"
Dont forget to do the same on your initialisation script
<script>
$('.summernote').summernote({
height: 200 //just specifies the height of the summernote textarea
});
</script>
Example
<textarea class="summernote" name="valueToBeExtractedBackend" required></textarea>
<script>
$('.summernote').summernote({
height: 200
});
</script>

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);"