hey guys i am new to jquery and i was going throught the modal.js code and found the below code:
$target.one('show.bs.modal', function (showEvent) {
if (showEvent.isDefaultPrevented()) return // only register focus restorer if modal will actually get shown
$target.one('hidden.bs.modal', function () {
$this.is(':visible') && $this.trigger('focus')
})
})
i tried to understand the above code , so i made a fiddle.
now if you see the if conditional in the code :
if ($this.is(':visible')) {
$('input').trigger('focus');
console.log($this + ' ' + 'is visible');
} else {
console.log($this + ' ' + 'invisible');
}
now even if i have the following display rule I.E.
input {
display:none;
}
The if condition still passes , well thats my 1st difficulty . why does the if condition pass ??
my secound difficulty is the line inside the if condition I.E.
$this.trigger('focus');
now even though the if condition passes the input does't get the focus . why ??
Thank you .
I've made some minor chances to your code, and now it all seems to work for me:
$(document).ready(function () {
$target = $('input');
$target.trigger('focus');
$target.one('show.bs.modal', function (showEvent) {
$this = $(this);
console.log($this);
if ($this.is(':visible')) {
$this.focus();
} else {
console.log($this + ' ' + 'invisible');
}
$target.one('hidden.bs.modal', function () {
$this.is(':visible') && $this.trigger('focus')
});
});
$target.trigger('show.bs.modal');
});
http://jsfiddle.net/v36zoy1g/2/
To focus an element, you don't need fancy code. the .focus() function does the job for you!
And actually, I think that's about it, can't remember anything else I changed to be honest. :p
You haven't cached $(this) on $this.
You can use:
$this = $(this) before you use $this in your code.
Related
Is there a reason this won't work? It works the first time, the variable gets updated (and I can see it), yet it doesn't work on anything after the first one.
$(document).ready(function($) {
var question = 1;
$("ul#question"+question+" li").on( "click", function(e) {
$(this).addClass("test" + question);
question++;
});
});
What I'm trying to do is use the same button actions for 6 different buttons. It has to be this way so that I can use off() on each one, separately, as I go.
Otherwise I have to write the same code out 6 times. Perhaps there's a better way, I just don't understand why this isn't working.
Thanks
incrementing the variable will not change the selector of the event handler. You could use a class selector and then test the id in the event handler:
var question = 1;
$("ul.question li").on( "click", function(e) {
if ($(this).closest("ul").attr("id") === "question"+question) {
$(this).addClass("test" + question);
question++;
}
});
UPDATE
Or even:
var question = 1;
$("ul[id^='question'] li").on( "click", function(e) {
if ($(this).closest("ul").attr("id") === "question"+question) {
$(this).addClass("test" + question);
question++;
}
});
this is just my imagination since i don't know your html looks like.
you just create for 1 action when you have 6 button with different id.
try to use .each with same classname in your button.
var question = 1;
$('.question').each(function() {
$("ul#question"+question+" li").on( "click", function(e) {
$(this).addClass("test" + question);
});
question++;
});
I am trying to find a way to copy the value of multiple input fields into 1 single input field.
currently I can only copy 1 input field into another one using the following code:
addEvent(document.getElementById('inputName'), 'keyup', function () {
document.getElementById('inputURL').value = this.value.replace(' ', ' ');
$(".sect2 input[#value='']").parents(".secTxt").hide();
});
function addEvent(ele, evnt, funct) {
if (ele.addEventListener) // W3C
return ele.addEventListener(evnt,funct,false);
else if (ele.attachEvent) // IE
return ele.attachEvent("on"+evnt,funct);
}
is it possible to do something like this:
addEvent(document.getElementById('inputName, inputName2, inputName3, inputName4'), 'keyup', function () {
document.getElementById('inputURL').value = this.value.replace(' ', ' ');
$(".sect2 input[#value='']").parents(".secTxt").hide();
});
function addEvent(ele, evnt, funct) {
if (ele.addEventListener) // W3C
return ele.addEventListener(evnt,funct,false);
else if (ele.attachEvent) // IE
return ele.attachEvent("on"+evnt,funct);
}
if not, what is the correct way of doing this?
Thanks in advance.
UPDATE:
None of the examples bellow works and neither they are practical.
I also tried my own solution and that didn't work either.
I can only assume this is not possible using javascript!
Your second example isn't possible, but if you're using jQuery anyway then something like this is probably the simplest solution
UPDATE - Having thought about this, you probably want something like below
$(function(){
$('#inputName, #inputName2, #inputName3, #inputName4').keyup(function(){
var str = "";
$('#inputName, #inputName2, #inputName3, #inputName4').each(function() {
str += $(this).val().replace(' ', '');
});
$('#inputURL').val(str);
});
});
I've added a jsFiddle here of a working example
insetead of document.getElementById() you can use document.querySelector():
document.querySelector('#inputName, #inputName2, #inputName3, #inputName4')
I am attempting to loop through a dynamic element and then print it with jquery,
Heres the code i use
$('.recipe-steps #addNewStep').on('click', function () {
var s = $('.recipe-steps .step').size() + 1;
$('<div class="step pure-u-1-1"><textarea id="step" name="step_detail[]" class="pure-u-1" placeholder="Step ' + s + '"></textarea>×</div>').appendTo($('.recipe-steps .steps'));
return false;
});
$(document).on('click', '.step .remove', function () {
$(this).parents('.step').remove();
return false;
});
however its only printing out the first element and not the preceding ones. I have created a fiddle can anyone see why?
http://jsfiddle.net/drk8X/
I wasn't able to come up with the perfect solution (will have a look later) but I have redesigned the function to work to an extent.
$("body").on('input propertychange', function () {
var outputme="";
$('textarea').each(function (index) {
outputme+='<br>'+(index+1) + '. ' + $(this).val();
});
$('#lp-step').html('<h3>Method</h3>'+outputme);
});
This will update the "preview" on change of the text area, use CSS Selectors to narrow down the scope, but id reccomend you looking at your HTML and try and simplify it a bit more.
http://jsfiddle.net/drk8X/2/
I have a connection to the Foursquare API in my application. The user can type in a box to start searching for venues, or they can click one of two venue links to fill the same select box with one of those two venues. I'm having trouble letting the user click one of either two venues in. Here is my code:
JS:
function venueFormatSelection(venue) {
if ( venue.name && venue.location.address ) {
// if a user starts typing into a box, venue.name and venue.address values will pop up for them to select from. OR in the 'else' case, they can click one of either two links
else {
$("#bigdrop_set").click(function () {
return $('#bigdrop_set').attr('venue_name')
})
$("#bigdrop_set_2").click(function () {
return $('#bigdrop_set_2').attr('venue_name_2')
})
}
}
HTML:
<span class="which_venue" id="bigdrop_set" venue_name='foo' venue_data='FOO'><%= link_to(FOOOOO) %></span>
<span class="which_venue" id="bigdrop_set_2" venue_name_2='bar' venue_data_2='BAR'><%= link_to(BARRRR) %></span>
For some reason, the "click to populate" JS only works if just ONE of the 'return' lines is included without the .click function:
return $('#bigdrop_set').attr('venue_name')
What's wrong with the code inside my "else" statement? Thanks!
$(".bigdrop_set").click(function () {
return $('#bigdrop_set').attr('venue_name')
})
Should be:
$("#bigdrop_set").click(function () {
return $('#bigdrop_set').attr('venue_name')
})
As you are selecting an element with the ID bigdrop_set not an element with the class bigdrop_set. ID's should be unique, in your code you have duplicate bigdrop_set ID's which should be changed.
Also I would suggest binding the click elements on the $(document).ready() function, not in the venueFormatSelection function.
Returning the value from the click function doesn't really make much sense either. Either manipulate the value directly in the function or put it in another function itself, not on the click event.
For example:
function alertVenue(venue) {
alert(venue)
}
$("#bigdrop_set").click(function () {
var venue = $('#bigdrop_set').attr('venue_name')
alertVenue(venue);
})
You have something like
$(".bigdrop_set").click(function () {
return $('#bigdrop_set').attr('venue_name')
})
Did you really mean css class selector .bigdrop_set and then id selector #bigdrop_set.
I found a fix by using a global variable. Doubt it's the cleanest approach, but it's working for now:
$("#bigdrop_set").click(function () {
window.clickVenue = $('#bigdrop_set').attr('venue_name');
$(".bigdrop").select2("val", $('#bigdrop_set').attr('venue_data'));
});
$("#bigdrop_set_2").click(function () {
window.clickVenue = $('#bigdrop_set_2').attr('venue_name_2');
$(".bigdrop").select2("val", $('#bigdrop_set_2').attr('venue_data_2'));
});
function venueFormatSelection(venue) {
if (venue.name && venue.location.address) {
var imageSource = venue.categories[0].icon.prefix.slice(0, -1) + venue.categories[0].icon.suffix;
return "<img src='" + imageSource + "' height='20' width='20' />" + " " + venue.name + " (" + venue.location.address + ")";
}
else {
return window.clickVenue;
}
}
I wanna high light particular div when the page.isvalid=false.
on the pageload i am able to get display the error message. But the issue is that i am not able to highlight the control which is required.
I have a js function which sets the error class to the div. Its working fine when i click on a button. On the page load i wanna set this as well.
can i do this using some jquery??? or something other way..
Please let me know how to do this.... share your ideas....
Thanks
yes you can do this by using jquery
$(document).ready(callOnload);
function callOnload() {
//add code to highlight div
//following code is used by me to hightligh input control with has isreqired = true
$("input[isRequired=true]").each(
function(n) {
$('#' + this.id).addClass('mandatory');
if (this.value === '') {
$('#' + this.id).removeClass('normal');
$('#' + this.id).addClass('mandatory');
}
else {
$('#' + this.id).removeClass('mandatory');
$('#' + this.id).addClass('normal');
}
}
);
}