Combobox event is not geting invoked - javascript

On click of a button a Combo Box gets displayed and on select of a Combo Box .
The change event is not getting called .
Please let me know where i am making the mistake .
<html>
<head>
<script src="jquery17.js" type="text/javascript"></script>
<script>
$("select").change(function(){
alert(this.id);
});
$(document).ready(function(){
$("button").click(function(){
var s = $('<select />');
var data = {
'foo': 'bar',
'foo2': 'baz'
}
for(var val in data) {
$('<option />', {value: val, text: data[val]}).appendTo(s);
}
s.appendTo('body');
});
});
</script>
</head>
<body>
<div id="div1"></div>
<button>Get External Content</button>
</body>
</html>

$(document).on("change", "select", function(){
alert($(this).attr("id"));
});
As <select> tag is appended dynamically so, you have to delegate event on it.

$("select").change(function(){
alert(this.id);
});
The problem is that you don't do this inside your $(document).ready(function(){ block.
Move it into there, otherwise you are setting an event handler on DOM elements that do not yet exist.

You have to place that in the doc ready but after appending those to body and yes that is dynamic so delegate the event to closest parent element or document itself which is the parent of all.
<script>
$(document).ready(function(){
$("button").click(function(){
var s = $('<select />');
var data = {
'foo': 'bar',
'foo2': 'baz'
}
for(var val in data) {
$('<option />', {value: val, text: data[val]}).appendTo(s);
}
s.appendTo('body');
});
// you need to place that here.
$(document).on('change', 'select', function(){
alert(this.id);
});
});

Related

How to have multiple functions in jQuery ready?

I can create Jquery functions, but what if you want more functions.
For example say I wanted to have a function for a drop down list AND a button.
I can only seem to do one function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
this.hide();
});
});
</script>
<script type="text/javascript">
$(document).ready(function() {
$("banner").click(function() {
this.fadeTo();
});
});
</script>
Is this right on how to create multiple functions in one document or is there an easier way to create them?
Can you show me how to create multiple ones instead of one?
Both functions can go inside the same document ready function:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function()
$(this).fadeTo();
});
});
</script>
However, the selector $("banner") is invalid, if you're targeting a class of banner it should be $(".banner"), ID would be $("#banner")
You should rather use single document ready event and then wrap the two methods in it.
You would need to use class selector as element have class banner in it.also double quote is missing at the end of this selector
:
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function() {
$(this).fadeTo();
});
});
You can put them in the same $(document).ready function - you don't need a new document ready for each event listener.
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner).click(function() {
$(this).fadeTo();
});
});
</script>
Also your $("banner") selector is invalid - take a look at the jQuery Selectors documentation here: https://api.jquery.com/category/selectors/
you only require one $(document).ready(function () {})
<script type="text/javascript">
$(document).ready(function () {
$("button").click(function () {
$(this).hide();
});
$("banner").click(function () {
$(this).fadeTo();
});
});
</script>
Combine both and change $("banner) to $(".banner"):
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$(".banner").click(function()
$(this).fadeTo();
});
});
concat button & banner click code in $(document).ready:
<script type="text/javascript">
$(document).ready(function() {
$("button").click(function() {
$(this).hide();
});
$("banner").click(function() {
$(this).fadeTo();
});
});
</script>
If you are going to use the code several time it is fairly easy to write a function that hides a certain element. Then you just have to call the function with a parameter(the value of your DOM.
function hideElement(value)
{
$('' + value +' ').click(function() {
$(this).fadeTo();
});
$(document).ready(function() {
hidedElement(banner);
hideElement(button);
});

Get the title of a selectable item in jQuery

I have a list of selectable buttons, whose names are being dynamically generated by reading from a JSON file. Every time a button is clicked, I want the get its title, i.e. row["name"]. Here's my relevant code and the JSON:
<head>
<script>
$.getJSON("json-data.txt",function(data){
var items = [];
$.each(data['data'],function(i, row){
items.push("<li class = 'ui-widget-content'>" + row["name"] + "</li>");
});
$("<ol/>",{
"id" : "selectable",
html : items.join("")
}).appendTo("body");
});
var selectableObj = {
selected: function(event, ui){
}
}
$(function() {
$( "#selectable" ).selectable(selectableObj);
});
</script>
</head>
<body>
</body>
The JSON data:
{
"data": [
{
"name": "ABC",
"visited" : "Yes"
},
{
"name": "DEF",
"visited" : "Yes"
},
{
"name": "GHI",
"locked": "No"
},
],
}
This works, in that I get a list of selectables in the format:
<ol id="selectable">
<li class="ui-widget-content">ABC</li>
<li class="ui-widget-content">DEF</li>
<li class="ui-widget-content">GHI</li>
</ol>
When I click on, say, the first button, I want to get the value "ABC". I don't know how to do this. I read about .text(), but cannot understand to use it. Can anyone help please?
EDIT - Based on some comments, I changed my code like this, but it doesn't work:
<script>
$(function() {
$( "#selectable" ).selectable();
});
$.getJSON("json-data.txt",function(data){
var items = [];
$.each(data['data'],function(i, row){
items.push("<li class = 'ui-widget-content'>" + row["name"] + "</li>");
});
$("<ol/>",{
"id" : "selectable",
html : items.join("")
}).appendTo("body");
});
$('.ui-widget-content').click(function(){
var text = $(this).text(); // this get the text
alert(text); // do whatever you want with it
});
</script>
I think this is what you looking for
selected: function() {
$( ".ui-selected", this ).each(function() {
alert($(this).text());
});
}
});
DEMO
$('#selectable').on('click', 'li', function(evt){
var text = $(this).text();
console.log(text);
});
The explanation is of how this works is that it attaches a click event to the parent of the list item, which is #selectable in the code you provided. Binding an event to the parent element attaches one event to the DOM in total instead of attaching an event for every list item, so it is very efficient. This concept is known as event delegation.
The function that appears inside of on() uses the $(this) selector, which makes sure you are getting the text of the item that has been clicked upon only.
You can do this:
$('.ui-widget-content').click(function(){
var text = $(this).text(); // this get the text
alert(text); // do whatever you want with it
});
DEMO: https://jsfiddle.net/lmgonzalves/pqo1r96p/
EDIT:
Please try this way instead:
$('body').on('click', '.ui-widget-content', function(){
var text = $(this).text(); // this get the text
alert(text); // do whatever you want with it
});
DEMO: https://jsfiddle.net/lmgonzalves/pqo1r96p/1/

