Change asp variable in Javascript? - javascript

I'm editing a previous coworkers code so I don't know 100% how it works. It is written in Javascript and ASP. Here is the current code
<script>
var sessionDone = 0;
<% if session(ReturnSessionID()) = 1 then %>
sessionDone = 1;
<% endif %>
</script>
and then there is some html with links, like this:
<a href='#'>link</a>
What I want is this:
<script>
var sessionDone = 0;
var counter = 0;
$('a').click( function() {
sessionDone = 1;
if (counter == 3) {
<% session(ReturnSessionID()) = 1 %>
} else {
counter += 1;
}
});
</script>
When I do this, the line
<% session(ReturnSessionID()) = 1 %>
automatically gets run even if the if statement isn't true and even if I did not click a link. How do I make the link only get executed when counter is 3?
Note: I do not know ASP and I don't really need to learn it, this is the only time I will be using it.

ASP is being executed on the server. The resulting HTML/JavaScript is being sent to the browser and then there the JavaScript is being executed. You cannot mix it like this.
When you want client-side JS to update a server-side variable, you have to make a request from the client to the server, which tells the server to update the variable.

Related

Cannot get the number of var using javascript

I have this certain problem where I cannot get the number value of 'currentStock' var data inside an HTML file using JavaScript. I have this on my HTML file in script tag:
By the way, due to the HTML being too large, and also it was not originally my script, but from a friend who was asking for some help on adding some features in it, I can't upload the whole script as it will be going to be too long. The whole HTML script has 14076 characters with 289 lines.
I have only studied java and not javascript with HTML, so I need help with this one.
<script>
window.onload = function() {
var goDown = document.getElementById('uniqueNav');
var goRight = document.querySelector('.clothesNav');
var goUp = document.querySelector('.shrink');
goDown.style.marginTop = "0px";
goRight.style.marginLeft = "5px";
goUp.style.height = "0px";
}
$('document').ready(function(){
var name = "Ombre Printed Shirt";
var price = "P499.00";
var initialStock = 0;
var currentStock = initialStock;
document.querySelector('#clothTitle').innerHTML = "" +name;
document.querySelector('#clothPrice').innerHTML = "Price: " +price;
document.querySelector('#PITitle').innerHTML = "" +name;
document.querySelector('#PIPrice').innerHTML = "Price: " +price;
document.querySelector('#currentStock').innerHTML = "CurrentStocks: " +currentStock;
}); //------------------------Change This Every Document ----------------------------//
</script>
then this in my JavaScript File:
var cStocks = document.getElementById('currentStock').data;
alert(typeof cStocks);
alert("Data in cStocks = " + cStocks);
if (!cStocks) {cStocks = 0; alert("cStocks, not a valid number");}
if ((cStocks <= 0) == true)
{
document.querySelector('.clothButton').style.display='none';
document.querySelector('.clothButtonDisabled').style.display='flex';
}
else
{
document.querySelector('.clothButton').style.display='flex';
document.querySelector('.clothButtonDisabled').style.display='none';
}
upon loading the page, the alert says thaat the data type is undefined. I don't know what's happening with my code. did I miss something?
By the way, I have JQuery on my HTML page. it says JQuery v3.3.1 as a version
It doesn't look to me like #currentStock will have a data attribute, or value attribute (which is for inputs), so of course the js returns undefined. Right now it looks like #currentStock is having the innerHTML set on the document.ready to Current Stocks: 0
You do have an accessible variable, currentStock, which is defined during document.ready. Why aren't you accessing it directly? It will have the numeric value in it already. All you can get from #currentStock is the html you generated on document.ready, and you'd have to parse the number out of it, when it's available in raw form in the js variable currentStock.

Converting VBScript array to Java Script Array in classic ASP

