So I have something like this:
<?php foreach($post_array as $post): ?>
<div class="postBodyWrapper">
<div class="vid-link">
<script type="text/javascript">
$(function() {
$(".vidthumb").append("<img class='thumb' src='<?php echo $post->vid_link; ?>'/>");
});
</script>
<div class="vidthumb"></div>
</div>
</div>
<?php endforeach; ?>
Let's say I have five posts in the $post_array. Then the <div class="vidthumb"></div> of each post will contain all five images (that are generated from the JavaScript code), instead of only the one that is supposed to. How can I fix it?
Try:
<?php $i = 0; foreach($post_array as $post): ?>
<div class="postBodyWrapper">
<div class="vid-link">
<script type="text/javascript">
$(function() {
$("#vidthumb_<?php echo $i ?>").append("<img class='thumb' src='<?php echo $post->vid_link; ?>'/>");
});
</script>
<div id="vidthumb_<?php echo $i++ ?>"></div>
</div>
</div>
<?php endforeach; ?>
By giving each vidthumb div you want the thumb to appear in a unique ID, you can now target the specific div's instead of the first match.
Related
I am new to ajax, is there a way you can help me, how to disable all items once click is successful:
Here is my code for ajax:
if (!parent.hasClass('.disabled')) {
// vote up action
if (action == 'click') {
alert("test");
};
//how do i add disabled function on a particular div
// add disabled class with .item
parent.addClass('.disabled');
};
here is my index:
<?php while($row = mysql_fetch_array($query)): ?>
<div class="item" data-postid="<?php echo $row['recipe_id'] ?>" data-score="<?php echo $row['vote'] ?>">
<div class="vote-span"><!-- voting-->
<div class="vote" data-action="up" title="Vote up">
<i class="icon-chevron-up"></i>
</div><!--vote up-->
<div class="vote-score"><?php echo $row['vote'] ?></div>
</div>
<div class="post"><!-- post data -->
<p><?php echo $row['recipe_title'] ?></p>
</div>
</div><!--item-->
i jst want to disable the loop icon-chevron-up class.not just one but all.
Actually no ajax call needed here. I will only be done by using jquery. See the code
$(document).ready(function(){
$('.item').click(function(){
if (!parent.hasClass('.disabled')) {
parent.addClass('.disabled');
}
});
});
Here you have not mentioned, on what click you need the action, so i consider that on the div contains class='item', the action will be performed. I hope it will help.
I am using a JW video player and the way it is implemented for a single video is as below
<div id="myElement">Loading the player...</div>
<script type="text/javascript">
jwplayer("myElement").setup({
file: "<?php echo $dbVideoFile; ?>"
});
</script>
</div>
No what I want to do is that I want to do is loop through each existing video and to display a jw video player for each video. Only problem is that it is not quite working, it is only display the jsplayer for one video, the other videos do not show anything but blank. What am I doing wrong below:
<p>
<?php foreach ($arrVideoFile[$key] as $v) { ?>
<div id="myElement">Loading the player...
<script type="text/javascript">
jwplayer("myElement").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>"
});
</script>
</div>
<?php } ?>
</p>
id tag should be unic so JWPlayer is confused when calling #myElement
Try incrementing a value and dynamically rename "myElement-" + i
I didn't get to test but that shoudl work:
<p>
<?php
$i = 0;
foreach ($arrVideoFile[$key] as $v) { ?>
<div id="myElement-<?php echo $i; ?>">Loading the player...
<script type="text/javascript">
jwplayer("myElement-<?php echo $i; ?>").setup({
file: "<?php echo 'VideoFiles/'.$v; ?>"
});
<?php $i++; ?>
</script>
</div>
<?php } ?>
</p>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min.js" type="text/javascript"></script>
<script src="<?php $this->baseUrl()?>/public/js/jQuery.bubbletip-1.0.6.js" type="text/javascript"></script>
<link href="<?php $this->baseUrl()?>/public/js/bubbletip/bubbletip.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
$(document).ready(function() {
for(i=1;i<12;i++){
$('#a'+i).bubbletip($('#tip'+i), { deltaDirection: 'right' });
}
});
</script>
code in header part
<?php
foreach($this->nominations as $nomination)
{
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){?>
<div id="tip<?php echo $i?>" style="display:none;">
<div class="star"><strong><?php echo $nomination['award'.$i];?></strong></div>
<div><strong>Project: </strong><?php echo $nomination['project'.$i]?></div>
</div>
<?php }}
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){
echo "<span id='a$i'>";
echo "<img src='/public/assets/images/icons/star.png'/>";
echo "</span>";
}}
}?>
code in body section
My problem is when take my mouse over the stars of first iteration of foreach everything is working fine but its not working from second iteration i found that problem is with id a,tip becuause they are always becoming a1,a2.. and tip1,tip2... is there any solution
it is because every iteration of your forach loop creating elements of same id from a1 t a12
you need to put another level in names of ids .Try to use following
<?php
$count=0;
foreach($this->nominations as $nomination)
{
$count++;
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){?>
<div id="tip<?php echo $i?>_<?php echo $count?>" style="display:none;">
<div class="star"><strong><?php echo $nomination['award'.$i];?></strong></div>
<div><strong>Project: </strong><?php echo $nomination['project'.$i]?></div>
</div>
<?php }}
for($i=1;$i<12;$i++){
if($nomination['award'.$i]!=""){
echo "<span id='a$i_$count'>";
echo "<img src='/public/assets/images/icons/star.png'/>";
echo "</span>";
}}
}
<input type="hidden" id="total_iteration" name="total_iteration" value="<?php echo $count?>"/>
?>
And change you javascript code accordingly
<script type="text/javascript">
$(document).ready(function() {
var total=$('#total_iteration').val();
var t=0;
for(t=1;t<total;t++)
{
for(i=1;i<12;i++){
$('#a'+i+'_t').bubbletip($('#tip'+i+'_'+t), { deltaDirection: 'right' });
}
}
});
</script>
After some debigging above code should run the way you want i haven't tested it but i guess the main problme is the elements of duplicate ids in each foreach iteration
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
Alright not sure what to do and i am honestly bit lost. What I am trying to do is upload a file to site via jQuery and push it to PHP which then deletes original image file and makes a a copy of it called header.jpg and pushes it where it needs to go. That part works with no problem. The problem here is how would I go about updating the div element if the header.jpg image is the background?
Note: no matter what the img will always be header.jpg but it needs to be re-cached by browser and outputed to user without page refresh
Here is how the header div is layed out
<div id="headerEmpty"></div>
<div id="pageName">
<h2><?php echo $pageName; ?></h2>
</div>
<?php if ( $_SESSION['signed_in'] == true ) { ?>
<div id="header" style="background-image:url(uploads/header.jpg);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>
<?php } else { ?>
<div id="header"></div>
<?php } ?>
and here is the jquery bit which displays loader and auto-starts the upload process
$('#photoimg').live('change', function() {
$("#preview").html('');
$("#preview").html('<img src="uploads/icon/16/ajax-loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm(
{
target: '#header',
success : function(data) {
$("#header").html(data).fadeIn('fast');
}
}).submit();
});
When you want to update the image, change it's source. You can append a time-stamp to the source so it will not come from the browser's cache. In PHP that would be something like:
<div id="headerEmpty"></div>
<div id="pageName">
<h2><?php echo $pageName; ?></h2>
</div>
<?php if ( $_SESSION['signed_in'] == true ) { ?>
<div id="header" style="background-image:url(uploads/header.jpg?_=<?php echo time(); ?>);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>
<?php } else { ?>
<div id="header"></div>
<?php } ?>
The time-stamp should just be ignored and the image will be downloaded each update.
Update
Ok, I see now that the background image is on the element you are replacing the HTML of. You could use jQuery to update the url() of the image:
success : function(data) {
var theDate = new Date();
$("#header").css('background-image', 'uploads/header.jpg?_=' + theDate.getTime()).html(data).fadeIn('fast');
}
You could also use PHP to output the #header element and use replaceWith() instead of .html():
success : function(data) {
$("#header").replaceWith(data).fadeIn('fast');
}
This assumes that your PHP output now looks like this:
<div id="header" style="background-image:url(uploads/header.jpg?_=1234567890);">
<span class="edit" fn="header">
<img src="uploads/icon/16/018.png" />
</span>
<div class="fn_menu" style="display:none;"></div>
</div>