We Keep Coding

external java script "mtree script" not working when element added by jquery dynamically

Here I attach the images where you can see the list of data which show after page load but in all rows but when i add the row using jquery it is not show the data. please check image 2
image first
image 2
This is the link of mtree demo and this is the codepen link
and below is the code that i use to generate row and display mtree.
$(document).ready(function() {
var ite = <?php echo $projectCount; ?>;
$('.btn-row-add').click(function() {
var leaveDays = checkLeaveDays();
console.log(leaveDays);
var ite2 = 1
style = '';
readOnly = '';
if(jQuery.inArray(ite2, leaveDays) !== -1){
style = "style = 'background:#00FF00;'";
readOnly = "readonly='readonly'";
}
var el2 = '<td><input '+style+' '+readOnly+' id="text_'+ite2+'" class="short-textbox" type="text" name="day_'+ite+'[]" value="" onkeyup="sumNewRows(), colsValues(), colsVertical()"></td>';
for(var i=2; i<<?php echo $noOfDays+1; ?>; i++) {
styleInner = '';
readOnlyInner = '';
if(jQuery.inArray(i, leaveDays) !== -1){
styleInner = "style = 'background:#00FF00;'";
readOnlyInner = "readonly='readonly'";
}
el2 = el2 + '<td><input '+styleInner+' '+readOnlyInner+' id="text_'+i+'" class="short-textbox" type="text" name="day_'+ite+'[]" value="" onkeyup="sumNewRows(), colsValues(), colsVertical()"></td>';
}
console.log($('whc-table tbody').html());
var el = '<tr id="data_'+ite+'">\n' +
'<th scope="row">\n' +
'<select class="dropdownlist" data-text-field="name" name="project_name[]" style="width: 300px;">\n' +
'<option value=""></option>\n' +
'</select>\n' +
'\n' +
'</th>\n' +
'<td id="mm-transit">\n' +
'\n' +
'<div class="fake-input">\n' +
'<input value="" name="task_no[]" class="task_list" id="task_list_" type="text" title="Show category list here leter"><img class="show_task" id="show_task" src="<?=base_url()?>images/down.png">\n' +
'\t<div id="cat-list-" class="cat-list"><?php echo $categories_list ?></div>\n' +
'</div>\n' +
'</td>\n' +
el2 +
'\n' +
'<td style="text-align: center;">\n' +
'<input style="width: 35px;" id="text_total_'+ite+'" readonly=\'readonly\' class="short-textbox" type="text" name="total_'+ite+'" value="">\n' +
'</td>\n' +
'</tr>';
ite++;
$(el).appendTo($('#whc-table tbody'));
projectDropdown();
taskDropdown();
initializeMtree();
});
});
Note - same way i used to show mtree in normal rows means rows those are not generated by javascript that is