I have a classic ASP page which is written in VB script, and there is a script tag which Java Script is used as below.
I am trying to cast VB Script Array(codeList) to Java Script Array(availableCode) with for loop but the first row of VB Script Array keeps being casted in every row of Java Script Array.
$(document).ready( function(){
var availableCode = new Array();
for (idx=0; idx < 3; idx++)
{
availableCode[idx]=<%=codeList(idx)%>;
alert (idx);
alert (<%=codeList(idx)%>);
alert (availableCode[idx]);
}
});
I tried the below as well but getting a syntax error.
availableCode[idx]=<%=codeList(%> idx <%)%>;
Could anyone advise how to cast expected values? Thank you.
I think you need to do it the other way round ie create your index (idx) within VBScript, then write it to the Javascript:
$(document).ready( function(){
var availableCode = new Array();
<%
dim idx
for idx = 0 to UBound(codeList)
%>
availableCode[<%=idx %>] = <%= codeList(idx) %>;
alert (<%= idx %>);
alert (<%= codeList(idx) %>);
alert (availableCode[<%= idx %>]);
<% next %>
});
if the elements of codeList are string values, you will need to quote to prevent javascript errors
$(document).ready( function(){
var availableCode = new Array();
<%
dim idx
for idx = 0 to UBound(codeList)
%>
availableCode[<%=idx %>] = '<%= codeList(idx) %>'; // quote here
alert (<%=idx %>);
alert ('<%= codeList(idx) %>'); // quote here
alert (availableCode[<%= idx %>]);
<% next %>
});
The issue you were having I believe was that idx did not exist on the server-side (VBScript) and therefore when used in this statement <%= codeList(idx) %>, idx was being converted implicitly to 0. Thus always returning the value in codeList(0).
You can use Join() to output your array: this will also make your client-side code more compact.
$(document).ready( function(){
var availableCode = ['<%=Join(codeList, "','")%>'];

Can We Append (Chunk of) HTML in jQuery using Html.Partial Helper? C# ASP.Net MVC 5

As the title suggests, I have a chunk of HTML which I put in one of my PartialView:
<div id="meaningPart">
#Html.Partial("_Meaning", new MeaningModel() {number = 1})
</div>
where my _Meaning partial View looks like this:
<div class="chunk">
<!--a lot of html here-->
</div>
Then, I create a jQuery which respond to a <input type="number"/> event (up and down) like the following:
<input id="numberMeaning" type="number" class = "col-md-2 form-control form-control-plus number-input" min = "0" max = "99" value = "1"/>
$(document).ready(function () {
var iCnt = 0;
$("#numberMeaning").on('change', function () {
var num = parseInt($("#numberMeaning").val());
if (num > iCnt) { //up
iCnt++;
$("#meaningPart").append("<p>ok dude, this is really a new item!</p>");
} else { //down
iCnt--;
}
});
});
now, the above code works fine because I simply put "<p>ok dude, this is really a new item!</p>" in the jQuery append, but if I change this part:
$("#meaningPart").append("<p>ok dude, this is really a new item!</p>");
Into
$("#meaningPart").append("#Html.Partial("_Meaning", new MeaningModel() {number = 2})"); //by right, the number should follow iCnt here.
Then, although the razor engine shows that the syntax is correct, the new Partial HTML just doesn't render.
How do we create a new partial HTML using jQuery? Is that possible?
(I am not too familiar with template attribute or jQuery.clone - but if it anyone can show how the adding to the html element can be done using those, I am open to that too)
try it like below
$(document).ready(function () {
var iCnt = 0;
$("#numberMeaning").on('change', function () {
var num = parseInt($("#numberMeaning").val());
if (num > iCnt) { //up
iCnt++;
// your GET /Controller/Action should return "partial HTML" based on iCnt
$("#meaningPart").append($('<div>').load("/Controller/Action?iCnt=" + iCnt));
} else { //down
iCnt--;
}
});
});
your Action in Controller like
public ActionResult Action(int iCnt)
{
//get model based on 'iCnt'
var model = GetModel(iCnt);
return PartialView("~/views/Folder/partialview.cshtml", model);
}
You can use $('#selector').html(content) where content is your template. I cannot imagine to create a partial view using jquery
Short answer: No.
Please be aware of the difference between
JavaScript (Jquery) and
MVC/ASP.Net (Razor).
JavaScript is executed on the client site in the browser.
MVC is executed on the server.
So the server is reading the razor stuff and creating a valid HTML page from it.
This is delivered to the browser.
The browser is creating something the user can see and then is executing the JavaScript.
So what you are doing in your example is trying to get JavaScript to execute a Razor function.
The only way to do something like that would be to use AJAX.
You can do it.
First you need to put the chunk of your partial html to a js var inside your main .cshtml file.
<script>
var chunkHtml = "#Html.Partial("_Meaning", new MeaningModel() {number = 2})"
</script>
and then do your append in your javascript file.
$("#meaningPart").append(chunkHtml);

How to loop in a js that lie in a jsp page

I have a jsp page wherein I've used javascript function and I'm calling this using onClick present inside a form:
<script type="text/javascript">
function fa(){
<%
String as = null;
int aa =10;
for(int q =0; q<=aa ; q++){
if(q==5){
as="asds";
}
}
%>
<%= as%>
}
</script>
I'm a little confused about using javascript in a jsp page. How do I use the for loop? Usually, for loop can be called directly inside a js but since this is a jsp page, how will I use it? Do I have to call forEach instead? Right now, this code does not work.
You can use the for loop of JavaScript itself.
<script type="text/javascript">
function fa(){
var as = null;
var aa =10;
for(var q =0; q<=(Number)aa ; q++){
if((Number)q==(Number)5){
as="asds";
}
}
alert(as);
}
</script>

Not sure how to do ajax functions inside of Javascript to get to mysql

I'm not quite sure how to go about putting an ajax function inside of my Javascript timer so that every time it restarts then it'll add one of the item into the database. I've been looking and I found this: http://www.tizag.com/ajaxTutorial/ajax-mysql-database.php but I'm not quite sure how to implement it into the code, so if you could help me it'd be appreciated.
Here's my code so far:
<head>
<script type="text/javascript">
var c=10;
var mineCount = 0;
var t;
var timer_is_on=0;
function timedCount() {
document.getElementById('txt').value = c;
c = c - 1;
if (c <= -1) {
mineCount++;
var _message = "You have mined " + mineCount + " iron ore" + (((mineCount > 1) ? "s" : "") + "!");
document.getElementById('message').innerHTML = _message;
startover();
}
}
function startover() {
c = 10;
clearTimeout(t);
timer_is_on=0;
doMining();
}
function doMining() {
if (!timer_is_on) {
timer_is_on = true;
t = setInterval(function () {
timedCount();
}, 1000);
}
}
</script>
<SPAN STYLE="float:left">
<form>
<input type="button" value="Mining" onClick="doMining()">
<input type="text" id="txt">
</form>
</SPAN>
<html>
<center>
<div id='message'></div>
try including jquery and put $.post('path/to/file.php', {param1: value1}); in your doMining() function
Idea of AJAX is, we will send sync/async request to server from the client side by using any scripting language like Javascript, and in server side processing we will do the desired functionality and send response as required.
I am not sure about PHP, as i generally work in dotnet.
So in PHP i hope there would be some way to create a web service or to create a web page, in that Page or Service get the appropriate parameters by using query string or post and then call the desired functionality of updating the DB. Then you can write in response to send the response back to JS client. JS can parse the reponse and can update UI as required.
Some references:
Using XmlHttp in Javascript

Categories