jQuery with noConflict and Assignment of noConflict Variables - javascript

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.

Related

How to use LIKE operator in Sheetrock

I'm trying to call the Javascript variable elem after LIKE in the SQL statement so that the input text is used there. However the way I'm doing it doesn't work with the Sheetrock library I'm using (http://chriszarate.github.io/sheetrock/).
<!DOCTYPE html>
<html>
<body>
Enter Tracking Code: <input type="text" id="textbox_id">
<input type="button" value="Submit">
<table id="switch-hitters" class="table table-condensed table-striped"></table>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-sheetrock/1.0.1/dist/sheetrock.min.js"></script>
<script>
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1_1elTo5zH1ew6KPYwoWtixX9hzFc8oxdRy5A0LWFkwg/edit#gid=0';
var elem = document.getElementById('textbox_id').value;
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A LIKE %"+elem+"%"
});
</script>
</body>
</html>
Since you updated your question here is updated answer. Check working jsfiddle: https://jsfiddle.net/r0sk7vtf/
you need to handle submit button click event and then call service
while spreadsheet api understand like without quotes, it doesn't work via sheetrock.js , so you need to use A like '9999%' in your query
Snippet:
var mySpreadsheet = 'https://docs.google.com/spreadsheets/d/1_1elTo5zH1ew6KPYwoWtixX9hzFc8oxdRy5A0LWFkwg/edit#gid=0';
var button = $('#btn'), elem = $('#textbox_id')
button.on('click', function(e){
var v = elem.val();
$('#switch-hitters').sheetrock({
url: mySpreadsheet,
query: "select A,B,C,D,E where A like '" + v + "%'"
});
})

Using Razor and javascript within each other

I want to use a javascript variable in Razor like this :
my html:
#{List<AddTempViewModel> tempsToView = new List<AddTempViewModel>();
tempsToView = (List<AddTempViewModel>)ViewData["tempsToView"];}
#if (tempsToView != null)
{
#foreach (var item in tempsToView)
{
<a class="click" id="#item.TempDocumentId">
<img id="leftSideBarElement" src="#item.TempDocumentAddressUrl" />
</a><br />
}
<form method="post" action="">
<input id="documentNumber" class="form-control" type="text" name=""
placeholder="Email" />
</form>
and my script :
<script>
$(document).ready(function () {
$(".click").click(function () {
var divID = $(this).attr('id');
alert(divID);
var docName = #tempsToView[divID].TempDocumentId
$("#documentNumber").val(docName);
});
});
</script>
but I can't set the index of #tempsToView with divID.
please help me what to do except this.
thank you.
You can't set a Razor variable based on something that's happening in JavaScript. Razor runs server-side, while JavaScript runs client-side, after all Razor has already been run.
Its not really clear what you need but If I get you right... I used to make this mix of Razor and Js but in the long run I realize 2 things:
It looks pretty ugly
It won't run if you move your js code to a separate .js file, because
the Razor engine does not process JS files.
So a simple and elegant solution would be to use data attributes:
#foreach (var item in tempsToView)
{
<a class="click" id="#item.TempDocumentId"
data-document-name="#item.TempDocumentName"
data-document-isbn="#item.TempDocumentIsbn">
<img id="leftSideBarElement" src="#item.TempDocumentAddressUrl" />
</a><br />
}
And then just get the data-property you need like:
$(document).ready(function () {
$(".click").click(function () {
var divID = $(this).attr('id');
alert(divID);
var docName = $(this).attr('data-document-name');
var docIsbn = $(this).attr('data-document-isbn');
//and any other property you may need
$("#documentNumber").val(docName);
});
});
That way you keep, all your HTML/Razor and JS separate, and still functional, a clean code and every element is self-sufficient.
<script>
$(document).ready(function () {
var divID = $(this).attr('id');
alert(divID);
var documentName = $(#Html.Raw(JsonConvert.SerializeObject(tempsToView )))[divID];
console.log(documentName);
});
</script>

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.

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...

Pass script tag value to input tag in html

I am trying to pass a particular variable value from the script tag to an input tag. But somehow it is not working.
I am trying to pass variable1 value from the below code from script tag to input tag.
So suppose variable1 value is John then this line in my code will look like this-
<input ONCLICK="window.location.href='some_url&textId=John'">
Below is the code
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
// some code
}
var variable1 = getUrlVars()["parameter1"];
var variable1 = unescape(variable1);
// some more code
</script>
<input ONCLICK="window.location.href='some_url&textId=variable1'">
</body>
</html>
Can anyone explain me what wrong I am doing?
Try it that way:
var variable1 = getUrlVars()["parameter1"];
variable1 = unescape(variable1);
document.getElementById('Apply').onclick = function() {
window.location.href = 'some_url&textID=' + variable1;
};
That attaches a function to the onclick event that exactly does what you want. For the initial input element simply remove the onclick attribute:
<input name="Apply" type="button" id="Apply" value="Apply" />
If you wish to perform inline functions, you need to wrap the code in an executable closure:
<input name="Apply" type="button" id="Apply" value="Apply" ONCLICK="(function() {window.location.href='your_data'})();">
As this can be largely unmaintainable, I recommend you abstract this functionality into a more organized place in your application.
(function(window, $, undefined) {
// assuming you use jQuery
$('#Apply').click(function() {
window.location.href = '';// your code
})
})(window, $);
I may be totally misunderstanding what you want to do, but I hope this helps.
The whole url parameters bit is surely unnecessary.
You can just set the value attribute in the field:
var field = document.getElementById('textfield');
var value = 'Some text';
field.addEventListener("click", function () {
this.setAttribute('value', value);
});
Here's a jsfiddle example: http://jsfiddle.net/LMpb2/
You have it inside the ' ' you need to add it into the string. So try
"window.location.href='some_url&textId='+variable1+';'"
I would change it to the following if your trying to bind the click handler to this input element:
<html>
<head>
<title>Applying</title>
</head>
<body>
<script>
function getUrlVars() {
// some code
}
var variable1 = getUrlVars()["parameter1"];
var variable1 = unescape(variable1);
document.getElementById("Apply").onclick = function() {
window.location.href='some_url&textId=' + variable1;
}
// some more code
</script>
<input name="Apply" type="button" id="Apply" value="Apply" >
</body>
</html>
I haven't tested it yet but it should work.
at onclick call a function, inside that function set window.locatio.href !
a sample
<script>
var url="www.google.com";
function myfunc(){
alert(url);
}
</script>
<input type="button" onclick="myfunc()" value="btn" >
http://jsfiddle.net/CgKHN/

Categories

Resources