I have an html textbox and get the value from it with the following code:
$('#getTextBoxValue').on("click", function(){
var value = $("#textbox1").val();
});
I then attempted to pass that value to a different function
function loadPdf(pdfPath) {
var pdf = PDFJS.getDocument(pdfPath);
return pdf.then(renderPdf);
}
loadPdf(value);
But the value isn't being passed. I then attempted to do the following:
$('#getTextBoxValue').on("click",
function(){
var value = $("#textbox1").val();
alert('The Value in Textbox is '+value);
});
to see if the value was displayed, but that didn't work either (didn't get any output)
EDIT: I do get an error in the console:
ReferenceError: $ is not defined
And if I remove the $ it says ('#getTextBoxValue).on is not a function
$ is a reference to jQuery. This works for me if jQuery is included:
<input id="textbox1"></input>
<button id="getTextBoxValue">Get value</button>
$('#getTextBoxValue').on("click",
function(){
var value = $("#textbox1").val();
alert('The Value in Textbox is '+value);
});
JSFiddle example
If you wanted to do it without jQuery, use document.getElementById("textbox1").value; and add the onclick either inline or via normal javascript also:
document.getElementById("getTextBoxValue").onclick = function(){
var value = document.getElementById("textbox1").value;
alert('The Value in Textbox is '+value);
};
After you get that to work, just replace the alert with loadPdf(value);
the var value is local to the onclick function, so has to be accessed inside of that function or made global.
Once you have jQuery loaded on the page, it should be as easy as calling your helper function inside the click event.
$('#getTextBoxValue').on("click", function(){
loadPdf( $("#textbox1").val() );
});
You've tagged this as javascript but The code you are using to grab your values and bind your functions is jQuery. The error you are getting is telling you that there is no mapping of "$" to jQuery. If you want to make sure you have the reference set, you can replace the $ with the string "jQuery" so $('someselector') becomes jQuery('someselector').
BUT, this may just be the console you are using. You have another error which is probably the issue. You have this:
$('#getTextBoxValue').on("click", function(){
var value = $("#textbox1").val();
});
In this your value is locally scoped in the callback. Unless you do something with it before the function exits, you lose it completely. If you intend to do something with it later, you have to globally scope it by bringing it out of any function definition.
var value;
...
function someFunction(){
...
$('#getTextBoxValue').on("click", function(){
value = $("#textbox1").val();
});
}
The reason for this is due to scope.
You are defining your variables within the function with var.
$(document).ready(function() {
var value;
var pdf;
var value;
/* Then do your functions. This will make then global.
When you type then within your functions do not put var in front of them */
});
Related
I am working on a rating system and want to pull up each rating value by the jquery.
For this purpose I am doing like this, but I am unable to get previous event variable value into next event.
var r1Rating;
$(".rating-input").on("click",function(){
//alert($(this).attr("id"));
var r1=$(this).attr("id");
var r1Array=r1.split("-");
//alert(r1Array[r1Array.length-1]);
var r1Rating=parseInt(r1Array[r1Array.length-1]).toFixed(2);
$("#total_rating").html(r1Rating);
var r1Rating=r1Rating;
});
$(".rating-input1").on("click",function(){
alert(r1Rating); //I want to get value here
});
Any help, suggestion would be appreciated. Thanks
Even though you have a r1Rating in the external scope, since you are using var r1Rating in the click handler, you are creating a new locally scoped variable in the click handler. So any changes you make to the variable will be visible inside that method only and the variable in the external scope will not be updated.
var r1Rating;
$(".rating-input").on("click", function () {
//alert($(this).attr("id"));
var r1 = $(this).attr("id");
var r1Array = r1.split("-");
//should not use var here
r1Rating = parseInt(r1Array[r1Array.length - 1]).toFixed(2);
$("#total_rating").html(r1Rating);
});
$(".rating-input1").on("click", function () {
alert(r1Rating); //I want to get value here
});
The code below should be changes, since in this instance, you created a new r1Rating variable in a scope, which means that this was a different variable from the global one outside.
var r1Rating=r1Rating;
This should be changed to:
r1Rating=r1Rating;
I want to change the value of my "clients" variable from outside the function, with the one from inside the function(which changes when I select something), and I dont know how to do that. Please help
This is my code code
<script>
var clients;
$('#clients').on('change',function(e)
{
console.log(e);
var clients = e.target.value;
});
document.write(clients);
</script>
var keyword creates a local variable. Remove it to have access to variable from the outer scope:
var clients;
$('#clients').on('change', function(e) {
clients = e.target.value;
});
However, you should keep in mind that alert(clients) in your last line will always display undefined as the change event will be triggered later when the actual event will fire.
by using var inside the function you're redefining it in that scope, just remove var inside the function
var clients;
$('#clients').on('change',function(e)
{
console.log(e);
clients = e.target.value;
});
alert(clients);
If I have this code on my page then it works
index.html
<input type="file" name="data[Post][picture]" hidden="1" onchange="uploadPhoto(this.files)" id="PostPicture"/>
script.js
function uploadPhoto(files){
//TODO
console.log(files);
}
but that code requires me to put uploadPhoto() function out of jquery $() function. I have certain problems with variable scope and so I don't want to get my function outside of document.ready function.
for that I did something like this
$(function(){
var uploadPhoto = function(){
//TODO
console.log($('#PostPicture').files);
};
$('#PostPicture').on('change',uploadPhoto);
});
and it logs undefined in the console.
The jQuery results set does not have a files attribute, you need to access the element directly:
var files = $("#fileInput")[0].files;
or
var files = $("#fileInput").prop('files');
source: https://stackoverflow.com/a/13747921/441907
After following a google maps tutorial on tuts+, I have decided to build few of my custom functions. Link
In the 'controlZoom' function I am trying to set up some custom controls however I cannot access the 'this.gMap':
controlZoom:function(){
var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
count = this.gMap.getZoom();
plusZoom.addEventListener('click', function() {
this.gMap.zoom(count++);
});
minusZoom.addEventListener('click', function() {
this.gMap.zoom(count--);
});
}
i can access the following:
console.log(count);
but not inside the 'click'event.
I am calling my custom function here: link
When I try to click I get the following error in the console:
'Cannot read property 'zoom' of undefined '
'this' inside your event listeners is probably the plus/minus button that was clicked. You can fix this by using a 'self' variable:
controlZoom:function(){
var self = this;
var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
count = this.gMap.getZoom();
plusZoom.addEventListener('click', function() {
self.gMap.zoom(count++);
});
minusZoom.addEventListener('click', function() {
self.gMap.zoom(count--);
});
}
or using .bind:
controlZoom:function(){
var plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
minusZoom = document.getElementsByClassName('icon-minus-sign')[0],
count = this.gMap.getZoom();
plusZoom.addEventListener('click', function() {
this.gMap.zoom(count++);
}.bind(this));
minusZoom.addEventListener('click', function() {
this.gMap.zoom(count--);
}.bind(this));
}
These fixes assume that 'this' inside controlZoom is the object that has gMap! I think it is, because you say the this.gMap.getZoom() line is returning the correct count. So my two suggestions should both work, but if not, try debugging by adding
console.debug(this)
to check that 'this' is what you expect.
A note about using ++
++ is an operator, and count++ will increment count and return. But the value passed into the function will be that of count before it was incremented. You can convince yourself of this via the following console session:
var n = 0
function report(p) { console.log(p) }
report(n++)
0
You call the 'report' function with n++, which you would think might lead it to print out '1'. In fact it actually prints out '0'. This is because n is passed into report before it is incremented by ++.
In your case, the first time you call your zoom(count++) function, you are in fact calling it with the existing value of count, and then only afterwards is count incremented. So it appears as if you need two clicks to zoom in. The safe way to do this is:
plusZoom.addEventListener('click', function() {
count++;
this.gMap.zoom(count);
}.bind(this));
then you will be sure that count is incremented before you pass it to the zoom function.
You should use setZoom method instead:
this.gMap.setZoom(count++);
And you need to save reference to this and remove bind's:
var self = this,
plusZoom = document.getElementsByClassName('icon-plus-sign')[0],
// ...
and then
self.gMap.setZoom(count++);
It will work then.
In the scope of the function, gMap is not defined. Undefined variables do not have any properties, thus your zoom property won't work.
gMap is currently only defined in your prototype, and the functions that are a part of it, such as your controlZoom. When you add the click event listener's, you're not passing in gMap, and those functions do not belong to the prototype, so this.gMap won't work.
You'd have to define gMap in a global, or reference it using the prototype Mapster.
i want to get a variable (which is set when a link is clicked) over to a function and show it as a pop out.
the code as shown below:
$('a#link1').click(function(e){
e.preventDefault();
var value = 'true';
});
function exe(){
alert(value);
}
when the function is executed , all i get is value is undentified.
So anyone knows a way around it?
Variables have scope, you define the value variable in the scope of the onclick closure, and it wont be accessible outside it.
The following would work:
var value = false; //Define in the global scope
$('a#link1').click(function(e){
e.preventDefault();
value = false; //Use in a local-scope is legal.
});
function doSomething()
{
alert(value);
}
However having many global variables will make your project hard to maintain, and there are other more clean solutions available. In general i'd recommend you to read a proper book on programming though :)
Just make the variable global, or better yet "attach" it to the element using the .data():
$('a#link1').click(function(e) {
e.preventDefault();
$(this).data("value", "true");
});
Then you can always check for this:
function exe() {
alert($('a#link1').data("value"));
}
Note that it was added in jQuery 1.2.3 guess that by now it doesn't really matter though.