Solved

Can I pass a number to url line and have html page grab it and use it html pages but not active server pages

Posted on 2013-11-26
10
426 Views
Last Modified: 2013-11-27
Can I pass a url and number representing a ID TO URL Line and have it grabbed and used by a html 5 Page I know you can do this in asp and aspx pages but I wanted to know first if you could do it with standard html pages. like code samples listed below
var newLink = $('<a>')
    .attr('href', '#')
    .text( $('status', game).text() )
    .data('gameID', $('game_id', game).text() )
    .click( function(e) {
       e.preventDefault();
      window.location =
                        "DailyNCAA.html#" + $('game_id', game).text();
    });
on another html page below the number 39288 is just a hardcoded number means nothing the value I'm trying to pass and intercept would be the xmlGameID value.

 var xmlPath = '/xml/cfoot/scores/real';
                  xmlGameID = '39288';
                  gameFile = xmlPath + "/" + xmlGameID + '_' + "DRIVE.xml",

                  $.ajaxSetup({ cache: false });
                  $.ajax({
                        url: gameFile,
                        dataType: "xml"
                  })
THE value of the xmlGameID is what I would like to be captured in url line. Past from first page.If the only way is asp and aspx pages then I'll have to deal with it and go that route.
Beware of xml Drive file EE Site changes the _Drive.xml to -Drive.xml Just so you know
DailyNCAA.html
NCAAFB.xml
GamelogfilterC.html
39288-DRIVE.XML
0
Comment
Question by:powerztom
  • 4
  • 4
  • 2
10 Comments
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39680397
Hey Tom,

It is easier using a server side script - personally I use PHP. Basically you would call the page with a query string:

window.location = "DailyNCAA.php?gameID=" + $('game_id', game).text();

Open in new window

And then in the DailyNCAA.php page you would grab the value from the GET array:

<?php printf("xmlGameID = '%s';", $_GET['gameID']) ?>

Open in new window

0
 
LVL 33

Assisted Solution

by:Big Monty
Big Monty earned 100 total points
ID: 39680901
if you want strictly a client side solution, you can use this function:

var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    	// If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
    	// If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
    	// If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
    return query_string;
} ();

Open in new window


then you would access the querystring variable gameID like:

var gameID = QueryString.gameID
0
 

Author Comment

by:powerztom
ID: 39681107
i KNOW Server Side is way to go but right now I need this client side script to work. The_Big_Daddy work with me please I feel like this is it. I have scores page and link direct you to court4.html for this case example. Scores redirect looks like

var newLink = $('<a>')
    .attr('href', '#')
    .text( $('status', game).text() )
    .data('gameID', $('game_id', game).text() )
    .click( function(e) {
       e.preventDefault();
      window.location =
                        "court4.html#" + $('game_id', game).text();
    });


