<script>
function show(id){
$("button").click(function(){
$("p") .toggle();
});
});
</script>
<?php
$bid=0;
$bid=0;
include 'model.php';
$db=new database;
$r=$db->msghead($admno);
while($row= mysql_fetch_array($r))
{
$id=$row[0];
$title=$row[1];
$msg=$row[2];
$date=$row[3];
$sender=$row[4];
$tit_status=$row["title_status"];
$bid=$bid+1;
$pid=$pid+1;
?>
<button style="width:80%;height:35px;" onclick="MessageDetailsById(<?php echo $id;?>)" >
<?php
if($tit_status=="1"){
?>
<i class="fa fa-plus-circle" aria-hidden="true" style="width:20px;float:left;"></i> <i class="fa fa-envelope-open-o" aria-hidden="true"></i> <span id="active" class="sidebar-title" style="color:red;"><?php echo $title; ?></span> <?php echo $date;?>
<?php }else{?>
<i class="fa fa-plus-circle" aria-hidden="true" style="width:20px;float:left;"></i> <i class="fa fa-envelope-o" aria-hidden="true"></i> <span id="active<?php echo $tit_status;?>" class="sidebar-title"><?php echo $title; ?></span> <?php echo $date;?>
<?php }?>
</a></button>
<p style="display:none;" id="<?php echo $id; ?>"> <?php echo $msg; ?>
<a class="btn btn-primary" data-toggle="collapse" href="#collapseExample" aria-expanded="false" aria-controls="collapseExample">
Reply
</a>
</p>
<?php } ?>
so many buttons generated according to database.. but when i click single button all paragraph get open but i want it open only the paragraph related to its button.. i dont know which id will be used and how ???
What you want(toggle current and hide all at the same time) for that you have to change your structure and do like below:-
Example with your structure (you have to put your dynamic data carefully):-
$('.item p').hide();
$('.item button').click(function(e){
e.preventDefault();
var $this = $(this).parent().find('p');
$(".item p").not($this).hide();
$this.toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="item"> <!-- this is needed otherwise not possible -->
<button>Button</button> <p>span1</p> <br>
</div>
<div class="item">
<button>Button</button> <p>span2</p><br>
</div>
<div class="item">
<button>Button</button> <p>span3</p><br>
</div>
<div class="item">
<button>Button</button> <p>span4</p><br>
</div>
Reference taken:- http://jsfiddle.net/BGSyS/3/
you are assigning id to p
<p style="display:none;" id="<?php echo $id; ?>">
so just change your jquery code to this :
function MessageDetailsById(id){
$("button").click(function(){
$("#"+id) .toggle();
});
}
Try something like:
<button ... data-id="<?php echo $id; ?>" ...>...</button>
<p ... data-id="<?php echo $id; ?>" ...>...</p>
And then On click do something like:
$('button').click(function(){
$('p').find("[data-id='" + $(this).data('id') + "']").toggle();
});
I have not tested but I do use this case with dynamic elements in my programs.
Related
< script >
$(document).ready(function() {
$("#flip").click(function() {
$("#panel").slideToggle("fast");
});
}); <
/script>
I want to display each tuple in different panel upon clicking the button in particular panel the details of that particular tuple should be shown in slide down panel and once again clicking on the button details should be hidden.
but according to my code only first tuple is correctly functioning.
$num=mysqli_num_rows($res); for($i=1;$i
<=$num; $i++) { while($row=mysqli_fetch_array($res)) { ?>
<div>
<a id="flip" class="btn btn-info btn-lg" href="#" id="flip">
<?php echo $row['pname']; ?> </a>
<div id="panel">
<p id="flip">
<?php echo "{$row['startDate']}"; ?> </p>
<p id="flip">
<?php echo $row['endDate']; ?> </p>
<p id="flip">
<?php echo $row['reference']; ?> </p>
</div>
</div>
<hr/>
<?php
remove all the ids, they are unique
you dont need the for loop around the while loop
<?php
while($row=mysqli_fetch_array($res)) {
?>
<div class="item">
<a class="toggle btn btn-info btn-lg" href="#">
<?php echo $row['pname']; ?>
</a>
<div class="panel">
<p>
<?php echo "{$row['startDate']}"; ?>
</p>
<p>
<?php echo $row['endDate']; ?>
</p>
<p>
<?php echo $row['reference']; ?>
</p>
</div>
</div>
<hr/>
<?php
}
?>
<script>
$(document).ready(function() {
$(".toggle").click(function(event) {
event.preventDefault();
event.stopPropagation();
$(this).next('.panel').slideToggle("fast");
});
});
</script>
I'm using this code snippet from Bootstrap:
https://bootsnipp.com/snippets/featured/material-card-reveal-with-image-effect
I then created an Advanced Custom Fields repeater field to show multiple cards. The problem is, once i trigger one card, they all get triggered. Is there a way to separate the action?
Here is my code with the repeater field integrated, the CSS and JS is the same as the Bootstrap demo.
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
The best way to handle this would be to put a unique ID on the modal and accompanying trigger. They are all firing at the same time, because they all have the same trigger. You can use a count to generate the unique ID. Your javascript would also have to be in the loop (or you repeat the loop just for the JS).
<div class="container">
<div class="row">
<?php if( have_rows('team') ): ?>
<?php $count = 1;?>
<?php while( have_rows('team') ): the_row();
$image = get_sub_field('image');
$position = get_sub_field('position');
$name = get_sub_field('name');
$bio = get_sub_field('bio');
?>
<div class="small-12 medium-4 large-3 columns">
<div class="card">
<div class="card-image"><img class="img-responsive" src="<?php echo $image; ?>"></div>
<button id="show<?php echo $count; ?>">
<div class="card-content light-grey-bg center text-center">
<span class="card-title hind bold dark-grey text-center caps pt1"><?php echo $position; ?></span>
</div>
<div class="card-action blue-bg center text-center valign">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal panel<?php echo $count; ?>">
<span class="card-title"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<p><?php echo $bio; ?></p>
</div>
</div>
</div>
<script>
$(function(){
$('#show<?php echo $count; ?>').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
$('.card-reveal panel<?php echo $count; ?> .close').on('click',function(){
$('.card-reveal panel<?php echo $count; ?>').slideToggle('slow');
});
});
</script>
<?php $count++; ?>
<?php endwhile; ?>
<?php endif; ?>
</div>
</div>
First thing's first: You are repeating this markup, so that ID of show is no longer unique - remove it or make it unique for each repeated item.
Now, I've added a 'show' class to your button:
<button type="button" class="show btn btn-custom pull-right" aria-label="Left Align">
<i class="fa fa-ellipsis-v"></i>
</button>
And, in the JavaScript, selected that instead. I've used closest() and next() in order to slideToggle the cardReveal in the current context:
$(function(){
$('.show').on('click',function(){
$(this).closest('.card-content').nextAll('.card-reveal').slideToggle('slow');
});
$('.card-reveal .close').on('click',function(){
$(this).closest('.card-reveal').slideToggle('slow');
});
});
See it working here
I am working on an existing wordpress site. I am updating a page that displays the users in clickable images. When the image is clicked a dropdown box is supposed to display the users name and description. The problem I am having is, the dropdown box is only displaying the name and description of the last user on the page. The information in the dropdown is not matching up with the image clicked. Any help is greatly appreciated!
Here is the HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the jquery function to show dropdown box:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var profileDetails = $('.profile-details');
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Ok apparently there were both php and javascript mistakes. In php you succesfully RETRIEVING all users, but only PRINTING the last one, you would need to cast the profile-details inside the loop, but you also need to differentiate each profile-detail so they dont all come out at the same time. And we need to differentiate cards. So to not broke any css I added profile-id class and data-id for the card
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts
//cap row if the last row was not full
if(!($row_counter % 4 == 0))
{
echo "</div><!-- end/cap row-->\n";
}
?>
<!-- cast profile dropdown -->
<div class="container-fluid profile-details profile-<?php echo $user->ID;?>hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
</div><!--end container-->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
Html set now lets see the javascript. It was selecting any card and retrieving the only profile. Now it will select any card, get its id and retrieve that id profile:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //We get the card
var profileDetails = $('.profile-' + id); //We get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideTogle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
Tell me how it goes!
HTML/PHP:
<section class="series">
<div class="container-fluid">
<?php //query for hosts/contributor users
$cq = new WP_User_Query(array('role'=>'contributor'));
// User Loop
if(!empty($cq->results))
{
//sort users into current and past by meta field//
$hosts = $cq->results;
$current_hosts = array();
foreach($hosts as $user)
{
$user->sort_num = get_field('order', "user_$user->ID");
if(tv_is_host_active($user->ID))
$current_hosts[] = $user;
else
$past_hosts[] = $user;
}
usort($current_hosts, 'tv_compare_hosts');
//display the current hosts
$row_counter = 0;
foreach ( $current_hosts as $user )
{
//add rows of four
if($row_counter++ % 4 == 0)
{
echo "<div class='row'\n>";
} ?>
<div class="col-lg-3 col-md-3 col-sm-6 col-xs-12">
<a data-id="<?php echo $user->ID;?>" class="card-cast" href="javascript:void(0)">
<div class="card-img-cast">
<?php if(get_field('profile_picture', "user_".$user->ID)): $image = get_field('profile_picture', "user_".$user->ID); ?>
<img src="<?php echo $image['url']; ?>" alt="<?php echo $image['alt']; ?>" />
<?php else: ?>
<img src="<?php bloginfo('stylesheet_directory'); ?>/img/thumbholder-medium.png" alt="winchester logo" />
<?php endif;?>
</div>
<div class="card-content">
<div class="card-title"><?php echo $user->data->display_name; ?></div>
</div>
</a>
</div>
<!-- cast profile dropdown -->
<div class="profile-details profile-<?php echo $user->ID;?> hidden">
<i class="fa fa-times closeBox" aria-hidden="true"></i>
<h3 class="member-name"><?php echo $user->data->display_name; ?></h3>
<p class=".text-white"><?php echo tv_host_shows($user->ID); ?></p>
<p class="member-description"><?php echo get_user_meta($user->ID, 'description', true); ?></p>
<div class="row">
<div class="col-xs-12">
<ul class="list-inline social">
<?php if(get_field('facebook_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Like <?php echo $user->data->display_name; ?> On Facebook" href="<?php the_field('facebook_profile_link', "user_".$user->ID); ?>"><i class="fa fa-facebook"></i></a></li>
<?php endif;
if(get_field('twitter_profile_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Follow <?php echo $user->data->display_name; ?> On Twitter" href="<?php the_field('twitter_profile_link', "user_".$user->ID); ?>"><i class="fa fa-twitter"></i></a></li>
<?php endif;
if(get_field('youtube_channel_link', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="Watch <?php echo $user->data->display_name; ?> On Youtube" href="<?php the_field('youtube_channel_link', "user_".$user->ID); ?>"><i class="fa fa-youtube"></i></a></li>
<?php endif;
if(get_field('website', "user_".$user->ID)): ?>
<li><a data-toggle="tooltip" data-placement="top" data-original-title="See the website of <?php echo $user->data->display_name; ?>" href="<?php the_field('website', "user_".$user->ID); ?>"><i class="fa fa-globe"></i></a></li>
<?php endif; ?>
</ul>
</div>
</div><!-- end social link row -->
</div><!-- end dropdown -->
<?php
//add rows of 4
if($row_counter % 4 == 0)
{
echo "</div><!-- end row-->\n";
}
} //end foreach of current hosts?>
</div><!-- end Container -->
<?php
} else { ?>
<div class="col-xs-12 col-sm-4 host">
<p>No hosts found.</p>
</div>
<div class="clearfix visible-xs"> </div>
<?php
}
?>
<?php endwhile;
endif; //end main loop ?>
</section>
</main><!--end .main-bg -->
<script>
jQuery(document).ready(function() {
initHostsPage();
});
</script>
<?php
get_footer(); ?>
and the Javascript:
function initHostsPage() {
$('.social').each(function(key, val){
$(this).children('li').children('a').tooltip();
});
//dropdown profile box
$('.card-cast').click(function() {
var row = $(this).closest('.row');
var id = $(this).data('id'); //get the card
var profileDetails = $('.profile-' + id); //get the exact profile
profileDetails.removeClass('hidden');
row.append(profileDetails);
if((profileDetails).is(':hidden')) {
profileDetails.slideToggle('slow');
}
else{
profileDetails.hide();
}
});
$(".closeBox").click(function() {
$(this).parent().hide();
});
}
I have a forms of crud operations of groceryCrud where I put them in a modal. Inside the datatable, there's a button where I choose to edit, view or delete records. Inside of those button functions are the code mentioned above. In the codes above, when I click the edit button, it will display a modal with the edit form and so forth with others. At the list.php, I declare a JavaScript variables below where I get the edit and view links from groceryCrud.
The problem is, I can't get the ID of the selected data inside the datatable when I click the edit and view button. It will get and display the latest inputted data/record in the modal. Is there anything wrong on declaring my JavaScript variables that's why I can't get exactly the link with the exact ID of my selected record to be performed with crud operations?
I have a code at datatables/view/list.php
<table class="table table-striped table-bordered table-vcenter table-condensed table-responsive table-hover" id="example-datatable" style="height: 50px;">
<thead>
<tr>
<center>
<?php foreach ($columns as $column) {?>
<th><?php echo $column->display_as;?></th>
<?php }
?>
<?php if (!$unset_delete || !$unset_edit || !$unset_read || !empty($actions)) {?>
<th class="text-center actions" title="Actions" data-sortable="false"><i class="fa fa-flash"></i></th>
<?php }
?>
</center>
</tr>
</thead>
<tbody>
<?php foreach ($list as $num_row => $row) {
?>
<tr id='row-<?php echo $num_row?>'>
<?php foreach ($columns as $column) {?>
<td><?php echo $row->{$column->field_name}?></td>
<?php }
?>
<?php if (!$unset_delete || !$unset_edit || !$unset_read || !empty($actions)) {
?>
<td class="text-center">
<?php
if (!empty($row->action_urls)) {
foreach ($row->action_urls as $action_unique_id => $action_url) {
$action = $actions[$action_unique_id];
?>
<a href="<?php echo $action_url;?>" class="edit_button btn btn-small btn-effect-ripple btn-ripple btn-default row col-sm-4 col-xs-4" role="button">
<span class="ui-button-icon-primary ui-icon <?php echo $action->css_class;?> <?php echo $action_unique_id;?>"></span><span class="ui-button-text"> <?php echo $action->label?></span>
</a>
<?php
}
}
?>
<?php if (!$unset_read) {?>
<!-- <a href="<?php // echo $row->read_url ?>" class="edit_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-document"></span>
<span class="ui-button-text"> <?php // echo $this->l('list_view'); ?></span>
</a>-->
<a href="#modal-fadeView" class="btn btn-effect-ripple btn-xs btn-primary viewBtn" data-toggle="modal" title="<?php echo $this->l('list_view');?>" role="button" style="overflow: hidden; position: relative;">
<i class="fa fa-info-circle"></i>
</a>
<?php }
?>
<?php if (!$unset_edit) {?>
<!-- <a href="<?php // echo $row->edit_url ?>" class="edit_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-pencil"></span>
<span class="ui-button-text"> <?php // echo $this->l('list_edit'); ?></span>
</a>-->
<a href="#modal-fadeEdit" class="edit_button btn btn-effect-ripple btn-xs btn-success editBtn" data-toggle="modal" title="<?php echo $this->l('list_edit');?>" role="button" style="overflow: hidden; position: relative;">
<i class="fa fa-pencil"></i>
</a>
<?php }
?>
<?php if (!$unset_delete) {?>
<!-- <a onclick = "javascript: return delete_row('<?php // echo $row->delete_url ?>', '<?php // echo $num_row ?>')"
href="javascript:void(0)" class="delete_button ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary" role="button">
<span class="ui-button-icon-primary ui-icon ui-icon-circle-minus"></span>
<span class="ui-button-text"> <?php // echo $this->l('list_delete'); ?></span>
</a>-->
<a onclick = "javascript: return delete_row('<?php echo $row->delete_url?>', '<?php echo $num_row?>')"
href="javascript:void(0)" class="delete_button btn btn-effect-ripple btn-xs btn-danger" title="<?php echo $this->l('list_delete');?>" role="button">
<i class="fa fa-times"></i>
</a>
<?php }
?>
</td>
<?php }
?>
</tr>
<?php }
?>
</tbody>
<!-- <tfoot>
<tr>
<?php foreach ($columns as $column) {?>
<th><input type="text" name="<?php echo $column->field_name;?>" placeholder="<?php echo $this->l('list_search') . ' ' . $column->display_as;?>" class="search_<?php echo $column->field_name;?>" /></th>
<?php }
?>
<?php if (!$unset_delete || !$unset_edit || !$unset_read || !empty($actions)) {?>
<th>
<button class="ui-button ui-widget ui-state-default ui-corner-all ui-button-icon-only floatR refresh-data" role="button" data-url="<?php echo $ajax_list_url;?>">
<span class="ui-button-icon-primary ui-icon ui-icon-refresh"></span><span class="ui-button-text"> </span>
</button>
<a href="javascript:void(0)" role="button" class="clear-filtering ui-button ui-widget ui-state-default ui-corner-all ui-button-text-icon-primary floatR">
<span class="ui-button-icon-primary ui-icon ui-icon-arrowrefresh-1-e"></span>
<span class="ui-button-text"><?php echo $this->l('list_clear_filtering');?></span>
</a>
</th>
<?php }
?>
</tr>
</tfoot>-->
</table>
<!--<script type="text/javascript" src="<?=base_url()?>assets/Backend/grocery_crud/js/jquery_plugins/jquery.fancybox.pack-2.1.5.js"> </script>-->
<script type="text/javascript">
var editUrl = "<?php echo $row->edit_url?>",
readUrl = "<?php echo $row->read_url?>";
var $ = jQuery.noConflict();
$(document).ready(function () {
$(".fancybox").fancybox();
});
</script>
inside the <script>tag below, I declare the variables of the crud operation links. And I have this js file:
$(".addBtn").click(function () {
$('#addFrame').attr('src', "/InfoTable/add");
});
$(".editBtn").click(function () {
$('#editFrame').attr('src', editUrl);
});
$(".viewBtn").click(function () {
$('#viewFrame').attr('src', readUrl);
});
Now, I can't get the exact link of the crud operation with the data id, it gets the latest inputted/added data id when I click the button of edit and view.
I have looked at a few of the other answers to this question, but I have still not been able to get it done correctly. I have two unordered lists. One is dynamically created from a database table. The other is just a static table that begins empty. Each list contains, or will contain, list elements with nested anchor and awesome-font icon elements. My goal is to be able to, upon clicking the icon, transfer the list element from one list to the other, while changing the icon from a plus to minus sign. So far, I can successfully transfer items from the dynamic list to the static one, and I can change the icons, but I can not figure out how to transfer them back to the original list.
Here's my html:
<div class="row" id="constructTable">
<div class="col-md-6">
<h1>Choose your Columns:</h1>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true">
<div class="panel panel-default">
<div class="panel-heading" id="heading1" role="tab">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse1" aria-expanded="false" aria-controls="collapse1" class="collapsed"><span style="font-size: 16px;">Candidate Data</span></a>
</h4>
</div>
<div id="collapse1" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading1" aria-expanded="false" style="height:0px;">
<ul class="list-group choose" id="candidate">
<li class="list-group-item" id="candidate0">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;">First Name</span>
</li>
<li class="list-group-item" id="candidate1">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;">Last Name</span>
</li>
</ul>
</div>
</div>
</div>
<?php $counter = 2; ?>
<?php foreach ($mergedTests as $test): ?>
<?php $count=0 ?>
<div class="panel-group" id="accordion" role="tablist" aria-multiselectable="true" style="margin-top:-10px;">
<div class="panel panel-default">
<div class="panel-heading" id="heading<?php echo $counter; ?>" role="tab">
<h4 class="panel-title">
<a role="button" data-toggle="collapse" data-parent="#accordion" href="#collapse<?php echo $counter; ?>" aria-expanded="false" aria-controls="collapse<?php echo $counter; ?>" class="collapsed">
<span style="font-size: 16px;"><?php if( ! $test->example ): ?><?php echo $test->example; ?> Data<?php else: ?><?php echo $test->example; ?> Data<?php endif; ?></span>
</a>
</h4>
</div>
</div>
<?php $label = explode(",", $test->subtestLabel); ?>
<div id="collapse<?php echo $counter; ?>" class="panel-collapse collapse" role="tabpanel" aria-labelledby="heading<?php echo $counter; ?>" aria-expanded="false" style="height:0px;">
<ul class="list-group" id="<?php echo $test->subTestAbbreviation; ?>">
<?php if ( ! $test->testMakerTestId) : ?>
<?php foreach($label as $category): ?>
<li class="list-group-item" id="<?php echo $test->example; ?><?php echo $count; ?>" >
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> <?php echo $category; ?></span>
</li>
<?php $count++; ?>
<?php endforeach; ?>
<?php else: ?>
<li class="list-group-item" id="<?php echo $test->subTestAbbreviation; ?>0">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> Raw Score</span>
</li>
<li class="list-group-item" id="<?php echo $test->subTestAbbreviation; ?>1">
<a class="btn btn-sm btn-default">
<i class="fa fa-lg fa-plus"></i>
</a>
<span style="font-size: 14px; margin-left:5px;"><?php echo $test->example; ?> Percentile</span>
</li>
<?php endif; ?>
</ul>
</div>
</div>
<?php $counter++; ?>
<?php endforeach; ?>
</div>
<div class="col-md-6">
<h1>Arrange Your Columns:</h1>
<ul class="list-group ui-sortable" id="selectedColumns">
</ul>
</div>
</div>
</div>
And my JQuery attempt so far:
$('li a').click(function(){
var parentId = $(this).parent().attr('id');
$(this).find($(".fa")).removeClass('fa-plus').addClass('fa-minus');
$("#selectedColumns").append($("#" + parentId));
});
// Move selection from Arrange Your Columns back to Choose Your Columns
$('ul#selectedColumns').click(function(){
var parentId = $(this).parent().attr("id");
console.log(parentId);
transferId = parentId.slice(0, -1);
$("#" + parentId).find($(".fa")).removeClass('fa-minus').addClass('fa-plus');
$("#" + transferId).append($("#" + parentId));
});
Any help would be greatly appreciated.
Ok here you may need to use names for these lists, the target is selectedColumns, and the source is unordered lists has some database generated id. I will put a class name source-list to your datbase generated lists.
We can use this class name as a common selector of source lists and since the dom will change via user interaction we should use .on instead of .click binding.
First we send a clone of the selected item to selectedColumns and hide the original one so we wont have to find exact place of the element to roll back;
$(".source-list").on("li a","click", function(e) {
// get id of element for further reference
var itemId = $(this).attr("id");
// clone the item to a variable
var cloneItem = $(this).parent().clone();
// change the appearence of cloned item
cloneItem.find($(".fa")).removeClass('fa-plus').addClass('fa-minus');
// append cloned item to selectedColumns
cloneItem.data("id", itemId).removeAttr('id').appendTo("#selectedColumns");
// hide the original item
$(this).hide();
});
$("#selectedColumns").on("li a","click", function(e) {
var itemId = $(this).data("id");
$(this).remove();
$(itemId).show();
});
Since this code has alot of errors / typos, i have created a fiddle for this,
https://jsfiddle.net/wxsnagr9/7/
Looks to me like what you have should be fine for the most part, you should just fix the selectors (also, using event delegation will save you from needing to bind data/recheck parent locations):
$('#candidate').click('li a', function(){
$(this).find(".fa").removeClass('fa-plus').addClass('fa-minus');
$(this).parent().appendTo($("#selectedColumns"));
});
$('#selectedColumns').click('li a', function(){
$(this).find(".fa").addClass('fa-plus').removeClass('fa-minus');
$(this).parent().appendTo($("#candidate"));
});