I try to bind default open and close functions to all dialogs with following ways, however none is working.
$(document).on("dialogopen", ".ui-dialog", function(event, ui) {
});
$(document).on("dialogclose", ".ui-dialog", function(event, ui) {
});
or
$(".ui-dialog").bind("open", function() {
});
$(".ui-dialog").bind("close", function() {
});
Do you have any idea, what is wrong here?
Thanks for your help.
Edit:
I add this function to document ready function.
The following code assumes that all your dialogs container has .ui-dialog-selector class on them. this way you can select all the dialogs.
$(".ui-dialog-selector").bind("dialogopen", function() {
alert('OPen');
});
Similarly you have to bind close
$(".ui-dialog-selector").bind("dialogclose", function() {
alert('Close dialog');
});
UPDATE
JS FIDDLE DEMO
In the demo, you can see, I have 2 dialogs created with div id one and with div id two.
Both these div have classes ui-dialog-selector on it.
<div class ='ui-dialog-selector' id ="one" style="display:none">
<input type="text" value ="open one"/>
</div>
<div class ='ui-dialog-selector' id ="two" style="display:none">
<input type="text" value ="open two"/>
</div>
And then I bind the functions as I have shown above.
for open
$(".ui-dialog").bind("dialogopen", function() {
alert('Open');
});
for close
$(".ui-dialog").bind("dialogclose", function() {
alert('Close');
});
Related
Im a bit new to jquery so this may be a common probably but I am unable to find what I need on the web.
The issue:
I have a div(inner1) inside a div(outer), the inner1 div is hidden until a button is clicked, when clicked the inner1 div is shown and fades out the background. Within inner1 I have another div(inner2) with similar functionality. When inner1 shows a button is displayed to show inner2. The above works fine. My issue is that if I click the button to show inner1, then exit(hide) the shown div(inner1) then push the button to show it again it now shows both of the inner divs(inner1, inner2). Does this make sense? I have no idea why this is happening.
The Code:
Html:
<div class="documentlist">
<div class="modalBackground"></div>
<div class="modalContent"> x
Text1
<input type="button" id="btnsm1" value="t1" />
<div class="documentdetails">
<div class="modalBackground"></div>
<div class="modalContent"> x Text2</div>
</div>
</div>
</div>
<input type="button" id="btnsm" value="t" />
Jquery:
$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').toggleClass('show');
$('.modalContent').toggleClass('show');
});
});
A Fiddle of the above.
Does anyone have any ideas?
You need to explicitly say removeClass since .toggle() adds 'show' if not there and removes 'show' if present, cant rely on that in close where you always want to remove the show class from both the elements
Here is what you want to do
$('.close-modal,.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
Edit 2: I didn't check you had to use back as close trigger updated fiddle $('.close-modal,.modalBackground')
Updated fiddle
$(document).ready(function () {
$('#btnsm').on('click', function () {
$('.documentlist>.modalBackground').toggleClass('show');
$('.documentlist>.modalContent').toggleClass('show');
});
$('#btnsm1').on('click', function () {
$('.documentdetails>.modalBackground').toggleClass('show');
$('.documentdetails>.modalContent').toggleClass('show');
});
$('.close-modal').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
$('.modalBackground').on('click', function () {
$('.modalBackground').removeClass('show');
$('.modalContent').removeClass('show');
});
});
Check this
I am having some trouble with $.change in jQuery.
HTML
<button class="btn">Reset</button>
<p id="chg" class="change">Click Me</p>
<div class="onchange"></div>
JS
$('.btn').on('click', function() {
$('.change').text('Click Me');
$('.onchange').text('');
});
$('.change').on('click', function() {
$('.change').text('Nearly There');
});
$('.change').on('change', function() {
$('.onchange').text("Nice One");
});
Here is the link to Codepen
Basically what should happen is when "Click Me" is clicked the text will change to "Nearly There" then straight after "Nice One" should appear below.
However this isn't happening, I've tried both
$('.change').on('change', function() {});
$('.change').change(function() {});
And neither work.
Note
The code I have supplied is my test code, and is all relevant to what I'm trying to achieve.
Update
I wasn't aware the .change only worked for form controls, which would explain why it wasn't working.
Solution
CreMedian - Suggested the solution that I was looking for.
$('.change').on('DOMSubtreeModified', function() { });
I have updated the CodePen for future reference.
As indicated in the comments, the .change() event does not work with div elements.
One way you could get the same effect is with the following code:
$('.change').bind("DOMSubtreeModified",function(){
//action you want when the '.change' object changes
});
Javascript MutationEvent is not widely supported, so be careful if implementing this in production code.
Reference Link: http://help.dottoro.com/ljrmcldi.php
$('.change').on('change', function() {
in your example, .change is a div, and divs dont raise change events when clicked.
You probably wanted to just update both elements from the click event
$('.btn').on('click', function() {
$('.change').text('Click Me');
$('.onchange').text('');
});
$('.change').on('click', function() {
$('.change').text('Nearly There');
$('.onchange').text("Nice One");
});
Try with DOMSubtreeModified event.
$('.btn').on('click', function() {
$('.change').text('Click Me');
$('.onchange').text('');
});
$('.change').on('click', function() {
$('.change').text('Nearly There');
});
$('.change').on('DOMSubtreeModified', function() {
$('.onchange').text("Nice One");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<button class="btn">Reset</button>
<p id="chg" class="change">Click Me</p>
<div class="onchange"></div>
Note: It will not supported by IE8 and older.
Demo in CodePen
The browser only fires change events for textbox, check/radio box and select list - all form elements. When something changes within your <div> or <p>, the browser does nothing to notify your javascript. Therefore, the listener .on('change' is not going to ever fire.
Here is a short lists of for elements that raise the event:
TextBox When Enter key is pressed
Radio/Check Box When the state is changed
Select List When the selected item is changed
Here is more on the event: Mozilla MDN onchange
do it like this
$('.change').text('Nearly There').trigger('change');
example
$('.btn').on('click', function() {
$('.change').text('Click Me');
$('.onchange').text('');
});
$('.change').on('click', function() {
$('.change').text('Nearly There').trigger('change');
});
$('.change').on('change', function() {
$('.onchange').text("Nice One");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<button class="btn">Reset</button>
<p id="chg" class="change">Click Me</p>
<div class="onchange"></div>
I am trying to create a function that will toggle optional inputs if chosen, here is what I have done so far:
HTML:
<div>
<input>
<a class="input-toggle" href="#"><span>Toggle Option</span><span>Close</span></a>
<div class="input-toggle-content">
<input name="">
</div>
</div>
JavaScript:
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
$("span:first-of-type").hide();
$("span:last-of-type").show();
});
});
So, the way it should work is when clicked on .input-toggle the div that is just next to it will be toggled and if clicked again the div will go away... I got this bit working, however, I want to also toggle <span>Toggle Option</span> with <span>Close</span> and I can't get it working... I don't know if the way I structured my function is correct?
Try,
$('.input-toggle + div.input-toggle-content').hide();
$(".input-toggle span:last-of-type").hide();
$('.input-toggle').click(function () {
$(this).next('div.input-toggle-content').toggle();
var spans = $('span', this);
spans.not(spans.filter(':visible').hide()).show();
});
DEMO
here you go: http://jsfiddle.net/jPe3A/
$('.input-toggle').each(function() {
$(this).next("div").hide().end();
$("span:last-of-type").hide();
$(this).on('click', function() {
$(this).next("div").slideToggle();
if($("span:first").is(':hidden')){
$("span:first").show();
$("span:last").hide();
}
else{
$("span:first").hide();
$("span:last").show();
}
});
});
Here is the JsFiddle
I have a button that will add a new header, textbox, and a link when it's click.
But when I click on the remove link. It's removes every new item that was added.
Html:
<div id='main'>
Top of Boby
<div id='main_1'>
<div>
<h3> Item</h3>
<input type="text" />
</div>
</div>
</div>
JS:
$(function() {
$('.AddItem').click(function() {
$('div#main_1').append("<div><h3>Item</h3><input type='text' class='remove_skill'/><a href=''>Remove</a</div>");
});
})
$(function() {
$('.remove_skill').click(function() {
$(this).remove();
});
})
2 issues..
You have never defined the class for the anchor. Add the class to the anchor
You need to remove the enclosing div and not the anchor. Use .closest
Also you need to delegate the event as the elements are being added dynamically
$('#main').on('click', '.remove_skill', function (e) {
e.preventDefault();
$(this).closest('div').remove();
});
Check Fiddle
The problem with the code you've posted is that no links exist at the moment you call $('.remove_skill').click, so you can't add event listeners to them.
I recommend a step-by-step approach. Create, add behaviour, append to the document.
$('.AddItem').click(function () {
var new_element = $('<div class="item"><h3>Item</h3><input type="text"/><a class="remove" href="#">Remove</a></div>');
new_element.find(".remove").click(remove_item);
$('div#main_1').append(new_element);
});
function remove_item() {
$(this).closest(".item").remove();
return false;
}
I recommend <a href="#"> for javascript-handled links.
Alternative solution using a closure:
$('.AddItem').click(function () {
var new_element = $("<div class="item"><h3>Item</h3><input type='text'/><a class="remove" href="#">Remove</a</div>");
new_element.find(".remove").click(function() {
new_element.remove();
});
$('div#main_1').append(new_element);
});
Your problem is that your "Remove" is in an 'a' tag. This causes the page to reload, and removing all of your previous changes.
I would like to open email-signup when I click on email-signup-link. Then I would like to close it by clicking anywhere on the page except for the box itself, of course.
I have looked around on this site and there are various solutions for this problem but every one I've tried shows and then hides my div instantly. I must be doing something wrong.
This is the HTML:
Sign Up
<div id="email-signup">
<div id="inner">
<h2>E-mail Notifications</h2>
<input class="" type="text" name="description" placeholder="Enter your e-mail address" id="description" />
Sign Up
</div>
</div>
This is my Javascript:
$('#email-signup').click(function(){
e.stopPropagation();
});
$("#email-signup-link").click(function() {
e.preventDefault();
$('#email-signup').show();
});
$(document).click(function() {
$('#email-signup').hide();
});
Two things. You don't actually have e defined, so you can't use it. And you need stopPropagation in your other click handler as well:
$('#email-signup').click(function(e){
e.stopPropagation();
});
$("#email-signup-link").click(function(e) {
e.preventDefault();
e.stopPropagation();
$('#email-signup').show();
});
$(document).click(function() {
$('#email-signup').hide();
});
http://jsfiddle.net/Nczpb/
$(document).click (function (e) {
if (e.target != $('#email-signup')[0]) {
$('#email-signup').hide();
}
});
The way I've often seen this done is by overlaying the page behind the form with a div (greyed out usually). With that, you could use:
$("#greydiv")..click(function() {
$("#email-signup").hide();
$("#greydiv").hide();
});
...or something simliar.
var mouse_is_inside = false;
$(document).ready(function()
{
$('.form_content').hover(function(){
mouse_is_inside=true;
}, function(){
mouse_is_inside=false;
});
$("body").mouseup(function(){
if(! mouse_is_inside) $('.form_wrapper').hide();
});
});
as referenced in another stackoverflow post...
$(":not(#email-signup)").click(function() {
$("#email-signup").hide();
});
Although you'd be better off having some kind of an overlay behind the popup and binding the above click event to that only.