I am trying to generate unique IDs for each modal, as I will be loading in an address specific map to each modal. My issue is that when I click the link:
<a data-toggle="modal" href="#myModal_<? echo $meeting['ID'] ?>" ><? echo $meeting['Address'].", ".$meeting['City'] ?></a>
it tries to take me to mypage.php/#myModal_8 (or whatever the given ID is, instead of pulling up that specific modal. The modals work great is I don't have the ID attached, but they won't load dynamic content that way.
<a data-toggle="modal" href="#myModal_<? echo $meeting['ID'] ?>" ><? echo $meeting['Address'].", ".$meeting['City'] ?></a>
</p>
<div class="modal hide" id="#myModal_<? echo $meeting['ID'] ?>">
<div class="modal-body">
<? echo $meeting['Address'] ?>
</div>
<div class="modal-footer">
Close
</div>
</div>
Any help on this would be much appreciated. Thank you!
It's all about the ID you are giving to the modal : id="#myModal_<? echo $meeting['ID'] ?>"
The # is only needed for the jQuery selector, not the ID. Which would give :
<div class="modal hide" id="myModal_<? echo $meeting['ID'] ?>">
Further more, you should open your php tags with <?php for the reasons described here : Are PHP short tags acceptable to use?
Related
I'm looking to change this bit of code to a link instead of having it appear as a small popup window. How would I change it to link to a page of "http://example.com/register" instead of having the registration window drop down?
<div class="login-wrapper">
<a id="sticky-login" class="info-bottom icon-login sticky-button" title="<?php _e('Login',IT_TEXTDOMAIN); ?>"></a>
<div class="sticky-form" id="sticky-login-form">
<div class="loading">
<div> </div>
</div>
<?php echo it_login_form(); ?>
</div>
</div>
This seems too easy so I'm probably missing something.
You'd add an href attribute to the <a> tag, and if javascript is creating the popup, remove either the id attribute from the <a> tag or the class to which the javascript is linked.
<a class="info-bottom icon-login sticky-button" title="<?php _e('Login',IT_TEXTDOMAIN); ?>" href="http://example.com/register"></a>
I have following html in which I am using LightBox plugin by Lokesh Dhakar. I am getting images dynamically from database and done all required things to carry out with plugin, but still not working. Only the empty lightbox window appears when page loads.
Here is my code:
while ($fetch = mysql_fetch_array($selectImgResult)) { ?>
<div class="col-md-2 thumbnail">
<span style="color:slateblue;">
<?php echo $fetch['CreateDate']; ?>
</span>
<a href="ProfilePic\<?php echo $fetch['ImageUrl'];?>" data-lightbox="images">
<img src="ProfilePic\<?php echo $fetch['ImageUrl']; ?>" alt="<?php echo $fetch['ImageUrl']; ?>" style="height: 178px;" />
</a>
</div>
<?php }
I am trying to create a jQuery function that will allow me to add, edit, and delete articles on my site. Right now, I am trying to write the delete functionality. Basically, when the delete button is clicked, it will send the id of that specific article to a php script via ajax request. It gets the article ID from the ID attribute of the article element.
My problem is, that when the Delete button is clicked I get an alert box with the article ID on the first article, but not on the rest.
Here is my code:
HTML/PHP:
<div id="contentLeft">
<?php
foreach($data->blogPosts as $post){
?>
<article id="<?php print $post->ID; ?>" class="article">
<div id="options">
<div id="edit"><a class="btn btn-danger" href="#" id="editButton"><i class="fa fa-pencil"> Edit</i></a></div>
<div id="delete"><a class="btn btn-danger" href="#" id="deleteButton"><i class="fa fa-trash-o">Delete</a></i></div>
</div>
<div id="articleTitle"><?php echo $post->Title; ?></div>
<div id="content">
<?php echo $post->Content; ?>
</div>
<div id="date"><?php echo date('F jS, Y', strtotime($post->Date)); ?></div>
</article>
<?php
}
?>
</div>
My jQuery:
$("#deleteButton").bind('click', function(){
var id = $("article").closest("article").attr("id");
alert(id);
});
I appreciate the help!
In a given document ids should be unique; no more than one element should have the same ID. Please change your id's to classes and change your js accordingly:
HTML
<a class="btn btn-danger deleteButton" href="#"> ....
JS
$(".deleteButton").bind('click',...
You can add only one element with the same id.
Probably you should change id to class:
<div class="delete"><a class="btn btn-danger" href="#" class="deleteButton"><i class="fa fa-trash-o">Delete</a></i></div>
and in your js code:
$(".deleteButton").bind(...)
I'm trying to display a Bootstrap Modal on my webshop when the mouse hovers over a product. I searched online and found the following:
https://stackoverflow.com/a/12190456/3164891
I got it to work in the Fiddle by adding the following code:
$('#openBtn').hover(function () {
$('#modal-content').modal({
show: true
});
});
But when I want to apply it to my situation I can't get it to work
HTML
<li class="item">
<a href="#" data-toggle="modal" data-trigger="hover" data-target="#basicModal-<?php echo $_product->getId()?>" class="product-image" id="<?php echo $_product->getId() ?>">
<img id="product-collection-image-<?php echo $_product->getId(); ?>" src="<?php echo $this->helper('catalog/image')->init($_product, 'small_image')->resize($_imgSize); ?>" />
</a>
</li>
<div class="modal fade" id="basicModal-<?php echo $_product->getID()?>" role="dialog" aria-hidden="true" data-trigger="hover">
<div class="modal-content">
Modal Content
</div>
</div>
Calling the modal
jQuery('.item').hover(function () {
jQuery('#basicModal').modal({
show: true
});
});
When I try it on my site the modal only shows when the a href is clicked and does nothing on hover. I've also tried the following code:
jQuery('#basicModal').modal({trigger: "hover"});
I'm using the following versions:
jQuery: 1.10.2.min
Bootstrap: 3.2.0
Your javascript code that is firing the modal on hover, it's not selecting the right element:
jQuery('#basicModal')
In the above line you are selecting an element with id === "basicModal", but in your html the id is equal to basicModal-<?php echo $_product->getID()?>. The two id strings must match, or you can use a jquery wildcard, like JQuery("[id^=basicModal]") that selects all elements with id sarting with basicModal.
Here is a working version of your code with the wildcard solution: http://jsfiddle.net/fcyafcgx/
I am doing some WordPress theming. I have a #novelsslider div. Inside of #novels, I used this code to get the latest three posts in the "novels" category, inside of the html divs, I used some php functions to get the latest 3 posts and load the html 3 times floated to the left to build a slider:
<!-- slider -->
<div id="novelsslider" class="slider">
<? $novels = get_option('of_novels') ?>
<?php query_posts('category_name=$novels&posts_per_page=3'); ?>
<?php while (have_posts()) : the_post(); ?>
<div class="sliderunit">
<?php the_post_thumbnail(); ?>
<div class="novelsslidertitle">
<div class="arrow-left"></div>
<a href="<?php the_permalink(); ?>">
<img class="cross" src="<?php bloginfo('stylesheet_directory'); ?>/images/cross.png"/>
</a>
<a href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
</div>
</div>
<?php endwhile;?>
<div id="novelsslidebars">
<input type="submit" value="" class="slidebars" id="novelsslidebtnleft">
<input type="submit" value="" class="slidebars" id="novelsslidebtnmiddle">
<input type="submit" value="" class="slidebars" id="novelsslidebtnright">
</div>
</div>
<!-- End novelsslider -->
ow I have some arrows.. I want them when clicked to get a set of previous 3 posts and load them, how can I do such a loop?
To achieve this you can adopt any of these methods :
1- If your posts are not in large number then you can preload them and store in some container which is hidden by default and will appear when you click the next / previous button, like a content slider, but this is a bad approach and not recommended.
2- Use AJAX to load the rest of the posts, this is a good method and will be purely dynamic. Look on the following links to have the idea:
http://wp.tutsplus.com/tutorials/getting-loopy-ajax-powered-loops-with-jquery-and-wordpress/
Wordpress - how can I fetch more posts via AJAX?