Cant execute script function myFunction from another function - javascript

function editBaancode() {
var baan1 = "<div class='dropdown'>";
var baan2 = "<button onclick=myFunction() class='dropbtn'>Dropdown</button>";
var baan4 = "<div id='myDropdown' class='dropdown-content'>";
var baan5 = "<div id='myDropdown' class='dropdown-content'><input type='text' placeholder='Search..' id='myInput' onkeyup=filterFunction()";
var baan7 = "><a>About</a>";
var baan8 = "<a>Base</a>";
var baan9 = "<a>Blog</a>";
var baan10 = "<a href=#>CREATE</a>";
var baan11 = "</div>";
var baan12 = "</div>";
var res = baan1.concat(baan1, baan2, baan4, baan5, baan7, baan8, baan9, baan10, baan11, baan12);
document.getElementById('mylocation').innerHTML = res;
}

see working link here -> are you doing in the same way which is herein
jsbin
function editBaancode(){var n="<div class='dropdown'>",o=n.concat(n,"<button onclick=myFunction() class='dropbtn'>Dropdown</button>","<div id='myDropdown' class='dropdown-content'>","<div id='myDropdown' class='dropdown-content'><input type='text' placeholder='Search..' id='myInput' onkeyup=filterFunction()","><a>About</a>","<a>Base</a>","<a>Blog</a>","<a href=#>CREATE</a>","</div>","</div>");document.getElementById("mylocation").innerHTML=o}function myFunction(){alert("executing on button click")}window.onload=function(){editBaancode()};

Related

Autocomplete not working for dynamically created content

I am having a bit of trouble trying to add a autocomplete field to my dynamically created content. Previously it worked fine as the textbox was generated in HTML, but I cannot figure how to make it work with dynamically generated content (even trough I am using static textbox id for test purposes)
Autocomplete:
jQuery(document).ready(function($){
var products= JSON.parse( '<?php echo json_encode($products_list) ?>' );
var t = 0;
var r = '<?php echo json_encode($number_of_rows_tuote) ?>';
var availableProducts = [];
var cellPlace = [];
while(t < r){
availableProducts.push(products[t]['prsku']+":"+products[t]['prname']);
cellPlace.push(t);
t++;
}
$( "#product2" ).autocomplete({
source: availableProducts
});
});
Dynamic create content
function addElement()
{
var contentID = document.getElementById('more');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML ="<br><div class='product'><TABLE><tr>";
newTBDiv.innerHTML += "<td><input type='text' placeholder = 'product_code' name='sku_" + intTextBox + "' id='sku_" + intTextBox + "'/></td><td><input type='text' id='product2' name='product2'></td>;
contentID.appendChild(newTBDiv);
}
<body onload="addElement();">
Try to call your autocomplete function after the addElement function .
OR
simply add
$( "#product2" ).autocomplete({
source: availableProducts
});
these lines at the last of your addElement function like this
function addElement()
{
var contentID = document.getElementById('more');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML ="<br><div class='product'><TABLE><tr>";
newTBDiv.innerHTML += "<td><input type='text' placeholder = 'product_code' name='sku_" + intTextBox + "' id='sku_" + intTextBox + "'/></td><td><input type='text' id='product2' name='product2'></td>;
contentID.appendChild(newTBDiv);
$( "#product2" ).autocomplete({
source: availableProducts
});
}
Call function to bind autocomplete as shown below and remove onload from body.
<body>
NOTE - you have missed " at the end of dynamic element string i.e. after </td>, please correct it.
jQuery(document).ready(function($){
var products= JSON.parse( '<?php echo json_encode($products_list) ?>' );
var t = 0;
var r = '<?php echo json_encode($number_of_rows_tuote) ?>';
var availableProducts = [];
var cellPlace = [];
while(t < r){
availableProducts.push(products[t]['prsku']+":"+products[t]['prname']);
cellPlace.push(t);
t++;
}
$('body').load(function(){
var contentID = document.getElementById('more');
var newTBDiv = document.createElement('div');
newTBDiv.setAttribute('id','strText'+intTextBox);
newTBDiv.innerHTML ="<br><div class='product'><TABLE><tr>";
newTBDiv.innerHTML += "<td><input type='text' placeholder = 'product_code' name='sku_" + intTextBox + "' id='sku_" + intTextBox + "'/></td><td><input type='text' id='Product2' name='product2'></td>";
contentID.appendChild(newTBDiv);
//bind autocomplete
$( "#Product2").autocomplete({
source: availableProducts
});
});
});

