i am using php codeigniter. I am sending data in an array to my view. In my view i have a foreach loop in place which iterates through the array and displays the data in my view. Also inside this foreach loop i am displaying some action buttons.
<?php
foreach($studentList as $r)
{
echo '<tr>';
echo $r->id;
echo '</tr>'?>
<a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
<a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
<?php
} ?>
What i want to do is to display the lock button by default, when someone clicks on this button lock should get hidden and unlock button should get displayed. in my jquery i am doing it like this but clicking on single button accounts for changing the buttons on the whole page.
I know the reason as i am accessing the element using class which all of them have common but i haven't yet figured out how to do that using id which will account for single elements.
$('.unlock').click(function() {
var id = $(this).attr("data-id");
console.log(id);
$('.unlock').addClass("hidden");
$('.lock').removeClass("hidden");
});
This slight modification should help you.
$('.unlock').click(function(){
var id = $(this).attr("data-id").split('_')[0];
console.log(id);
$(this).addClass("hidden");
$('[data-id='+id+'_unlock]').removeClass("hidden");
});
OK, so first off, you're putting the anchors outside of the <tr>'s. Is this intended?
If you have code like this:
<?php
foreach($studentList as $r)
{
echo '<tr>';
echo $r->id;?>
<a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
<a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
<?php
echo '</tr>';
} ?>
You can simply do:
$('.unlock').click(function(){
var id = $(this).attr("data-id");
console.log(id);
$(this).parent('tr').find('.unlock').addClass("hidden");
$(this).parent('tr').find('.lock').removeClass("hidden");
});
Also have a look here on information on how to fetch siblings, as an alternative way to locate the element you're looking for.
First of all, your html is semantically wrong, tr should contain th or td depending of what you want to do. Even when the browsers doesn't complaint for bad html doesn't mean it is correct. So, this is what a recommend:
Supposing we have this
<table id="myTable">
<tbody>
<?php foreach($studentList as $r) { ?>
<?php echo '<tr><td>'; ?>
<?php echo $r->id; ?>
<a class="lock" data-id="<?= $r->id?>_lock" data-placement="top" data-original-title="Lock Profile" href="javascript:void(0)"><i class="clip-locked"></i></a>
<a class="hidden unlock" data-id="<?= $r->id?>_unlock" data-placement="top" data-original-title="Unlock Profile" href="javascript:void(0)"><i class="clip-unlocked"></i></a>
<?php echo '</td></tr>'; ?>
<?php } ?>
</tbody>
</table>
Bind a single event to both anchors:
$("#myTable tr a").click(function(){
//save the element for future reference and avoid repeat $(this)
var elm = $(this),
id = elm.attr("data-id"),
elmtoShow = elm.hasClass('unlock') ? '.lock' : '.unlock';
console.log(id);
elm.addClass("hidden");
//we can pass a second param to jQuery to query into
//that single element instead the whole document
$(elmtoShow, this.parentNode).removeClass("hidden");
});
Please, note that I added an id to the table to make the query to all anchors, also read the comments in the code. Hope it helps
Related
I'm creating dynamic menu. I wanted to highlight the menu once it is selected.
We use php. just need to figure out how to append the class active to the current page. Can anyone help me with this?
<div id="sidebar-wrapper" class="sidebar-toggle">
<ul class="sidebar-nav">
<?php
$i=1;
if(count($shipments) > 0)
{
foreach($shipments as $row)
{
$shipment_id = $row['id'];
$containerdest = $row['no']."-".$row['destination'];
?>
<li id="shipment<?php echo $shipment_id; ?>"><?php echo $containerdest; ?>
</li>
<?php $i++;
}
} ?>
<li>
Logout
</li>
</ul>
</div>
</div>
Change your html line with below line
<li id="shipment<?php echo $shipment_id; ?>" class="menu"><a href="<?php echo ite_url("users/get_details/$shipment_id");?>" shipmentid="<?php echo $shipment_id; ?>" ><?php echo $containerdest; ?></a>
And write javascript code as below (assuming you have included jquery library file)
<script>
$(document).ready(function(){
var url = location.pathname;
var arr = mystr.split("/");
var id = arr[2];
$(#shipment'+id).attr('shipmentid');
$('.menu').removeClass('active'); //this will remove all active class after page loading
$('#shipment'+id).addClass('active'); // this will append active class to the current clicked menu
});
</script>
I'm working on a WP code, but my problem in specific to JS. So I post my question here at StackOverflow.
Final goal is, clicking on the post image, showing the HTML markup of large img on Console. Here's my code:
<div class="img lightbox-trigger">
<?php the_post_thumbnail(); ?>
<div class="hover" >
<i class="fa fa-arrows-alt"></i>
</div><!--hover-->
</div><!-- .img .lightbox-trigger -->
<?php $large_thumb = get_the_post_thumbnail($post->ID, 'large') ?>
<script type="text/javascript">
jQuery(document).ready(function($){
$(".lightbox-trigger").click(function(){
var largeThumb = <?php echo json_encode( $large_thumb ); ?>;
console.log( largeThumb );
});
});
</script>
The problem is when I click on one of the post's images, the largeThumb value of all other posts (there are 10 posts) printed on Console!
I don't know how to use $(this) in this specific context to just get the value related to the element being clicked on.
Any help is appreciated.
You could use data-* attributes to store the $large_thumb of every lightbox-trigger in the related div :
<div class="img lightbox-trigger" data-large-thumb='<?php echo get_the_post_thumbnail($post->ID, 'large'); ?>'>
<?php the_post_thumbnail(); ?>
<div class="hover" >
<i class="fa fa-arrows-alt"></i>
</div><!--hover-->
</div><!-- .img .lightbox-trigger -->
Then in the js you could get this info :
jQuery(document).ready(function($){
$(".lightbox-trigger").click(function(){
console.log( $(this).data('large-thumb') );
console.log( $(this).html() );
});
});
Hope this helps.
I want to create a bootstrap modal for social sharing buttons in my wordpress blog. For the modal to be visible, I have to place it outside the post (loop) but its trigger (button) inside the post. I want to pass the URL and Title of the post to the Sharing Buttons inside the modal.
I have created two variables inside the post to get its URL and title:
<?php
// Get current post URL
$URL = get_permalink();
// Get current post title
$Title = str_replace( ' ', '%20', get_the_title()); ?>
Then, I created the trigger inside the post to display the modal
<button class="btn btn-link btn-lg" id="socialbtn" data-toggle="modal" data-target="#myModal">Share</button>
And in the modal body, I have many buttons, like
<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=***URL of the post***">Facebook</a>
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=$URL&text=$Title$" >Twitter</a>
What I want to do is to replace the $URL in href of Facebook and Twitter with the URL of the post and likewise the title.
I know that I have to use JavaScript, but I'm unable to figure out the correct syntax.
Will be thankful for help. :)
I did it like this:
In the trigger button, I set the data attributes as follows:
<button class="btn btn-link btn-lg" id="socialbtn" data-url="<?php echo $URL; ?>" data-title="<?php echo $Title; ?>">Share</button>
then got the facebook and twitter URLs in separate variables and then set the href attributes as follows:
<script>
$(document).on("click", "#socialbtn", function () {
var url = $(this).data('url');
var title = $(this).data('title');
var fburl = "https://www.facebook.com/sharer.php?u="+url;
var twurl = "https://twitter.com/share?url="+url+"&text="+title;
$("#facebook").attr("href", fburl);
$("#twitter").attr("href", twurl);
</script>
And in the modal body, used the anchor tags as follows:
<a class="ssk ssk-text ssk-facebook" id="facebook" href="#">Facebook</a>
<a class="ssk ssk-text ssk-twitter" id="twitter" href="#">Twitter</a>
You have to output them using PHP:
<a class="ssk ssk-text ssk-facebook" href="https://www.facebook.com/sharer.php?u=<?php echo $URL; ?>">Facebook</a>
<a class="ssk ssk-text ssk-twitter" href="https://twitter.com/share?url=<?php echo $URL; ?>&text=<?php echo $Title; ?>" >Twitter</a>
$(".ssk-facebook").attr("href", "YourNewURL");
$(".ssk-twitter").attr("href", "YourNewURL");
$( "#socialbtn" ).click(function() {
$(".ssk-facebook").attr("href", "https://www.facebook.com/sharer.php?u=<?= $URL ?>");
$(".ssk-twitter").attr("href", "https://twitter.com/share?url=<?= $URL ?>&text=<?= $Title ?>");
});
You have to identify which button the user have clicked on.
You can archive that by using unique IDs OR by adding hidden inputs or divs containing the correct hrefs for each post.
Then select those "href-container" relatively to the button and change the modal. ("closest(), parent(), nextAll() etc.)
Do you need code examples?
Use data attribute to add link with every post's share button:-
HTML
<!-- Share button (PLACE IT INSIDE YOUR LOOP) -->
<a data-url="<?php echo url; ?>" data-title="<?php echo $title;?>" class="open-share btn btn-primary" href="#">share</a>
<!-- Model popup (PLACE IT AFTER LOOP) -->
<div class="modal hide" id="sharepopup">
<div class="modal-header">
<button class="close" data-dismiss="modal">×</button>
<h3>Share </h3>
</div>
<div class="modal-body">
<a id="facebook" class="ssk ssk-text ssk-facebook">Facebook</a>
<a id="twitter" class="ssk ssk-text ssk-twitter" >Twitter</a>
</div>
</div>
JS
<script>
$(document).on("click", ".open-share", function () {
var url = $(this).data('url');
var title = $(this).data('title');
$('#facebook').attr("href", "http://facebook.com?share="+url);
$('#facebook').attr("title", "http://twitter.com?share"+title);
$('#twitter').attr("href", url);
$('#twitter').attr("title", title);
// Initialize popup with Javascript.
$('#sharepopup').modal('show');
});
</script>
I have the following code
jQuery(document).ready(function($)
{
$("#deleteorderb").click(function()
{
$("#deleteorder").attr('href','/deleteorder.php?id=' + $('#deleteorderb').val());
})
});
<a onclick="jQuery('#modal-2').modal('show');" id="deleteorderb" name="deleteorderb"
value="<?php echo $r['id']; ?>" class="btn btn-danger btn-sm btn-icon icon-left">
Cancel
</a>
When I click the link, it opens a popup modal, which has a but of text saying are you sure you want to delete, and then there's a link, herf, I want to update that herf to equal the the other href's value which will be a database query to get the id. the ink updates with the above but not the id. I have checked the source code and the a hrefs value IS set.
You want to grab element attribute value, so instead of
$('#deleteorderb').val()
try
$('#deleteorderb').attr('value')
Try something like this, *note the use of .attr("value") not .val():
<a onclick="dialog();" id="deleteorderb" name="deleteorderb" value="<?php echo $r['id']; ?>" class="btn btn-danger btn-sm btn-icon icon-left"> Cancel</a>
<script>
$(document).ready(function() {
$("#deleteorderb").click(function() {
var a = $('#deleteorderb').attr("value");
var link = "/deleteorder.php?id=" + a;
$("#deleteorder").attr("href", link);
});
function dialog() {
$('#modal-2').modal('show');
};
});
</script>
The value attribute is normally used on form fields. So in your case it would make sense to use a data attribute as follows:
<a id="deleteorderb" name="deleteorderb" data-value="<?php echo $r['id']; ?>" .....
And in your JavaScript you could access it like so:
$('#deleteorderb').data('value');
BONUS
I would not recommend using inline JS. Instead just use jQuery to setup a click event listener in your DM ready callback:
$('#deleteorderb').on('click', function( e ) {
e.preventDefault();
$('#modal-2').modal('show');
});
Updated html:
<a
id="deleteorderb"
name="deleteorderb"
data-value="<?php echo $r['id']; ?>"
class="btn btn-danger btn-sm btn-icon icon-left">
Cancel
</a>
I'm working on a shopping cart and my client wants it to have one background when it's empty and another one when it has items. So here's what I got as a mark up:
<a href="#" id="shopping-cart" data-count="0" class="trigger cart">
<span>
</span>
</a>
The changes on the data-count are being handled on server side and updated via php my problem is that I have no idea how to make jquery read the data-count and make the if statement so it reads
if data-count= 0 then add .empty
else data-count > 0 then add .full
Also, I'm not sure if I should use .addClass or .toggleClass from empty to full, I'm sorry, so far all my attempts to write jquery have failed and the handler for all that is on vacation so I would appreciate all the help.
A decision was made to change the plugin being used and now I tried to replicate this on the new one and cant seem to wrap my head around it to achieve it the new code available looks something like this:
<?php global $woocommerce; ?>
<a class="cart-contents" href="<?php echo $woocommerce->cart->get_cart_url(); ?>"
title="<?php _e('View your shopping cart', 'woothemes'); ?>">
<?php echo sprintf(_n('%d item', '%d items', $woocommerce->cart->cart_contents_count, 'woothemes'), $woocommerce->cart->cart_contents_count);?> - <?php echo $woocommerce->cart->get_cart_total(); ?></a>
$('a.cart').data('count')
Gives the value of count.
why don't you do this ? :
$cart = sprintf(_n('%d', cart::$cart_contents_count, 'mini-cart'), cart::$cart_contents_count);
if($cart >= '1')
{
?>
<a href="#" id="shopping-cart" data-count="$cart" class="trigger cart">
<span>
</span>
</a> <?php
}
else
{ ?>
<a href="#" id="shopping-cart" data-count="0" class="trigger cart">
<span>
</span>
</a>
<?php
}
this way you do not need to use jQuery to hide elements that are not needed.