jQuery Ajax call on a button trigger fails
Jul 25, 2013
Hello all,
I have a snippet of jQuery code that successfully updates data in a SurveyGizmo survey when I run the following code within a separate html file: (the first line of gibberish below is not my code, I just don't know how to post code to the forum)
Normal 0 false false false oNotPromoteQF /> EN-US X-NONE X-NONE ontGrowAutofit />
$.ajax({
type: "GET",
dataType: "json",
url: "https://restapi.surveygizmo.com/v3/survey/<surveynumber>/surveyresponse/1?user:pass=xyz:xyz&_method=POST&data[18]=<updateddata>"
});
When I place this same code within the javascript trigger of a button in Storyline, nothing happens. I have included the jQuery library in my story.html file. And I know jQuery runs successfully in this trigger because I can successfully run the following code in the trigger alone:
alert( $(window).height() );
Also, I don't know how to debug/troubleshoot since I'm not aware of something like Firebug to run in order to give me insight into what's happening with the code. Thank you very much for your help in advance.
Mike A
3 Replies
Hi Mike -
Jquery is beyond what I personally can help with you, but I have some examples on loading new windows using JavaScript. Maybe something from one of those examples could help?
Here's a demo and the source file.
Hi Mike,
When I start doing more advance JS/jquery stuff in Storyline I usually move it all into a function and then set the trigger to call that function. This requires a bit of planning and editing the user.js after publish. In your case I might set the js trigger to run something like:
postData("my_data")
Then add a function to user.js (after publishing the course) like
function postData(data){
$.ajax({
type: "GET",
dataType: "json",
url: "https://restapi.surveygizmo.com/v3/survey//surveyresponse/1?user:pass=xyz:xyz&_method=POST&data[18]="+data
});
}
I also load jquery in the user.js hear is an actual piece of code from one of my courses (minus the server name):
var fileref = document.createElement('script')
fileref.setAttribute("type", "text/javascript")
fileref.setAttribute("src", "//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js")
document.getElementsByTagName("head")[0].appendChild(fileref);
function postUpdate(chapter) {
$.ajax({
url: 'http://server.com/secure/store-quizz-progress?chapter=' + chapter,
type: 'GET',
crossDomain: true,
dataType: 'jsonp',
success: function() {},
error: function() {},
});
}
You can use the error/success functions to add some debugging. I prefer console.log to alerts. This will write out to whatever developer console you are using (like Firebug). I just have to remember that it will cause the average IE browser to choke since most folks don't have the IE Dev tools installed.
All that said... I suspect its a cross domain or cross security issue. Note in my example I am setting crossdomain = true and telling it use "jsonp".
Hope that helps
Yahoo! Your code was extremely helpful. I can now add a new response to a SurveyGizmo survey from Storyline. It only works if I load jquery by your method, not simply a reference at the beginning of the file.
Here's a couple follow up questions:
1. Any idea why---even when the SurveyGizmo data is successfully updated---that the ajax response is always "error"?
2. On a related note, how can I use console.log when running javascript within Storyline? The javascript is running within Storyline and not any browser.
Thanks again!
MikeA
This discussion is closed. You can start a new discussion or contact Articulate Support.