QUnit Testing: reveal is not a function - javascript

Hello I'm very new to JavaScript Unit Testing, and I'm in the process of attempting to see if it would be possible to test some existing JavaScript.
I've got my test runner up, but I'm receiving this error in regards to function.
Test Runner the markup there is just to test something for the moment:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>QUnit Main Test Suite</title>
<link rel="stylesheet" href="../qunit.css">
<script src="../sinon-1.17.3.js"></script>
<script src="../jquery-2.2.2.min.js"></script>
<script src="../qunit.js"></script>
<script src="PreferenceControl.js"></script>
<script src="tests.js"></script>
</head>
<body>
<div id='MainContentDiv'>
<div id='PreferenceType'>PreferenceFrequency</div>
<div id='PreferenceId'>1</div>
<table id='RadioButtonList'>
<tbody>
<tr>
<td>
<span id='1'>
<input id='RadioButtonList_0' type='radio' name='RadioButtonList' value='1'>
</span>
</td>
</tr>
<tr>
<td>
<span id='2'>
<input id='RadioButtonList_1' type='radio' name='RadioButtonList' value='2' checked='checked'>
</span>
</td>
</tr>
<tr>
<td>
<span id='3'>
<input id='RadioButtonList_2' type='radio' name='RadioButtonList' value='3'>
</span>
</td>
</tr>
<tr>
<td>
<span id='4'>
<input id='RadioButtonList_3' type='radio' name='RadioButtonList' value='4'>
</span>
</td>
</tr>
</tbody>
</table>
<input type="submit" name="SaveButton" id="SaveButton" />
</div>
<div id="CheckBoxList"></div>
<div id="qunit"></div>
<div id="qunit-fixture">test markup</div>
</body>
Below is the section it's breaking on:
this.loaderContainer = $('#AjaxLoader', this.mainContentDiv);
if (this.loaderContainer.length == 0) {
this.loaderContainer = $("<div id=\"AjaxLoader\" class=\"full-width columns alpha omega\">" +
"<span class=\"loader\"><img src=\"/Common/CSS/Core/Images/Throbbers/Ajax-Loader.gif\" style=\"display: none\" ></span>" +
"</div>");
this.loaderContainer.appendTo(this.mainContentDiv);
}
this.loaderContainer.reveal({
animation: 'throbber'
});
These are the results of my break:
I'm not sure how to rectify this, or if it's possible the way I've done it? Any help would be much appreciated, thank you in advance.

jQuery does not have a reveal() method. I'm not sure what you're trying to do on that line of code, but perhaps you're looking for the show() method with an easing option specified?
The error you're seeing from QUnit is that the reveal() function does not exist (because it is not part of jQuery). If you are using a plugin that provides a reveal() function for you then you need to include that JS file in your test harness (the HTML document).

This is due to a missed reference to another library that deals with the .reveal method.

Related

CSV to HTML table using d3 and an external javascript file