Increment textarea name to javascript function

So what I am trying to achieve is to increment the points".$id." in the javascript code below starting from 0 like points+n and it would be a dynamic value according to rows in a table. Same for the value 'button".$id."' and all this is because of styled radiobutton labels that are looped etc.
So all I want to do is get rid of all the hardcoded different var txt1 to txt+n, button0 to button+n and points0 to points+n in the JavaScript function.
The real problem here for me is the line: var buttons1 = document.forms[0].button0; how to replace the 0 in button0 to the 'i' in a for loop. Someting like button + i won't work.
Oh and what I'm trying to do is get the values from the radiobuttons to a textarea with one buttongroup and textarea per tablerow.
The code below works for the first 7 rows in my table...
echo "
<td>
<div class='radio'>
<input id='".$temp1."' type='radio' name='button".$id."' onclick='myFunction()' value='4'>
<label for='".$temp1."'></label>
<input id='".$temp2."' type='radio' name='button".$id."' onclick='myFunction()' value='3'>
<label for='".$temp2."'></label>
<input id='".$temp3."' type='radio' name='button".$id."' onclick='myFunction()' value='2'>
<label for='".$temp3."'></label>
<input id='".$temp4."' type='radio' name='button".$id."' onclick='myFunction()' value='1'>
<label for='".$temp4."'></label>
</div>";
echo"<textarea id='points".$id."' name='points".$id."' cols='1' rows='1' ;> </textarea>
</td>
</tr>";
The Javascript function:
function myFunction() {
var txt1 ='';
var txt2 ='';
var txt3 ='';
var txt4 ='';
var txt5 ='';
var txt6 ='';
var txt7 ='';
var buttons1 = document.forms[0].button0;
var buttons2 = document.forms[0].button1;
var buttons3 = document.forms[0].button2;
var buttons4 = document.forms[0].button3;
var buttons5 = document.forms[0].button4;
var buttons6 = document.forms[0].button5;
var buttons7 = document.forms[0].button6;
var buttons8 = document.forms[0].button7;
for (var i = 0; i < 4; i++) {
if (buttons1[i].checked) {
txt1 = txt1 + buttons1[i].value + " ";
}
if (buttons2[i].checked) {
txt2 = txt2 + buttons2[i].value + " ";
}
if (buttons3[i].checked) {
txt3 = txt3 + buttons3[i].value + " ";
}
if (buttons4[i].checked) {
txt4 = txt4 + buttons4[i].value + " ";
}
if (buttons5[i].checked) {
txt5 = txt5 + buttons5[i].value + " ";
}
if (buttons6[i].checked) {
txt6 = txt6 + buttons6[i].value + " ";
}
if (buttons7[i].checked) {
txt7 = txt7 + buttons7[i].value + " ";
}
}
document.getElementById("points0").value = txt1;
console.log(txt1);
document.getElementById("points1").value = txt2;
console.log(txt2);
document.getElementById("points2").value = txt3;
console.log(txt3);
document.getElementById("points3").value = txt4;
console.log(txt4);
document.getElementById("points4").value = txt5;
console.log(txt5);
document.getElementById("points5").value = txt6;
console.log(txt6);
document.getElementById("points6").value = txt7;
console.log(txt7);
}
i think what you need is use the "eval" function in javascript
try the following
var buttons1;
var buttons2;
var buttons3;
var buttons4;
var buttons5;
var buttons6;
var buttons7;
var buttons8;
var j;
for(var i=0;i<8;i++){
j=i+1;
eval("buttons" +j+ " = document.forms[0].button" +i+ ";");
}
If i understood correctly,
Try something like this:
change your onclick as following:
<input id='".$temp4."' type='radio' name='button".$id."' onclick='myFunction(this)' value='1'>
and change function :
function myFunction(button){
var name= button.name;
var id= name.split('button')[1];;
document.getElementById("points"+id).value = buttons.value +" ";
}

How to insert php script inside jquery?

