I use Jquery UI to open a pop up on a click but this pop up is closed immediately.I don't understand why?
Here is my code:
function openPopUp() {
// alert("Handler for .click() called.");
$("#dialog:ui-dialog").dialog("destroy");
$("#select-method").dialog({
modal : true,
height: 573,
width: 766 ,
buttons : {
Exporter : function() {
//$(this).dialog("close");
alert("Exporter");
// close the dialog
},
'Etat de surveillance' : function() {
//$(this).dialog("close");
alert("Etat de surveillance");
// close the dialog
},
Annuler : function() {
//$(this).dialog("close");
alert("Annuler");
// close the dialog
}
}
});
};
The code html is:
<div id="other" class="popLink">This is text
<a href="" class="popLink" onClick="openPopUp();">
Click to open pop up
</a>
</div>
<div class="noDisplay">
<div id="select-method" title="selection des méthodes et calcul des provisions">My pop upis opened
</div>
</div>
Like the one comment says, try something like this:
onclick="openPopUp();return false;"
Although it would make sense, since you're already using jQuery, to bind the event with jQuery, not inline HTML. Instead of specifying the onclick attribute, try this in $(document).ready:
$(".popLink").click(function (e) {
e.preventDefault();
// Either call openPopUp or copy/paste the code from that function into here - depends on how you actually use openPopUp throughout your whole site
});
But at the same time, you have something weird in your HTML - nested divs with the same class "popLink". Which means that if you used my code above, when you click on the inner one, the showPopUp will execute twice (because of propagation). So I guess I would technically use this binding:
$("#other").on("click", ".popLink", function (e) {
e.preventDefault();
// Other code
});
This technically binds the click event to the element #other, but only is executed if caused by an element inside of it that has the class "popLink". There are several other ways to target the <a> you want, so it depends on if the code you provided is an example or is real.
Try this :)
$('.popLink').click(function(e) {
e.preventDefault();
openPopUp();
});
Related
I'm trying to change the data-url with jQuery. Currently my code looks like this.
<div id="twitterButton" title="Tweet it on Twitter">Tweet</div>
<script type="text/javascript">
$(document).ready(function () {
$('#twitterButton').click(function () {
$('#tweet').attr("data-url", "https://www.google.com/");
});
});</script>
As you can see I left the url-data blank so I could be sure it is only getting set in the jQuery. However whenever I click the tweet button it always opens the window with the link for the current page that I was on. Can someone explain how I can set it to be something else via jQuery or javascript?
You should use .data() for controlling data attributes. As Daniele states in that answer, you must also stop the event propogation on the a element using preventDefault().
$('#twitterButton').click(function (e) {
$('#tweet').data('url',"https://www.google.com");
e.preventDefault();
});
You must call the preventDefault() method to stop the propagation of the click event on the child a element:
Try this code:
$('#twitterButton').click(function (e) {
$('#tweet').attr("data-url", "https://www.google.com/");
e.preventDefault();
});
Good code
D.
This question already has an answer here:
Calling a function in jQuery with click()
(1 answer)
Closed 9 years ago.
I have a div that has a click() action that causes some animations on some other elements. That's all working well and good.
The problem is that there are some links within this div that have stopped working.
For example, here is a simplified example:
<div class="clickable-div">
<a href="#" onclick="javascript:my_function();">
</div>
$(document).ready(function() {
$('div.clickable-div').click(function() {
...
});
});
What can I do to run my_function when that link is clicked?
Another consideration is that there is plain text and images within clickable-div. I would like to still trigger .clickable-div when those items are clicked.
Edit:
Another strange thing. There is a mailto link within this div. When I click the mailto link, my browser does the mailto action (opens a compose window in my mail client), but it also does .clickable-div.click. I would prefer that it doesn't do both.
Have a look here: http://jsfiddle.net/J2jMV/
CODE
$('div.clickable-div').click(function() {
alert("I'm not your function");
});
$('div.inner').click(function(e) {
e.stopPropagation();
alert("I'm INNER!");
});
$("#clickme").click(function(e){
e.stopPropagation();
alert("Hello my function");
});
have also a look here for event bubbling: http://javascript.info/tutorial/bubbling-and-capturing
hope it helps
Maybe I'm misreading the question, but it looks like you simply need to point to a different selector, also remove the onclick="", and simply put that function within the jQuery click event handler.
Also, you want to separate JS from HTML (it's a best practice). Having onclick events also creates inline scripts in older browsers like IE8-- and can slow performance.
<div class="clickable-div">
<a href="#">
</div>
$('div.clickable-div a').on('click', function () {
// do the things you already had here, only if there is no mailto
if ($(this).attr('href').indexOf('mailto') <= -1) {
e.preventDefault(); // this will prevent the mailto
// now run your my_function animations
my_function();
}
});
I'm trying to have a div get a new class (which makes it expand) when being clicked, and get it back to the old class (which makes it close) when clicking on a cancel link inside that div.
<div class="new-discussion small">
<a class="cancel">Cancel</a>
</div>
<script>
$('.new-discussion.small').click(function() {
$(this).addClass("expand").removeClass("small");
});
$('a.cancel').click(function() {
$('.new-discussion.expand').addClass("small").removeClass("expand");
});
</script>
Now, adding the expand class works flawlessly, but closing the panel after clicking on the cancel link only works when I remove this code:
$('.new-discussion.small').click(function() {
$(this).addClass("expand").removeClass("small");
});
So I guess this must be preventing the second function to work, but I really can't figure out why.
Any ideas?
Thanks!
Try this
$('a.cancel').click(function() {
$('.new-discussion.expand').addClass("small").removeClass("expand");
return false;
});
Reason may be your click event is getting propagated to parent which is also listening to click event.
Since your a element is inside the .new-discussion element, when you click on the a, it also fires the click event on the parent element because the event is bubbling up.
To fix it, you can stop the propagation of the event by calling e.stopPropagation();. That will prevent any parent handlers to be executed.
$('a.cancel').click(function(e) {
e.stopPropagation();
$('.new-discussion.expand').addClass("small").removeClass("expand");
});
Since the link is inside the <div>, it's using both click methods at once. It might help to do a check to see if the container is already open before proceeding:
<script>
$('.new-discussion.small').click(function() {
if ($(this).hasClass("small")) {
$(this).addClass("expand").removeClass("small");
}
});
$('a.cancel').click(function() {
$(this).parent('.expand').addClass("small").removeClass("expand");
});
</script>
I'm working on a web app that uses jQueryUI and creates a ton of dialogs. The dialogs are all different, and the button to close the dialog can end up embedded several div's into the dialog.
I'd like a function that always closes the containing dialog.
Take for example the following html:
<div id="demoDialog">
<div>
<div id='demoDialogSubmit'>
<input type='submit' onClick='selfCloseDialog();' value='Ok' style='margin-top:10px' />
</div>
<div>
<div>
Somewhere in my js code I initialized this as a dialog:
$( "#demoDialog" ).dialog( params );
Now for the on-click I have a few not so great choices. I could insist on the close button knowing the id of the dialog. E.g. do something like:
onclick="$( '#demoDialog' ).dialog( 'close' );"
But I'd rather have generic code instead of always having to carry around the id of the dialog so I can send it to a widget that may close it.
Or I can remember how many layers down I am:
function selfCloseDialog() { $(this).parent().dialog( 'close' ); }
But really I want selfCloseDialog() to just hunt up the layers of elements looking for the dialog object to close. How do I do this?
#Update:
So i got it working. Thanks everyone for their suggestions the problem actually had two issues.
First one problem was here:
<input type='submit' onClick='selfCloseDialog();' value='Ok'/>
It should be:
<input type='submit' onClick='selfCloseDialog(this);' value='Ok'/>
The button element is not passed in as the "this" argument to the function. Which seems obvious now.
And the following direct method JAAulde below works and seems the cleanest:
function selfCloseDialog( caller ) {
$(caller).closest( ".ui-dialog-content" ).dialog('close');
}
There were several answers involving closest and a selector- but I don't see any reason to use anything except the plain class selector he suggests.
When making your dialog, include a close button:
var params = {
//whatever you already had in there
buttons: {
// In the buttons object, the "key" will be the button text, the function
// will be executed on click of the button in scope of the dialoged element
Close: function () {
$(this).dialog('close');
}
}
};
$( "#demoDialog" ).dialog( params );
And from code running in scope of ANY descendant element of the dialoged element, run:
$(this).closest('.ui-dialog-content').dialog('close');
Not sure if I'm exactly understanding what you're asking, but it seems the easiest way would be to add a standard class to all your dialogs, and then have code like:
$(this).closest('.dialog-class').dialog('close');
closest() is defined here:
http://api.jquery.com/closest/
*updated to reflect the ajax part of the dialog. *updated to reflect comments
<div id="soemthing.random.ui.dialog.makes">
.... your content....
<a class='custom-close' href="#Close">Custom Close</a>
....
</div>
$(function(){
$("your selector").dialog();
var selector = ":ui-dialog";
//developers choice. ".ui-dialog-content" is faster, ":ui-dialog" is guaranteed
$(selector ).on({
"click":function(event){
event.preventDefault();
$(this).closest(selector).dialog("close");
}
},"a.custom-close",null);
})
I'd suggest using a class instead of writing inline function calls, but that's up to you.
Here's my hackish solution with event delegation where clicking an element with the selfclose class will close the ancestor dialog:
$(document).on('click', '.selfclose', function() {
$(this).parents().each(function() {
try {
$(this).dialog('close');
} catch(e) {}
});
});
Fiddle
But as DefyGravity mentioned, using the :ui-dialog selector is a much cleaner solution:
$(document).on('click', '.selfclose', function() {
$(this).closest(":ui-dialog").dialog("close");
});
Fiddle
check this:
http://jsfiddle.net/Wqh4Y/3/
function closeParentDialog(closeButton)
{
closeButton.parents('.ui-dialog').eq(0).find('a.ui-dialog-titlebar-close').eq(0).click();
}
$(function() {
$( "#dialog" ).dialog();
});
you can use it like this:
<div id="dialog" title="Basic dialog">
<p>This is the default dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.
<span> <a class="close-dialog" onclick="closeParentDialog($(this))">selfclose</a> </span>
</p>
</div>
I'm trying to create a basic modal myself and I'm having a little bit trouble here (maybe it's because I'm an expert working with jQuery - don't take it seriously).
I have this HMTL markup:
<div id="modal-boxes">
<div id="modal-updates" class="modal-content">
Content for modal box here.
Close
</div>
</div>
<div id="modal-mask"></div>
So, I made a function that tells the modal box to close and to make disappear the #mask div. And another one to when I click outside of it, it closes anyway. In other words, clicking outside the #modal-updates div is the same that clicking on close button. But the problem is that when I want to click inside the #modal-updates div (should not disappear) it closes anyway. Here is my javascript code:
$(".modal").click(function(e){
e.preventDefault(); // Cancel the default link behavior
$("#modal-mask").fadeTo(400, 0.4);
$("#modal-boxes").fadeIn();
var getName = "#" + $(this).attr("name");
$(getName).fadeTo(400, 1);
});
function closeModal() {
$("#modal-mask, #modal-boxes").fadeOut();
}
$(".close-modal").click(function(e){
e.preventDefault();
closeModal();
});
$(".modal-content").click(function(){
closeModal();
});
Any help?
Regards, Tiago Castro
Try:
$('#modal-updates').click(function(e) {
e.stopPropagation();
});
If done right, this will stop $("#modal-boxes").click() from triggering.
[edit] fixed a typo and added link to jsFiddle with it working
Why not using the modal dialog of jQuery?
About your example :
1) for the link I prefer to do something like:
Close
That way no need to deal with things like preventDefault or click event
2)I guess that instead of binding your click event to ".modal-content" you wanted to bind it to "#modal-mask" ;)