I'm found on the internet a simple example (http://bl.ocks.org/ndarville/7075823) how to convert a .csv file into a table in HTML. I implemented the same example inside a container and it works really well. So, I decided to put its javascript code in an external file in order to be implemented in my application, but it is not working. I'm wondering why does don't work. I would appreciate id anyone could help me because I don't have any kind of experience with D3.
//-------------------------file myscript.js -------------------------------------//
function sTest(){
d3.text("data.csv", function(data) {
var parsedCSV = d3.csv.parseRows(data);
var container = d3.select("#dataTable")
.append("table")
.selectAll("tr")
.data(parsedCSV).enter()
.append("tr")
.selectAll("td")
.data(function(d) { return d; }).enter()
.append("td")
.text(function(d) { return d; });
}
//----------------------------file index.html -------------------------
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
</head>
<body>
<script src="myscript.js"></script>
<script src="http://d3js.org/d3.v3.min.js"></script>
<div class="w3-container w3-cell-row w3-lobster">
<p class="w3-xxlarge">Data Table:</p>
</div> //container where should be contained a table
<div style="height:350px;" class="w3-cell-row">
<div id="dataTable" class="w3-container w3-cell w3-center w3-cell-middle w3-border w3-border-blue w3-round-xlarge">
</div>
<div style="width:320px;" class="w3-container w3-cell w3-cell-middle w3-border w3-border-green w3-round-xlarge">
<table class="w3-table w3-bordered">
<tr>
<th>$$Resistor\,(R):$$</th>
</tr>
<tr>
<td><center><input type="number" style="text-align:center" id="Res" value="0" >
<label style="font:16px">$$\Omega$$</label></center></td>
</tr>
<tr>
<th>$$Resistor\,(R_B):$$<th>
</tr>
<tr>
<td><center><input type="number" style="text-align:center" id="Resb" value="0">
<label style="font:16px">$$\Omega$$</label></center></td>
</tr>
<tr>
<th>$$Resistor\,(R_C):$$</th>
</tr>
<tr>
<td><center><input type="number" style="text-align:center" id="Resc" value="0">
<label style="font:16px">$$\Omega$$</label></center></p></td>
</tr>
</table>
</div>
</div>
<p align="center"><input type="button" name="start" id="start" value="Start" onclick="sTest()" style="color:#00cc00">
</body>
</html>
Swap the order of the javascript references around.
myscript.js (where you have the code invoking d3 methods) is dependent on the d3js library so ensure that the d3js library is loaded first as follows:
<script src="http://d3js.org/d3.v3.min.js"></script>
<script src="myscript.js"></script>
For additional explanation on loading js libraries, read the accepted answer on this SO question:
load and execute order of scripts

How to make the all select checkbox workable upon deselecting few of the checkboxes?

I'm using PHP and Smarty for my website.For your reference I'm putting here the code snippet from smarty template alongwith the jQuery code:
<div class="spl-btn-wrap fl-left">
<div class="spl-btn-in">
<div class="spl-btn">
<p id="parentCheckbox" class="custom-form">
<input class="custom-check" type="checkbox" name="" id="ckbCheckAll">
<a class="drop" href="#">more</a>
</p>
</div>
</div>
</div>
<table class="tablesorter" cellpadding="0" cellspacing="0" border="0" id="tests_listing" width="100%">
{section name=tests loop=$all_tests}
<tr id="tests_listing-row-{$all_tests[tests].test_id}"><td class="dragHandle">
<td>
<table width="100%" border="0" cellspacing="0" cellpadding="0" class="tbl-test" >
<tr>
<th align="left">
<p class="custom-form">
<input class="custom-check checkBoxClass" type="checkbox" name="" id="">
<label>{$all_tests[tests].test_name}</label>
</p>
</th>
</tr>
</table>
</td></tr>
{sectionelse}
</table>
{literal}
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$(".view_test_details").colorbox({width:800, href:$(this).attr('href')});
$("#ckbCheckAll").click(function () {
if ($(this).is(':not(:checked)'))
$(".ez-checkbox").removeClass("ez-checked");
if($(this).is(':checked'))
$(".ez-checkbox").addClass("ez-checked");
});
$(".checkBoxClass").click(function(){
var all = $('.checkBoxClass');
if (all.length === all.filter(':checked').length) {
//$("p#parentCheckbox div").addClass("ez-checked");
$("#ckbCheckAll").prop("checked", true);
} else {
//$("p#parentCheckbox div").removeClass("ez-checked");
$("#ckbCheckAll").prop("checked", false);
}
if (!$(this).prop("checked")){
//$("p#parentCheckbox div").removeClass("ez-checked");
$("#ckbCheckAll").prop("checked",false);
}
});
});
</script>
{/literal}
Now the scenario is when the page loads completely the following code wraps around the checkbox as follows:
<div class="ez-checkbox">
<input id="" class="custom-check ez-hide" type="checkbox" name=""></input>
</div>
When the checkbox is selected the class named "ez-checked" added to the div as follows:
<div class="ez-checkbox ez-checked">
<input id="" class="custom-check ez-hide" type="checkbox" name=""></input>
</div>
Upon unchecking the checkbox the class get removed. I want to work on this basic idea of applying and removing "ez-checked" class.
Now I want to add the typical Select all checkbox functionality. I've written code for it. But the issue is it is working for all checkboxes. I want to make it workable if few checkboxes are selected too. Can you help me to resolve my issue? Thanks in advance. If you need any further information I can provide you with the same.
Try this (edited):
$('.checkBoxClass').on('change', function(e){
var $target = $(e.target);
$target.closest('div.ez-checkbox').toggleClass('ez-checked',$target.is(':checked'));
})
Uploaded a demo here:
http://jsfiddle.net/m7gzf/

