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
427 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
Webinar: Aligning, Automating, Winning

Join Dan Russo, Senior Manager of Operations Intelligence, for an in-depth discussion on how Dealertrack, leading provider of integrated digital solutions for the automotive industry, transformed their DevOps processes to increase collaboration and move with greater velocity.

 
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

Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

Question has a verified solution.

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

Suggested Solutions

Title # Comments Views Activity
PHP: Filling Out/Creating a PDF 29 97
ASP and Extracting XML 7 27
modify change color of text 9 36
Table header must be on top 2 27
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
This article discusses how to implement server side field validation and display customized error messages to the client.
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)

749 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