I am trying to copy the functionality of JSFiddle#1 into my JSFiddle#2
Brief Description of above two fiddles:
1) JSfiddle #1 : When a user selects third option from the dropdown menu, it displays the alert popup.
2) JSFiddle #2: I have tried to plug in the JSFiddle #1 code into this fiddle inside the html: $('#name_status_popup_dialog').html(), as shown in the fiddle (commented lines of code) but it doesn't work. The reason I am putting it inside html: $('#name_status_popup_dialog').html(), is because it is responsible for displaying the HTML contents in the dialog. Here is the documentation of html parameter used in the popModal library. Am I defining the function for the popup dialog correctly inside html() for JsFiddle #2? Please advise. Thanks
It's as simple as putting the code outside of html callback. See this Fiddle.
jQuery(function($) {
var id_value;
$(document).on('change', '#change_name_statusName', function checkSelection() {
const change_name_statusNameVal = this.value
console.log("Am I in change listner?");
if (change_name_statusNameVal == "First") {
id_value = 1000;
} else if (change_name_statusNameVal == "Second") {
id_value = 2000;
} else if (change_name_statusNameVal == "Third") {
alert("Are you sure you want to select third option?");
id_value = 3000;
} else if (change_name_statusNameVal == "Fourth") {
id_value = 4000;
}
});
$("#change_name_status").click(function() {
$('#change_name_status').popModal({
html: $('#name_status_popup_dialog').html(),
onOkBut: function() {
var change_name_statusNameVal = $("#change_name_statusName").val();
if (change_name_statusNameVal == "First") {
id_value_ = 1000;
} else if (change_name_statusNameVal == "Second") {
id_value_ = 2000;
} else if (change_name_statusNameVal == "Third") {
alert("Are you sure you want to select Third option?");
id_value_ = 3000;
} else if (change_name_statusNameVal == "Fourth") {
id_value_ = 4000;
}
}
});
});
});
Also, notice that I attached the event listener on the document not the element itself since the element is dynamically generated.
Related
I have multiple buttons and when I click each one I want an element associated with that button to slide down and then when I click the same button the same element slides back up. The code below works but if I click one button it slides down then I click the second button nothing happens because it runs the else if part of the code. How would I fix this?
var moreOption = 1;
$(".more-button").click(function(){
var buttonNumber = $(this).attr('buttonNumber');
if (moreOption === 1) {
$("#more"+buttonNumber).slideDown();
moreOption = 2;
} else if (moreOption === 2) {
$("#more"+buttonNumber).slideUp();
moreOption = 1;
}
});
Just use a data-attribute on the button and switch the state manually like this:
<button class="more-button" data-showMore="1" data-buttonNumber="1"/>
$(".more-button").click(function(){
var buttonNumber = $(this).data('buttonNumber');
var moreOption = $(this).data('showMore');
if (moreOption == '1') {
$("#more"+buttonNumber).slideDown();
$(this).data('showMore', '2');
} else if (moreOption == '2') {
$("#more"+buttonNumber).slideUp();
$(this).data('showMore', '1');
}
});
I'm trying to get the values from the and a checkbox, and put the value in a text box OR add the dropdown and checkbox if both are selected and put that into a text box. There is a JavaScript error in the code, which you can see in the link below, in IE but it works correctly in Chrome. Any guidance on this?
function TotAmt() {
var DA = +document.getElementById("Donation").options[Donation.selectedIndex].value;
if (document.form1.somename.checked == true) {
document.form1.Summary.value = parseInt(DA) + parseInt(500);
} else {
document.form1.Summary.value = parseInt(DA);
}
}
View sample code
You get rid of that specific error in jsFiddle by not wrapping the javascript in the head. Then use getElementById function in your ToAtm() function like this:
function fnchecked(blnchecked) {
if (blnchecked) {
document.getElementById("CoatSizeDiv").style.display = "";
} else {
document.getElementById("CoatSizeDiv").style.display = "none";
}
}
function TotAmt() {
var DA = +document.getElementById("Donation").options[Donation.selectedIndex].value;
if (document.getElementById("somename").checked == true) {
document.getElementById("Summary").value = parseInt(DA) + parseInt(500);
} else {
document.getElementById("Summary").value = parseInt(DA);
}
}
UPDATED CODE
I have a script to execute some tasks based on an option variable. Option has a default value 1. The value can be toggled by clicking some links. Then a set of operations are set, for that operations to execute. The sample layout will be like;
HTML
<a id="opt1">1</a><br><a id="opt2">2</a><br><a id="opt3">3</a><br>
<div id="mydiv">option1</div>
JS
var opt=1;
$('#opt1').click(function() {
opt=1;
});
$('#opt2').click(function() {
opt=2;
});
$('#opt3').click(function() {
opt=3;
});
if(opt == 1){
$('#mydiv').text("option1");
}else if(opt == 2){
$('#mydiv').text("option2");
}else{
$('#mydiv').text("option3");
}
JS is wrapped inside document ready function. The sample is meant to change text according to option variable. Sorry that the tasks cannot be nested inside .click(function() and are purely depend on option value. How can I achieve this?
here is the fiddle http://jsfiddle.net/Naw3y/
problem is your if condition is called just once on document.ready.. make a function , add your condition and call that function in click event
var opt=1;
$('#opt1').click(function() {
opt=1;
divText(opt); //calling divText(1) is shorter :)
});
$('#opt2').click(function() {
opt=2;
divText(opt)
});
$('#opt3').click(function() {
opt=3;
divText(opt)
});
function divText(opt){
if(opt == 1){
$('#mydiv').text("option1");
}else if(opt == 2){
$('#mydiv').text("option2");
}else{
$('#mydiv').text("option3");
}
}
not sure why aren't you calling straight away .. without if and function.. but here you go
$('#opt1').click(function() {
$('#mydiv').text("option1");
});
$('#opt2').click(function() {
$('#mydiv').text("option2");
});
$('#opt3').click(function() {
$('#mydiv').text("option3");
});
fiddle here
fiddle for second option
This should do the trick: http://jsfiddle.net/Naw3y/6/:
var opt = 1;
$(function() {
$('#opt1').click(function() {
opt=1;
changeText();
});
$('#opt2').click(function() {
opt=2;
changeText();
});
$('#opt3').click(function() {
opt=3;
changeText();
});
});
function changeText(){
if(opt == 1){
$('#mydiv').text("option1");
}else if(opt == 2){
$('#mydiv').text("option2");
}else{
$('#mydiv').text("option3");
}
}
I think what you need in your situation is 'encapsulation' of your property, and this is what the other answers lack:
var opt;
//setter function for opt that does the div update
function setOpt(value) {
opt = value;
$('#mydiv').text('option' + value);
}
$(document).ready(function() {
//bind click handlers
$('#opt1').click(function() {
setOpt(1);
});
$('#opt2').click(function() {
setOpt(2);
});
$('#opt3').click(function() {
setOpt(3);
});
//set default value
setOpt(1);
});
$(document).ready(function(){
$('a').click(function(){
$('#mydiv').text('option'+$(this).html());
});
});
Sorry If i didnt understand your question well.. try to explain better..
After I added a slideshow to the site I am working on, some web components that use Jquery stopped working. However the newly added slideshow that also uses JQuery works as expected.
After some debugging, I found out exactly what JQuery is working and what isn't from the code below. I added a comment to my code to indicate that point.
I am importing my jquery library in the header and the code below is the last code before the closing <body> tag.
<!--SLIDESHOW-->
$(document).ready(function() {
var options = {};
if (document.location.search) {
var array = document.location.search.split('=');
var param = array[0].replace('?', '');
var value = array[1];
if (param == 'animation') {
options.animation = value;
}
else if (param == 'type_navigation') {
if (value == 'dots_preview') {
$('.border_box').css({'marginBottom': '40px'});
options['dots'] = true;
options['preview'] = true;
}
else {
options[value] = true;
if (value == 'dots') $('.border_box').css({'marginBottom': '40px'});
}
}
}
$('.box_skitter_large').skitter(options);
// Highlight
$('pre.code').highlight({source:1, zebra:1, indent:'space', list:'ol'});
//**** everything above works, everything below this point does not! ****/
$(".expandButton").click(function(ev){
$(ev.target).closest(".company-container").find(".expand").css("height", "140px");
$(ev.target).closest(".company-container").find(".expand").toggle("fast");
});
$(".emailLink, .email-popup").click(function(e){
e.stopPropagation();
$(e.target).closest(".company-container").find(".expand").css("height", "140px");
$(e.target).closest(".company-container").find(".email-popup").show("fast");
$(e.target).closest(".company-container").find(".phone-popup").hide();
$(e.target).closest(".company-container").find(".address-popup").hide();
});
$(".addressLink, .address-popup").click(function(e){
e.stopPropagation();
$(e.target).closest(".company-container").find(".expand").css("height", "550px");
$(e.target).closest(".company-container").find(".address-popup").show("fast");
var address = $(e.target).closest(".company-container").find(".address").html(); //get address text
if(!($(e.target).closest(".company-container").find(".map").length)){ //check if it was loaded
$(e.target).closest(".company-container").find(".address-popup").html('<iframe class="map" style="margin-top:45px;" width="575" height="350" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="https://maps.google.com/maps?f=q&source=s_q&hl=en&geocode=&q='+ address +' &aq=&ie=UTF8&hq=&hnear='+address+'&t=m&z=14&iwloc=A&output=embed"></iframe>');
}
$(e.target).closest(".company-container").find(".email-popup").hide();
$(e.target).closest(".company-container").find(".phone-popup").hide();
});
$(".phoneLink, .phone-popup").click(function(e){
e.stopPropagation();
$(e.target).closest(".company-container").find(".expand").css("height", "140px");
$(e.target).closest(".company-container").find(".phone-popup").show("fast");
$(e.target).closest(".company-container").find(".email-popup").hide();
$(e.target).closest(".company-container").find(".address-popup").hide();
});
$(document).click(function(e) {
if (!(e.target.class === "email-popup" || e.target.class === "phone-popup")) {
$(".email-popup, .phone-popup, .address-popup").hide("fast");
}
$(".expand").css("height","140px");
});
$(".tagKeyword").hover(function(){
$(this).css("background-color","#fff");
$(this).css("color","blue");
$(this).css("box-shadow","none");
});
$(".tagKeyword").mouseleave(function(){
$(this).css("background-color","#eee");
$(this).css("color","#556");
$(this).css("box-shadow","1px 1px 2px #ccc");
});
$(".search-container").hover(function(){
$(".search-container").css("background","url(./images/menu/menu-middle.png)");
});
$(".searchfield").Watermark("search");
});
Can you try this?
$(".expandButton").click(function() {
$(this).closest(".company-container").find(".expand").css("height", "140px");
$(this).closest(".company-container").find(".expand").toggle("fast");
});
This may not help at all, but I didn't see the need for ev here and to instead use this.
May be you need to double check ev variable:
ev = ev || window.event
I'm using Javascript to make my checkboxes larger. Doing this I use image one for black checkbox and another one with the checked checkbox. It works like the real checkbox. However, when the page loads, the black checkboxes are not successfully loaded unless I click somewhere in the page to invoke them. Please check here to the page.
Belowing is my js code which I think it will impact this:
var Custom = {
init: function() {
var inputs = document.getElementsByTagName("input"), span = Array(), textnode, option, active;
for(a = 0; a < inputs.length; a++) {
if((inputs[a].type == "checkbox" || inputs[a].type == "radio") && inputs[a].className == "styled") {
span[a] = document.createElement("span");
span[a].className = inputs[a].type;
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
} else {
span[a].style.background = unchecked;
}
}
inputs[a].parentNode.insertBefore(span[a], inputs[a]);
inputs[a].onchange = Custom.clear;
if(!inputs[a].getAttribute("disabled")) {
span[a].onmousedown = Custom.pushed;
span[a].onmouseup = Custom.check;
} else {
span[a].className = span[a].className += " disabled";
}
}
}
}
Below is my image on form load:
And this is my page when clicking on anywhere:
Which other functions and variables are already defined. Thus could anyone help me to enable them to display whenever the form loads?
I don't known why you use that
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
} else {
span[a].style.background = unchecked;
}
}
But when I open your script in http://checkintonight.freeiz.com/js/custom-form-elements.js
Try to call function clear() in end of Custom.init(), it works
init: function() {
//
...
//
this.clear();
}
Sorry for my bad English
Eventually, I found a bug in my Javascript code. I add the else statement in the init() function to test if the checkbox is also not checked. So the code becomes like below:
if(inputs[a].checked == true) {
if(inputs[a].type == "checkbox") {
span[a].style.background = unchecked;
}
} else {
span[a].style.background = unchecked;
}
Then it works! Thanks everyone that reviewed and answered to my question.