Develop Reference

jQuery with noConflict and Assignment of noConflict Variables

I've been working with 2 different versions of jQuery on one page and am trying to utilitze the 'noConflict.'
If I establish a variable for each of the jQuery versions, (examples: $a and $b), would I replace all of the $'s with '$a' and '$b?'
for example (a snippet of the full code [which appears at the bottom]).. wasn't sure where to put the $b's.
<script>
$b(document).ready(function() {
function clone(){
var $cloned = $('table tr:last').clone();
var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
var newIndex = parseInt(oldIndex,10)+1;
$cloned.find('input').each(function(){
var newName = $(this).attr('name').replace(oldIndex, newIndex);
$(this).attr('name', newName);
});
$cloned.insertAfter('table tr:last');
}
$('p.add-btn').click(clone)
;
</script>
Below, is the HTML form code, along with the jQuery clone function, along with the date picker functions. Currently, when I enable one, the other function does not work. Thanks for any leads.
<script src="//code.jquery.com/jquery-1.10.2.js"></script>
<script>var $a = jQuery.noConflict(true); //sets up 1st version of jquery to run for Zebra datepicker</script>
<script type="text/javascript" src="zebra_datepicker/js/zebra_datepicker.js"></script>
<link rel="stylesheet" href="zebra_datepicker/css/default.css" type="text/css">
<script>
$a(document).ready(function() {
$a('#SubmissionDate').Zebra_DatePicker({
view: 'years',
readonly_element: true
});
$a('#ClassYear').Zebra_DatePicker({
view: 'years',
format: 'Y',
readonly_element: true
});
});
</script>
<script>
$b(document).ready(function() {
function clone(){
var $cloned = $('table tr:last').clone();
var oldIndex = $cloned.find('input').attr('name').match(/\d+/);
var newIndex = parseInt(oldIndex,10)+1;
$cloned.find('input').each(function(){
var newName = $(this).attr('name').replace(oldIndex, newIndex);
$(this).attr('name', newName);
});
$cloned.insertAfter('table tr:last');
}
$('p.add-btn').click(clone)
;
</script>
<table id="FormLayout" cellspacing="3" cellpadding="3">
<tr>
<td class="FormLabel" width="100px"><strong>Class Year*</strong></td>
<td width="100px"><input type="text" id="ClassYear" name="ClassYear_1" class="required" value="<%= Request.form("ClassYear") %>" tabindex="4" /></td>
</tr>
<tr><td>
<button type="button" id="add-btn">Add Class Year</button>
</td></tr>
<tr>
<td colspan="4" align="center"><input type="hidden" name="FormSubmit" value="True" />
<input type="submit" value="Submit" tabindex="8" />
</td>
</tr>
</table>

If I establish a variable for each of the jQuery versions, (examples: $a and $b), would I replace all of the $'s with '$a' and '$b?'
Yes you have to, Starting to the line where you declare a variable pointing forward you can only invoke a jQuery function/methods using that variable declaration.
//Assume that by this time there is 'noConflict' declared variable you can still invoke a method of jquery using this.
$().
//But as you declared a 'noConflict' variable
var $a = jQuery.noConflict();
//$() would return undefined.

Please try this:
Include the original version.
Then include the version required by Zebra datepicker.
Just after, you don't need any conflict handling, just call your plugin by using $. To make sure console.log('$.fn.jquery');
After using your plugin you need to call oldV = jQuery.noConflict( true ); to restore globally scoped jQuery variables to the first version loaded. In the next code just use $ normally.

How to initialize a function within an HTML file in a JavaScript file? (Chrome Apps)

I am working with a Scoring Board Chrome App. (I am new to Chrome Apps)
index.html - (just a part of the code) where user inputs the number of players for the scoring board, submits and opens another html file where a table and a number of rows are displayed based on the user input.
<form class="pure-form">
<fieldset>
<legend>Enter number of Players:</legend>
<input type="text" id="users" placeholder="Input Number">
<button type="submit" id="btn1" class="pure-button pure-button-primary">Submit</button>
</fieldset>
</form>
<script>
function(){
//localStorage.setItem('value', document.getElementById("users").value);
localStorage.value = document.getElementById("users").value;
}
</script>
<script type="text/javascript" src="js/main-sheet.js"></script>
<script type="text/javascript" src="js/alert.js"></script>
main-sheet.html - (also just a part of the code)
<table class="pure-table">
<thead>
<tr>
<th>#</th>
<th>Name</th>
<th>Score</th>
<th>Baluts</th>
</tr>
</thead>
<tbody>
<script type="text/javascript">
function addMoreRows(){
//var val = localStorage.getItem('value');
var val = localStorage.value;
document.getElementById("value").value = val;
for(var x=0; x<val; x++) {
var newRow = document.getElementById('pure-table').insertRow();
var newCell = newRow.insertCell();
newCell.innerHTML="<tr><td><input type='text' name='code'></td></tr>";
newCell = newRow.insertCell();
newCell.innerHTML="<tr><td><input type='text' name='name'></td></tr>";
newCell = newRow.insertCell();
newCell.innerHTML="<tr><td><input type='text' name='score'></td></tr>";
newCell = newRow.insertCell();
newCell.innerHTML="<tr><td><input type='text' name='baluts'></td></tr>";
}
}
</script>
The table head is displayed but rows aren't. Though I see why because function addMoreRows() hasn't really been called, and I don't know how.
And here is for the main-sheet.js
document.getElementById("btn1").addEventListener("click", function() {
if (!document.getElementById('users').value.trim()) {
//alert("Please enter the remarks");
chrome.app.window.create('../alert.html',{
'bounds': {
'width': 200,
'height': 200
},
'resizable': false,
});
}
else{
chrome.app.window.create('../main-sheet.html', {
'bounds': {
'width': 1000,
'height': 1000
},
'resizable': false,
});
}});
How do I call the function addMoreRows() to add Rows??
I would appreciate the help and corrections. Thank you.

Inline JavaScript will not be executed. This restriction bans both inline blocks and inline event handlers. You have to include a script file containing your javascript in your page
<script src="script.js" type="text/javascript"></script">
instead of using your javascript code (addMoreRows()) as inline JS within the page.
You will find more info on the Chrome Content-Security-Policy.
Hope it helps.

Looks like reading the documentation would really help, particularly Content Security Policy and Disabled Web Features. This means you cannot use localstorage and inline script.

This as a parameter in javascript

Hey guys am new to javascript development ..I have seen some come in javascript ..The code is
html code
<table>
<tr>
<td style="width:70px;height:70px;background-color:white;" class="white" onclick="place(this,2,1)"></td>
<td style="width:70px;height:70px;background-color:black;" class="black" onclick="someone(this,2,2)"></td>
</tr>
</table>
the js code
<script type="text/javascript">
function someone(domobject,number,column){
if(domobject.style.backgroundColor=="black"||domobject.style.backgroundColor=="white")
domobject.style.backgroundColor="red";
else if(domobject.style.backgroundColor=="red")
domobject.style.backgroundColor=domobject.className;
}
</script>
The thing is that
function someone(number,column){
if(this.style.backgroundColor=="black"||this.style.backgroundColor=="white")
this.style.backgroundColor="red";
else if(this.style.backgroundColor=="red")
this.style.backgroundColor=this.className;
}
when i write the code like this and call it with onclick="someone(2,2)..its doesnt work for me..why is it like that..Hope you guys can help me out ..Thanks in advance

this refers to the parent.
So:
var Bacon = function(){
this.tasty = true;
this.burnt = false;
};
var b = new Bacon();
console.log(b.tasty); //True
The best place to get your head around this is with this tutorial: http://ejohn.org/apps/learn/

Passing a HTML element with ID

my question is about a code combining HTML5 features ContentEditable and localStorage.
Here is my two JS function, one for storing the user edit in the table cell, another for getting the value and pass it to the table cell.
<script type="text/javascript">
function storeUserEdit(id) {
var pre_value = document.getElementById(id).innerHTML;
localStorage.setItem("userEdit",pre_value);
}
function applyUserEdit() {
if (localStorage.getItem("userEdit")){
var new_value = localStorage.getItem("userEdit");
}
document.getElementById('prjSch_row1_col1').innerHTML = localStorage.getItem("userEdit");
}
</script>
and here these two functions embedded in body content:
...
<td id="prjSch_row1_col1" contenteditable="true" onkeyup="storeUserEdit(this.id)" >
</td>
<script>applyUserEdit()</script>
...
I want to use this to many table cells in my HTML page and how I can replace prjSch_row1_col1 with id and pass it to function getUserEdit();
thanks a lot!

Are you trying to do something like this. because what you mention in the question is not enough to me to think about an answer. When do you need to fire applyUserEdit() function, on page load or ...
Please let me know enough details.
16/08/2013 >
Very sorry for the delay! Please find the below code which I tested in Firefox. Is this the behavior you want. Please don't test in fiddler. It's not working there, I don't know why.
`
<head>
<script type="text/javascript">
function storeUserEdit(id) {
var pre_value = document.getElementById(id).innerHTML;
localStorage.setItem("userEdit",pre_value);
localStorage.setItem('userEditControl', id);
}
function applyUserEdit(id) {
var new_value = '';
if (localStorage.getItem("userEdit")){
new_value = localStorage.getItem("userEdit");
}
if(localStorage.getItem('userEditControl') === id){
document.getElementById(id).innerHTML = localStorage.getItem("userEdit");
}
//this is just to check whether the code is working
document.getElementById('log').value = document.getElementById('log').value + '\n' + localStorage.getItem("userEdit");
}
</script>
</head>
<body>
<table border="1">
<tr>
<td>User Name:</td>
<td id="uname" contenteditable="true" onkeyup="storeUserEdit(this.id)" onblur="applyUserEdit(this.id)">value...</td>
</tr>
<tr>
<td>Password:</td>
<td id="pword" contenteditable="true" onkeyup="storeUserEdit(this.id)" onblur="applyUserEdit(this.id)">value...</td>
</tr>
</table>
<textarea multiline="true" id="log"></textarea>
</body>
`
Please let me know if you have any issues...

Use External JavaScript file to change display on div

I am currently doing this:
<div id="textChange" style="display:none;">Blah blah</div>
<script type="text/javascript">
var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if((funnyDate>=20131916) && (funnyDate<=20131923))
{
document.getElementById("textChange").style.display ="block";
}
</script>
and would like to move the script to an external JS file. How do I do that? I doesn't seem to be working for me.
Thanks.

Include this script after your #textChange div and it will work. For example before closing </body> tag:
...
<script src="funny-script.js" type="text/javascript"></script>
</body>
This is the simplest method. You could also run this code on DOMContentLoaded or window.onload events, but looking at what your script doing I don't think it makes sence.

1-open notepad or notepad ++ or whatever you use as a text editor.
2-copy the javascript code to the text editor without and tags
var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if((funnyDate>=20131916) && (funnyDate<=20131923))
{
document.getElementById("textChange").style.display ="block";
}
3-save the files with any name you want and don't forget to add the .js extension to the file for example save the file as "test.js"
4-copy the "test.js" to the same directory as html page.
5-add this line to the html page
<script type="text/javascript" language="javascript" src="test.js"></script>

One way to do this is to create a function and include this in a js file
function style_changer(){
var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if((funnyDate>=20131916) && (funnyDate<=20131923))
{
document.getElementById("textChange").style.display ="block";
}
}
Now in your html give reference to the js file containing this function for example
<script type="text/javascript" src="yourscriptfilename.js" />
you can include this in your section and should work

Save the a file called script.js with the contents.
var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if((funnyDate>=20131916) && (funnyDate<=20131923))
{
document.getElementById("textChange").style.display ="block";
}
And place this tag inside your HTML document. Place it just before the </body> so you'll know that the element textChange will exist in the DOM before your script is loaded and executed.
<script type="text/javascript" src="script.js" />
Make sure that script.js is in the same directory as your HTML document.

put this below code in a function
step1:
function onLoadCall()
var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if((funnyDate>=20131916) && (funnyDate<=20131923))
{
document.getElementById("textChange").style.display ="block";
}
}
Step2:-
call that function on page load
<body onload='onLoadCall()'>
...
</body>
step3:-
now move the script to another file it will work

Put script in a separate file and name it yourScript.js and finally include it in your file
add the code within the script file
function changeFunnyDate(){
var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if((funnyDate>=20131916) && (funnyDate<=20131923))
{
document.getElementById("textChange").style.display ="block";
}
}
Finally add the script in your file & call the method
<script src="yourScript.js" type="text/javascript"></script>

Take everything between your script tags and put it in another file. You should save this file with a .js file extension. Let's pretend you save it as textChange.js.
Now the simplest thing to do would be to include the script file just after your <div> tag -- so basically where the <script> tags and code were before, write:
<script type="text/javascript" src="textChange.js"></script>
This assumes that 'textChange.js' is in the same folder as your HTML file.
...
However, that would far too easy! It is generally best practice to place <script> tags in the <head> of your HTML file. You can move the line above up into the head but then the script will load before your <div> does--it will try to do what it does and it will fail because it can't find the div. So you need to put something around the code in your script file so that it only executes when the document is ready.
The simplest way to do this (and there may be better ways) is write the following...
window.onload = function () {
var d = new Date();
var funnyDate = (d.getFullYear() + "" + (d.getMonth()+11) + "" + (d.getDate()+10));
if ((funnyDate>=20131916) && (funnyDate<=20131923))
{
document.getElementById("textChange").style.display ="block";
}
}
This will mean your script is in the head where it should be and that it only performs when your whole page is ready, including the div that you want to act on.
Hope this helps.