We Keep Coding

Retrieve ACF unique ID generated by repeater field for use in a JavaScript function

I'm using advanced custom fields to repeat divs. There is a unique ID injected into the wrapper div for a click function that reveals content (i can't use a class because it triggers all the divs at once).
How do I target this ID in my javascript function dynamically? Here is my code;
<?php if( have_rows('team') ): $i = 0; ?>
<?php while( have_rows('team') ): the_row(); $i++;
$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-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" id="wrap-<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
<?php endif; ?>
And my function;
<script>
(function($) {
$('#wrap-1').on('click',function(){
$('#show-1').slideToggle('slow');
});
$('#show-1 .close').on('click',function(){
$('#show-1').slideToggle('slow');
});
})( jQuery );
</script>
Edit: the id is dynamically injected here;
id="wrap-<?php echo $i; ?>"

I would add the ID to each element in a data attribute, and use this and that ID to toggle appropriately. To summarize the JS, when you click on the button, you get the stored data attribute, which can be used to find the appropriate target for toggling.
To the HTML, I add the data ID to the #show divs, and removed the id completely from the button. It's not needed.
HTML changes:
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
and
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">`
Javascript
(function($) {
$('.teamInfo').on('click', function() {
var id = $(this).data('toggle-id');
$('#show-' + id).slideToggle();
});
$('.card-reveal .close').on('click',function() {
var id = $(this).closest('.card-reveal').data('toggle-id');
$('#show-' + id).slideToggle('slow');
});
})( jQuery );
And the entire HTML as you posted it:
<div class="small-12 medium-4 large-4 columns" style="float: left;">
<div class="card">
<button class="teamInfo" data-toggle-id="<?php echo $i; ?>">
<div class="card-image">
<img class="img-responsive" style="width: 100%;" src="<?php echo $image; ?>">
</div>
<div class="card-content light-grey-bg">
<p class="card-title hind bold dark-grey caps"><span class="center"><?php echo $position; ?></span></p>
</div>
<div class="card-action blue-bg center text-center">
<p class="hind bold white caps"><?php echo $name; ?></p>
</div>
</button>
<div class="card-reveal" id="show-<?php echo $i; ?>" data-toggle-id="<?php echo $i; ?>">
<span class="card-title hind bold caps dark-grey"><?php echo $name; ?></span>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="float: right !important;">
<span aria-hidden="true"><i class="fa fa-times blue" aria-hidden="true"></i></span>
</button>
<p class="hind dark-grey pt1"><?php echo $bio; ?></p>
</div>
</div>
</div>

I'd look at using this. You can still use a class for an event selector, and in the handler, have context to know which was selected.
<script>
(function($) {
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
$('.teamInfo').on('click',function(){
$(this).slideToggle('slow');
});
})( jQuery );
</script>
^ i'm not clear if you were adding the .close class for a visual cue or if you wanted to use that to trach shown state. Might just need the one handler to act as a toggle. Or an if statement in the toggle if other things need to happen on the transition.

how can i get the php value(id) from a span and use it in a modal window