Why won't this short script work? Need to take a value from input field and append it to div.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
var wifi;
var firewall;
var backup;
var vpn;
var install;
$('submit').click(function(){
wifi = $('input[name=wifiPrice]').val();
firewall = $('input[name=firewallPrice]').val();
backup = $('input[name=backupPrice]').val();
vpn = $('input[name=vpnPrice]').val();
install = $('input[name=installPrice]').val();
$('list').append('<p>' + wifi + '</p>');
});
});
</script>
</head>
<body>
<div id="cccontainer">
<form id="costComparer" name="pricesForm">
<table>
<tr>
<td class="label" id="wifi">Wifi:</td><td><input type="text" name="wifiPrice"></td>
</tr>
<tr>
<td class="label" id="firewall">Firewall:</td><td><input type="text" name="fireWallPrice"></td>
</tr>
<tr>
<td class="label" id="backup">Backup:</td><td><input type="text" name="pBackupPrice"></td>
</tr>
<tr>
<td class="label" id="vpn">VPN:</td><td><input type="text" name="vpnPrice"></td>
</tr>
<tr>
<td class="label" id="install">Installation:</td><td><input type="text" name="installPrice"></td>
</tr>
<tr>
<td></td><td><input type="button" value="Submit" /></td>
</tr>
</table>
</form>
<div id="list"></div>
</div>
</body>
</html>
I am attempting to take in the value of the wifiPrice input field, and appending this in a container into <div id="list">. However, it doesn't seem to be doing anything. Could someone point out where I am going wrong? Thank you.
You're not referencing the div or the submit button correctly.
Change:
$('list').append('<p>' + wifi + '</p>');
To
$('#list').append('<p>' + wifi + '</p>');
Also, you have a problem with the way you attach the click listener. You need to either assign the button a class or id and then reference it accordingly. Alternatively you can reference it the way you reference your input fields.
$('submit')
You don't have a submit element?
<input type="button" value="Submit" />
would be
$('input[type="button"][value="Submit"]')
nor do you have a list element, $('list') should be $('#list')
FIDDLE
The problem is your selector. You're attaching an handler to an element (a tag) that should be called submit that doesn't exist! It's like you are selecting an element like:
<submit>...</submit>
So, turn this:
$('submit')
into this:
$('input[type="submit"]')

After load event for iframe?

I'm using an iframe as target for one of my forms. I need to transform the html of the iframe once the form is submitted. I tried using the onload event, but when the event is fired, my iframe does not have the html resulting from my form yet (right on the debugger breakpoint):
<html>
<head>
<title>Test</title>
</head>
<body>
<script language="javascript">
function loaded(){
var lResponse = document.getElementById('results');
debugger;
}
</script>
<div>
<table>
<tr>
<td width="100%">
<form id="serverForm" target="results" <web:taskProcessorName attribute="action" type="admin"/>>
<div>
<table>
<tr>
<td>
<div name="resultsDiv" id="resultsDiv" style="display: none">
<iframe name="results" id="results" onload="loaded" frameborder="0"></iframe>
</div>
</td>
</tr>
</table>
</div>
<!-- Hidden Inputs -->
<input type="hidden" name="server" value="..." />
</form>
</td>
</tr>
</table>
</div>
<script language="javascript">
document.getElementById('serverForm').submit();
document.getElementById('resultsDiv').style.display='block';
</script>
</body>
</html>
No 3rd party library - pure javascript.
I use the following instead and that seems to catch the event when the iframe html is set already:
function lLoadFunc(){
var lResponse = document.getElementById('results');
}
if(lResponse.addEventListener)
lResponse.addEventListener('load', lLoadFunc, true);

