how to load global variables from ajax get with promisses - javascript

I am getting data to global variables in the most dummy way. At the moment:
var tranlationJson =
$.ajax({
type: "GET",
url: "translation.xml",
contentType: "text/xml",
dataType: "xml",
success: function (dataSource) {
tranlationJson=ToJasonParser(dataSource);
}
});
And i want to modify it to use promisses. The issue is that the code which follows is using third party js files so my code is like
<script
<script
var tranlationJson = $.ajax({ ...
<script 111
<script 222
and script 111 and 222 contain custom libraties which will be using the translationJson in it. So how can i ensure that the translationJson will be filled before loading the scripts?

There is global variable that you can reach from any of your scripts: window. Instead of your var translationJson = $.ajax({... you can do window.translationJson = $.ajax({.... But there are two important things here:
First is you don't know what will come first: ajax request finished or some of your script already ask for your variable. The solution is to bind all depending of your variable scripts running to $.ajax({ success: callback. Like this:
$.ajax({
type: "GET",
url: "translation.xml",
contentType: "text/xml",
dataType: "xml",
success: function (dataSource) {
tranlationJson=ToJasonParser(dataSource);
someScriptRun(); /* here you run some depending on your variable script */
}
});
Another way is to check for variable in all of dependant scripts like this:
var periodicalAttemptToRunScriptDependant = setInterval( function(){
if( 'object' == typeof window.translationJson ){
someScriptRun(); /* here you run some depending on your variable script */
clearInterval( periodicalAttemptToRunScriptDependant );
}
}, 1000 );
Second: in your example any request for a variable will cause ajax request, because it is not a variable actually but function. Try to change your code to:
var tranlationJson;
$.ajax({
type: "GET",
url: "translation.xml",
contentType: "text/xml",
dataType: "xml",
success: function (dataSource) {
tranlationJson = ToJasonParser(dataSource);
}
});

Related

Can't get jQuery var to PHP

I am trying to get a jQuery var into PHP so I can use it with mysql. I have searched everywhere but nothing seemed to solve it.
I have the following jQuery code:
$('.eventRow').click(function(){
var eventID = this.id;
$.ajax(
{
url: "index.php",
type: "POST",
data: { phpEventId: eventID},
success: function (result) {
console.log('success');
}
});
$('#hiddenBox').html(eventID);
console.log(eventID);
});
If I run this, the ID is shown in both #hiddenBox and in the console.log. The console also says "Succes" from the Ajax.
I am trying to get it in the php file:
$value = $_POST['phpEventId'];
echo "<div class = 'showNumber'>"."Nummer: ".$value."</div>";
It just says: Nummer:
It also gives no error whatsoever.
Thanks for your help!
Try
var eventID = $(this).attr('id');
Where this id comes from in your code ?
Passing it as JSON often gets the results I'm looking for. The server will interpret the JSON object as POST variables:
$.ajax({
url: "index.php",
type: "POST",
data: JSON.stringify({phpEventId: eventID}),
contentType: "application/json; charset=utf-8",
success: function (result) {
console.log(result);
}
});

GET var from php to use in javascript function

i want to get a var from a php script and use it in a function .. so if i call the var simply with $.get (and document.write) i got an result but how can i integrate this into a function ?
$.get( 'http://www.domain.de/content/entwicklung/verdienst.php', function(verdienst_php) {
//document.write(verdienst_php);
});
function sendview () {
var datastring = {uid : uid_clear, verdienst : verdienst_php};
$.ajax({
type: 'POST',
url: 'http://www.domain.de/content/entwicklung/view_succeed.php',
data: datastring,
});
}
only put the function into the $.get part didnt work
if i didnt use $.get and write in datastring like
verdienst: 1000
it works
any suggestions ?
kind regards Dave
Assuming you are returning exactly what you want from the server, store it in a variable and reference the variable in the other Ajax call.
var verdienst_php;
$.get( 'http://www.domain.de/content/entwicklung/verdienst.php',
function(response) {
verdienst_php = response;
});
function sendview () {
var datastring = {uid : uid_clear, verdienst : verdienst_php};
$.ajax({
type: 'POST',
url: 'http://www.domain.de/content/entwicklung/view_succeed.php',
data: datastring,
});
}
If you want the GET call to happen when the click happens, than you just need to put the post code inside of the GET success callback.
You have to make an extra ajax call to get php variable, you can do it this way :-
function sendview () {
var datastring = {uid : uid_clear, verdienst : getPHPVar('verdienst_php')};
$.ajax({
type: 'POST',
url: 'http://www.domain.de/content/entwicklung/view_succeed.php',
data: datastring,
});
}
function getPHPVar(varname){
var returnValue = null;
$.ajax({
url: 'yourphpurl.php',
async: false,
type: 'post',
data:{
task:'getvar',
varname: varname
},
success: function(response){
returnValue = response;
}
});
return returnValue;
}
and in PHP it will look like:
<?php
if($_POST['task'] == 'getvar'){
echo $$_POST['varname'];
}
Also, I think it's actually not needed cause you are getting php variable using ajax, and again using it in another ajax call. so Why don't you just do it in php ?

Can AJAX update a button argument?

Using AJAX, I'm able to extract a data value from a button click, but is it possible to ensure this value is passed on to an argument within another button on the same page?
test.html:
Activate
Fader
test.js:
function image_check() {
var request = $.ajax({
url: "current_image.php",
type: "GET",
dataType: "html",
success: function(data) {
alert(data);
}
});
}
The php file connects to the database and extracts the most recent image number - it works fine and the alert box displays the correct value. So what would be the next step to ensure the "image_number" argument is updated with this 'data' value?
Cheers.
make a global variable like
windows.image_number = 0;
for AJAX function.
function image_check() {
var request = $.ajax({
url: "current_image.php",
type: "GET",
dataType: "html",
success: function(data) {
//update the global variable
windows.image_number = data;
}
});
}
Assuming that the image_number variable that you are passing to the function is a globally defined variable, you simply need to set the variable in your success callback:
function image_check() {
var request = $.ajax({
url: "current_image.php",
type: "GET",
dataType: "html",
success: function(data) {
alert(data);
// Assuming data holds the image number you want to use for next click
image_number = data;
}
});
}

Passing id in jquery functions

I need to pass "hitnr" to another function.
Here's how I "get" the number:
$("#HitList").click(function(event){
event.preventDefault();
generateHitID(18);
});
Here's the part where there's nothing wrong:
function generateHitID(hitnr)
{
$.ajax({
url: "http://api.q-music.be/1.2/lists/"+hitnr+"/editions",
dataType: "jsonp",
success: function(json){
console.log(json);
lastEditionID = json.editions.length - 1;
generateHitPage(json.editions[lastEditionID].id);
alert(hitnr);
}
});
}
The alert displays 18 here, which is correct.
But when I try to request it in another function (generateHitPage) something goes wrong..
function generateHitPage(hitnr, editionID)
{
urlString = "http://api.q-music.be/1.2/lists/"+hitnr+"/editions/" + editionID;
alert(urlString);
$.ajax({
url: urlString,
dataType: "jsonp",
success: function(json){
console.log(json);
ETC.......................
The alert becomes: http://api.q-music.be/1.2/lists/340/editions/undefined
-> The number has changed from 18 to 340 for no reason at all!
I think you forgot to pass in the hitnr parameter here:
generateHitPage(json.editions[lastEditionID].id);
This should be:
generateHitPage(hitnr, json.editions[lastEditionID].id);

Calling a function from if block in success

Hello fellow programmers. I am newbie to jquery ajax.
How do i call function checkreturn() from if block or is it possible to access msg outside the success if yes then please let me know how. I need it because only if condition proves true i have to enable the subsequent textbox. Here is my code.Thanks in advance for your time and reply.Rajesh.
<script type="text/javascript" >
function checkreturn() {
document.getElementById("txtAns").removeAtrribute("disabled");
}
function cQtn(e){
var uname= $("#<%=Username.ClientID%>").val();
var sq=$("#<%=SecQuest.ClientID%>");
var sqtn = $("#<%=SecQuest.ClientID%> option:selected").text();
var sans=$("#txtAns");
var msgbox = $("#Dstatus");
$.ajax({
type: "POST",
url: "forgotpassword.aspx/CheckValidSQtn",
data: "{'uname':'"+uname+"','args':'"+sqtn+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
if (msg.d == 'Available') {
sq.removeClass("notavailablecss");
sq.addClass("availablecss");
msgbox.html('<img src="proj_mages/a.png"> <font color="Green"> Valid </font>');
//how do i call from here??
}
else {
sq.removeClass("availablecss");
sq.addClass("notavailablecss");
msgbox.html(msg.d);
}
}
});
}
</script>
You have a typo in your checkreturn function. You want to use removeAttribute, instead of removeAtrribute (double t,not double r).
Also, you can use jQuery functions:
function checkreturn(){
$('#txtAns').prop('disabled',false);
}
, instead of native DOM functions (document.getElementById, setAttribute):
not sure what why the normal way is not working but you could try forcing what the browser is supposed to do,
function checkreturn(){
document.getElementById("txtAns").removeAtrribute("disabled");
}
Becomes
window.checkreturn = function(){
document.getElementById("txtAns").removeAtrribute("disabled");
}
Then try calling via window.checkreturn(); or checkreturn(); you can also so try this the other way arround so you can leave your function and try calling window.checkreturn();
If none of these are working it would say your function is not entering the window(Global) scope for your page use Firebug or Inspector and try to all checkreturn(); see what exception you get back,
if you get a not found your not showing us some thing in your code maybe a closure or some thing
I'll look into it further but try setting async for the ajax call to false:
function checkreturn() {
document.getElementById("txtAns").removeAtrribute("disabled");
}
function cQtn(e) {
var uname= $("#<%=Username.ClientID%>").val(),
sq=$("#<%=SecQuest.ClientID%>"),
sqtn = $("#<%=SecQuest.ClientID%> option:selected").text(),
sans=$("#txtAns"),
msgbox = $("#Dstatus");
$.ajax( {
async: false,
type: "POST",
url: "forgotpassword.aspx/CheckValidSQtn",
data: "{'uname':'"+uname+"','args':'"+sqtn+"'}",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function(msg) {
if (msg.d == 'Available') {
sq.removeClass("notavailablecss");
sq.addClass("availablecss");
msgbox.html('<img src="proj_mages/a.png"> <font color="Green"> Valid </font>');
//how do i call from here??
} else {
sq.removeClass("availablecss");
sq.addClass("notavailablecss");
msgbox.html(msg.d);
}
}
} );
}
Now, when the ajax call is made, the rest of the script will wait til it completes instead of how everything continues when async is true.

Categories