I have this jquery sample, just wondering how to insert php (e.g. /a href="/?php echo $sample['SAMPLE\']; ?/"/) in the "var para1" in the below.
var storyIndictor = jQuery(_storyIndictors[position]);
var _content = jQuery("div.jqans-content", container);
var img = jQuery('<img style="float:left;clear:left;"></img>');
var para = jQuery('<div ></div>');
var para1 = jQuery('<h1> </h1>');
var title = jQuery(settings.contentTitle + " a", story).attr('title') || jQuery(settings.contentTitle, story).text();
img.attr('src', jQuery('img', story).attr('longdesc') || jQuery('img', story).attr('src'));
para1.html("<h1>" + title + "</h1>");
You can just echo out a variable
var para1 = jQuery('<h1><?php echo $another_variable; ?></h1>');
var _content = jQuery("div.jqans-content", container);
var img = jQuery('<img style="float:left;clear:left;"></img>');
var para = jQuery('<div ></div>');
var para1 = jQuery('<h1><?php echo $phpvar; ?></h1>');
var title = jQuery(settings.contentTitle + " a", story).attr('title') || jQuery(settings.contentTitle, story).text();
img.attr('src', jQuery('img', story).attr('longdesc') || jQuery('img', story).attr('src'));
para1.html("<h1>" + title + "</h1>");
para.html("<p>" + jQuery(settings.contentDescription, story).html() + "</p>");
You mean like that?
Try this:
var para1 = jQuery('<h1> <?php echo $sample['SaMPLE_SAMPLE']; ?> </h1>');
Its not a good practice to embedded php code in javascript. I have post a way you can try this.
<input type="hidden" id="sample" value="<?php echo $sample['SaMPLE_SAMPLE']; ?>" />
or <div id="sample" data-sample="<?php echo $sample['SaMPLE_SAMPLE']; ?>"></div>
<script>
var sample = $('#sample').val();
//or
var sample = $('#sample').data(); //if you use data atrr
var para1 = $('<h1>' +sample+ '</h1>');
</script>
Simply you can use php inside your js code:-
var varName = '<?php echo $sample['SAMPLE']; ?>';
don't forget to echo. as you missed in your example
so your var para1 will be:-
var para1 = jQuery('<h1><?php echo $sample['SAMPLE']; ?></h1>');

using addEventListener to live copy to a summary page, running into a bit of an issue