Can you use .load() to load html into div's with dynamic id's?

I'm trying to load html into div's that have dynamically created id's by passing the id to the function as a data attribute. Doesn't seem to work though.
<script>
$(document).ready(function(){
$('input:radio').on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
});
});
</script>
Have you tried something like this? Please look at the valid event names for jQuery. 'ifChecked' is not one. http://api.jquery.com/category/events/
$('input[type="radio"]').on('change', function (e) {
if($(this).prop('checked'))
{
var clauseDivID = $(this).data("clause-div-id");
$("#" + clauseDivID).load("inc-files/test.htm #test", function() {
alert("The load was performed.");
});
}
});
Not an answer, just a couple of things to try. Please let us know the results if this doesn't lead you to the solution:
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
alert('received the click');
});
});
</script>
<script>
$(document).ready(function(){
$(document).on('ifChecked', function(event){
var clauseDivID = $(this).data("clause-div-id");
alert('clauseDivID: ' + clauseDivID );
});
});
</script>

How to attach event to the newly added anchor using jquery

I trying to attach a click event for the newly added anchor tag(.he) after the #foo anchor tag. But the click event is not happening. I have used (.on). Can you guys help me in this ?*
<!DOCTYPE html>
<html>
<head>
<title>Attaching event</title>
<style>p { background:yellow; margin:6px 0; }</style>
<script src="js/jquery.js"></script>
</head>
<body>
<p>Hello</p>
how are
<p>you?</p>
<button>Call remove() on paragraphs</button>
<a id="foo" href="#" style="display:block">Testing the bind and unbind</a>
<script>
$("button").on('click',function () {
$("#foo").after("<a class='he' href='#'>asdfasdf</a>");
});
$(".he").on('click', function(){
alert("test");
});
</script>
</body>
You have to delegate to a static parent element like this
$(document).on('click','.he',function(){
//code here
});
Use event delegation
$("body").on("click", ".he", function() {
alert("test");
});
Instead of body you can use any static parent element of .he.
use .live. and don't forget to add your code inner jquery clousure
<script>
$(function(){
$("button").on('click',function () {
$("#foo").after("<a class='he' href='#'>asdfasdf</a>");
});
$(".he").live('click', function(){
alert("test");
});
});
<script>
you will have to put the below code inside $("button").click block.
$(".he").on('click', function(){
alert("test");
});
Link for jsfiddle http://jsfiddle.net/wbWLE/
You can instead bind the click event to the anchor before appending it to the DOM like this:
var $he = $("<a class='he' href='#'>asdfasdf</a>").on('click', function(){
alert("test");
})
$("#foo").after($he);
You can either attach a handler to the anchor directly before it is appended into the document:
$("button").on('click',function () {
$("<a class='he' href='#'>asdfasdf</a>")
.on('click', function(){
alert("test");
})
.insertAfter("#foo");
});
or bind a delegate handler on the document that will catch all clicks on anchors with he as their class:
$(document).on('click', 'a.he', function() {
alert("test");
});
$("button").on('click',function () {
$("<a class='he' href='#'>asdfasdf</a>").insertAfter("#foo");
});

Jquery selected tab

I wanna get selected id from my tabs. I tried anything but but I am very weak in javascript. This my tabs.
<li>Pondelok</li>
<li>Utorok</li>
<li>Streda</li>
<li>Štvrtok</li>
<li>Piatok</li>
<li>Sobota</li>
<li>Nedeľa</li>
This is my attempt, which return undefined.
<script>
var selected_tab = $(".ui-state-active").attr("id");
document.write(selected_tab);
</script>
this will alert id of tab on which you have clicked
$('.days').click(function(){
alert($(this).attr('id'));
});
if you want to write it on document use this
$('.days').click(function(){
document.write($(this).attr('id'));
});
Live Demo
http://jsfiddle.net/zgDYZ/
<script>
var selecId = "";
$('.days').click(function(){
selecId = $(this).attr('id');
});
</script>
Use selecId where ever you want..
Your are trying to to get attribute from class .ui-state-active which doesn't exist as per your markup. So your code wont work:
Try the below and this will work:
$(function() {
$("ul li").each(function() {
var selected_tab = $(this).find("a").attr("id");
alert(selected_tab);
})
});
<script type="text/javascript">
$(document).ready(function () {
$('.days').click(function () {
alert($(this).attr('id'));
});
});
</script>
another best way with validations
$('a.days').click(function(){
alert($(this).attr('id'));
});

Categories

Resources