conradin Posted July 27, 2010 Share Posted July 27, 2010 Hi all Im trying to load a URL into a textbox that when a user clicks submit or something like that, the url typed then loads the corresponding data into flot. The problem is I have no idea how to get it to work. Can someone walk me through this?<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"><html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8"> <title>Flot Examples</title> <link href="layout.css" rel="stylesheet" type="text/css"></link> <!--[if IE]><script language="javascript" type="text/javascript" src="flot/excanvas.min.js"></script><![endif]--> <script language="javascript" type="text/javascript" src="flot/jquery.js"></script> <script language="javascript" type="text/javascript" src="flot/jquery.flot.js"></script> </head> <body> <div id="placeholder" style="width:600px;height:300px;"></div><p><form>File name: <input id="cat" type="text" name="FileName" value="http://141.114.193.254/DataFiles/loveje/inc3.json" /><br /> <input class="fetchSeries" type="button" value="Submit dataset"> - <a href="">data</a> -</form> <script id="source" language="javascript" type="text/javascript">$(function () { var options = {}; var data = []; var placeholder = $("#placeholder"); $.plot(placeholder, data, options); // fetch one series, adding to what we got var alreadyFetched = {}; $("input.fetchSeries").click(function () { var button = $(this); // find the URL in the link right next to us var dataurl = button.siblings('a').attr('href'); // then fetch the data with jQuery function onDataReceived(series) { // extract the first coordinate pair so you can see that // data is now an ordinary Javascript object var firstcoordinate = '(' + series.data[0][0] + ', ' + series.data[0][1] + ')'; button.siblings('span').text('Fetched ' + series.label + ', first point: ' + firstcoordinate); // let's add it to our current data if (!alreadyFetched[series.label]) { alreadyFetched[series.label] = true; data.push(series); } // and plot all we got $.plot(placeholder, data, options); } $.ajax({ // usually, we'll just call the same URL, a script // connected to a database, but in this case we only // have static example files so we need to modify the // URL url: "cat.value", method: 'POST', dataType: 'json', success: onDataReceived }); }); });</script> </body></html> Link to comment Share on other sites More sharing options...
justsomeguy Posted July 27, 2010 Share Posted July 27, 2010 Doing this:url: "cat.value",is going to set the URL to the string "cat.value". You need to get the value of the element with the ID "cat", you can either use document.getElementById or use the selector with jquery. If you're having other problems, check for Javascript errors. Link to comment Share on other sites More sharing options...
conradin Posted August 3, 2010 Author Share Posted August 3, 2010 Doing this:url: "cat.value",is going to set the URL to the string "cat.value". You need to get the value of the element with the ID "cat", you can either use document.getElementById or use the selector with jquery. If you're having other problems, check for Javascript errors.Ok, I get that the url value needs to be a string. What I dont get is how to have flot load a variable without reloading the entire page. all i want to do in click on an item in the select box and have it display in the place holder in flot. Link to comment Share on other sites More sharing options...
justsomeguy Posted August 3, 2010 Share Posted August 3, 2010 I've never used or heard of flot, so I don't know either. I'm sure they build a way to do it though, and I'm sure it's listed in the documentation or examples for it. Link to comment Share on other sites More sharing options...
thescientist Posted August 3, 2010 Share Posted August 3, 2010 what about using document.getElementById() like justsomeguy suggested? It sounds like you just need to use an event handler in conjunction with a function that gets the desired text of a page element and then uses a javascript page redirect. (or the jquery function). Either way, getting the text value of an element is as simple as JSG's suggestion. Link to comment Share on other sites More sharing options...
Recommended Posts
Archived
This topic is now archived and is closed to further replies.