i am trying to get the global variable value inside ajax,jquery function.
here i am using this code..
code:
<script type="text/javascript">
var id;
function refreshRecord(id)
{
alert(id);
}
$(document).ready(function(){
$("#refresh").click(function(){
var fileId=id;
alert("id is"+fileId);
$.ajax({
type:"post",
url:"checkStatusAndNumRecs",
data: {fileId:fileId},
success:function(data){$("#div1").html(data);},
error:function(data){$("#div1").html("It was a failure !!!");}
});
});
});
</script>
Onclick one submit button i am calling the javascript function
<input type="radio" name="submit" value="submit" onclick="refreshRecord(this.value)">
Here what i want to get is, i have declared the global variable id in script tag,
when i click on radio button the onclick event calls the javascript function refreshRecord(id) with one parameter 'id'
now that id value will be set to some value. now i want to get that variable value inside jquery function and i want to assign it to
var fileId = id;
but when i did the above code and click button.
in alert it is showing the first value correctly(i.e the alert from javascript is coming correctly) but the alert from the ajax,jquery is coming is as undefined or [Object Object]
How can i resolve this??
You need to assign the value passed to the function to the global variable id. Currently you are not assigning it. The parameter id of the function is just local to the function , it is not the same global one and the global variable id is still undefined.
Just modify as below,
var id;
function refreshRecord(value)
{
id = value;
alert(id);
}
You should put the value from the field inside the global variable:
var id;
function refreshRecord(inputValue)
{
id = inputValue;
alert(id);
}
Because if you do this:
function refreshRecord(id)
{
alert(id);
}
the id global variable won't be accessible inside the refreshRecord function because of a name conflict inside the function scope. Please read about scope to understand:
http://robertnyman.com/2008/10/09/explaining-javascript-scope-and-closures/
The argument we pass inside a function acts as a local variable to that function. So in your function you are actually creating a local variable and setting the value.
Try this instead -
var id;
function refreshRecord() {
id = $("input:radio").val();
}
Give an id to have better selector for radio button.
Related
I have a button with onclick method which calls function.
What is not clear to me, why is this inside function seen as Object? Isn't this suppose to be object calling method? In this case it is the button?
I pass only one parameter as this to the method. And this parameter correctly shows button (named parameter element inside function).
Why is this inside function not showing button inside DOM which called the method?
var test = (function() {
var test1 = {
nameT: 'test'
};
methodTesting(test1);
function methodTesting(element) {
debugger;
}
return {
methodTesting: methodTesting
}
});
<button onclick="test.methodTesting(this);" data-itest=1 data-ctest2='miran' data-ct='feri'>TEst</button>
It's not a reference to the element because you're assigning it via the onclick attribute.
Use addEventListener instead or get a reference to the element via the currentTarget property of the Event.
I am using Javascript and JQuery.
I have the following Variable var RoleID=""; and I have placed it outside of all functions.
I have a function
role_submit(){
var role=$('#emp_role').val();
var url="submitrole.php";
$.post(url, {role2: role} ,function(data){
var RoleID=data;
alert(RoleID);
})
}
This function gets the value of an <input type="text" id="emp_role"> and submits to a url='submitrole.php' using JQuery $.post and gets back an ID from url='submitrole.php' in return which is saved in RoleID and afterwards RoleID is alerted. This all is executed using <button onclick="role_submit();" type="submit">Submit</button> and works fine meaning that the ID which should come from url='submitrole.php' comes accurately and is also alerted accurately.
The issue arises when I use following function to look at the global variable var RoleID
function alert_roleID(){alert(RoleID);}
I call to this function using
<button onclick="alert_roleID();" type="submit" >Role ID</button>
This time the alert pops up showing nothing rather than the ID I got back from url='submitrole.php'. How can I get the global variable RoleID to have the value of from url='submitrole.php'?
There are two ways.
Set the variable to the window explicitly. Window is the global scope.
function role_submit(){
var role=$('#emp_role').val();
var url="submitrole.php";
$.post(url, {role2: role} ,function(data){
window.RoleID=data;
alert(RoleID);
})
}
Or define the variable in the global scope. If you do it this way, make sure you don't use var when you redefine it. If you use var it makes a new variable only visible in that scope (function).
var RoleID;
function role_submit(){
var role=$('#emp_role').val();
var url="submitrole.php";
$.post(url, {role2: role} ,function(data){
RoleID=data;
alert(RoleID);
})
}
Once you declared the variable outside, you should not use 'var' once again inside the function since this will recreate the local scoped variable instead of a global scoped variable and inaccessible outside the function. So you can remove the 'var' as below,
var RoleID = '';
role_submit(){
var role=$('#emp_role').val();
var url="submitrole.php";
$.post(url, {role2: role} ,function(data){
RoleID=data;
alert(RoleID);
})
}
I'm trying to access a global variable in testGlob1, however I'm not able to do so:
var displayVar;
function globVariable(){
displayVar="2";
}
function testGlob1(){
alert(displayVar);
}
You aren't showing how your variable is being assigned a value. Is globVariable() being called on load of the document? Im sure this would work:
var displayVar=2;
function testGlob1(){
alert(displayVar);
}
I am new to javascript & jQuery. I'm trying to create a feature for my site that let's people display badges they have earned on their own site (and I would supply a bit of code they could just copy/paste). I had someone help me with the javascript and I have it working perfectly, but I can't find any jQuery documents that explains it to me?
<script type="text/javascript">
(function(id) {
// include js via php file with the id in as a parameter
})("myid");
</script>
The id is passed in the area labeled "myid", in jQuery can you pass in a static variable this way? When I try to delete ("myid") and change it to var id = 'myid', the function no longer works.
The occurrence of "myid" in the code you are showing is not a static variable. It is a string literal that is being passed as an argument to an anonymous function. The anonymous function is declared and then is immediately getting called.
If you are wondering why the programmer wrote the JavaScript the way they did. The following might help.
Both of the examples below will display "myid" in an alert:
Example 1:
<script type="text/javascript">
var id = 'myid';
alert(id);
</script>
Example 2:
<script type="text/javascript">
(function(id) {
alert(id);
})('myid');
</script>
The first example declares "id" as a variable. It is a global variable and is actually added as a property to the window object. The second example defines an anonymous function and immediately calls it, passing in 'myid' as the value of the "id" parameter. This technique avoids using a global variable.
Of course, you could also avoid the global variable by doing the following:
<script type="text/javascript">
(function() {
var id = 'myid';
alert(id);
})();
</script>
If you stick "myid" in a variable and then pass in that variable, it'll work. Like this:
var memberID = "myid";
(function(id) {
// include js via php file with the id in as a parameter
})(memberID);
If you say this...
(function(id) {
// include js via php file with the id in as a parameter
})(var id = 'myid');
...you're attempting to stick a variable declaration in a function call, which won't work. That's why declaring the variable above and apart from the function call won't throw any errors.
i have an jscript object. I insert some html in a div, and i try to attach an event click to
an html label, all insede the object, by how can access methods and properties of object inside
jquery click event function?
HTML code:
<div id="content"></div>
JAVASCRIPT code:
<SCRIPT ...
jQuery().ready(function (){
obj=new myobject("myobject1","#content"); //create object instance
obj.dohtml(); //call method dohtml
});
//object I pass an objectname and a id from an html element
function myobject(objectname,htmlid){
this.name=objectname; //name of object
this.htmlid=htmlid; //id where i try to create some html
//say hello
this.hello=function(){
alert(hello);
}
//do something with html
this.dohtml=function(){
//create an <p> element in a the html with id=htmlid
$(this.htmlid).html('<p id="'+this.name+'_myp" > my text </p>')
//click event on <p> id= this.name+'_myp"
$("#"+this.name+'_myp').click(function(){
alert(this.name); //i try to access property this.name in the object and dont work
//how can access to this property from here
this.hello(); //how can access to this method from here
});
$("#"+this.name+'_myp').click(this.hello()); //this dont work too why?
}
}
your scope changes inside the click callback.. so you need to keep the this var stored:
var that = this;
$("#"+this.name+'_myp').click(function(){
alert(that.name); //i try to access property this.name in the object and dont work
that.hello(); //how can access to this method from here
});
For the second part:
you're executing the function and passing the return value when you do this.hello(), if you just want to pass the function, you would pass this.hello with no ()
$("#"+this.name+'_myp').click(this.hello);
it works with this because you are still in scope.