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>
Related
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] ?>");
});
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.
Here is the JavaScript I use to animate slider (fade effect) of the content I read from database:
<script language="javascript">
jQuery(document).ready(function ()
{
var terms = ["span_1","span_2"];
var i = 0;
function rotateTerm() {
jQuery("#text-content").fadeOut(200, function() {
jQuery(this).text(jQuery('#text-slider .'+terms[i]).html()+i).fadeIn(200);
});
jQuery("#title-content").fadeOut(200, function() {
jQuery(this).text(jQuery('#title-slider .'+terms[i]).html()+i).fadeIn(200);
i == terms.length - 1 ? i=0 : i++;
});
}
rotateTerm();
setInterval(rotateTerm, 1000);
});
</script>
And here is the PHP code I use:
<?php
if (!empty($testLst)) :
$num=1;
foreach($testLst as $key=>$item):
$item->slug = $item->id;
$item->catslug = $item->catid ;
?><div id="hidden-content" style="display:none;">
<div id="title-slider">
<span class="<?php echo 'span_'.$num; ?>">
<h4><a href="<?php echo JRoute::_(ContentHelperRoute::getArticleRoute($item->id, $item->catid)); ?>">
<?php echo $item->title; ?></a>
</h4>
</span>
</div>
<div id="text-slider">
<span class="<?php echo 'span_'.$num; ?>">
<p>
<?php
$concat=array_slice(explode(' ',$item->introtext),0,20);
$concat=implode(' ',$concat);
echo $concat."...";
?>
</p>
</span>
</div></div>
Learn more >></p>
<?php
$num++;
endforeach;
endif;
?>
<div id="title-content">
</div>
<div id="text-content">
</div>
And here is a JSFiddle page reproducing what I would like to do.
My problem is that I am getting data that still has HTML tags, however I would like the output to have my CSS styles.
You could clone the node, and set that to be the new content of the target elements, to keep everything in jQuery objects, but personally, I'd use the .outerHTML property.
I've updated your fiddle to show you what I mean: I've changed the .text(...set content here) to .html(), because we're injecting HTML content. Then, I added [0] at the end of your selector, to return the raw element reference, which gives access to all standard JS properties and methods an element has, and just went ahead and fetched the outerHTML... easy-peasy
The PHP script doesn't seem to call dis(); function..Here it is:
PHP:
if (!$_SESSION['user']) {
echo"<script type='text/javascript'>dis();</script>";
}
JS:
<script type="text/javascript">
function dis() {
$(document).ready(function() {
$("#main_text_area").attr("disabled", "disabled");
});
}
When I place just $("#main_text_area").attr("disabled", "disabled"); it disables correctly...but I need to do it on a function call...Thanks for comments.
I'd recommend, instead of disabling the textarea, outputting the content of the <textarea> as static text.
Maybe something like this:
<?php if( !$_SESSION['user'] ): ?>
<div class="text">
<?php echo $textareaContents; ?>
</div>
<?php else: ?>
<textarea id="main_text_area">
<?php echo $textareaContents; ?>
</textarea>
<?php endif; ?>
The Javascript approach you're currently taking is trivially easy to get around.
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.