Click here to Skip to main content
11,928,352 members (56,935 online)
Rate this:
Please Sign up or sign in to vote.
Im fetching JSON data using an AJAX call and theres a variable in the ajax URL that I want to change when a user types in a new variable in an input box.
E.g. it starts as www.'AAPL'.com but if a user types 'GOOG' then the variable in the url will change so the new url is

I have tried using JSONP to make this work but I cannot get the URL to change so that the new data is retrieved.

Using alert statements I see that the getTicker function is ok, then the ajaxCall function alerts the same value but the actual AJAX call is where it all fails.

Any suggestions?

	var closePrices = new Array();
	var dateArray = new Array();
	var timeStampArray = new Array();
	var timeClose = new Array();
function jsonCallback(data, ticker) {
			alert('JSON call: ' + ticker);
			console.log( data );
			//Put all the closing prices into an array and convert to floats
			for(var i=0; i < data.query.results.quote.length; i++)
				closePrices[i] = parseFloat( data.query.results.quote[i].Close );
            //displays the values in the closePrices array
			console.log( closePrices );
            //Put all the dates into an array
			for(var i=0; i < data.query.results.quote.length; i++)
				dateArray[i] = data.query.results.quote[i].date;
			//Convert all the dates into JS Timestamps
			for(var i=0; i < dateArray.length; i++)
				timeStampArray[i] = new Date( dateArray[i] ).getTime();
			for(var i=0; i<data.query.results.quote.length; i++)
				   timeClose.push( [timeStampArray[i], closePrices[i]] );
			timeClose = timeClose.reverse();
			console.log ( timeClose );
            //displays the dateArray
			console.log( dateArray );
			console.log( timeStampArray );
			// Create the chart
		$('#container').highcharts('StockChart', {
			rangeSelector : {
				selected : 1
			title : {
				text : ticker + ' Stock Price'
			series : [{
				name : ticker,
				data: timeClose,
				tooltip: {
					valueDecimals: 2
function ajaxCall(ticker) {  
    alert('ajax call: ' + ticker);
    var url = '*' + ticker +'%22%20and%20startDate%20%3D%20%222013-01-01%22%20and%20endDate%20%3D%20%222013-02-25%22&format=json&diagnostics=true&';
    //Ajax call retrieves the data from Yahoo! Finance API
	$.ajax( url, {
		dataType: "jsonp",  
		success: function(data, status){
			alert("success: " + ticker);
            jsonCallback(data, ticker);
		error: function( jqXHR, status, error ) {
			console.log( 'Error: ' + error );

//Function to get ticker symbol from input box
function getTicker() {
	    ticker = document.getElementById('userInput').value;
	    alert('user input: ' + ticker);
Posted 9-Apr-13 7:04am
Edited 9-Apr-13 7:34am

1 solution

Rate this: bad
Please Sign up or sign in to vote.

Solution 1


Since this is a continuation of your last question[^] I am putting up a small snippet to show how this can be done (Assuming parameter ticker represents value you want to replace.
function createChart(ticker) {
    $.support.cors = true;
    //Ajax call retrieves the data from Yahoo! Finance API
	type: 'GET',
	async: false,
	dataType: "json",
	url: '',
	data: { q:'SELECT * FROM WHERE symbol="' + ticker + '" AND startDate="2013-01-01" AND endDate="2013-04-3"',
	format:'json', diagnostics:true, env:'store://'},
	success: function (data, status, jqXHR) {
	    renderChart(data, status, jqXHR);
	error: function (jqXHR, status, error) {
	    console.log('Error: ' + error);

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)

  Print Answers RSS
Top Experts
Last 24hrsThis month

Advertise | Privacy | Mobile
Web01 | 2.8.151126.1 | Last Updated 9 Apr 2013
Copyright © CodeProject, 1999-2015
All Rights Reserved. Terms of Service
Layout: fixed | fluid

CodeProject, 503-250 Ferrand Drive Toronto Ontario, M3C 3G8 Canada +1 416-849-8900 x 100