So I have a..
.php
<?php
while($row = $results->fetch())
{
?>
<span class="rss-badge" id="<?php echo $row['id_ilmoitus'] ?>">Enlarge</span>
<br />
<?php
}
?>
.jquery
$("<?php echo $row['id_ilmoitus] ?>").click(function(){
alert("pressed", "<?php echo $row['id_ilmoitus] ?>");
});
My plan is to make that specific span to do something. So that is why I want every span have different Ids and jquery to use. There are numerous id's in database.
Try something like this :
$('.rss-badge').on('click',function(){
alert($(this).id);
//--- LET'S DO IT
});
First of all your syntax is wrong you are missing # before that.
Secondly,Instead of adding multiple event on every id, add one on class selector and get id of the item clicked:
$('span.rss-badge').click(function(){
alert("pressed"+ this.id);
});
Basically you are using wrong selector at first, in your html rendering an id cannot start with numbers it should be an alphabetic character.
<?php
while($row = $results->fetch())
{
?>
<span class="rss-badge" id="data<?php echo $row['id_ilmoitus'] ?>">Enlarge</span>
<br />
<?php
}
?>
$('#id') is the correct selector if you want to bind click event
var id = "#data<?php echo $row['id_ilmoitus]; ?>";
$(id).click(function(){
alert("pressed", "<?php echo $row['id_ilmoitus] ?>");
});
Related
I need to show the posts count depend on topic id using auto load jquery load() after looping the result using php but unfortunately it shows the first row and uses that first row to show another count and change again
Any Help please!
index.php
<?php
foreach($t_all_rows as $row){
?>
<tr>
<td class="text-center hidden-xs hidden-sm">
<a class="font-w600" href="javascript:void(0)">
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('#load_posts').load('get_posts.php?t_id=<?php echo $row['t_id']; ?>').fadeIn("slow");
}, 1000); // refresh every 5000 milliseconds
</script>
<span id="load_posts"></span>
</a>
</td>
</tr>
<?php } ?>
get_posts.php
include('connection.php');
$db=new DB();
$conn=$db->db_connect();
$my_t_id=$_GET['t_id'];
$post_query = mysqli_query($conn,'SELECT * FROM post WHERE t_id = "'.$my_t_id.'"');
$record_count=mysqli_num_rows($post_query);
//Display count.........
echo $record_count;
that is normal, because get only first div by ID, change the span id or add a new class with loop number
Adding $k
foreach($t_all_rows as $k => $row){
Adding new class
<span id="load_posts" class="load_post<?=$k?>"></span>
change jquery code:
$('.load_post<?=$k?>').load
But importan, I am suggest to you, to upgrate the mysql query using JOIN and not use jquery
Thanks for the help i finally realize i shoud use class instead of id
<script type="text/javascript">
var auto_refresh = setInterval(
function ()
{
$('.load_posts<?php echo $index; ?>').load('get_posts.php?t_id=<?php echo $row['t_id']; ?>').fadeIn("slow");
}, 1000); // refresh every 5000 milliseconds
</script>
<span class="load_posts<?php echo $index; ?>"></span>
I have a javascript problem, and I tried different solutions but I don't know how to resolve this issue right know, so, i'm asking you some help !
The aim of this code, is to present on a view, as much jQuery sliders as there are users.
I am using this jQuery slider : http://jqueryui.com/slider/#rangemax
In my example, I have 6 users, the problem is that the JS doesn't enable to update the 'dailyAmount' input for each user when I moove the handle of the slider.
It works only for the last user, I assume that the JS code that remain active on the page is the one corresponding to the last iteration only..
Here is the code, I'm looking for a solution for days now, but I didn't find any discussion about that on the different communities.
I have this code (simplified to expose you the issue) :
Start of the php code
<?php
$ii = 0;
foreach($userList as $user){
$threshold = $user->getCurrentThreshold();
$dailyThreshold = $threshold->getDailyThreshold();
$dailySlider = "dailySlider".$ii;
$dailyAmount = "dailyAmount".$ii;
$weeklyAmountId = "weeklyAmount".$ii;
?>
Javascript code to get the dynamic id for each iteration
<script type="text/javascript">
var sliderId = '#dailySlider'+<?php echo $ii; ?>;
var dailyAmount = '#dailyAmount'+<?php echo $ii; ?>;
$(function() {
$(sliderId).slider({
range: "max",
min: 1,
max: 4,
value: <?php echo $dailyThreshold ?>,
slide: function( event, ui ) {
// alert(sliderId);
$(dailyAmount).val( ui.value );
}
});
$(dailyAmount).val( $(sliderId).slider( "value" ) );
});
</script>
HTML code
<div class="threshold">
<form>
<fieldset>
<input type="text" id=<?php echo $dailyAmount ?>>
<div id=<?php echo $dailySlider ?>></div>
</fieldset>
</form>
</div>
End of the PHP code, to increment $ii and close the foreach iteration
<?php>
$ii++;
}
?>
How can I have an active JS code to make the 'dailyAmount' in-real-time-updated by the slider when we moove the handle for each user ?
Thanx in advance for your suggestions !
Try something like this.
<?php
ini_set('display_errors', true);
error_reporting(E_ALL);
// you should have error reporting on.
// get $userList as usual...
$ii = 0; // funiest increment var i've seen. Also why don't you use the actual $user ID if you have it.
foreach($userList as $user) {
$threshold = $user->getCurrentThreshold();
$dailyThreshold = $threshold->getDailyThreshold();
$dailySlider = "dailySlider".$ii;
$dailyAmount = "dailyAmount".$ii;
$weeklyAmountId = "weeklyAmount".$ii;
// using a data attribute for this made sense, and helps clean up the javascript.
?>
<div class="threshold" data-uid="<?php echo $ii; ?>">
<form> <!-- i personally wouldn't put that many forms on the page, and do it with one but obviously I don't know what requirements you have -->
<fieldset>
<input class="amount" type="text" id="<?php echo $dailyAmount;?>">
<div class="slider" id="<?php echo $dailySlider; ?>"></div>
</fieldset>
</form>
</div>
<?php
$ii++;
}
?>
Outside the loop..
<script type="text/javascript">
$(function(){
$('.threshold[data-uid]').each(function(index){
var uid = $(this).attr('data-uid');
var sliderId = '#dailySlider'+uid;
var dailyAmount = '#dailyAmount'+uid;
$(sliderId).slider({
range: "max",
min: 1,
max: 4,
value: <?php echo $dailyThreshold ?>,
slide: function( event, ui ) {
// alert(sliderId);
$(dailyAmount).val( ui.value );
}
});
$(dailyAmount).val( $(sliderId).slider( "value" ) );
});
});
</script>
I haven't tested it, but it should make sense.
I have this code for create dynamic number of sliders with dynamic number of answers per slider and I can't understand two things of my code:
Why only show one slider? (The first id slider number on my sql table)
Why in the amount box only appears correct the ini value? When you move the slider appears A r r a y (one character each time that you move the slider) ?
<script>
var arrayslidersvalueanswers="<?= $tableslidersanswervalues ?>";
<?php foreach ($tableslidersqid as $qid) { ?>
<?php foreach ($qid as $index) { ?>
<?php echo $index;?>
<?php foreach ($tableslidersanswersid as $qanswerid) { ?>
<?php foreach ($qanswerid as $indexanswer) { ?>
var answers="<?= $qanswerid ?>";
var qid= "<?= $index ?>";
jQuery(document).ready(function(){
/////////////////////SLIDER !!!!!!!!!!!!!!!!!!!!!!!!!!!
var valor="<?= $tableslidersanswervalues[1][0] ?>"; // Ini slider
$(document.getElementById("amount"+qid+"[]")).val(valor);
$(document.getElementById("slider"+qid+"[]")).slider({
min: 1,
max:arrayslidersvalueanswers.length,
slide: function( event, ui) {
var ans=answers[0][1] ;
$(document.getElementById("amount"+qid+"[]")).val(answers[ui.value-1][0]);
} //end slider ini method builder
});//END OF FUNCTION
});
});// end JavaScript document function
<?php } ?>
<?php } ?>
<?php } ?>
<?php } ?>
</script>
<html>
<p>
<label for="amount< ?= $row_Answer['QuestionIDFK'];?>">< ?php echo $row_questionset['QuestionValue']; ?>< /label>
<input type="text" id="amount< ?= $row_Answer['QuestionIDFK'];?>[]" name="amount< ?= $row_Answer['QuestionIDFK'];?>[]" />
</p>
<div id="slider< ?= $row_Answer['QuestionIDFK'];?>[]" name="slider< ?php echo $row_Answer['AnswerValue']; ?>[]" >< /div>
</html>
You only have one slider in your HTML.
I think your foreach loops should go over your HTML to generate more markup and sliders. Then you can use a general selector in jquery to get all the sliders to work.
$("div[id^='slider']").slider(...
will select all divs with an id starting by "slider".
The way your code should be structured should be:
<script>
$(("div[id^='slider']").slider(//slider configuration here);
</script>
<html>
<?php foreach($allTableValues as $table): ?>
<label>...
<input>....
<slider id="slider_<?php echo $table->id ?>">...
<?php endforeach; ?>
</html>
hi i am building a php mysql database pagination page, so i have a list of records 2 rows long at the bottom of the record i want a div which opens up when the span above it is clicked, how do i set up the jquery to make it so that it takes the id of the <p> and expands it in jquery
<span id="button1">Toggle</span>
<p id="p1">
hello<br/>hello
</p>
<script>
$("#button1").click(function () {
$("#p1").slideToggle("slow");
});
</script>
when i output it in php mysql the button will all have a different id and the p will have different ids as well
//Jquery Code which calls toggle_visibility function
$(".pOne").click(function(){
toggle_visibility('partsIdThree');
})
.toggle( function() {
$(this).children("span").text("[-]");
}, function() {
$(this).children("span").text("[+]");
});
//HTML Code
<div id="parts_toogle_one">
<p class="pOne">Add Records <span>[+]</span></p>
<div id="msg_body_one">
<tr><td></td></tr>
</div>
</div>
// Javascript code
function toggle_visibility(id) {
var e = document.getElementById(id);
if(e.style.display == "inline") {
e.style.display = 'none';
}
else if(e.style.display == "none") {
e.style.display = "inline";
}
}
Something like this..
You can use a dynamic id retrieving, so you don't have to worry about the number of results..
For example:
<?php $i = 0;?>
<?php foreach($resultset as $result) : ;?>
<span class="activator" id="result<?php echo $i;?>">CLICK HERE</span>
<div id="panel_result<?php echo $i;?>">SLIDER DIV</div>
<!-- Do the rest of you processing of $result here; it just doesn't matter, for here you only need some identification, I used a number for convenience. -->
<?php ++$i;?>
<?php endforeach;?>
Your jquery:
$('.activator').click(function(){
var the_id = $(this).attr('id');
var the_panel = $('#panel_' + the_id);
$(the_panel).slideToggle('slow');
});
So you don't have to write a jQuery command for each line you print in php, use just this snippet and it will work out by itself which panel to slide, according to which span is clicked.
I have a page in php and all over the page I am using the <a tag to link.
For example:
<?php for($i=1;$i<=5;$++) {?>
<a href="abc.php?ref=<?php echo $i ?>"CLick me No. <?php echo $i ?> </a>
<?php } ?>
What I want to do is once we click on the link, jquery load function should called, like
$('#div1').load('abc.php?ref=1'null, function() {
});
but I can't change the php loop and <a tag ...
Thanks
Give each anchor a common class and an attribute that identifies the value of $i:
...
Then attach an on-click function to them:
$('a.numbered-anchors').click(function(e) {
var i = $(this).attr('anchor-id');
$('#div' + i).load(...);
});
You mean something like this:
"CLick me No. <?php echo $i ?>
$('#yourLink').click(function() {
$('#div1').load('abc.php?ref=1'null, function() {
});
});
Bobby
Something like this maybe :
$('a[href^="abc.php"]').click(function(event){
//do whatever you want
$('#div1').load(event.target.href, null, function() {});
});
PHP:
<?php for($i=1;$i<=5;$++) {?>
<a class="anchor-click" href="#" id="<?php echo $i ?>">CLick me No. <?php echo $i ?></a><br />
<?php } ?>
JS
$(function(){
$(".anchor-click").bind("click", function(event){
event.stopPropagation();
$('#div1').load("abc.php?ref="+$(this).attr("id"), null, function() {
});
});
});