I have a working modal which has the following code:
<!-- modal code -->
Follow
<!-- modal window -->
<div id="ex1" style="display:none">
<p> Please <%= link_to "Login", new_user_session_path %> </a> to Extend. </p>
</div>
I made a div class named "extend-button". I want to show the modal by clicking on that div.
<li class="extend-button"> Extend </li>
$(document).ready(function(){
$(".extend-button").mouseup(function(){
$("#ex1").dialog('open');
});
});
This isn't working.
Consider using the click() function. Otherwise all appears well, assuming dialog('open') works as intended. Add a console log to ensure the click event handler is working to help you debug.
$('.extend-button').click(function (e) {
console.log('clicked');
$("#ex1").dialog('open');
});
You need to first move all your jquery codes into the <script> tag. Then replace $(".extend-button").mouseup with $(".extend-button").click.
The difference between a mouseup event and a click event is that, with a mouseup event, you can click your mouse, hold it, and drag the mouse pointer any and everywhere before releasing the mouse to trigger a mouseup event. A click event requires the mousedown and mouseup event to happen on the same element.
The normal expectation is that a click requires both the mousedown and mouseup event.
The following change in HTML made my day. No jquery was needed.
Extend
First of all, make sure you are including the JQuery UI library and CSS file in the <head> of your page.
<link rel="stylesheet" href="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/themes/smoothness/jquery-ui.css" />
<script src="//ajax.googleapis.com/ajax/libs/jqueryui/1.11.2/jquery-ui.min.js"></script>
HTML:
<!-- modal code -->
Follow
<!-- modal window -->
<div id="ex1" style="display:none">
<p> Please <%= link_to "Login", new_user_session_path %> </a> to Extend. </p>
</div>
<li class="extend-button"> Extend </li>
You also need to make sure you are wrapping the code in <script> tags. As #elzi mentioned may be better to use a .click() event.
<script type="text/javascript">
$(function(){
$(".extend-button").on("click", function(){
$("#ex1").dialog('open');
});
});
</script>
Related
I'm using http://protip.rocks/ for it's tooltips but I'm having a problem.
So I have :
<span class="tooltip_templates">
<span id="tooltip_content_{TAB_LOOP.ITEM_LOOP.ITEM_ID}">
<!-- BEGIN ITEM_LOOP.CHILD_ITEM_LOOP -->
<!-- IF TAB_LOOP.ITEM_LOOP.ITEM_ID == TAB_LOOP.ITEM_LOOP.CHILD_ITEM_LOOP.P_ID -->
<img class = 'hide' src ="{T_IMAGES_PATH}custom_avatars/item_thumbnails/{TAB_LOOP.ITEM_LOOP.CHILD_ITEM_LOOP.C_ID}.png" title ="{TAB_LOOP.ITEM_LOOP.ITEM_NAME}" id ="{TAB_LOOP.ITEM_LOOP.CHILD_ITEM_LOOP.C_ID}"/>
<!-- ENDIF -->
<!-- END ITEM_LOOP.CHILD_ITEM_LOOP -->
<img class = 'hide' src ="{T_IMAGES_PATH}custom_avatars/item_thumbnails/{TAB_LOOP.ITEM_LOOP.ITEM_ID}.png" title ="{TAB_LOOP.ITEM_LOOP.ITEM_NAME}" id ="{TAB_LOOP.ITEM_LOOP.ITEM_ID}" />
</span>
</span>
and
$( ".tooltip_templates img" ).click(function() {
alert("ok");
});`
the event doesn't fire here, so I checked the source of the page and saw
So it looks like the content was moved to protip-content however, changing the click function's class to .protip-content doesn't fire the event either. Any ideas?
I tried to do some testing here by attaching an alert to all image clicks and as you can see the event isnt called when clicking the image inside of the tooltip..
You're almost there. I think the reason why your DOM Elements [.tooltip_templates img] didn't call the event because it hadn't been called in the DOM after $(document).ready(). You need to attach and fire those events by either using [.on] or [.delegate]:
References:
[on] = http://api.jquery.com/on/
[delegate] = http://api.jquery.com/delegate/
$('.tooltip_templates img').on('click', function(event) {
event.preventDefault();
alert('here');
});
Here's a jsfiddle for a sample reference:
http://jsfiddle.net/qrgphhu6/
Please see this page which has this code:
<div class="pure-control-group query-brand-by-column">
<!-- somethings else -->
<div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
X
</div>
</div>
Clicking the X link should remove its ancestor div.query-brand-by-column as a whole but somehow it's not working. I've checked jQuery docs and this answer and the code seems absolutely all right to me but it simply doesn't work. Any idea?
this in href doesn't refers to anchor element, thus it doesn't work. It refers to window.
You should bind element event handler using jQuery.
Script
$(document).on('click', '.pure-button danger' function(e) {
e.preventDefault();
$(this).closest('.query-brand-by-column').remove();
});
HTML
<div class="pure-control-group query-brand-by-column">
<!-- somethings else -->
<div class="pure-u-1 pure-u-sm-1-24 control-group-sub">
X
</div>
</div>
I will not recommended, However you can use inline onclick handler.
<a onclick="$(this).closest('.query-brand-by-column').remove();" href='#' class="pure-button danger">X</a>
Here is your answer, Enjoy
X
Detach your javascript from your html and remove your item with a click event, right now you aren't triggering any click events:
<script>
$(function(){
$('.pure-form').on('click','.query-brand-by-column a',function(){//this will create and delegate your click event to work on dynamically created items
$(this).closest('.query-brand-by-column').remove();
});
});
</script>
I have a link on my php file which when has an event listener attached to it and clicks another link on the same page.
<p>Upload the image you want on your cake:Upload </p>
<div id="openModal" class="modalDialog">
<div>X
<?php require 'image-upload.php'; ?>
</div>
</div>
<script>
$('#upload-button').on('click', function () {//This works fine
$('#upload-link')[0].click(); //This doesn't work.
});`
</script>
Now click event should click the upload-link and a modal should pop.However, nothing happens.What could be the reason and the solution?
Add jQuery to your HTML by putting
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.2.0/jquery.min.js"></script>
before your custom script.
Besides as it is now, your div will always show up. you should set up a dynamic way to hide/show it.
You can use jQuery hide() and show() methods on your elements like
$("#close").click(function(e){
$("#openModal").hide();
});
also your identifiers syntax should always be the same . All camelCase or all i-dont-know-how-this-case-is-called .
I don' know why it didn't work previously but when i made some changes to the upload button link.Everything worked and the modal pops up just fine.
<p>Upload the image you want on your cake:Upload </p>
I Just changed the href from # to javascript: void(0) and everything just worked fine.
This works for me. But, (FYI), id's should not contain hyphens.
NOTE: I am only using an inline HTML event handler on #openModal to show that its click event is being triggered, but you haven't added any actions to that link, so otherwise it would do nothing. DO NOT USE INLINE HTML EVENT HANDLERS IN PRACTICE.
$(function(){
$('#uploadButton').on('click', function () {
alert("Upload Button has been clicked");
$('#uploadLink').trigger("click");
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<p>Upload the image you want on your cake:Upload </p>
I am the Open Modal link
<div id="openModal" class="modalDialog">
<div>I am the Close link
<?php require 'image-upload.php'; ?>
</div>
</div>
This is the code for a simple pinterest button.
<div class="myPinterestButton">
<a href="//www.pinterest.com/pin/create/button/?url=http%3A%2F%2Fwww.flickr.com%2Fphotos%2Fkentbrew%2F6851755809%2F&media=http%3A%2F%2Ffarm8.staticflickr.com%2F7027%2F6851755809_df5b2051c9_z.jpg&description=Next%20stop%3A%20Pinterest"
data-pin-do="buttonPin"
data-pin-config="none">
<img src="//assets.pinterest.com/images/pidgets/pinit_fg_en_rect_gray_20.png" />
</a>
</div>
<script type="text/javascript" async src="//assets.pinterest.com/js/pinit.js"></script>
None of the content is iframed. The pinterest button ends up being the <a> tag with some additional data attributes (thanks to the pinit.js which adds it at runtime).
Here's the thing I don't undrestand. If I click the button it works fine. But if I want to trigger a click on it (for example click a different element on the page and use jQuery to do $(".myPinterestButton a").trigger("click") it doesn't work.
Here's a jsfiddle: http://jsfiddle.net/h42vK/2/
What's going on here please?
You can use click event for wrapper div .myPinterestButton instead .myPinterestButton a
$(".myPinterestButton").trigger("click")
I have the following HTML code, and i am currently trying to add the 'selected' class when a photo is clicked, and to remove the class when it is clicked again.
<div id="container">
<h1>Photo Gallery</h1>
<div id="gallery">
<div class="photo">
<img src="photos/skyemonroe.jpg">
<div class="details">
<div class="description">The Cuillin Mountains, Isle of Skye, Scotland.</div>
<div class="date">12/24/2000</div>
<div class="photographer">Alasdair Dougall</div>
</div>
</div>
//Repetitions of the photo class.....
</div>
<a id="more-photos" href="pages/1.html">More Photos</a>
</div>
I am currently using the following jquery code to bind an event handler to the photo's ancestor so that when more pictures are appended to the page when clicking the more photos button, the jquery code will still work with these newly added pictures.
jQuery
$('#gallery').on('click','.photo',function(){
$(this).toggleClass('selected');
});
The jQuery code above DOES NOT work when i try using the #gallery, NOR does it work when i try using #container.However, the code works when i use $(document) for the event delegation.
I can't seem to figure out why binding the event handlers to the parent elements do not work, but binding it to the document itself makes it work.
Would appreciate any insights into the matter
EDIT: Added the jsfiddle here http://jsfiddle.net/744cX/ ( The code works in the fiddle, but does nothing on my laptop, and i can't seem to figure out why)
You can listen event on '.photo' class
<div class="photo" onclick="$(this).toggleClass('selected');">
I forked your fiddle and as can be seen here:
http://jsfiddle.net/6Qz8C/1/
$('#gallery').on('click','.photo',function(){
$(this).toggleClass('selected');
});
I did:
when the nextpage event is fired, append a new photo.
add the event delegation when the document is ready.
set the delegator to the #gallery