The Instructure Community will enter a read-only state on November 22, 2025 as we prepare to migrate to our new Community platform in early December. Read our blog post for more info about this change.
Found this content helpful? Log in or sign up to leave a like!
The "while(1);" appears when there is no "Content-Type: application/json" header with the request. Adding this line before your .send() will tell Canvas that your application can handle JSON and it won't send it.
xhr.setRequestHeader('Content-Type', 'application/json');Also, if you're wondering how to display code here in the Community, you go to the More button on the toolbar and choose Syntax Highlighter.
I am not sure if this is available through the mobile apps, but there are some improvements in JavaScript that make the pure JavaScript approach of fetching data easier to handle. The fetch method allows you to set up a promise, which greatly simplifies things. I've not used it in any code I've published -- just started using it in some test code.
I've just come across this page: Getting Started With The Api: Canvas Dev and Friends which suggests that I can read from the api with whatever rights the logged in user has:
This is for the web UI through a browser. You don't need an access token through the web interface because there is a CSRF token called _csrf_token that provides credentials. It is a cookie and included as part of requests and often returned as part of the response. The jquery exposed from Canvas has modified the AJAX setup to automatically send that for you so that you don't need to include it.
For example, here are the cookies that were sent to Canvas and what came back when I loaded home page for one of my courses.
There were two times that I had to manually include a CSRF token. I may not have needed to in one case, but I'm pretty sure it wasn't working until I did.
One of those was with a POST through jQuery's .ajax method ($.ajax). This is the code I used to obtain the _csrf_token from the cookie list.
function getCsrfToken() {
var csrfRegex = new RegExp('^_csrf_token=(.*)$');
var csrf;
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i].trim();
var match = csrfRegex.exec(cookie);
if (match) {
csrf = decodeURIComponent(match[1]);
break;
}
}
return csrf;
}The other place I had to use it was when I was doing it through pure JavaScript. This is a snippet -- the url, parms, and csrf were already assigned.
var jparm = JSON.stringify(parms);
var xhr = new XMLHttpRequest();
xhr.open('PUT', url);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.setRequestHeader('X-CSRF-Token', csrf);
xhr.send(jparm);Again, this is all done with the web UI through a browser, I'm not sure how much of it works for mobile, but it might give you something to go off of.
I know, I have used the form correctly 
The other files targeting the desktop browser version works as expected.
Using plain JS, I am aware that there is no jQuery support in the app.
However, I just got the alert to show up when I use the Teacher app, and hit Edit page. So the script loads, sometimes at least.
Also, there seems to be some sort of cache issue. When I load CSS, it takes forever for the changes to kick in, and it seems to be happening randomly.
I'm testing the iOS apps, and I use a Mac. How do I access debugging tools for these apps?
Thanks for replying btw
Not much to share really,it's just an alert box. Nothing fancy, looks like this:
:
Community help
To interact with Panda Bot, our automated chatbot, you need to sign up or log in:
Sign in