Develop Reference

Trying to invoke onchange method set by jQuery

In my code, I am setting a change listener on my checkboxes here
$(".section").change(function() {
if($(this).is(":checked")) {
$("." + this.id).show();
...
Now I am trying to do a "code-driven" click on the checkbox, and I have
$(".secTitle").click(function(e) {
var elem = this;
while(elem) {
if (elem.className && elem.className.indexOf ('DOC_SECTION') != -1) {
var clzes = elem.className.split(" ");
var clzIdx = 1;
if (elem.getAttribute('closeSecClassIdx')) {
clzIdx = parseInt(elem.getAttribute('closeSecClassIdx'));
}
var chk = document.getElementById(clzes[clzIdx]);
chk.checked = false;
alert(chk.onchange);
//chk.changed();
break;
}
else {
elem = elem.parentNode;
}
}
});
I know that I have the right element, as chk.checked = false; is working correctly. After that I'm trying to invoke the change method set earlier but my alert is showing 'undefined'.

You can trigger the change event by calling $(chk).change(). Below I've created a little prototype that shows binding to the change event and invoking it.
jQuery(function($) {
// bind to the change event
$("input").change(function() {
console.log('change triggered!');
});
// now trigger it
$("input").change();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="checkbox" />

I click an input radio and change an image src, by clicking again...how do I change the image back how it was?

I have this code:
https://jsfiddle.net/Suiberu/rxu8wgxf/
//INPUT RADIO ON & OFF
var prv;
var markIt = function(e) {
if (prv === this && this.checked) {
this.checked = false;
prv = null;
} else {
prv = this;
}
};
$(function() {
$('input.limit_radio').on('click', markIt);
});
//CHANGE IMAGE
function changeImage(imgName) {
image = document.getElementById('theimage');
image.src = imgName;
}
Clicking on an input type radio.. and yes it has to be an input type radio,
I do manage to change an img src.
Thanks to some jquery code I can manage to turn off the input radio. But the changed image remains as it was changed in the first place.
So when I turn off the input type radio I would like to get back the original img src.
How do I achieve this?
Sorry, but javascript or jquery are not my strongest skills, but you can verify what am I asking for just checking the url above.
Thanks!

I removed the onclick handler and added a data attribute to swap out the urls.
https://jsfiddle.net/jjwilly16/37yn9xzy/1/.
<img src="http://www.cbc.ca/i/img/theme/default/plus-up.png" name="theimage" id="theimage" data-alternate="https://www.ucl.ac.uk/2034/images/icons/arrow-blue-left.png"/>
/INPUT RADIO ON & OFF
var prv;
var markIt = function(e) {
if (prv === this && this.checked) {
this.checked = false;
prv = null;
} else {
prv = this;
}
var img = document.getElementById('theimage'),
alternate = img.getAttribute('data-alternate'),
src = img.src;
img.src = alternate;
img.setAttribute('data-alternate', src);
};
$(function() {
$('input.limit_radio').on('click', markIt);
});

You can use mouseup event, remove and replace the original <input type="radio"> element.
$(function() {
var sources = ["https://www.ucl.ac.uk/2034/images/icons/arrow-blue-left.png"
, "http://www.cbc.ca/i/img/theme/default/plus-up.png"];
var img = $("#theimage");
var clicked = false;
function changeImage(e) {
img.attr("src", function() {
var checked = e.target.checked;
if (!clicked || checked) {
var clone = e.target.outerHTML;
$(e.target).remove();
$(clone).insertAfter($("#theimage + br"));
$(".limit_radio").prop("checked", !clicked ? true : !checked);
}
return (!clicked ? (clicked = true) : !checked) ? sources[0] : sources[1]
});
}
$(document).on("mouseup", "input.limit_radio", changeImage)
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<img src="http://www.cbc.ca/i/img/theme/default/plus-up.png" name="theimage" id="theimage" />
<br>
<input class="limit_radio" type="radio" name="edit_race" value="gnomin" id="race_gnomin">
jsfiddle https://jsfiddle.net/rxu8wgxf/5/

JavaScript dont listening to bool updated value

Followed by the code the (bool) flag variable should be false when a new input append to the .block element which should stop appending multiple input items.
JsFiddle: https://jsfiddle.net/hasantg/ja0he104/
$(document).ready(function(){
$('a.action').on('click', function(e){
e.preventDefault();
var $this = $(this),
type = $this.data('type'),
$block = $this.closest('div.block');
if (type == 'newform') {
var $form = $('<div class="form"><input type="text" /></div>'),
flag = true;
if (flag == true) {
$block.append($form);
flag = false;
}
// flag = false;
}
});
});
I cant understand what i am doing wrong here?

you need a flag for each of your elements. you can go with #TbWill4321's approach or you can try this approach.
what you can do is add a data attribute to each of your elements. let's say the name of the data attribute is added which means if an input is added to the element or not.
in the click event you can check if the flag exists and add it if it does not
if (typeof $this.data('added') == 'undefined') {
$this.data('added', false);
}
then check the value of the flag in your if condition like this
if (type == 'newform') {
var $form = $('<div class="form"><input type="text" /></div>');
var flag = $this.data('added');
if (flag == false) {
$block.append($form);
$this.data('added', true);
}
}
here's a working JSFIDDLE for the same. hope this helps.

$(document).ready(function(){
$('a.action').each(function() {
var flag = true;
$(this).on('click', function(e){
e.preventDefault();
var $this = $(this),
type = $this.data('type'),
$block = $this.closest('div.block');
if (type == 'newform' && flag) {
var $form = $('<div class="form"><input type="text" /></div>');
$block.append($form);
flag = false;
}
});
});
});
Edit: Performance update, only creates $form if needed.
Edit: Looped over each action selector and created flag for each.

Adding keyup events to dynamically generated elements using jquery

I have a button which creates text boxes dynamically and there is another button 'Clear'.
If there is no text in any of the text field then the clear button is disabled or else it will be enabled. It works for the text box that is created when the dom is loaded but for the dynamically created textboxes it does not work.
Here is the HTML
<input type="button" value="Click Me" class="a" />
<input type="button" value="Clear" class="a" id="clearBasicSearch" />
<div id="basicSearchFields">
<input type="text" />
</div>
Javascript
$(".a").click(function () {
$("#basicSearchFields").append("<input type='text' class='b' />");
});
/*$(".b").live("keyup", function () {
//alert('you pressed ' + $(this).val());
$(this).val($(this).val().toUpperCase());
});*/
var toValidate = $("#basicSearchFields input[type='text']");
$("#clearBasicSearch").removeClass('hidden').removeClass('button').attr('disabled', true);
toValidate.live('keyup', function () {
console.log("hi");
var valid = false; //default is false
toValidate.each(function () {
if ($(this).val().length > 0) {
valid = true; //non-empty element found
return false; //break
}
});
$("#clearBasicSearch").attr('disabled', !valid).toggleClass('button', valid);
});
JSfiddle link - http://jsfiddle.net/TpExS/
Please help me out!!

Try this
$(document).on('keyup', "#basicSearchFields input[type='text']",function () {
console.log("hi");
var valid = false; //default is false
var toValidate = $("#basicSearchFields input[type='text']");
toValidate.each(function () {
if ($(this).val().length > 0) {
valid = true; //non-empty element found
return false; //break
}
});
$("#clearBasicSearch").attr('disabled', !valid).toggleClass('button', valid);
});

$(document).on('keyup', "input#basicSearchFields",function () {
// do something here
}

Here is another possible solution http://jsfiddle.net/TpExS/2/
Note: JQuery 2.0.2 used
Javascript
$(document).ready(function(){
var fields = $('input[class=b]');
for(var i = 0; i < fields.length; i++){
$(fields[i]).on('keyup', validateFields);
}
});
$(".a").click(function () {
var newField = $('<input/>').attr('type', 'text').attr('class', 'b');
$(newField).on('keyup', validateFields);
$("#basicSearchFields").append(newField);
});
function validateFields(){
if($(this).val().length){
$('#clearBasicSearch').attr('disabled', false);
return;
}
$('#clearBasicSearch').attr('disabled', true);
var fields = $('input[class=b]');
for(var i = 0; i < fields.length; i++){
if($(fields[i]).val().length){
$('#clearBasicSearch').attr('disabled', false);
return;
}
}
}

Try
$("#basicSearchFields").delegate("input[type='text']", 'keyup', function () {
validate();
});
function validate(){
console.log("hi");
var valid = false; //default is false
var toValidate = $("#basicSearchFields input[type='text']");
toValidate.each(function () {
if ($(this).val().length > 0) {
valid = true; //non-empty element found
return false; //break
}
});
$("#clearBasicSearch").attr('disabled', !valid).toggleClass('button', valid);
}
Demo: Fiddle

Simple, Updates your global "toValidate" variable when you add more elementson the click.
$(".a").click(function () {
$("#basicSearchFields").append("<input type='text' class='b' />");
toValidate = $("#basicSearchFields input:text");
});
Why? The time you set toValidate, it will return an array at that moment, you should updates it in each time there are new elements, or check for all of then inside the live event.

How to Handle Radio Button List Option change with jQuery

I hava a RadioButtonList control on my page that has multiple option.I want to handle change of its options and, according to value of selected option, do work.
This does not work:
$(document).ready(function () {
$('#RadioButtonList1').change(function () {
if ($(this).is(':checked')) {
alert("yes");
}
});
});
How I can Handle that?
thanks

You just need to bind the inputs themselves, not their group:
$(document).ready(function () {
$('#RadioButtonList1 input').change(function () {
// The one that fires the event is always the
// checked one; you don't need to test for this
alert($(this).val());
});
});

May be this one help you:)
$('form#package_information_id').on('change','.shipment_type_radio_class',function(){
var currentselval = $(this).find('input[type="radio"]:checked');
//console.log(currentselval);
if(currentselval.val()=='dropoff')
{
$('.pickup_detail_class').hide();
}else
{
$('.pickup_detail_class').show();
}
});

enter code here
<div>
<asp:RadioButtonList ID="rblTest" runat="server">
<asp:ListItem>10</asp:ListItem>
<asp:ListItem>20</asp:ListItem>
<asp:ListItem>30</asp:ListItem>
<asp:ListItem>40</asp:ListItem>``
</asp:RadioButtonList>
</div>
<script type="text/javascript">
$(function() {
var val = "";
val = $('[id*=rblTest]').find('input:checked').val();
if (val != "" && val != undefined) {
alert("Selected item value is : " + val)
}
});
</script>