i created an articles and each article has an id. i made a modal window for viewing the detailed articles inside modal window you can insert a comment and like the article but the problem is when i tried to click the other article the id that he gets is only the first id that was created.what i wanted to do is that when i tried to click the article it will get the article id and show it to the modal.
here is my sample code.
this is the button that i clicked for me to show the modal window
span style="color:#59960b;" class="read" data-toggle='modal' data-target="#myModal">Read more..</span><input type="hidden" value="<?php echo $articleid; ?>"></span>
MODAL WINDOW
<?php
$output = $db->viewArticle($articleid);
foreach ($output as $key):
if($key['art_id'] == $articleid){
?>
<!--view Modal content-->
<div id="articlepost" class="modal-content-article">
<div class="modal-header-article">
<input type="hidden" name="aid" id="aid" value="<?php echo $articleid ?>"/>
<button type="button" style="padding-left:1155px;position:fixed;" class="close" data-dismiss="modal">×</button>
<img src="./<?= $key['art_cphoto'];?>" style="margin-left:100px;"/>
</div>
<div class="modal-body">
<div align="center" style="color:#222;">
<strong class="font-2" id="title"><?php echo $arttitle ?></strong>
<?php }?>
<?php
foreach ($db->countarticlecomment($articleid) as $value) {
?>
<span class="font-1-2" style="margin-right:10px;">
<i class="fa fa-comment" style="color:#59960b;"></i> <span style="color:gray;"><b><?php echo $value['comments']?></b></span> 
</span>
<hr>
<?php }?>
</div>
</div>
<?php
$out = $db->articleviewcount($articleid);
foreach ( $db->viewarticlecomment() as $value) {
if($articleid = $value['artid']){
?>
<div id="mycomments" class="col-lg-8" style="background:#eff9c7;color:#222;margin-left:170px">
<span class="" style="margin-left:10px;font-size:.9em;color:gray;"><abbr class="timeago" title="<?php echo $value['artsend']?>"></abbr></span>
</p>
</div>
<?php
}
}
?>
<div class="col-lg-8" style="background:#eff9c7;margin-left:170px">
<br>
<input type="text" name="artcomment" id="artcomment" class="form-control pull-right" style="width:92%;margin-top:5px;margin-bottom:10px;" placeholder="Comments..." />
<br><br>
</div>
<?php endforeach ?>
<br>
<div class="row">
</div>
<br>
</div>
</div>
</div>
how can i get the value of the $articleid so that when i clicked one of the articles it will send the (id)value to the modal window so that the id of the article will be the one to shown. i tried using jquery to get the $articleid and it works but my problem is how can i use the id from my jquery to my modal? i tried searching and they said to use ajax. i tried it also and declared my modal window in a variable but my concern is my modal has 2 forloops inside and also when i tried to use the jquery function only the latest article is clickable not the other articles. even if i can get the id of the article if i cannot clicked the other article it doesn't make anysense. so is there any way i can get the id and use it in a modal..? btw this script is both inside 1php file.

