Ive been trying for a while to test js and dom elements and finally came across karma which helps to test dom elements. However anything I have so far just doesn't work. Any help would be very much appreciated.
I have been using this tutorial: http://www.bradoncode.com/blog/2015/02/27/karma-tutorial/ but can't get it to work..
js:
window.calculator = window.calculator || {};
(function() {
var result;
var adding = function(one, two) {
var one1 = document.forms["myForm"]["one"].value;
var two2 = document.forms["myForm"]["two"].value;
var one=parseFloat(one.replace(/\,/g,''));
var two=parseFloat(two.replace(/\,/g,''));
result = parseInt(one1) + parseInt(two2);
console.log(result);
var number = document.getElementById("number");
number.innerHTML = result;
console.log(one, two, result)
return result;
}
window.calculator.init = function() {
document.getElementById('add').addEventListener('click', adding);
};
})();
html:
<body>
<form name="myForm">
<h4>numner 1</h4>
<input type="text" name="one" id="one"></input>
<h4>number 2</h4>
<input type="text" name="two" id="two"></input>
<input type="button" id="add">
</form>
<p id="number"> </p>
<script type="text/javascript" src="public/adder.js"></script>
<script>
calculator.init()
</script>
</body>
</html>
test spec:
beforeEach(function() {
var fixture = '<div id="fixture"> <input type="text" name="one" id="one">' +
'<input type="text" name="two" id="two">' +
'<input type="button" id="add" >' +
'<p id="number"> </p></div>';
document.body.insertAdjacentHTML(
'afterbegin',
fixture);
});
// remove the html fixture from the DOM
afterEach(function() {
document.body.removeChild(document.getElementById('fixture'));
});
// call the init function of calculator to register DOM elements
beforeEach(function() {
window.calculator.init();
});
it('should return 3 for 1 + 2', function() {
var x = document.getElementById('one').value = 1;
var y = document.getElementById('two').value = 2;
document.getElementById('add').click();
expect(document.getElementById('number').innerHTML).toBe('3');
});
Here is a working example. Basically all I did was add <form name="myForm"> and </form> to the HTML in the fixture variable and it started working. You want to supply an element to your test that is essentially the same as the element you want to test in the DOM. You can leave out items that aren't important like the <h4> elements that you already did. Otherwise you need to include all the elements that will be required for the tests.
In this case you are looking for values in the form element:
var one1 = document.forms["myForm"]["one"].value;
var two2 = document.forms["myForm"]["two"].value;
var one=parseFloat(one1.replace(/\,/g,''));
var two=parseFloat(two2.replace(/\,/g,''));
But you weren't including the form in your test. You only had the two input elements, the button, and the element where the results are displayed. The following should get you on the right path.
beforeEach(function() {
var fixture = '<div id="fixture">' +
'<form name="myForm">' +
'<input type="text" name="one" id="one">' +
'<input type="text" name="two" id="two">' +
'<input type="button" id="add" >' +
'</form>' +
'<p id="number"> </p></div>';
document.body.insertAdjacentHTML(
'afterbegin',
fixture);
});
// remove the html fixture from the DOM
afterEach(function() {
document.body.removeChild(document.getElementById('fixture'));
});
// call the init function of calculator to register DOM elements
beforeEach(function() {
window.calculator.init();
});
it('should return 3 for 1 + 2', function() {
var x = document.getElementById('one').value = 1;
var y = document.getElementById('two').value = 2;
document.getElementById('add').click();
expect(document.getElementById('number').innerHTML).toBe('3');
});
Related
I want to send an Ajax request when clicking a button but it seems my request is never executed.
Here is my HTML code :
<!DOCTYPE html>
<html lang="en">
<head>
<title>User Form</title>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.16.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/js/bootstrap.min.js"></script>
<script src = "./actions.js"></script>
</head>
<body>
<div id="badFrm" class="container">
<h2><br>User Registration</h2>
<form id="Form" method="post">
<div class="form-group">
<label for="name">Name:</label>
<input type="name" class="form-control" id="name" placeholder="Enter Name" name="name">
</div>
<div class="form-group">
<label for="email">Email:</label>
<input type="email" class="form-control" id="email" placeholder="Enter Email" name="email">
</div>
<button id="submitBtn" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
</html>
and here is my javascript code :
i feel there is something wrong with my javascript code but i cant figure whats wrong ! i changed a lot of it based on the comments . what i want is when i click on the update button it changes to " submit again " and i want to replace "list items" ( name and eamil ) with input fields and put whatever written in them to be saved in the database instead . and eventually return to the first page which is the register form.
$(document).ready(function() {
var i ;
$("#submitBtn").click(function (e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
$.post("http://localhost/MiniProject/connect.php",
{
name: name,
email: email
}, function () {
var element = document.getElementById("badFrm");
element.remove();
showTbl();
});
function showTbl() {
$.post("http://localhost/MiniProject/Select.php",
{
name: name,
email: email
}, function (res) {
// console.log(res);
res = JSON.parse(res);
var html = '<ul id="List">';
for (i = 0; i < res.length; i++) {
var j = i +1 ;
html += '<li class = "name" >' + res[i].name + '</li><li class = "email">' + res[i].email + '</li>'+ '<div>' + '<button onclick="removeUser(this)" id="'+j+'" class="btn btn-primary">Remove</button>' + '<button onclick="updateUser(this)" id="'+j+'" class="btn btn-primary">Update</button>' + '</div>';
}
html += '</ul>';
document.body.innerHTML = html;
});
}
// function Update() {
// $.post("http://localhost/MiniProject/Update.php",
// {
// name: name,
// email: email
// }, function (res) {
// alert(res);
// });
// }
});
});
// $(document).ready(function() {
//
// $("#removeBtn").click(function (e) {
// e.preventDefault();
// var ID = document.getElementById("removeBtn");
// var element2 = document.getElementById("List");
// element2.remove();
// $.post("http://localhost/MiniProject/Remove.php",{
// id : ID
// }, function (res) {
// document.write(res);
// });
// });
//
// });
function removeUser(element){
var ID = element.id;
var element2 = document.getElementById();
element2.remove();
$.post("http://localhost/MiniProject/Remove.php",{
id : ID
}, function (res) {
console.log(res);
document.write(res);
});
//alert(element.id);
}
function updateUser(element){ // i need help in this part
var ID2 = element.id;
listItem = document.querySelector("li.name");
newNameInput = document.createElement('INPUT');
newNameInput.innerHTML = '<input type="name" class="form-control" id="name" placeholder="Enter New Name" name="name">';
listItem.parentNode.replaceChild(newNameInput, listItem);
listItem = document.querySelector("li.email");
newEmailInput = document.createElement('INPUT');
newEmailInput.innerHTML = '<input type="email" class="form-control" id="email" placeholder="Enter New Email" name="email">';
listItem.parentNode.replaceChild(newEmailInput, listItem);
// var Data = document.getElementbyId("lstitm");
// Data.remove();
// var Input = document.createElement("INPUT");
// Input.setAttribute('type','text');
$.post("http://localhost/MiniProject/Update.php",{
id : ID2,
}, function (res) {
console.log(res);
// document.write(res);
});
}
The issue is in the javascript code.
I can see that you are creating the button #removeBtn on the callback of the ajax request sent when the user clicks on the submit button, in showTbl().
Then you call removeUser() that is creating the handler for the newly created #removeBtn button.
The issue you are experiencing is that the ajax callback is asynchronous. So, you are attaching the handler on the #removeBtn before the button is created.
Here is what you should do :
$("#submitBtn").click(function (e) {
e.preventDefault();
var name = $("#name").val();
var email = $("#email").val();
$.post("http://localhost/MiniProject/connect.php",
{
name: name,
email: email
}, function () {
var element = document.getElementById("badFrm");
element.remove();
showTbl();
//removeUser(); <- remove that line
// Update();
}
);
function showTbl() {
$.post("http://localhost/MiniProject/Select.php",
{
name: name,
email: email
}, function (res) {
res = JSON.parse(res);
var html = '<ul id="List">';
for (var i = 0; i < res.length; i++) {
html += '<li>' + res[i].name + '</li><li>' + res[i].email + '</li>'+ '<div>' + '<button id="removeBtn" class="btn btn-primary">Remove</button>' + '<button id="updateBtn" class="btn btn-primary">Update</button>' + '</div>';
}
html += '</ul>';
document.body.innerHTML = html;
removeUser(); // <- call it there instead
}
);
}
I also recommend you yo rename your function removeUser() as it is not removing anything, it is just attaching the handler to the button.
I'm attempting to create a page where the user is able to customize the form to their needs by adding in extra divs or nested divs (as many layers deep as they'd like). Within each div I'd like to have text input and a button which adds another div on the same level and a button that nests a div within it. Both divs should again have a text input and a button which does the same thing.
However I've gotten a bit stuck. When I attempt to create a nested div I always end up adding it at the very bottom instead of inside its parent.
<html>
<script type="text/javascript">
var counter = 1;
function addNode() {
var newDiv = document.createElement('div');
counter++;
newDiv.innerHTML = "Entry " + counter + " <br><input type='text' name='myInputs'>";
document.getElementById("dynamicInput").appendChild(newDiv);
var newButton = document.createElement('button');
newButton.type = "button";
newButton.onclick = addSub;
document.getElementById("dynamicInput").appendChild(newButton);
}
function addSub() {
var newDiv = document.createElement('div');
counter++;
newDiv.innerHTML = "Entry " + counter + " <br><input type='text' name='myInputs' style='margin:10px'>";
document.getElementById("subInput").appendChild(newDiv);
}
</script>
<form class="form" method="POST">
<div id="dynamicInput" name="dynamicInput" multiple="multiple">
Entry 1<br><input type="text" name="myInputs">
<div id="subInput" name="subInput" multiple="multiple">
<input type="button" value="add nested" onClick="addSub();">
</div>
</div>
<input type="button" value="Add another text input" onClick="addNode();" >
<input type="submit" value = "answer" multiple="multiple"/>
</form>
</html>
Here is a complete solution for you keep in mind that if you need to bind extra events on your produced inputs and buttons you ll have to do it inside the functions addNode or addSub as i did for the click event on the buttons.
Working example : https://jsfiddle.net/r70wqav7/
var counter = 1;
function addNode(element) {
counter++;
var new_entry="Entry "+counter+"<br><input type='text' name='myInputs'><br>";
element.insertAdjacentHTML("beforebegin",new_entry);
}
function addSub(element) {
counter++;
var new_sub_entry="<div class='block'>"
+"Entry "+counter+"<br><input type='text' name='myInputs'><br>"
+"<div class='buttons'>"
+"<input class='add_sub_button' type='button' value='add nested'>"
+"<input class='add_button' type='button' value='Add another text input' >"
+"</div>"
+"</div><br />"
+"</div>";
element.insertAdjacentHTML("beforebegin",new_sub_entry);
var blocks=element.parentNode.getElementsByClassName("block");
blocks[blocks.length-1].getElementsByClassName("add_sub_button")[0].addEventListener("click",function(){
addSub(this.parentNode);
});
blocks[blocks.length-1].getElementsByClassName("add_button")[0].addEventListener("click",function(){
addNode(this.parentNode);
});
}
var buttons=document.getElementsByClassName("add_button");
for(i=0;i<buttons.length;i++){
buttons[i].addEventListener("click",function(){
addNode(this.parentNode);
});
}
var nested_buttons=document.getElementsByClassName("add_sub_button");
for(i=0;i<buttons.length;i++){
nested_buttons[i].addEventListener("click",function(){
addSub(this.parentNode);
});
}
div.block{
padding:5px;
border:2px solid #000;
}
<form class="form" method="POST">
<div class="block">
Entry 1<br><input type="text" name="myInputs"><br>
<div class="buttons">
<input class="add_sub_button" type="button" value="add nested">
<input class="add_button" type="button" value="Add another text input" >
</div>
</div><br />
<input type="submit" value = "answer" multiple="multiple"/>
</form>
EDITED : There was an error binding the click event on nested items updated to work properly
Here's another worked example which makes use of the concepts I mentioned in an earlier comment. I've moved the Add-Item button outside the form and altered the method used to determine the text for each new item added. Rather than keep a counter, I count the number of existing items in the document and increment it, using this as as the n in the string "Entry n"
I should have added(appended) the sub-item before the button that creates new ones, but was lazy and just called appendChild on the button after the other new element was added - the end result is the same, but it's less efficient and will cause slower performance/shorter battery life.
I was going to use the .cloneNode method of the .dynamicInput div, when clicking "Add new item", however this will copy all subitems of the chosen target and we still need to call addEventListener for the button anyway, so I've opted to simply create each input-item added with the "Add new item" button instead.
<!doctype html>
<html>
<head>
<script>
"use strict";
function byId(id,parent){return (parent == undefined ? document : parent).getElementById(id);}
function allByClass(className,parent){return (parent == undefined ? document : parent).getElementsByClassName(className);}
function allByTag(tagName,parent){return (parent == undefined ? document : parent).getElementsByTagName(tagName);}
function newEl(tag){return document.createElement(tag);}
function newTxt(txt){return document.createTextNode(txt);}
window.addEventListener('load', onDocLoaded, false);
function onDocLoaded(evt)
{
byId('addNewInputBtn').addEventListener('click', myAddNewItem, false);
var subItemBtn = document.querySelectorAll('.dynamicInput button')[0];
subItemBtn.addEventListener('click', myAddSubItem, false);
}
function makeNewItem(titleStr)
{
var div = newEl('div');
div.className = 'dynamicInput';
var heading = newEl('h3');
heading.innerText = titleStr;
div.appendChild(heading);
var input = newEl('input');
div.appendChild(input);
var btn = newEl('button');
btn.innerText = 'Add sub-items';
btn.addEventListener('click', myAddSubItem, false);
div.appendChild(btn);
return div;
}
function myAddNewItem(evt)
{
var numAlreadyExisting = allByClass('dynamicInput').length; // count number of divs with className = dynamicInput
var newNum = numAlreadyExisting + 1;
var newInputPanel = makeNewItem('Entry ' + newNum);
byId('myForm').appendChild(newInputPanel);
return false;
}
function myAddSubItem(evt)
{
evt.preventDefault(); // stops this button causing the form to be submitted
var clickedBtn = this;
var inputDiv = clickedBtn.parentNode;
var newInput = newEl('input');
inputDiv.appendChild(newInput);
inputDiv.appendChild(clickedBtn);
}
</script>
</head>
<body>
<form id='myForm'>
<div class='dynamicInput'>
<h3>Entry 1</h3>
<input type='text'/><button>Add sub-item</button>
</div>
</form>
<button id='addNewInputBtn'>Add new item</button>
</body>
</html>
I am building an eCommerce Application where the user can select the option and the shopping cart is automatically updated through jquery.
The user will have few radio button to choose from and as he selects the radio button, the shopping cart is updated.
Now, the issue I am facing is, when he taps on the radio button ( Mobile website), some times, the callback function is not called at all so the shopping card is not updated.
I am not an expert, but can you please tell me if I am missing anything. Here is the code I am using.
HTML Code
<div class="col-33">
<div class="panel1 panel-primary text-center no-border">
<div class="panel-body blue">
<label>
<input type="radio" name="recharge_amount" value="{var name='price_id'}"/><br/>{var name='grand_total1'}
<input type="hidden" id="carttotal_{var name='price_id'}" value="{var name='carttotal'}"/>
<input type="hidden" id="taxper_{var name='price_id'}" value="{var name='taxper'}"/>
<input type="hidden" id="taxamount_{var name='price_id'}" value="{var name='taxamount'}"/>
<input type="hidden" id="grand_total_{var name='price_id'}" value="{var name='grand_total'}"/>
</label>
</div>
</div>
</div>
Jquery
$('#transfer_target input[type="radio"]').click(function()
{
$('#cart_total').hide();
var $amt = $(this).val();
var carttotal_el = "#carttotal_" + $amt;
var taxper_el = "#taxper_" + $amt;
var taxamount_el = "#taxamount_" + $amt;
var grand_total_el = "#grand_total_" + $amt;
//update_price_list($amt);
var $carttotal = $('#carttotal');
$carttotal.html($(carttotal_el).val());
var $salestax_per = $('#salestax_per');
var $str = '<h4>Sales Tax(' + $(taxper_el).val() + ')</h4>';
$salestax_per.html($str);
var $salestax_amount = $('#salestax_amount');
$salestax_amount.html($(taxamount_el).val());
var $grand_total = $('#grand_total');
$grand_total.html($(grand_total_el).val());
$('#cart_total').show();
});
Are you using a DOM Ready function? You should have something that looks like this. It may simply be that the data is ready.
$(document).ready(function() {
someName();
});
function someName() {
$('#transfer_target input[type="radio"]').click(function() {
$('#cart_total').hide();
var $amt = $(this).val();
var carttotal_el = "#carttotal_" + $amt;
var taxper_el = "#taxper_" + $amt;
var taxamount_el = "#taxamount_" + $amt;
var grand_total_el = "#grand_total_" + $amt;
var $carttotal = $('#carttotal');
$carttotal.html($(carttotal_el).val());
var $salestax_per = $('#salestax_per');
var $str = '<h4>Sales Tax(' + $(taxper_el).val() + ')</h4>';
$salestax_per.html($str);
var $salestax_amount = $('#salestax_amount');
$salestax_amount.html($(taxamount_el).val());
var $grand_total = $('#grand_total');
$grand_total.html($(grand_total_el).val());
$('#cart_total').show();
});
}
How can I add a new div tag for each item in scriptDB?
It looks like the code gets stuck when I get to the "while (results.hasNext())" part, possibly because I am using Apps Script syntax in the script section of the HTML. I am able to make the script work when I substitute the entire while loop with just a simple div.innerHTML...etc. line
the index.html file looks like this:
<form id="myForm">
<p>Name of Alert: <input name="alertName" type="text" /></p>
<select name="frequency">
<option value="everyDay">Every day</option>
<option value="everyWeek">Every week</option>
</select>
<input type="button" value="Submit"
onclick="google.script.run
.withSuccessHandler(updateAlertList)
.processForm(this.parentNode)" />
</form>
<script>
function updateAlertList(results) {
var div = document.getElementById('output');
while (results.hasNext()) {
var result = results.next();
div.innerHTML = '' + result.alertName + '';
}
}
</script>
The Code.gs file has this in it:
function processForm(formObject) {
var formAlertName = formObject.alertName;
var formFrequency = formObject.frequency;
var db = ScriptDb.getMyDb();
var alert = {
alertName: formAlertName,
frequency: formFrequency
};
var record = db.save(alert);
var results = db.query({});
return results;
}
Update: worked when I added this to code.gs
var arrayResults = [];
while (results.hasNext()) {
arrayResults.push(results.next());
}
return arrayResults;
and this to index.html
for (var i=0;i<results.length;i++)
{
alert(results[i].alertName);
div.innerHTML = '' + results[i].alertName + '';
}
You need to process the results (iterator) in the gs and create an array of results to work through in the javascript.
I have a code like this...
<html>
<head>
<title>test</title>
<script type="text/javascript">
var counter = 2;
var idCounter= 3;
function addNew() {
if(counter<=5){
// Get the main Div in which all the other divs will be added
var mainContainer = document.getElementById('mainContainer');
// Create a new div for holding text and button input elements
var newDiv = document.createElement('div');
newDiv.id='divs'+counter;
// Create a new text input
var newText = document.createElement('input');
var newText1 = document.createElement('input');
newText.type = "input";
newText.id="ans"+(idCounter);
idCounter++;
newText1.type = "input";
newText1.id="ans"+(idCounter);
idCounter++;
// newText.value = counter;
// Create a new button input
var newDelButton = document.createElement('input');
newDelButton.type = "button";
newDelButton.value = "Remove";
// Append new text input to the newDiv
newDiv.appendChild(newText);
newDiv.appendChild(newText1);
// Append new button input to the newDiv
newDiv.appendChild(newDelButton);
// Append newDiv input to the mainContainer div
mainContainer.appendChild(newDiv);
counter++;
// Add a handler to button for deleting the newDiv from the mainContainer
newDelButton.onclick = function() {
mainContainer.removeChild(newDiv);
counter--;
}
}
else{
alert('Only 5 rows are allowed');
}}sss
function removeRow(divId){
mainContainer.removeChild(divId);
counter--;
}
</script>
</head>
<body >
<div id="mainContainer">
<div><input type="button" value="Add New Row" onClick="addNew()"></div>
<div id="div1"><input type="text" id="ans1"><input type="text" id="ans2"><input type="button" value="Remove" onClick ="javascript:removeRow(div1);"></div>
</div>
</body>
</html>
I want to achieve the same using jQuery.I also need the values entered in each of these textboxes.Please help.
Okay, because I had nothing better to do, and, to be honest, I was curious, I put this together. As implied in my comment, above, I didn't particularly like the way you had it laid out, so I used the following (x)html:
<form action="#" method="post">
<fieldset id="rows">
<ul>
<li>
<input type="text" id="ans1" name="ans1" />
<input type="text" id="ans2" name="ans2" />
</li>
</ul>
</fieldset>
<fieldset id="controls">
<button id="addRow">add</button>
<button id="removeRow" disabled>remove</button>
</fieldset>
</form>
With the following jQuery (although I've clearly not optimised, or refined it, but it should meet your requirements):
$(document).ready(
function(){
$('#addRow').click(
function() {
var curMaxInput = $('input:text').length;
$('#rows li:first')
.clone()
.insertAfter($('#rows li:last'))
.find('input:text:eq(0)')
.attr({'id': 'ans' + (curMaxInput + 1),
'name': 'ans' + (curMaxInput + 1)
})
.parent()
.find('input:text:eq(1)')
.attr({
'id': 'ans' + (curMaxInput + 2),
'name': 'ans' + (curMaxInput + 2)
});
$('#removeRow')
.removeAttr('disabled');
if ($('#rows li').length >= 5) {
$('#addRow')
.attr('disabled',true);
}
return false;
});
$('#removeRow').click(
function() {
if ($('#rows li').length > 1) {
$('#rows li:last')
.remove();
}
if ($('#rows li').length <= 1) {
$('#removeRow')
.attr('disabled', true);
}
else if ($('#rows li').length < 5) {
$('#addRow')
.removeAttr('disabled');
}
return false;
});
});
JS Fiddle demo of the above
I'm not, however, sure what you mean by:
I also need the values entered in each of these textboxes.
If you can explain what that means, or how you want them to be available (and, ideally, why they're not already available to you) I'll do my best to help.
I have a solution which will help you use here is the code
<script type="text/javascript" src="js/jquery.js"></script>
<script type = 'text/javascript'>
var newRowNum = 1;
var project_id ;
$(function() {
$('#addnew').click(function()
{
newRowNum++; // This is counter
//var i = 0;
///////// <a> <td> <tr>
var addRow = $(this).parent().parent();
///////// In the line below <tr> is created
var newRow = addRow.clone();
$('input', addRow).val('');
$('td:first-child', newRow).html();
$('td:last-child', newRow).html('<a href="" class="remove span">Remove<\/a>');
var newID = 'project'+newRowNum;
var add = 'description'+newRowNum;
newRow.children().children().first('input').attr('id', newID).attr('name', newID);
newRow.children().children().eq(1).attr('id', add).attr('name', add);
$('#table').find('tr:last').after(newRow);
$('a.remove', newRow).click(function()
{
newRowNum--;
$('#table').find('tr:last').remove();
return false;
});
return false;
});
});
</script>
<table width="75%" border="0" align = "center" id = 'table'>
<tr>
<td align = "center">Project </td>
<td align = "center">Description</td>
<td align = "center">Add Row</td>
</tr>
<tr>
<td align = "center"><input type = 'text' size = '35'name = 'project[]' id="project" ></td>
<td align = "center"><input type = 'text'size = '55' name = "description[]" id = 'description'></td>
<td width = '10%'><a id="addnew" href= "" class = 'span'>Add</a></td>
</tr>
</table>
You can also give each text box unique name if you change code like this and changing these two variables
var newID = 'project'+newRowNum;
var add = 'description'+newRowNum;
if you use the first method i shown here it will be easy to post data using array. That's all.