My javascript won't work as it should

Question

I\'m trying to create a website in HTML which recieves JSON-formatted data using javascript and, then it will be injecting that data into my website.

The problem is

Answer 1

Try to use a Firebug (or some other browser developer tool) and in a Firebug console check errors and data received from server.

Edit: Okay. You posted your JS code. Your code looks OK. Data from server is received. If you see nothing after running this. Probably you have malformed HTML. Is in your page a div element or something other with id="output"?

Answer 2

On using firebug on your site i found out that your html contains updated data as shown here:

The problem is you are using background image that hides it on removing this line of code from your site:

<div style="z-index: 3; left: 512px; transform: rotateY(0deg);" class="page cover"> 

I get this output:

on having a closer look I found that you have two div in html that have the same ID output, so make it sure that only one div has the output id bcoz ID should be unique in html.

Answer 3

Mixing file and http is a bad because of increased security rules. I have a feeling that is the problem here. You can start up chrome so it is less strict with security rules.

Try

chrome.exe -–allow-file-access-from-files

or

chrome.exe --disable-web-security

or kiosk mode

chrome.exe  --enable-kiosk-mode

Answer 4

You're trying to implement JSONP which is a method to request data from a server in a different domain. Your data source (usually webservice) should be told to wrap its response with a function call around it. If you're data source didn't wrap the response then your client cannot receive the response if deployed to live environment although locally it works.

Here's what you can do if you have control or if you can modify your data source functions. (If not it's impossible to implement JSONP). The data source in my example is a REST Service.

//Data Source (REST Service)

 [WebGet(UriTemplate = "getdata?callback={callback}&testParam1={p1}&testParam2={p2}")]
    public void GetData(string testParam1, string testParam2, string callback)
    {
        //Callback method is one of the parameters
        WebOperationContext.Current.OutgoingResponse.ContentType = "text/xml";
        var data = _db.GetRecords(testParam1, testParam2);
        //wrap the response 
        HttpContext.Current.Response.Write(string.Format("{0}( {{ result:\"{1}\"}} )", callback, data));
    }

//Client Implementation

function GetMainMarket(holder, template, testParam1, testParam2) {
$.ajax({
    type: 'GET',
    url: 'http://localhost:2520/DataServices/getdata',
    data: { testParam1: 'test1', testParam2: 'test2' },
    dataType: 'jsonp',
    success: function (data) {
        eval(data.result);
        var output = $(template).parseTemplate(json);
        $('#' + holder).html(output);
    }
});

};

Answer 5

If this code is not working correctly for you, there must be something else going on. Per this JSFiddle the code works fine.

Check to make sure you have a div with the id of output in your HTML, and that you're actually including the script fetch.js on your page. Check the JS console of your browsers developer tools for other errors.

Edit: Your CSS image placement and h1 tag attributes are causing the data to not be displayed correctly. If I change the h1 to h2 in your CSS, the headers (such as 'Big Ben') show up properly. However, as there is no scrolling for your div output, and the image div img-cont img-1 and div front are covering up part of your output you won't ever see that entire text.

This is a CSS/layout issue, not a Javascript issue. Fix your CSS.