I'm a javascript/jQuery No0b and looking to use the addEventListener to print progress in a summary page. this is a 4 tabbed form.
HTML:
<table>
<tr>
<td id="summaryCustomerName"></td>
<td id="summaryAccountManager"></td>
<td id="summaryDescription"></td>
</tr>
<tr>
<td id="summaryAccountCoordinator1"></td>
<td></td>
<td></td>
</tr>
</table>
Portion of JS:
(function(){
$(document).ready(function () {
if (window.addEventListener) {
document.getElementById("accountCoordinator1").addEventListener("change", accountCoordinator1GV, false);
}
else if (window.attachEvent) {
document.getElementById("accountCoordinator1").attachEvent("change", accountCoordinator1GV);
}
});
This works just fine, I am trying to get ONLY the customerDescription portion into a <div class='summaryDIV'> + customerDescription + </div>
The portion I am having problems with:
var accountCoordinator1GV = function () {
var accountCoordinator1GV = "<h3>Account Coordinator</h3>" + "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>";
accountCoordinator1GV += document.getElementById("accountCoordinator1").value;
document.getElementById("summaryAccountCoordinator1").innerHTML = accountCoordinator1GV;
};
I've tried other methods such as:
var accountCoordinator1GV = function () {
var accountCoordinator1GV = $("#accountCoordinator1").val();
var ac1DIV = "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>";
$("#summaryAccountCoordinator1").append(ac1DIV);
};
HELP! What am I doing wrong?
Here is the code as it's whole function:
(function(){
$(document).ready(function () {
if (window.addEventListener) {
document.getElementById("customerName").addEventListener("change", customerNameGV, false);
document.getElementById("accountManager").addEventListener("change", accountManagerGV, false);
document.getElementById("customerDescription").addEventListener("change", customerDescriptionGV, false);
document.getElementById("accountCoordinator1").addEventListener("change", accountCoordinator1GV, false);
document.getElementById("ContactSubmitButton").addEventListener("click", CompanyContacts, false);
} else if (window.attachEvent) {
document.getElementById("customerName").attachEvent("change", generalInformation);
document.getElementById("accountManager").attachEvent("change", accountManagerGV);
document.getElementById("customerDescription").attachEvent("change", customerDescriptionGV);
document.getElementById("accountCoordinator1").attachEvent("change", accountCoordinator1GV);
document.getElementById("ContactSubmitButton").attachEvent("click", CompanyContacts);
}
});
var customerNameGV = function () {
var customerNameGV = "<h3>Customer Name</h3>";
customerNameGV += document.getElementById("customerName").value;
document.getElementById("summaryCustomerName").innerHTML = customerNameGV;
};
var accountManagerGV = function () {
var accountManagerGV = "<h3>Account Manager</h3>";
accountManagerGV += document.getElementById("accountManager").value;
document.getElementById("summaryAccountManager").innerHTML = accountManagerGV;
};
var customerDescriptionGV = function () {
var customerDescriptionGV = "<h3>Customer Description</h3>";
customerDescriptionGV += document.getElementById("customerDescription").value;
document.getElementById("summaryDescription").innerHTML = customerDescriptionGV;
};
var accountCoordinator1GV = function () {
var accountCoordinator1GV = "<h3>Account Coordinator</h3>" + "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>";
accountCoordinator1GV += document.getElementById("accountCoordinator1").value;
document.getElementById("summaryAccountCoordinator1").innerHTML = accountCoordinator1GV;
};
var accountCoordinator1GV = function () {
var accountCoordinator1GV = $("#accountCoordinator1").val();
var ac1DIV = "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>";
$("#summaryAccountCoordinator1").append(ac1DIV);
};
})();
wrap
var ac1DIV = "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>";
as
var ac1DIV = $("<div class='summaryDIV'>" + accountCoordinator1GV + "</div>");
try
var accountCoordinator1GV = function () {
var accountCoordinator1GV = $("#accountCoordinator1").val();
var ac1DIV = $("<div class='summaryDIV'>" + accountCoordinator1GV + "</div>");
$("#summaryAccountCoordinator1").append(ac1DIV);
};
Thanks! This is what I did to resolve the issue, stupid mistake, thanks a TON for the catch!
var accountCoordinator1GV = function () {
var accountCoordinator1GV = $("#accountCoordinator1").val();
var ac1DIV = $("<h3>Account Coordinator</h3>" + "<div class='summaryDIV'>" + accountCoordinator1GV + "</div>");
$("#summaryAccountCoordinator1").append(ac1DIV);
};

Creating nested tables

Good day. I'm trying to create nested tables one hundred times. However, my code creates one main table and then inside that, there are 100 separate tables. (Thanks to Sir Sachin for the help) What I need is table within a table. Please help me fix the code.
<html>
<head> <title> Hello! </title>
<script type="text/javascript">
function add() {
var ni = document.getElementById('myDiv');
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
newdiv.innerHTML = "<table border=1><tr><td> Hello! <input type='hidden' value=1 id='theValue' /><div id='" + divIdName + "'></td></tr></table>";
ni.appendChild(newdiv);
for(var i=1;i<100;i++) {
var ni = document.getElementById(divIdName);
var numi = document.getElementById('theValue');
var num = (document.getElementById('theValue').value -1)+ 2;
numi.value = num;
var newdiv = document.createElement('div');
var divIdName = 'my'+num+'Div';
newdiv.setAttribute('id',divIdName);
var j=i++;
newdiv.innerHTML = "<table border=1><tr><td> Hello! <input type='hidden' value='" + j + "' id='theValue' /><div id='" + divIdName + "'></td></tr></table>";
ni.appendChild(newdiv);
}
}
</script>
</head>
<body onload="add()">
<table border="1">
<tr>
<td> Hello! <input type='hidden' value='0' id='theValue' />
<div id='myDiv'> </div> </td>
</tr>
</table>
</body>
</html>
This should do it (I have removed the hidden input as it is not needed): http://jsfiddle.net/rPR9w/1/
function add() {
for (i=1; i<=100; i++) {
addAnother(i);
}
}
function addAnother(counter) {
var container = document.getElementById('myDiv' + counter);
container.innerHTML = makeTable(counter + 1);
}
function makeTable(counter) {
return "<table border=1><tr><td> Hello! <div id='myDiv" + counter + "'></td></tr></table>";
}

Categories

Resources