Try using
$('.btn-row-add').on('click', function() {
instead of
$('.btn-row-add').click(function() {

get checkbox attribute using javascript (array)

Hello guys i want to get the attribute of my checkbox. The checkbox was an array so i want to get the attribute of the checked checkboxes and put it on the textbox anf separate it with comma.
Here's my php/html
$query = $db->select('owners_information',array('*'),$con);
foreach($query as $q){
//echo $q['lastname'];
$output .= '
<tr>
<td>'.$q["firstname"].'</td>
<td>'.$q["middlename"].'</td>
<td>'.$q["lastname"].'</td>
<td>'.$q["land_area"].'</td>
<td><input type="text" value="'.$q["OCPC_ID"].'" name="ocid[]">
<input type="checkbox" value="'.$q["land_area"].'" name="checkval[]" attr="'.$q["OCPC_ID"].'"></td>
</tr>
';
}
if($query > 0){
echo '<input type="text" name="textval" id="textval">';
echo '<br><input type="text" name="ocpc_id" id="ocpc_id">';
echo '<input type="button" name="merge" id="merge" value="Merge" onclick="mergeFunc()">';
echo '<input type="button" name="addNew" id="addNew" value="Add New RPU" onclick="addMerge()" style="display:none;">';
echo $output;
}else{
echo "No data found";
}
And here's my javascript
function mergeFunc() {
var checkboxes = document.getElementsByName('checkval[]');
var cd = document.getElementsByName("checkval[]");
var val_id = "";
for (var l=0, n=cd.length;l<n;l++)
{
if (cd[l].checked)
{
val_id += ","+cd[l].attr;
}
}
if (val_id) val_id = val_id.substring(1);
alert(val_id);
var vals = "";
for (var i=0, n=checkboxes.length;i<n;i++)
{
if (checkboxes[i].checked)
{
vals += ","+checkboxes[i].value;
}
}
if (vals) vals = vals.substring(1);
$('#ocpc_id').val(val_id);
$('#textval').val(vals);
$('#merge').hide();
$('#addNew').show();
}
i want to get the attribute of the checkbox named checkval[]. I want to get what's inside the attr array. I hope you could help me guys.

Try this
document.getElementById('btn').addEventListener('click',function(){
var checkboxes = document.getElementsByName('checkval[]');
var input = document.getElementsByName('ocid[]');
var checkval = '';
var checkid = '';
for(var i=0;i<checkboxes.length;i++) {
if(checkboxes[i].checked){
i==0 ? checkval += checkboxes[i].value : checkval += ","+checkboxes[i].value;
i==0 ? checkid += input[i].value : checkid += ","+input[i].value;
}
}
console.log(checkval+" "+checkid);
});
See the demo

var val_id = "";
for (var l=0, n=cd.length;l<n;l++)
{
if (cd[l].checked)
{
val_id += ","+cd[l].getAttribute("attr");
}
}
if (val_id) val_id = val_id.substring(1);
I've change val_id += ","+cd[l].attr; to val_id += ","+cd[l].getAttribute("attr");
Thanks for your time guys.

javascript- How to display html content in a textbox

I want to display HTML content in a text box, but I am stuck.
Here is my code, which is working fine when I displayed the text into label. But its not working for text box.
HTML code:
<div id="showDiv"></div>
JavaScript code:
function myfun(){
var item="<span class="kwcat">results in <b>(.*?)</b></span>";
var div2 = document.createElement('div');
div2.setAttribute("id", "myid");
div2.setAttribute("class","inner");
value2= replaceAll(item, '<','<');
value2=replaceAll(value2, '>','>');
var comp= '<div>';
comp += '<label >';
comp += "Heading: ";
comp += '</label>';
/* comp += '<input type="text" value=' + value2 + '>'; */
comp += '<label>';
comp += value2;
comp +='</label>';
comp += '</div>';
div2.innerHTML = comp;
showDiv.appendChild(div2);
}
function replaceAll(str, find, replace) {
return str.replace(new RegExp(find, 'g'), replace);
}
The line which I have commented, is what I want to work. Where am I going wrong?

you should wrap the value in quotes
comp += '<input type="text" value="' + value2 + '">';

Wrap the input value in quotes as well
function myfun(){
var item="<span class=\"kwcat\">results in <b>(.*?)</b></span>";
var div2 = document.createElement('div');
div2.setAttribute("id", "myid");
div2.setAttribute("class","inner");
value2= replaceAll(item, '<','<');
value2=replaceAll(value2, '>','>');
var comp= '<div>'+
'<label>Heading:</label>'+
'<textarea>'+ value2 + '</textarea>'+
'<label>'+value2+'</label>'+
'</div>';
div2.innerHTML = comp;
showDiv.appendChild(div2);
}
your function should look like the above

Encode double quotes, By replacing " with "
value2=replaceAll(value2, '"','"');
Surround the value of attribute of input data type with double quotes
comp += <input type="text" value="' + value2 + '">';
Now you have your input field value as the same value of item variable

how to get value when radiobutton is clicked from list in angularjs

I am newbie to angularjs,I have made a demo in that a list of radiobuttons are there.they are having values related to them,(data is coming from webservice in form of json) now i want to get value related to particular checkbox from list when it is clicked,i got a demo also but still have no luck,can anybuddy please help me?
js
app.controller('filterController', function ($http, $scope, $compile, $filter, $sce)
{
var page = gallery.getCurrentPage();
var Catid = page.options.params;
var Content ='';
var areacontent = '';
var cusinecontent = '';
var catcontent = '';
//headers..
var hdrcuine = '<ons-list-header>'+
'<ons-row>'+
'<ons-col>Cuisine'+'</ons-col>'+
'<ons-col width="35px" style="flex: 0 0 35px; max-width: 35px;">'+
'<ons-icon icon="ion-android-add-circle" fixed-width="true">'+'</ons-icon>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-header>';
var hdrarea = '<ons-list-header>'+
'<ons-row>'+
'<ons-col>Area'+'</ons-col>'+
'<ons-col width="35px" style="flex: 0 0 35px; max-width: 35px;">'+
'<ons-icon icon="ion-android-add-circle" fixed-width="true">'+'</ons-icon>'+
'</ons-col>'+
'</ons-row>'+
'</ons-list-header>';
var hdrcat = '<ons-list-header>Categories'+
'</ons-list-header>';
$scope.areaval = '';
// $scope.list = {
// name: '1',
// intglcode:'0'
// };
//
// $scope.rate={
// rate:'1',
// intglcode:'0'
//
// };
//
// $scope.area={
// area:'Camana bay',
// intglcode:'0'
// };
//
// $scope.cusine={
// cusine:'Pizza',
// intglcode:'0'
// };
// $scope.cat={
// cat:'Restaurant',
// intglcode:'0'
// };
//
$http({
method: 'POST',
url: API_HOST+'/webservice/Get_FilterDetails',
headers: {
'Content-Type': 'application/x-www-form-urlencoded',
'caymanauth': caymanauth
},
data: '&Catid='+Catid
}).success(function (data)
{
for(var i=0; i < data.Details.length; i++){
//PARSING DATA FOR RATYE TYPES.
if(data.Details[i] === "Rate Type"){
for(var d=0;d<5;d++)
{
$scope.list.intglcode = data.Details[i+1][d]['intGlCode'];
console.log("===========my rate types==========="+data.Details[i+1][d]['intGlCode']);
}
gRate = data.Details[i+1][d]['intGlCode'];
}
//PARSING DATA FOR LISTING TYPES.
if(data.Details[i] === "Listing Type"){
for(var d=0;d<5;d++){
console.log("===========my Listing types==========="+data.Details[i+1][d]['intGlCode']);
}
}
//PARING FOR AREA
if(data.Details[i] === "Area"){
for(var d=0;d<17;d++){
if(areacontent === ''){
var val =data.Details[i+1][d]['intGlCode'];
areacontent = '<ons-list-item modifier="tappable">'+
'<label class="checkbox checkbox--list-item">'+
'<input type="radio" ng-model="areaval" name="area" value={{val}}>'+
'<div class="checkbox__checkmark checkbox--list-item__checkmark">'+'</div>'+data.Details[i+1][d]['varCityName']+
'</label>'+
'</ons-list-item>';
}else{
areacontent += '<ons-list-item modifier="tappable">'+
'<label class="checkbox checkbox--list-item">'+
'<input type="radio" ng-model="areaval" name="area" value={{val}}>'+
'<div class="checkbox__checkmark checkbox--list-item__checkmark">'+'</div>'+data.Details[i+1][d]['varCityName']+
'</label>'+
'</ons-list-item>';
}
console.log("===========my Area types==========="+data.Details[i+1][d]['intGlCode']);
}
}
//PARSING DATA FRO CUSINE
if(data.Details[i] === "Cuisine"){
for(var d=0;d<7;d++){
if(cusinecontent === ''){
cusinecontent = '<ons-list-item modifier="tappable">'+
'<label class="checkbox checkbox--list-item">'+
'<input type="radio" ng-model="cusine.name" name="cusine" value="Asian">'+
'<div class="checkbox__checkmark checkbox--list-item__checkmark">'+'</div>'+data.Details[i+1][d]['varName']+
'</label>'+
'</ons-list-item> ';
}else{
cusinecontent += '<ons-list-item modifier="tappable">'+
'<label class="checkbox checkbox--list-item">'+
'<input type="radio" ng-model="cusine.name" name="cusine" value="Asian">'+
'<div class="checkbox__checkmark checkbox--list-item__checkmark">'+'</div>'+data.Details[i+1][d]['varName']+
'</label>'+
'</ons-list-item> ';
}
console.log("===========my cusine types==========="+data.Details[i+1][d]['intGlCode']);
}
}
//PARSING DATA FOR CATEGORIES
if(data.Details[i] === "Categories"){
for(var d=0;d<14;d++){
if(catcontent === ''){
catcontent = '<ons-list-item modifier="tappable">'+
'<label class="checkbox checkbox--list-item">'+
+" "+'<input type="radio" ng-model="cat.name" name="cat" >'+
'<div class="checkbox__checkmark checkbox--list-item__checkmark">'+'</div>'+data.Details[i+1][d]['varName']+
'</label>'+
'</ons-list-item>';
}else{
catcontent += '<ons-list-item modifier="tappable">'+
'<label class="checkbox checkbox--list-item">'+
'<input type="radio" ng-model="cat.name" name="cat" >'+
'<div class="checkbox__checkmark checkbox--list-item__checkmark">'+'</div>'+data.Details[i+1][d]['varName']+
'</label>'+
'</ons-list-item>';
}
console.log("===========my category types==========="+data.Details[i+1][d]['intGlCode']);
}
}
//return data.Details[i + 1];
}
Content = hdrarea+areacontent+hdrcuine+cusinecontent+hdrcat+ catcontent;
$scope.snippet = Content;
$scope.deliberatelyTrustDangerousSnippet = function ()
{
return $sce.trustAsHtml($scope.snippet);
};
}).error(function () {
alert("error");
});
$scope.submitForm = function () {
alert($scope.areaval);
};

I got my solution using $watch directive inside the controller,it will return the changed value of $scope variable.Thanks 4 suport

Counting number of field and limiting to 10

I have some code which uses this to allow to keep the same function code but apply it to different form elements which can be seen on a jsFiddle demo
//latest
var maxFields = 10,
currentFields = 1;
$('.form').on('click', '.add', function () {
var value_src = $(this).prev();
var container = $(this).parent().prev();
if ($.trim(value_src.val()) != '') {
if (currentFields < maxFields) {
var value = value_src.val();
var html = '<div class="line">' +
'<input id="accepted" type="text" value="' + value + '" />' +
'<input type="button" value="X" class="remove" />' +
'</div>';
$(html).appendTo(container);
value_src.val('');
currentFields++;
} else {
alert("You tried to add a field when there are already " + maxFields);
}
} else {
alert("You didn't enter anything");
}
})
.on('click', '.remove', function () {
$(this).parents('.line').remove();
currentFields--;
});
My issue is that I still want to be able to limit each section to only have 10 <inputs>, but at the moment each section shares the counter, so 5 in requirements and 5 in qualifications would trigger the 10 limit.
Is there a nice clean way of keeping the input field counter separate for each section?

What you need to do is store the current number of children for each list in a context sensitive way. There are a couple ways you could structure this (it would be easy using MVC libraries or the likes), but the simplest solution for your code will be to just use the DOM. So instead of using your global currentFields variable, instead use container.children().length to get the number of notes in the list you are currently operating on.
http://jsfiddle.net/9sX6X/70/
//latest
var maxFields = 10;
$('.form').on('click', '.add', function () {
var value_src = $(this).prev();
var container = $(this).parent().prev();
if ($.trim(value_src.val()) != '') {
if (container.children().length < maxFields) {
var value = value_src.val();
var html = '<div class="line">' +
'<input id="accepted" type="text" value="' + value + '" />' +
'<input type="button" value="X" class="remove" />' +
'</div>';
$(html).appendTo(container);
value_src.val('');
} else {
alert("You tried to add a field when there are already " + maxFields);
}
} else {
alert("You didn't enter anything");
}
})
.on('click', '.remove', function () {
$(this).parents('.line').remove();
});

You can add a class to each row like form-row
var html = '<div class="line form-row">' +
'<input id="accepted" type="text" value="' + value + '" />' +
'<input type="button" value="X" class="remove" />' +
'</div>';
and count the length by using
console.log($(container).find('.form-row').length);
// Use +1 because initially it is 0
Fiddle http://jsfiddle.net/9sX6X/69/

You can make use of the placeholder property to identify which button triggered the function.
value_src.attr('placeholder');
This string can then be used to access three different counters in an associative array.
Code
var maxFields = 10;
var currentFields = new Object;
$('.form').on('click', '.add', function () {
var value_src = $(this).prev();
var container = $(this).parent().prev();
if ($.trim(value_src.val()) != '') {
var identity = value_src.attr('placeholder');
if(currentFields[identity] == undefined)
currentFields[identity] = 0;
if (currentFields[identity] < maxFields) {
var value = value_src.val();
var html = '<div class="line">' +
'<input id="accepted" type="text" value="' + value + '" />' +
'<input type="button" value="X" class="remove" />' +
'</div>';
$(html).appendTo(container);
value_src.val('');
currentFields[identity]++;
} else {
alert("You tried to add a field when there are already " + maxFields);
}
} else {
alert("You didn't enter anything");
}
})
.on('click', '.remove', function () {
$(this).parents('.line').remove();
currentFields--;
});
JSFiddle: http://jsfiddle.net/9sX6X/73/