and I pasted this function var QueryString = function ()  into court4.html and Court4.html looks like

 var xmlPath = '.' //'/xml/nba/scores/real';
        var xmlGameID = QueryString.gameID
            $(document).ready(function(){
                  $.ajax({
                    type: "GET",
                    url: xmlPath + "/" + xmlGameID + ".xml",
                    dataType: "xml",

But I'm not getting proper output  this is court4 url dev.sportsnetwork.com/aspdata/nba2/court4.html#19039 Help me out Bro!
0
Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

 
LVL 33

Expert Comment

by:Big Monty
ID: 39681134
cant connect to dev.sportsnetwork.com/aspdata/nba2/court4.html#19039

first thing I would check is make sure your URL is correct. the one above doesn't have a gameID parameter in it, so i'm not surprised it didn't work :)

as a test, if you put court4.html?gameID=19039 directly into the address bar, does that work?
0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39681137
Tom,

If you want to set the location when a link is clicked, then there's not need to bind a click event - just use the default behaviour of the A tag.

You also need to pass the gameID as a QueryString (?gameID=xxx) and not as a named anchor (#xxx):

var newLink = $('<a>')
    .attr('href', 'court4.html?gameID=' + $('game_id', game).text() )
    .text( $('status', game).text() );

Open in new window

0
 

Author Comment

by:powerztom
ID: 39681327
This Sucks I feel like I'm so dam close but no luck. I'll post code and attach
http://dev.sportsnetwork.com/aspdata/nba2/court4.html?gameID=19039 this is line that get pass to url line for court4.html it brings you to the default court graphic you can't see unfortunately I'll post code if still no luck I guess I'll have to got .net.

court4

<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>The Court</title>


<style type="text/css">
body {
	background-color: #000;
}
#apDiv1 {
	position: absolute;
	width: 619px;
	height: 376px;
	z-index: 10;
	left: 66px;
	top: 13px;
}
.apdivtbheader {
	color: #FFF;
}
.centermid {
	font-family: "Palatino Linotype", "Book Antiqua", Palatino, serif;
	font-size: 16px;
	font-weight: bold;
	color: #000;
	text-align: center;
	vertical-align: middle;
}
.headertop {
	color: #000080;
}

.whitetext {
	font-family: "Courier New", Courier, monospace;
	font-size:30px;
	font-style: italic;
	font-weight: bold;
	color: #FFF;
	text-decoration: blink;
}
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js" type="text/javascript"></script>

    <script type="text/javascript">
	
        var xmlPath = '/xml/nba/scores/real';
        var xmlGameID = QueryString.gameID
		$(document).ready(function(){
			$.ajax({
                    type: "GET",
                    url: xmlPath + "/" + xmlGameID + ".xml",
                    dataType: "xml",
                    success: function (data) {
                        var d = $(data);
						 d.find('Team').each(function(i,Team){
          var team = $(Team);
          var vh = team.attr('vh'); // A or H...
          var sHomeOrAway = vh == 'H' ? 'home' : 'away';
          $('#txt' + sHomeOrAway).html(team.attr('name'));
		  if ($(Team).attr('vh') == "H") {
                        //convert the XML into a jQuery object
 $('#imgcourt').attr('src', 'http://dev.sportsnetwork.com/aspdata/nhl2/NBA/Images/Courts/' + team.attr('ID')  + '.png');
       $("btnv").click(function(){
    $("div8").toggle();
	var QueryString = function () {
  // This function is anonymous, is executed immediately and 
  // the return value is assigned to QueryString!
  var query_string = {};
  var query = window.location.search.substring(1);
  var vars = query.split("&");
  for (var i=0;i<vars.length;i++) {
    var pair = vars[i].split("=");
    	// If first entry with this name
    if (typeof query_string[pair[0]] === "undefined") {
      query_string[pair[0]] = pair[1];
    	// If second entry with this name
    } else if (typeof query_string[pair[0]] === "string") {
      var arr = [ query_string[pair[0]], pair[1] ];
      query_string[pair[0]] = arr;
    	// If third or later entry with this name
    } else {
      query_string[pair[0]].push(pair[1]);
    }
  } 
    return query_string;
} ();
  });    
          // loadData();
							 }
        });
					
                   
                    }
                });	
	 });	
	
		//}

        
	
function loadData() {
	
	$.ajax({
		url: xmlPath + '/' + xmlGameID + '.xml',
		dataType: "xml"
	}).done(function(data) {
		gameData = $(data);

		play = $('Play', gameData);
		currentPlayer = $('Players Player', gameData);
		playerStats = $('Individual_Statistics Player', gameData).filter( function() { return $(this).attr('ID') == currentPlayer.attr('ID') });

		var tid = currentPlayer.attr('TeamID');
		var pid =  currentPlayer.attr('ID');  
		$('#imgplayer').attr("src","http://images.sportsnetwork.com/bask/nba/atthecourt/players/" + pid + ".jpg");
		$('#imgcenter').attr('src', 'http://dev.sportsnetwork.com/aspdata/nhl2/NBA/Images/NBAlOGOSZ/'+ tid +".png");
		$('#playerName').html( currentPlayer.attr('Firstname') + ' ' + currentPlayer.attr('Lastname') + ', ' + currentPlayer.attr('Position') );
		
		$('#txttimeleft').html( play.attr('TimeLeft') );
		$('#txtplaytype').html( play.attr('PlayType') );
		$('#txtpoints').html( playerStats.attr('Points') );
		$('#txtassists').html( playerStats.attr('Assists') );
		$('#txtgameplay').html( $('narrative', play).attr('text') );
		
		//setTimeout(loadData, 3000);
	});
}
</script>

C
</head>

<body>
<table width="750" border="0">
  <tr>
    <td><div align="center" id="div8">
      <div id="apDiv1">
        <table width="650" border="0">
          <tr class="headertop">
            <td width="217" bgcolor="#FFFFFF"><div align="center" id="playerName"></div></td>
            <td width="91" bgcolor="#FFFFFF"><div align="center"><strong>TimeLeft</strong></div></td>
            <td width="107" bgcolor="#FFFFFF"><div align="center"><strong>PlayType</strong></div></td>
            <td width="87" bgcolor="#FFFFFF"><div align="center"><strong>Points</strong></div></td>
            <td width="95" bgcolor="#FFFFFF"><div align="center"><strong>Assits</strong></div></td>
          </tr>
          <tr class="apdivtbheader">
            <td height="68" class="centermid"><p><img src="Images/misc/invisibleplayer.png" name="imgplayer" width="59" height="56" id="imgplayer"></p></td>
            <td class="centermid" id="txttimeleft"></td>
            <td class="centermid" id="txtplaytype"></td>
            <td class="centermid" id="txtpoints"></td>
            <td class="centermid whitetext" id="txtassists"></td>
          </tr>
        </table>
        <table width="120" border="0">
          <tr>
            <td><p class="centermid"><img src="Images/misc/invisibleteamlogo.png" name="imgcenter" width="133" height="117" id="imgcenter"></p></td>
          </tr>
</table>
        <table width="263" border="0">
          <tr>
            <td height="18" id="txtgameplay"><p class="centermid" id="txtgameplay">&nbsp;</p>
              <p class="centermid">&nbsp;</p></td>
          </tr>
    </table>
        
      </div>
    <img src="Images/Courts/096.png" width="625" height="375" id = "imgcourt"></div></td>
  </tr>
</table>
<script>
var myVar=setInterval(function(){myTimer()},1000);

function myTimer()
{

loadData();

}
</script>
</body>
</html>

Open in new window

0
 
LVL 43

Expert Comment

by:Chris Stanyon
ID: 39681360
You're calling the QueryString function before you ever set it. Move the function definition outside of the document ready and move the call to it inside the document ready()
0
 
LVL 43

Accepted Solution

by:
Chris Stanyon earned 400 total points
ID: 39681385
Actually, you can't move the call inside the document.ready block because you're loading the XML data (only you know why!!).

Just move the call to the function so it appears after the definition:

<script>
$(document).ready(function(){
	...
});	

function loadData() {
	...	
}

var QueryString = function () {
	var query_string = {};
	var query = window.location.search.substring(1);
	var vars = query.split("&");
	for (var i=0;i<vars.length;i++) {
		var pair = vars[i].split("=");
		// If first entry with this name
		if (typeof query_string[pair[0]] === "undefined") {
			query_string[pair[0]] = pair[1];
		// If second entry with this name
		} else if (typeof query_string[pair[0]] === "string") {
			var arr = [ query_string[pair[0]], pair[1] ];
			query_string[pair[0]] = arr;
		// If third or later entry with this name
		} else {
			query_string[pair[0]].push(pair[1]);
		}
	} 
	return query_string;
} ();

var xmlPath = '/xml/nba/scores/real';
var xmlGameID = QueryString.gameID;
</script>

Open in new window

0
 

Author Closing Comment

by:powerztom
ID: 39681519
For the love of God it worked my PC is crawling today everything I do is like a all day operation. Chris thanks so much I'm gonna give a few points to Big Daddy for helping Tonight I think I'm gonna drink beer. Thanks Chris your once again the hero of the day Metallica song.
Take care.
0
 

Author Comment

by:powerztom
ID: 39682430
Chris great work on this I'm only contacting you cause you helped me with Starting five well one thing was there was no timer to updated stats during game so I added a second table with bench players but then the trouble started. I listed in the ticket what when wrong and it not that bad I good both tables to load correctly both niether table updates any stats just using the timer alter a player's xml stat it only gets updated if you manually refresh it. So if you have a moment cause that's probably all it will take for you to check it out that would be great. Thanks Chris

http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28305717.html
0

Featured Post

Free Tool: Postgres Monitoring System

A PHP and Perl based system to collect and display usage statistics from PostgreSQL databases.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a pageā€¦
How to build a simple, quick and effective accordion menu using just 15 lines of jQuery and 2 css classes
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery.: (CODE)

839 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question