I want to implement the below functionality.
I have two Jquery .js files both are imported in one HTML file and using ajax functionality. First.js has ajax function which will get the json response. If the service return success i have to call the another ajax call which is present in the Second.js
Test.Html
<!DOCTYPE html>
<html>
<head>
<meta charset="ISO-8859-1">
<title>Insert title here</title>
<script type="text/javascript" src='js/jquery.js'></script>
<script type="text/javascript" src="js/test.js"></script>
<script type="text/javascript" src="js/test1.js"></script>
</head>
<body>
<div class="ui-body">
<fieldset class="ui-grid-a">
<div id="buttondiv" class="ui-block-a"><a data-role="button" id="loginbtn" data-theme="b">Login</a></div>
<div id="loading" style="display:none"><img src='css/images/demo_wait.gif' /></div>
</fieldset>
</div>
</body>
</html>
First .js
$(document).ready(function(){
$.ajax({
.
.
.
success:function(data){
Successcall();
},
error:function(xhr){
alert("Error");
}
});
});
Second.js
$(document).ready(function(){
function Successcall(){
$.ajax({
.
.
.
success:function(data){
alert("In Second JS");
},
error:function(xhr){
alert("Error");
}
});
}
});
I am unable to call Successcall(); function from Second.js
Could some help me out on this.
The Successcall function in Second.js is out of the scope of First.js, since it is enclosed within the $(document).ready() function scope.
Muthu Kumaran’s solution would attach the Successcall function to the global object, which would work, but is quite messy IMHO.
Perhaps this would be better (put this in Second.js)
Then call my_functions.Successcall() from First.js. This way you avoid attaching functions to the global object.