How to handle click events inside bootstrap button dropdown - javascript

The change events inside the bootstrap button dropdown is not functioning. What could be the reason? How to fix this?
Below is my fiddle. I wanted to fire a checkbox changed event but surprisingly the below code doesn't fire.
http://jsfiddle.net/20hLtzvr/18/
$('#chk0').click(function()
{
alert('hello world');
});

You forgot the " when you set the id
Replace
$('#citycountylist ul').append('<li><input type="checkbox" class="chk" id=' + 'chk' + index + ' />' + ' ' + json.NewYork[index].name + ' </li>');
By
$('#citycountylist ul').append('<li><input type="checkbox" class="chk" id="' + 'chk' + index + '" />' + ' ' + json.NewYork[index].name + ' </li>');

Related

Retrieving ID from Javascript - Laravel

In my javascript code, i am able to output the id of a the selected item. I want to pass the id to my controller. I appended the input(created in the JS code) to my html form so as to get the id of the selected item but it wouldn't do the trick.
*HTML**
<form>
// inputs for form in here
</form>
JS
$(".myItem").append(
'<p name="item_id" id="item_id">Item ID: ' + item.id + '</p>').appendTo('form');
Controller
$getID = Input::get('item_id');
$fetchItem = Item::all()->where('id',$getID)->first();
Try to append an input element instead of a p:
$(".myItem").append(
'<input name="item_id" id="item_id" value=' + item.id + ' />).appendTo('form');
You can even have both; 1 to store the value (input) and the other to show it on screen (p).
$(".myItem").append('
<input type="hidden" name="item_id" id="item_id" value=' + item.id + ' />
<p>Item ID: ' + item.id + '</p>').appendTo('form');

dynamically added element is not wired on jquery event

on dom ready I have wired event
$('.someClass').on('input', function (e) {
// do something
});
on same I'm injecting html elements with where I add .someClass to include that field for same event
var cssClass = "form-control";
if (myProperty == true) {
cssClass = "form-control someClass";
}
('#myTable tr:last').after(
'<tr>'+
'<td><input class=' + cssClass + ' type="text"'</td></tr>'+
'</tr>'
);
but I'm getting rendered inside firebug as
<input class="form-control someClass" type="text"</td someClass="">
and this field is not fetched on .someClass event
the solution is to write:
$('body').on('input','.someClass', function (e) {
// do something
});
and fix your code:
$('#myTable tr:last').after(
'<tr>'+
'<td><input class=' + cssClass + ' type="text"/></td></tr>'
);
Mmm... aren't you missing the quotation mark (") in the input's class?
Furthermore, you are not correctly appending the td and tr closing tags. Try something like this:
$('#myTable tr:last').after(
'<tr>' +
'<td><input class="' + cssClass + '" type="text" /></td>' +
'</tr>'
);

Accessing Textbox Value Using Inserted JavaScript

I'm Having a bit of an issue. I'm using JavaScript to inset HTML into a webpage along with an event handler for the onblur event. It looks like this:
return '<input id = "txtIn" type="text" value=" ' + dateTime + '" onblur= "submitManualDate(document.getElementById("txIn").value(), 2, 3);" />';
I'm getting a syntax error. However, the following works perfectly fine:
return '<input id = "txtIn" type="text" value=" ' + dateTime + '" onblur= "submitManualDate(1, 2, 3);" />';
Any idea what I'm missing?
Using " inside "(double quoted) expression will break the string.
It's better to pass this as an argument as you should not have multiple elements with same id attributes in a document.
Try this example:
(function() {
var input = '<input type="text" value="5" onblur= "submitManualDate(this, 2, 3);" />';
document.getElementById('parent').innerHTML = input;
})();
function submitManualDate(elem, j, k) {
alert(elem.value + ' ' + j + ' ' + k);
}
<div id='parent'></div>
Fiddle here

get text value from selected radiobutton with jquery

I'm trying to get the value of a selected radio button with jQuery. I generate my html-elements with jquery from a json-template, this is my code for generating radio buttons:
function AddRadio(labelName, buttons, i, paneIndex, dataID) {
$('#Ctabs1-pane' + paneIndex + '').append('<div class="form-group"><label class="col-lg-2 control-label">' + labelName + '</label><div class="col-lg-10" id="' + dataID + '"></div></div>');
$.each(buttons, function (j, value) {
$('#' + dataID).append('<div class="radio"><label><input type="radio" name="optionsRadios" value="' + value + '">' + value + '</label></div>');
});
}
i try to get the selected radiobutton with this code:
return $("input[type='radio'].radioBtnClass:checked").val();
But this gives me undefined
What am i doing wrong?
Your selector match input element with class radioBtnClass but you're not added it when append. Either add that class into your input:
$('#' + dataID).append('<div class="radio"><label><input type="radio" class="radioBtnClass" name="optionsRadios" value="' + value + '">' + value + '</label></div>');
or target it by name instead:
$("input[type='radio'][name='optionsRadios']:checked").val();

Script is working with jquery 1.3.2 but not with jquery 1.7.2

I am trying to add extra input fields but this code works with jquery 1.3 once i try with jquery 1.7. It doesn't work
var newTr = $(document.createElement('tr'))
.attr("id", 'line' + counter);
newTr.after().html('<td><input type="text" name="name' + counter +
'" id="name' + counter + '" value="" style="width:100px;"></td><td><input type="text" name="phone' + counter +
'" id="phone' + counter + '" value="" style="width:100px;"></td>');
newTr.appendTo("#dyTable");
I guess there is problem with newTr.after().html() and newTr.appendTo("#dyTable"); Please help me
document.createElement('tr') is not needed and you can simply use $('<tr></tr>') to create new element. This should work,
var newTr = $('<tr></tr>').attr("id", 'line' + counter);
For adding <td> content, change, newTr.after().html('...') to newTr.html('...'). I don't think after is required.

Categories