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
onEnterFrame (James Kingsley)

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

Mike Amelang

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.