Access from change event to other input html jquery autocreate - javascript

My problem is:
I have a page with a table is auto generated with ajax-jquery
My table is 3 <td> 1: name 2-3: checkbox for parameters
I set event on all input:checkbox ("change") event.
The problem appears when i try to get check state of checkbox different than i click.
code:
$(document).ready(function() {
$("#permessiAttributiDiv").on("change", "input:checkbox", function() {
var IDPermesso = $(this).attr("id").substring(1);
var selezionatoSpuntato = (this.checked);
var altro = $(this).parent().find("input:checkbox").checked;
var scheda = $("#selectTipo").val();
});
)};
I also try to get check state by id but i always doesn't work......
I see if the checkbox is write in html static code all works ok but if i generate it with jquery i can't access to input with any selector.....
Can anyone help me?
Thanks

You must be getting error in console. See How to open the JavaScript console in different browsers?
The problem line which I see is
var altro = $(this).parent().find("input:checkbox").checked;
As $(this).parent().find("input:checkbox") will return you jQuery object and they don't have checked property.
You can use .not(this) to exclude the current element from the collection.
var altro = $(this).parent().find("input:checkbox").not(this).prop('checked');
OR
var altro = $(this).parent().find("input:checkbox").not(this).is(':checked');

Related

operations with javascript in html document

I want the label with id="risultato" display the area of triangle,I tried to make this,but when I pressed button "risultato:" the risult is NaN,why?
Thanks lots
code: http://i.stack.imgur.com/52Pbd.png
You are getting NaN because of this:
var altezza = document.getElementById('altezza');
var base = document.getElementById('base');
(base*altezza/2)
getElementById() does exactly that - gets the element. You just need to get the value from the element e.g. var altezza = document.getElementById('altezza').value;

get the html of element itself using jquery .html()

How to get the html of element itself using Jquery html. In the below code I would like get the input element inside div using JQuery as shwon below
<div id="content">content div</div>
<input type='text' id="scheduledDate" class="datetime" />
$(function() {
console.log($('#scheduledDate').html('dsadasdasd'));
$('#content').html($('#scheduledDate').html());
});
EDIT:
Can I get the $("#scheduledDate") as string which represent the real html code of the input box, because my final requirement is I want to pass it to some other SubView( I am using backboneJS) and eventually use that html code in a dust file.
My original requirement was to get that input field as string so that I can pass it to some other function. I know, if I keep it inside a DIV or some other container, I can get the html by using .html method of JQuery. I dont want use some other for that purpose. I am just trying to get html content of the input box itself using it's id.
If you want to move the input element into div, try this:
$('#content').append($('#scheduledDate'));
If you want to copy the input element into div, try this:
$('#content').append($('#scheduledDate').clone());
Note: after move or copy element, the event listener may need be registered again.
$(function() {
var content = $('#content');
var scheduledDate = $('#scheduledDate');
content.empty();
content.append(scheduledDate.clone());
});
As the original author has stated that they explicitly want the html of the input:
$(function() {
var scheduledDate = $('#scheduledDate').clone();
var temporaryElement = $('<div></div>');
var scheduleDateAsString = temporaryElement.append(scheduledDate).html();
// do what you want with the html such as log it
console.log(scheduleDateAsString);
// or store it back into #content
$('#content').empty().append(scheduleDateAsString);
});
Is how I would implement this. See below for a working example:
https://jsfiddle.net/wzy168xy/2/
A plain or pure JavaScript method, can do better...
scheduledDate.outerHTML //HTML5
or calling by
document.getElementById("scheduledDate").outerHTML //HTML4.01 -FF.
should do/return the same, e.g.:
>> '<input id="scheduledDate" type="text" value="" calss="datetime">'
if this, is what you are asking for
fiddle
p.s.: what do you mean by "calss" ? :-)
This can be done the following ways:
1.Input box moved to the div and the div content remains along with the added input
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").append($inputBox);
});
2.The div is replaced with the copy of the input box(as nnn pointed out)
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
var $clonedInputBox = $("#scheduledDate").clone();
$("#content").html($clonedInputBox);
});
Div is replaced by the original input box
$(document).ready(function() {
var $inputBox = $("#scheduledDate");
$("#content").html($inputBox);
});
https://jsfiddle.net/atg5m6ym/4485/
EDIT 1:
to get the input html as string inside the div itself use this
$("#scheduledDate").prop('outerHTML')
This will give the input objects html as string
Check this js fiddle and tell if this is what you need
https://jsfiddle.net/atg5m6ym/4496/

Catch all radiobuttons inside a div using jQuery