I would recommend that you use the Global data attribute to send the article id to the modal. You can learn about the data attribute here:
https://www.w3schools.com/tags/att_global_data.asp.
Below is a code snippet that shows how the data attribute works.
You'll notice that in the button there is an custom data attribute called data-articleid and that I have set it's value to xyz. You would set it's value to <?php echo $articleid ?>. I can't use php here.
When the button openBtn is clicked, a function is called and a variable called articleId gets the value of the attribute data-articleid and then sets the text of title inside the modal to articleId.
// function to open the modal, get the data attribute, and set the title text
$('#openBtn').click(function() {
$('#myModal').modal('show');
var articleId = openBtn.getAttribute("data-articleid");
$('#title').text(articleId);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://netdna.bootstrapcdn.com/bootstrap/3.0.0/js/bootstrap.min.js"></script>
<!-- Trigger the modal with a button -->
<!-- I can't use php in this snippet so I'm just hardcoding a data-articleid of "xyz". You should echo your article id instead. -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-articleid="xyz" id="openBtn">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title" id="title"></h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>

Maybe you could output all articles as their own modals and assign them their own ID's, so that they wouldn't be named as myModal (<div id="myModal) but instead myModal1, myModal2etc.
Then the links would look like this
<span style="color:#59960b;" class="read" data-toggle='modal' data-target="#myModal<?php echo $articleid; ?>">Read more..</span>
This would work if you don't have too many articles, if there is a lot of data, you should use Ajax.

Using $_POST or $_GET with Modal, Refresh based on ID

Here is the html that generates an array of 6 objects called from the DB (this is working fine), and prints them to a bootstrap row.
<div class="row products">
<?php while($product = mysqli_fetch_assoc($featured)) : ?>
<div class="col-md-2 col-sm-6">
<div class="product">
<div class="image">
<img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive">
<div class="quick-view-button"><button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button></div>
</div>
<div class="text">
<h3> <?= $product["manufacturer"]; ?></h3>
<p class="price">$<?= $product["rrp"]; ?></p>
</div>
</div>
</div>
<?php endwhile; ?>
Here is the Jquery to generate the modal
<script>
function quickModal(recid) {
alert(recid)// checked it was receiving ID
// setting an id object as recid from db
var data = {"id" : recid};
jQuery.ajax({
url : '/MagV4(Final)/includes/quickModal.php',
method : "post",
data : data,
success: function(data){
jQuery('body').append(data);
jQuery('#product-quick-view-modal').modal('toggle');
},
error: function(){
alert("something wrong");
}
});
}
</script>
Here is the modal code, Now I know the ID is being passed (alert from Modal) but the modal doesn't generate new content after the first modal is loaded, (there are 6 different mag wheels) so if for example I load the modal for the first mag with id 1, the second mag which is id 7 also creates a modal for id 1.
Using $_POST['id'] doesn't work in the modal for some reason.
<?php
require_once '../core/dbcon.php';
if(isset($_GET['id'])) {
$id = $_GET['id'];
$id = (int)$id;
}
echo $id;
$sql = "SELECT * FROM wheels WHERE recid = '$id'";
$result = $db->query($sql);
$product = mysqli_fetch_assoc($result);
$sql = ""
?>
<?php ob_start(); ?>
<!-- quick view modal box-->
<div id="product-quick-view-modal" tabindex="-1" role="dialog" aria-hidden="false" class="modal fade">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
<button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
<div class="row quick-view product-main">
<div class="col-sm-6">
<div class="quick-view-main-image"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></div>
<!-- Ribbons
<div class="ribbon ribbon-quick-view sale">
<div class="theribbon">SALE</div>
<div class="ribbon-background"></div>
</div>
<!-- /.ribbon
<div class="ribbon ribbon-quick-view new">
<div class="theribbon">NEW</div>
<div class="ribbon-background"></div>
</div>
<!-- /.ribbon-->
<div class="row thumbs">
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
<div class="col-xs-4"><img src=" <?= "images/wheels/wheelphotos/". $product["bigpic"]; ?>" alt= "<?= $product["manufacturer"]; ?>" class="img-responsive"></a></div>
</div>
</div>
<div class="col-sm-6">
<h2 class="product__heading"><?= $product['manufacturer']; ?></h2>
<p class="text-muted text-small text-center">Great Tyre for all vehicle types</p>
<div class="box">
<form action="add_cart.php" method="post">
<p class="price"><?= $product['rrp']; ?></p>
<div class="row">
<div class="col-md-6 col-md-offset-3">
<div class="form-group">
<label for="modal_size">Choose your size</label>
<select id="modal_size" class="form-control">
<option value=""></option>
<option value=""></option>
</select>
</div>
<p>Current Stock: 3</p>
<div class="form-group">
<label for="modal_quantity">Quantity</label>
<input type="number" value="1" id="modal_quantity" class="form-control">
</div>
</div>
</div>
<p class="text-center">
<button type="submit" class="btn btn-primary"><i class="fa fa-shopping-cart"></i> Add to cart</button>
<button type="submit" data-toggle="tooltip" data-placement="top" title="Add to wishlist" class="btn btn-default"><i class="fa fa-heart-o"></i></button>
</p>
</form>
</div>
<!-- /.box-->
<div class="quick-view-social">
<h4>Show it to your friends</h4>
<p><i class="fa fa-facebook"></i><i class="fa fa-google-plus"></i><i class="fa fa-twitter"></i><i class="fa fa-envelope"></i></p>
</div>
</div>
</div>
</div>
</div>
</div>
<!-- /.modal-dialog-->
</div>
<!-- /.modal-->
<!-- /quick view modal box-->
<?php echo ob_get_clean(); ?>
added in the new script but now the modals after the first just flash and then disappear with the same information.
<script>
$('a[data-toggle="modal"]').on('click', function(){
// update modal header with contents of button that invoked the modal
$('#quick-view-button').html( $(this).html() );
//fixes a bootstrap bug that prevents a modal from being reused
$('#product-quick-view-modal').load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});​
</script>

After further research, I found a few Bootstrap issues mentioning this behaviour here and here. I've asked for issue 5514 to be reopened.
Meanwhile, this jQuery will patch up the problem*:
$('a[data-toggle="modal"]').on('click', function(){
// update modal header with contents of button that invoked the modal
$('#myModalLabel').html( $(this).html() );
//fixes a bootstrap bug that prevents a modal from being reused
$('#utility_body').load(
$(this).attr('href'),
function(response, status, xhr) {
if (status === 'error') {
//console.log('got here');
$('#utility_body').html('<h2>Oh boy</h2><p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
}
return this;
}
);
});​
Please see http://jsfiddle.net/jhfrench/qv5u5/51/ for a working example.*
So, in your case, you'd also edit the calling button from <button type="button" onclick="quickModal(<?= $product["recid"]; ?>)" class="btn btn-default btn-sm">Quick view</button> to Quick view. FWIW, I favor this "link invokes modal" approach (vs "button invokes modal") because this also allows the user to right-click the link and open the modal's contents in a new browser tab, should they so-choose. So think through the implications of that UX.
*-For some reason, sometimes when you click the button in the fiddle the modal will show blank. This is not a problem in the application I'm working with, so I suspect it's a problem unrelated to this question/answer.

How Do I get lean modal js to show more than one modal in wordpress?

I have set up the modal for a team member page in WordPress as an advanced custom fields repeater field. That part works well, as it repeats and the modal opens up, but it only has the first team member's modal open up even though, it's another team member. My code is as follows:
<div class="leadership-row">
<?php
if ( get_field('leadership_block') ):
while( has_sub_field('leadership_block') ) :
?>
<div class="Leadership">
<a href="#teammember" rel="leanModal">
<div class="leadership-image">
<img src="<?php echo get_sub_field('leadership_image'); ?>" />
</div><!-- end of leadership-image -->
</a>
<div class="leadership-copy">
<h5 class="leadership-name"><?php echo get_sub_field('leadership_name'); ?></h5>
<h5 class="leadership-position"><?php echo get_sub_field('leadership_position'); ?></h5>
</div>
</div><!-- end of Leadership -->
<?php
endwhile;
endif;
?>
<?php
if ( get_field('team_modal') ):
while( has_sub_field('team_modal') ) :
?>
<div id="teammember">
<a class="modal_close"></a>
<div class="modal-image">
<img src="<?php echo get_sub_field('modal_image'); ?>" />
</div><!-- end of modal-image -->
<div class="modal-copy">
<h4><?php echo get_sub_field('modal_name'); ?></h4>
<p><?php echo get_sub_field('modal_position'); ?></p>
<img src="<?php echo get_sub_field('modal_icon'); ?>" />
<p><?php echo get_sub_field('modal_description'); ?></p>
</div><!-- end of modal-copy -->
</div><!-- end of teammember -->
<?php
endwhile;
endif;
?>
</div>
My JQuery is set up like this:
jQuery(document).ready(function($) {
$("a[rel*=leanModal]").leanModal({ top : 200, overlay : 0.4, closeButton: ".modal_close" });
});
Any help would be immensely appreciated.

Bootstrap delete row without refreshing page using modal

So far I can now delete the record using modal, but it just needs to go to the page delete-page. I want to delete the record with confirmation before deleting (using modal) and then delete the record without refreshing the page.
This is what I've tried so far:
<script type="text/javascript">
$(function() {
$(".btn-show-modal").click(function(e){
e.preventDefault();
$("#dialog-example").modal('show');
});
$("#btn-delete").click(function(e) {
$("#dialog-example").modal('hide');
});
});
</script>
<?php
$stmt2 = $conn->prepare("SELECT project_code, description FROM tblprojects");
$stmt2->execute();
for($i=0; $row2 = $stmt2->fetch(); $i++){
$project = $row2['project_code'];
$desc = $row2['description'];
?>
<tr class="record" id="record-">
<td>
<a href="project-detail.php?code=<?php echo $project; ?>">
<?php echo $project; ?></a>
</td>
<td><?php echo $desc; ?></td>
<td>
<a href="update-project.php?code=<?php echo $project; ?>" title="Update record">
<i class="icon-edit icon-white"></i>
</a>
</td>
<td>
<a href="#"
data-id="<?php echo $project; ?>"
id="<?php echo $project; ?>"
class="btn-show-modal" data-toggle="modal" title="Delete record">
<i class="icon-trash icon-white"></i>
</a>
</td>
<div class="modal hide fade" id="dialog-example">
<div class="modal-header">
<h5>Confirm Delete</h5>
</div>
<div class="modal-body">
<p class="modaltext">Are you sure you want to delete this record?</p>
</div>
<div class="modal-footer">
<a href="#" data-dismiss="modal" class="btn btn-info">No<a>
<a href="delete-project.php?code=<?php echo $project; ?>"
data-id="<?php echo $project; ?>"
class="btn btn-danger" id="btn-delete">Yes<a>
</div>
</div>
</tr>
<?php
}
?>
Any ideas? Thank you for your help.

Try this:
$("#btn-delete").click(function(e) {
e.preventDefault();
$.get(this.href, function(){
$("#dialog-example").modal('hide');
});
});

I do this all in the time in my projects but didn't want to post it since the code might not mean anything to others (and it's fairly long) but this is what I do:
<!-- Delete Modal -->
<div id="delete_modal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true"></button>
<h3 id="myModalLabel">Delete</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12"></div>
</div>
</div>
<div class="modal-footer">
<button class="btn" data-dismiss="modal" aria-hidden="true">Cancel</button>
<button id="delete_confirm" class="btn red btn-primary" data-dismiss="modal">Delete</button>
</div>
<!-- Submit Delete Modal -->
<div id="submit_delete_modal" class="modal hide fade" role="dialog" aria-labelledby="myModalLabel" aria-hidden="false" tabindex="-1">
<div class="modal-header">
<h3 id="myModalLabel">Deleting</h3>
</div>
<div class="modal-body">
<div class="row-fluid">
<div class="span12">
<div class="alert alert-info">Deleting... <img src="/images/loading.gif" alt="Deleting..." /></div>
</div>
</div>
</div>
</div>
So that's the two modals I use, one for the confirmation and another to show that the item is actually being deleted.
This is the JS:
$('.delete').click(function() {
$('#delete_modal .modal-body div div').html('Are you sure you want to delete this row?');
});
// this is the delete button in the confirmation modal
$('#delete_confirm').click(function() {
$('#delete_modal').modal('hide');
$('#submit_delete_modal').modal('show');
$.ajax({
url: '/delete-page',
data: { id: id },
type: "POST",
cache: false,
success: function(data) {
if (data === '1') {
// delete the row from the DOM
$('tr#record-' + id).fadeOut('slow').remove();
$('#submit_delete_modal .modal-body div div').html('<div class="alert alert-success"><i class="icon-ok-sign"></i> The row has been deleted</div>');
} else {
$('#submit_delete_modal .modal-body div div').html('<div class="alert alert-error"><i class="icon-exclamation-sign"></i> Deletion failed, please refresh the page and try again</div>');
}
},
error: function() {
$('#submit_delete_modal .modal-body div div').html('<div class="alert alert-error"><i class="icon-exclamation-sign"></i> Deletion failed, please refresh the page and try again</div>');
}
});
return false;
});
Just a pointer, looking at your tr markup, are you meaning to put the id from the database as part of the row id?
You have <tr class="record" id="record-"> so every row has the same id, if you add the correct parameter there every row will have a unique id and the delete part in the ajax callback will work.
The only thing that remains is to get the id when something is clicked but I'm finding it hard to tell what link you are using to perform the delete.
It should be something like this:
var id; // put this as the very first line of js, if it's in the global scope it can be accessed from anywhere, it's not best practise though.
$(document).on('click', '.some_class_name', function() {
id = $(this).parent().parent().attr('id').split('-').pop();
$('#delete_modal .modal-body').html('Are you sure that you want to remove this row?');
$('#delete_modal').modal('show');
// uncomment this to check you're getting the correct id and that it's not undefined etc
// alert('id');
return false;
});
I've tried to make everything generically named to avoid stuff from my projecting bleeding in but I might have missed some things and made some errors when renaming elements etc.