Runtime creation of tables in Javascript?

I my application "When a button is clicked it should create a new text field in the table". So i have done like this and its not working as well. So what could be the problem in the following snippet.
<html>
<script type="text/javascript" language="javascript">
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var output="<input type=\"textfield\"";
newtd.innerHtml=output;
newtr.appendChild(newtd);
function create_row()
{
document.getElementById("table1").appendChild(newtr);
}
</script>
<body>
<table id="table1">
<tr>
<td>
<input type-"textfield" name="tfield">
</td>
</tr>
<tr>
<td> <input type="button" name="button" value="new row" onclick="create_row();">
</tr>
</table>
</body>
</html>
I am using IE7.
In order to make this work in IE you should create a TBODY first then append the TRs in TBODY. If you don't do this IE cannot render the table content, HTML part will be created succesffully but it will not be seen on the page.
So you should modify your script to append TRs into the TBODY
Few remarks about your code:
You need to properly close tags: var output="<input type=\"textfield\"" is not valid
There's no input type="textfield" defined
The property to set the html of a given DOM element is called innerHTML and not innerHtml
You need to create a new tr element every time the button is clicked, so this should be inside the create_row function
You have a typo in your HTML: <input type-"textfield" name="tfield">. This should be changed to <input type="text" name="tfield" />
You are missing a head section in your document
I've tried cleaning your code a bit:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function create_row()
{
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var output = '<input type="text" name="test" />';
newtd.innerHTML = output;
newtr.appendChild(newtd);
document.getElementById('table1').appendChild(newtr);
}
</script>
</head>
<body>
<table id="table1">
<tr>
<td>
<input type="textfield" name="tfield" />
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="new row" onclick="create_row();" />
</td>
</tr>
</table>
</body>
</html>
UPDATE:
As pointed out by Guffa and Serkan answers in IE7 a tbody section needs to be used:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html>
<head>
<title>Test</title>
<script type="text/javascript">
function create_row()
{
var newtr = document.createElement('tr');
var newtd = document.createElement('td');
var output = '<input type="text" name="test" />';
newtd.innerHTML = output;
newtr.appendChild(newtd);
document.getElementById('tablebody').appendChild(newtr);
}
</script>
</head>
<body>
<table id="table1">
<tbody id="tablebody">
<tr>
<td>
<input type="textfield" name="tfield" />
</td>
</tr>
<tr>
<td>
<input type="button" name="button" value="new row" onclick="create_row();" />
</td>
</tr>
</tbody>
</table>
</body>
</html>
You are missing a head tag.
The script should be in the head tag.
The html code for the input element is missing a closing bracket.
The type "textfield" does not exist.
The code only works once as you create the elements outside the function.
The method is innerHTML, not innerHtml.
You have to add the row to the tbody element, not the table itself.
I have tested this in Firefox 3 and IE 8 and it works:
<html>
<head>
<script type="text/javascript">
function create_row() {
var newtr=document.createElement("tr");
var newtd=document.createElement("td");
var output="<input type=\"text\">";
newtd.innerHTML=output;
newtr.appendChild(newtd);
document.getElementById("table1body").appendChild(newtr);
}
</script>
</head>
<body>
<table>
<tbody id="table1body">
<tr>
<td>
<input type-"textfield" name="tfield">
</td>
</tr>
<tr>
<td> <input type="button" name="button" value="new row" onclick="create_row();">
</tr>
</tbody>
</table>
</body>
</html>

Categories