Someone knows how can I get all the radiobuttons inside a div? The div has a id as follows
<div id="quest{{ $groups }}" class="quest">
I'm using Laravel, therefore my idea is to get the values inside a div, and put in jQuery something like
var radios = $("input[type='radio'][id^='quest'"+groups+"]");
But this doesn´t work, so I want to know how to get all the radiobuttons inside a div an do a loop inside using .each I think.
I need to duplicate one group of questions and then be able to do a validation, but only works for the first group, the second group is not validated and I´ve checked the id value for each radiobutton and change to previousid_2, and the questionnaire is cloned. Also I want to know how can I reset the values when I clone the questionnaire, because if you have select YES NO YES NO, in the second group when you clone it, those results are selected and the disabled fields too.
You're actually asking for several things. Your code implies you have access to the current group in a variable called groups. so...
1) select all radio inputs within a div:
var div = $("div#quest"+groups);
var radiosBtns = div.find("input[type='radio']");
2) Loop over them, and do some work on each element:
var doSomeWork = function(i,radiobtn){
console.log('the value of radio button #' + i ' is ' + radiobtn.value);
};
$.each(radioBtns,doSomeWork);
3) Duplicate a group of radio buttons:
var fromgroup = $("div#quest"+groups);
var togroup = fromgroup.clone();
var insertionPoint = $('body');
var toGroupId = 'questXXX';
// set the ID so it can be targetted
togroup.prop('id',toGroupId);
// reset radio button values
togroup.find('input[type="radio"]').each(function(){
this.prop('checked',false);
});
togroup.appendTo(insertionPoint);
4) Run validation on a specific group
var validateGroup = function(elements){
// your validation logic goes here
var isValid = false;
$.each(function(){
console.log( this.name, this.value );
});
return isValid;
};
// run the validation on the newly inserted group
var targetElements = $("#"+toGroupId).find("input[type='radio']");
var groupIsValid = validateGroup( targetElements );
You can get all radio buttons and iterate on them like following
$("input[type='radio'][id^='quest']").each(function(){
// add your logic here
});
it's very simple using Id's
To get all the elements starting with "quest" you should use:
$("[id^=quest]")
To get those that end with "jander"
$("[id$=quest]")
and the complete answer is
var radios = $("input[type='radio'][id^='quest']");
the point is what if you want to wildcard class :( :(
$("[class^=quest]")
on a dom like
<pre>
<a class="btn quest primary">link</a>
<pre>
it won't work , thus you will need a more complex wildcard that you have to till me when you find it :D
the fact is you will not need it , whenever you need to get a list of element using classes just use a common class :D
hope i helped u well

jQuery Datatable get the page number of element

We have used jQuery Datatables plugin to save update records in multiple rows.
Also validation is built for all the columns, once validation is failed.
We have the following line of code to focus on element for which validation is failed.
$(this).focus();
However this will not work if validation fails on some other page( $(this) is not on current).
As a workaround to this we thought we will click on the page number hyperlink
$(#identifier).trigger('click');
The problem is
"How to know if an element with id A ( $(#A)) is in which page of jQuery Table ?"
Once we know that problem will be solved.
Here, I've written a js function to move you to the page with a given row (row with class "selectedItem" in this case). It should be possible to rewrite the code to find any elements, not just rows, in case you need to.
function moveToPageWithSelectedItem() {
var numberOfRows = itemsTable.data().length;
var rowsOnOnePage = itemsTable.page.len();
if (rowsOnOnePage < numberOfRows) {
var selectedNode = itemsTable.row(".selectedItem").node();
var nodePosition = itemsTable.rows({order: 'current'}).nodes().indexOf(selectedNode);
var pageNumber = Math.floor(nodePosition / rowsOnOnePage);
itemsTable.page(pageNumber).draw(false); //move to page with the element
}
}

How to listen for double-click on jstree?

How would I write a listener for a double-click event on a jstree object? (For example, I'd like to double-click on a tree node and paste its anchor's href value into an input field in a form somewhere.)
I have used something like this way back a year ago, i don't know if there's any change in the current jstree version :
jstree.bind("dblclick.jstree", function (event) {
var node = $(event.target).closest("li");
var data = node.data("jstree");
// Do some action
});
node : Contains the li that is being clicked.
data : Contains the metadata.
Nirmal's solution works if you click anywhere on the jstree div. I wanted to enable double click only on the nodes themselves and not, for example, on the whitespace to the right. changing the solution a little enabled this:
$('#jstree-div a').live('dblclick',function (e) {
var node = $(e.target).closest("li");
var type = node.attr('rel');
var item = node[0].id;
// do stuff...
});
Not sure why the 'rel' and the 'id' attributes are in different places in the resulting node, but it works ;)

Categories

Resources