I have this order question related top javascript. In the aspx page I have this SubmissionMaintenance.init that call this return classes in javascript getRecord and saveRecord. I wanted to add a $("#ddlCompany").change event and no matter when I add it it will never get called.
aspx Page
<script type="text/javascript">
$(document).ready(function () {
SubmissionMaintenance.init();
});
JS Page
return {
init: function () {
getRecord();
saveRecord();
}
}
var getRecord = function () {
html += "<select class='form-control select2-multiple' multiple='multiple' id='ddlCompany' name='ddlCompany' >";
$("#submission").html(html);
}
You'll need to add the change event listener to a parent element because the element you want to listen to is added after the dom has loaded.
Try this:
$( "#submission" ).on( "change", "#ddlCompany", function() {
console.log( '#ddlCompany change' );
});
Related
I have this function:
NewShowHideDiv2(iconID, divID, disabled) {
var x = document.getElementById(divID);
var y = document.getElementById(iconID);
$(eval(y)).click(function() {
console.log(eval(y));
$(eval(y)).toggleClass( "clicked" );
});
$(eval(x)).slideToggle("slow", function() {
});
}
All i am trying to get it to do is toggle the "clicked" class on click. However, it ignores the first and second click, and then applies it on the third and all subsequent odd number clicks. any ideas?
Without knowing how NewShowHideDiv2 is called it's difficult to be certain but there are some likely issues.
First, by putting your click binding function inside another function, the event isn't bound to the element until NewShowHideDiv2 is run. So you'll want to pull that out and put it in something like this:
$( document ).ready(function() {
$(eval(y)).click(function() {
console.log(eval(y));
$(eval(y)).toggleClass( "clicked" );
});
});
Also, the eval approach on the JS object is likely causing issues and certainly isn't the best practice. You'll want to modify that to be:
$( document ).ready(function() {
$("#iconIDHere").click(function() {
console.log(this);
$(this).toggleClass( "clicked" );
});
function NewShowHideDiv2(divID, disabled) {
$("#" + divID).slideToggle("slow", function() {
});
}
});
Try this with vanilla JS:
var x = document.getElementById('divID');
x.addEventListener('click', function(e) {
if(e.target.classList.contains('clicked')) {
e.target.classList.remove('clicked');
} else {
e.target.classList.add('clicked');
}
});
I think JQuery is:
$('#divID').click(function() {
$('#divID').toggleClass('clicked');
});
I am copying an element and adding it to a a list of elements. First, I get some HTML using an ajax call:
var setButtonClick = function (url, btn) {
$.ajax(url, $('form').serialize(), 'Html').then(function (data) {
$(btn).parent().find(sel.addListItem).on('click', function () {
addListItem(data, this, btn);
});
addListItem(data, btn, btn);
});
}
addListItem looks like this:
var addListItem = function (data, context, btn) {
var $template = $(data);
// stuff not related removed for brevity
$(btn).before($template);
}
I then have a remove function using a delegate:
$(sel.editableList).delegate(sel.removeListItem, 'click', function () {
// fires once for every element with the sel.removeListItem selector
}
I need the click event to fire once for the clicked element only. I can get a basic version of delegate working by inserting content like this:
$( "body" ).delegate( "p", "click", function() {
$( this ).after( "<p>Another paragraph!</p>" );
});
Therefore, I'm thinking it may be because I'm inserting a copy of the element or is it the same element I'm adding over and over? I've also tried to use clone to create a new element before inserting like:
var $template = $(data).clone();
Can anyone show me where I am going wrong with this please?
The problem is that every time your ajax is called you attach a click event handler to the elements. It gets called repeatedly, because you add it to the elements that already existed and had this handler attached.
The solution for your problem is to detach previously attached handlers with off() function.
var setButtonClick = function (url, btn) {
$.ajax(url, $('form').serialize(), 'Html').then(function (data) {
$(btn).parent().find(sel.addListItem)
.off('click')
.on('click', function () {
addListItem(data, this, btn);
});
addListItem(data, btn, btn);
});
}
#
In the future you may want to attach different click event handlers or may want to turn off specific handlers, for that you could use namespaces.
$(elem).on('event.namespace', function(){});
$(elem).off('event.namespace');
That way you could have multiple click event handlers on one element. This would be the code if you have more than one click event handlers
var setButtonClick = function (url, btn) {
$.ajax(url, $('form').serialize(), 'Html').then(function (data) {
$(btn).parent().find(sel.addListItem)
.off('click.addItem')
.on('click.addItem', function () {
addListItem(data, this, btn);
});
addListItem(data, btn, btn);
});
}
#
And here's the example.
$('.btn').on('click.ns1', function(){
alert('Hey');
});
$('.btn').on('click.ns2', function(){
alert('How you doin?');
});
// Comment me out to see the difference
$('.btn').off('click.ns2');
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button class="btn">Click me</button>
I just read this example here for Change() event, but didn't quite follow double use of change() here. The docs says explains "Attaches a change event to the select that gets the text for each selected option and writes them in the div. It then triggers the event for the initial text draw."
Please elaborate the last line!!
<html lang="en">
<head>
<meta charset="utf-8">
<title>change demo</title>
<style>
div {
color: red;
}
</style>
<script src="https://code.jquery.com/jquery-1.10.2.js"></script>
</head>
<body>
<select name="sweets" multiple="multiple">
<option>Chocolate</option>
<option selected="selected">Candy</option>
<option>Taffy</option>
<option selected="selected">Caramel</option>
<option>Fudge</option>
<option>Cookie</option>
</select>
<div></div>
<script>
$( "select" )
.change(function () {
var str = "";
$( "select option:selected" ).each(function() {
str += $( this ).text() + " ";
});
$( "div" ).text( str );
})
.change();
</script>
</body>
</html>
$("select") // this line is the selector
.change(function () { // this line starts adding the change event handler
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
})
.change();// this line then triggers that event handler (from the chained selector).
The same effect would be had from:
$("select").change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
});
$("select").change();
OR this:
$("select")
.change(function () {
var str = "";
$("select option:selected").each(function () {
str += $(this).text() + " ";
});
$("div").text(str);
});
$("select").trigger('change');
WHY you would do the first is that it uses the chaining and thus does not have to select (find) the element for the selector multiple times. It also ensures that your handler is fully added prior to it being triggered.
NOTE: Event handlers are executed when they are triggered, either manually by a user or from code such as this where this manually triggers that handler at that point.
NOTE: In jQuery, the empty .change() is a trigger and does not add a NEW function since there is nothing in there like in the first one.
It simply triggers the change event as a way to initialize the text on the div. Since all the logic is within the change listener. The listener reads all selected options out of the select and writes it on the div. However, the listener fires only when the change event occurs or if you trigger the event yourself. Think of the listener as an action to be performed. It's performed when the associated event occurs. The action in this case is to write the selected options into the div text.
Since we don't want an empty box from the beginning, we'll call the listener (the action) to do it for us, instead of rewriting the action.
It's also important to notice that .change will return the jQuery object from which it's being called. So you can chain it like this:
$('select').change(function() { /*do something*/ }).change(function() { /*doSomething else*/ }).change(); //and so on.
I have this code tied to a button that when clicked, executes code to hide a table row:
<script>
$(function hideinstr() {
$('tr.parent td').on("click", "input.instr", function () {
var idOfParent = $(this).parents('tr').attr('id');
$('tr.child-' + idOfParent).toggle('slow');
});
});
</script>
I would like this code to execute by default when the page loads, and let the user click the button if the want to reveal the table row. How can I do this when the 'click' is built right into this code?
Your solution never executes the function hideinstr(). Also, consider using $(document).ready if your code is executed in the <head>. Add extra parentheses to execute the function, or remove the surrounding function (function hideinstr).
<script>
$(document).ready(function hideinstr() {
$('tr.parent td').on("click", "input.instr", function () {
var idOfParent = $(this).parents('tr').attr('id');
$('tr.child-' + idOfParent).toggle('slow');
});
}());
</script>
or
<script>
$(document).ready(
$('tr.parent td').on("click", "input.instr", function () {
var idOfParent = $(this).parents('tr').attr('id');
$('tr.child-' + idOfParent).toggle('slow');
});
);
</script>
And to execute the event script directly, use $('tr.parent td').click();.
I've made a site that displays a user's Facebook photos. The code below appends the photos to the div "facebook-images". This part works fine. The problem I have is that the images are being appended after the Javascript code below is loaded; so the handler "fb-image" is not created when the browser reads the click function code at the bottom, therefore it does not work.
I believe I need to use jQuery on(), but where? I've tried to put on() everywhere in the code below. I've tried to bind with append, I've tried live (which I know is deprecated but worth a shot). Nothing is working.
Any ideas?
<div class="target">
</div>
<div id="facebook-images">
</div>
<script>
$.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function () {
$.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) {
$.each(data.data, function (i, face) {
$('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>");
});
});
});
$(".fb-image img").click(function () {
$(".target").append("<h1>hi</h1>");
});
</script>
The simplest way to fix this is to add the click handlers AFTER the images are inserted into the page.
<script>
$.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function () {
$.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) {
$.each(data.data, function (i, face) {
$('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>");
});
$(".fb-image img").click(function () {
$(".target").append("<h1>hi</h1>");
});
});
});
</script>
You can also use delegated event handling if you want. To do that, you set the event handler on a common parent that does exist at the time you run the event handling code with .on() and you use the delegated form of .on() by passing it a selector like this:
<script>
$.when(window.deferredes.fbLoaded, window.deferredes.fbLoggedIn).then(function () {
$.getJSON('https://graph.facebook.com/me/photos?access_token=' + FB.getAccessToken(), function (data) {
$.each(data.data, function (i, face) {
$('#facebook-images').append("<div class='fb-image'><img src='" + face.source + "' ></div>");
});
});
});
$("#facebook-images").on('click', ".fb-image img", function () {
$(".target").append("<h1>hi</h1>");
});
</script>
The delegated form of .on() works like this:
$(selector of static parent).on(event, selector that matches dynamic object, fn);