I have a textbox used to enter the text by user, which guide-text which disappears when user starts to write. But when I use a dropdown & select a text from it, & this text is automatically entered in the textbox, the guide-text is not fading away.
Events I am using to fade the guide-text :
$('input, textarea').live('keydown', toggleLabel);
$('input, textarea').live('paste', toggleLabel);
On change of dropdown :
$('.ui-discussion-text').change(function () {
var oldText = $('.ui-discussion-input textarea').val();
$('.ui-discussion-input textarea').val(oldText + " " + $(this).val());
});
Please help.
It's a little hard to say without seeing the rest of the code, but because you are changing code dynamically there isn't an event that will fire (I thought change might, but looked into it and realized it won't). Since you already have an onchange event for the dropdown, why not just call the toggleFunction at that point?
http://jsfiddle.net/spacebean/SvNUw
$('.ui-discussion-text').change(function () {
var oldText = $('.ui-discussion-input textarea').val();
$('.ui-discussion-input textarea').val(oldText + " " + $(this).val());
toggleLabel();
});
Alternately, you can add a focus after you replace the text and set a listener for that:
http://jsfiddle.net/spacebean/SvNUw/2/
$('input, textarea').live('keydown paste focus', toggleLabel);
$('.ui-discussion-text').change(function () {
var oldText = $('.ui-discussion-input textarea').val();
$('.ui-discussion-input textarea').val(oldText + " " + $(this).val()).focus();
});
Or lastly, you can just add a trigger to the element after you copy the text, e.g.:
http://jsfiddle.net/spacebean/SvNUw/4/
$('input, textarea').live('keydown paste', toggleLabel);
$('.ui-discussion-text').change(function () {
var oldText = $('.ui-discussion-input textarea').val();
$('.ui-discussion-input textarea').val(oldText + " " + $(this).val()).trigger('paste');
});
And, as you can see, you don't need a separate line for each event type if they are all triggering the same function. Just add them separated by space like above.
Related
I am using Bootstrap's accordion widget to contain several forms i.e. each panel contains one form. When the last panel is selected, the data from the other panels is meant to be posted which will be used to graph the data. However, I am unable to get to the posting part as I cannot figure out which panel is currently selected. I know that this has to do with a class of active or inactive, but I don't think bootstrap's accordion supports that functionality unlike jquery accordion.
I am trying to figure out the first part i.e. check if the user has clicked on the last panel. In my HTML code it has an id of #results. Here's a jsfiddle that demonstrates the issue I am facing. It does not seem to trigger the second alert function when the user clicks on the #results tag, not sure why.
Sample javascript code:
$('#accordion').on('show.bs.collapse', function () {
$('#results').click(function () {
alert("works"); //testing purposes
});
});
Why don't you do?
$('#results').click(function (){
alert("clicked");
});
Just remove the accordion function and you'll get the on click event directly
Is this what you want?
Fiddle: Demo
take this outside the on function
$('#results').click(function (){
alert("clicked");
});
This is an old thread but I wanted to post an answer as the expected result is not suggested.
What you need to do here is to handle the currently selected collapse items with the event handler. If you use the this keyword for this, you can access the values of the selected object (For example only one item in the form).
Here you can get the $(".collapse") element.
You can get the index number of the active item with $(this).parent().index().
Likewise, you can get the id of the active item with $(this).attr('id').
Your jQuery structure would be:
$(".collapse").on('show.bs.collapse', function(){
//0,1,2,etc..
var index = $(this).parent().index();
//collapseOne, collapseTwo, etc..
var id = $(this).attr('id')
//alert('Index: ' + index + '\nItem Id: ' + id );
console.log('Index: ' + index)
console.log('Item Id: ' + id)
if(id === 'collapseFour')
{
var username = $('#username').val();
var email = $('#email').val();
var age = $('#age').val();
//here you can check the data from the form
$("#result").html("<p> UserName: " + username + "</p> <p> EMail: " + email + "</p> <p> Age: " + age + "</p>");
}
});
I've included a working example here for you (jsfiddle).
$('#accordion').on('show.bs.collapse', function (accordion) {
var $activeCard = $(accordion.delegateTarget.children);
});
or
$('#accordion').on('show.bs.collapse', function () {
var $activeCard = $(this.children);
});
I currently have a bit of JS which will generate buttons based on the data attribute stored in the HTML, which will generate 2 buttons:
Plus Button to add a repeatable block(Will/should only display a plus button if there is only one block)
A minus button to remove the repeatable field(will/should show when there is more than one blocks)
Thing is, I have the buttons working fine, but when I added the event handlers for them to do as I ask, and click on them nothing happens, am not sure why and hopefully you can point me in the right direction.
Regards!
P.S jQuery Code
$('.glyphicon-plus-sign').on("click", function () {
prevInput = $(this).prev('input');
count = $(prevInput).attr('data-count');
countIncremented = count++;
br = '<br/><br/>';
inputElement = '<input type="' + $(prevInput).attr("type") + '" name="' + $(prevInput).attr("name") + countIncremented + '" data-count="' + countIncremented + '"/>';
$(br + inputElement + plusMinusButtons).insertAfter('.' + $(prevInput).attr("name") + ':last');
});
$('.glyphicon-minus-sign').on("click", function () {
prevInput = $(this).prev('input');
$(this).remove(prevInput).remove(this);
});
$("button").click(function () {
console.log("here");
x = $('#form').serializeArray();
$.each(x, function (i, field) {
console.log(field.name + ":" + field.value + " ");
});
I currently have a bit of JS which will generate buttons
Dynamically adding buttons means you have to approach events a little differently. You need to do the following:
$('body').on("click", '.glyphicon-minus-sign', function () {
...
}
$('body').on("click", '.glyphicon-plus-sign', function () {
...
}
Essentially, you are now listening to clicks on the body element, instead of the actual buttons (which might not actually exist yet). Any other statically created buttons aren't affected.
Issue 1
I am new to jquery and front end in general. I am trying to change the value of a link based on which radio button is selected. When a user selects a radio button I want append the submit link with the value of the respective radio selection. It is imporant that the value changes in the event that the user selects another radio button in that selection.
i.e. If user clicks on option 1(value="sex=male") then I want the submit link to be
Issue 2
I know how to do this with jquery but I want to know the most optimal solution that ties back into issue 1. Once a user selects a radio button I want the 'order summary' to say the users selection.
The simplest way I can see is the following:
$('input[type="radio"]').change(function () {
var queryString = $('input[type="radio"]:checked').map(function () {
$('#' + this.name).text(this.name + ': ' + this.value);
return this.name + '=' + this.value;
}).get().join('&');
$('#link').attr('href', function () {
return 'example.com/cart?' + queryString;
});
});
JS Fiddle demo.
Bear in mind I've changed the span to an a (to use the native href property), and also corrected some of the HTML errors, and reduced the unnecessary HTML (all the br elements weren't necessary, use CSS for presentation).
References:
Attribute-equals ([attribute="value"]) selector.
attr().
change().
get().
map().
text().
Post your code here in SO. Please don't give just the fiddle link.
jsFiddle DEMO
$('[name=sex]').change(function () {
var sex;
if ($(this).val().indexOf("=male") >= 0) {
$('#sex-male').show();
$('#sex-female').hide();
sex = "male";
} else {
$('#sex-male').hide();
$('#sex-female').show();
sex="female"
}
$('#link').append("sex=" + sex + "&");
});
$('[name=duration]').change(function () {
var duration;
if ($(this).val().indexOf("duration=6months") >= 0) {
$('#duration-6').show();
$('#duration-12').hide();
duration = 6;
} else {
$('#duration-6').hide();
$('#duration-12').show();
duration = 12;
}
$('#link').append("duration=" + duration + "&");
});
Here's a way of doing it:
JSFIDDLE
Note that your HTML was a bit odd so I've changed it slightly. I added a hyperlink to set the href attribute on (#link) and a span to display it so that you can see what it has been set to (#linkdisplay)
the javascript:
$(function(){
var sex = 'male';
var duration= '6';
updateSummary(sex, duration);
$('.sex-label').hide();
$('.duration-label').hide();
$("input[name='sex']").click(function(){
sex = $(this).val();
updateLink(sex, duration);
updateSummary(sex, duration);
});
$("input[name='duration']").click(function(){
duration = $(this).val();
updateLink(sex, duration);
updateSummary(sex, duration);
});
});
function updateLink(sex, duration){
$('#link').attr('href', 'example.com/cart?sex=' + sex + '&duration=' + duration);
$('#linkdisplay').html($('#link').attr('href'));
}
function updateSummary(sex, duration){
$('.sex-label').hide();
$('#sex-' + sex).show();
$('.duration-label').hide();
$('#duration-' + duration).show();
}
I have been making this form that must enable the back-end user to create new questions for users to answer. The form is cloned and appended to a div (selector #content) successfully after the first .on(click) event, but it won't duplicate the form again if the cloned button is pressed. The .on(change) event applied to my drop-down selection does change the content of respective divs like it is supposed to, but only on the original form.
Here's the JQuery code:
$(document).ready(function () {
$('.addAnswer').on("click", function () {
var idx = $('#mp div[name^="antwoord"]:last').index() + 1;
$clone = $('#mp div[name^="antwoord"]:first').clone(true, true).attr('class', 'answer content_' + idx);
$('.removeAnswer').show;
$('#mp').append($clone);
$('.answer:last').each(function () {
$('b:last').empty();
$('b:last').prepend(String.fromCharCode(64 + idx) + ". ")
$('.addAnswer').on("click", function () {
idx++;
});
});
if (idx == 2) {
$('.removeAnswer').show();
}
});
$('.nextq').click(function () {
var newqid = $('#content form:last').index() + 1;
$('.done, .nextq, .remove').hide();
$('#content').append('<hr>');
$('#content').append($('form').html()).attr('class', 'q_' + newqid);
$('.nextq').on("click", function () {
newqid++;
});
$('.done:last, .nextq:last, .remove:last').show();
return false;
});
$('.group').hide();
$('#text:last').show();
$('.select:last').on("change", function () {
$('.group').hide();
$('#' + $(this).val() + ':last').fadeIn();
$('button.' + $(this).val() + ':last').fadeIn();
});
});
Because I thought posting the whole HTML template would be a tad bit too much, I provided a JSFiddle for you people.
One extra question for the ones that are feeling kind: In the JQuery code it is seen that the contents of the HTML are being parsed using .html() and appended with .append.(Line 33 on the JSFiddle) As the .on(change) function switches the contents of the divisions it should change, .html() sees those changes and takes those along with it. I'd like the .on(click) function to append the div's content in its original state, unchanged by the changes made beforehand by the back-end user. Any help with this would be much obliged.
In order to have jQuery trigger on new elements you would do something like
$( document ).on( "click", "<your id or class>", function() {
//Do stuff
});
I'm having a slight issue getting a jquery action to function ideally. Currently everything is working properly on a blur from a particular field, which is called "person_email". The issue is that if the end user does this, and decides to click a hyperlink for example on the rest of the page that jquery from the blur triggers, the user see's this briefly, and then continues to the corresponding link.
Ideally this would work that the blur would only trigger if a hyperlink was not clicked.
var $email = $("#person_email");
var $hint = $("#hint_edit");
$email.on('blur',function() {
$hint.hide; // Hide the hint
$(this).mailcheck({
suggested: function(element, suggestion) {
// First error - Fill in/show entire hint element
var suggestion = "Did you mean: <span class='suggestion'>" +
"<span class='address'>" + "</span>" +
"<a href='#' class='domain'>" + suggestion.address +
"#" + suggestion.domain + "</a></span>?";
$hint.html(suggestion).fadeIn(150);
}
});
});
$hint.on('click', '.domain', function() {
// On click, fill in the field with the suggestion and remove the hint
$email.val($(".suggestion").text());
$hint.fadeOut(200, function() {
$(this).empty();
});
return false;
});
})
I assume you want off
$("a").on("click",function() {
$email.off();
});