Can't work out what's wrong with this code/page

JavaScript
1

Hi there,

I have the following code on a page:

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Booking Form</title>
<link rel="stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/themes/smoothness/jquery-ui.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.11.4/jquery-ui.min.js"></script>
<script src="http://code.jquery.com/jquery-migrate-1.2.1.js" type="text/javascript"></script> 

</head>

<body>

<script>
    
    // Specify the url of the whitelabel.
    var brandUrl = "https://website.com/sub-directory";

    // Specify the products to include in the search. [car = 1, bike = 2, walk = 3]
    var productTypes = "1,2,3";

    // Display form header?
    var showTitle = true;

    var useCustomCss = false;

    // Specify id of the search form parent wrapper - This is the element the forms will be inserted
    var parentId = "RemoteSearchForm";


    var remoteFormInit = function (data) { $('#' + parentId).html(data.result); }
    
    $(function () {
        var remoteUrl = brandUrl + "/remoteforms/GetForms?types=" + productTypes
            + "&showTitle=" + showTitle
            + "&customCss=" + useCustomCss;

        $.ajax({ url: remoteUrl, dataType: 'jsonp' });
    });


</script>


<div id="RemoteSearchForm"></div>

</body>
</html>

However, when I view the page, it appears blank. I’ve tried saving it as .html and .php, but the same thing happens.

When looking in the console, I see the following error:

Refused to execute script from [working url] because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.

Any ideas what I have wrong?

Thanks!

2

Hi toolman,

Looks as though the script at remoteUrl is being served as text/html rather than text/javascript. You’ll need to alter the server-side script to set the correct Content-Type header.

If the server is running PHP, you do something like this:

header("Content-Type: text/javascript");
3

Hi there toolman,

bearing in mind that I know absolutely nothing about
“JQuery”, I can say that the link in this line…

    var brandUrl = "https://website.com/sub-directory";

gives a 404. :cold_sweat:

coothead

4

Hi,

Thanks, I tried the following as I read the text/javascript is now obsolete. However, both Content-Types display the HTML on the page rather than rendering the actual code.

<?php 
header('Content-Type: application/javascript');
?>

Any ideas what would cause that?

Thanks

5

Hmm… I’ve just reread the code in your original post. What is it that should be returned from the Ajax call? Because it looks like maybe you’re trying to return HTML and insert it into the current page?

6

Hi,
yes, I’m trying to insert HTML into the page.

7

Right, in that case ignore what I said about setting the Content-Type header - you can remove that from the script.

jQuery has a built-in method to do exactly what you want: load()

var remoteUrl = brandUrl + "/remoteforms/GetForms?types=" + productTypes
    + "&showTitle=" + showTitle
    + "&customCss=" + useCustomCss;

// fetch HTML via Ajax and insert into the container
$( "#RemoteSearchForm" ).load(remoteUrl);
8

Thanks, I’ve tried the following:

$(function () {
        var remoteUrl = brandUrl + "/remoteforms/GetForms?types=" + productTypes
    + "&showTitle=" + showTitle
    + "&customCss=" + useCustomCss;
    
        // fetch HTML via Ajax and insert into the container
    $( "#RemoteSearchForm" ).load(remoteUrl);

        $.ajax({ url: remoteUrl, dataType: 'jsonp' });
    });

but I’m still getting the MIME type error:

Refused to execute script from [working url] because its MIME type ('text/html') is not executable, and strict MIME type checking is enabled.
9

Remove this line: $.ajax({ url: remoteUrl, dataType: 'jsonp' }); as you don’t need it.

10

Thanks, I’ve done that, but the page is now blank :confused: The code is all there when viewing the source. I guess I must have something else wrong in the code.

11

Are you getting any other errors in the console? Is the remote server actually returning any output?

12

I’m getting this error in FireFox console:

“The character encoding of the HTML document was not declared. The document will render with garbled text in some browser configurations if the document contains characters from outside the US-ASCII range. The character encoding of the page must be declared in the document or in the transfer protocol.”

Chrome just says:
“JQMIGRATE: Logging is active”

13

I also get this error in Chrome:

XMLHttpRequest cannot load [working url] No 'Access-Control-Allow-Origin' header is present on the requested resource. Origin 'http://website.com' is therefore not allowed access.
14

Try getting the remote server to output this header.

In PHP:

header('Access-Control-Allow-Origin: http://www.some-site.com');

where the URL is the domain of the page that’s making the Ajax request.

15

This topic was automatically closed 91 days after the last reply. New replies are no longer allowed.