ajax.open issues

Page 1 of 1

9 Replies - 455 Views - Last Post: 24 November 2011 - 07:11 PM

#1 m_hatcher  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 57
  • Joined: 12-December 09

ajax.open issues

Posted 24 November 2011 - 08:48 AM

I am working on single page that grabs data from a server and populates certain page areas depending on what is grabbed from a select box. I have my select box grabbing the data and populating the box with no errors. But when I try and select a name from the box my page does nothing. I thought that I was having trouble getting the data from the sever so I made a .txt file in my wamp directory and tried that but I cant open that either. I created a function to executed when I select a name from the box by using onchange. I also tried the 
$('#DOM').onchange('URL');


method but could not get it to work either.

I know I should use a php file and a javascript but I have done both on the same page until I finish the development and then i switch them.

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>Baby Names</title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<!-- stop the web browser from ever caching this page or its images -->
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<!-- instructor-provided CSS stylesheet and favicon; do not modify -->
		<link href="names.css" type="text/css" rel="stylesheet" />
		<!-- instructor-provided Javascript files; do not modify -->
		<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
		<!-- your file -->
		<!--<script src="names.js" type="text/javascript"></script>-->
		<script>
		
			window.onload  = function()
				{
					<?= $names = file("http://isat-cit.marshall.edu/babynames.php?type=list"); ?>;
					$("babyselect").onchange = namePicked;
				};
			
			function namePicked(myForm)
				{	
					var ajax = new XMLHttpRequest();
					ajax.open("GET", "nameMeaning.txt", "false");
					ajax.send(null);
					$("meaning").value = ajax.responseText;
					alert(ajax.responseText);
					//var selectedIndex = myForm.babyselect.selectedIndex;
					//var selectedName = myForm.babyselect.options[selectedIndex].text;
					//var nameMeaning1 = "http://isat-cit.marshall.edu/babynames.php?type=meaning&name=";
					//var nameMeaning2 = nameMeaning1+ selectedName;
					
					//$('#meaning').load('nameMeaning2'); 
					
					//alert(nameMeaning2);
					
				}
		</script>
	</head>

	<body>
		<h1>Baby Names Redux</h1>

		<fieldset id="namearea">
			<legend>Name:</legend>
			<!-- list of baby names-->
				<form name='myform'>
					<select name="babyselect" id="babyselect" onchange="namePicked(this.form)">
						<option value="">Select a name...</option>
						<?php
						foreach ($names as $nameValue => $name)
							{
								print '<option value="'.$nameValue.'">'.$name.'</option>';
							}
						?>
					</select>
				</form>
		</fieldset>


		<!-- baby ranking data should be graphed into the div below -->
		<div id="graph">
					
		</div>

		<fieldset id="meaningarea">
		<legend>Origin/Meaning:</legend>
			<!-- baby name meaning data should be inserted into the paragraph below -->
			<p id="meaning">
			
			</p>
		</fieldset>

		
		<!-- an empty div for inserting any error text -->
		<div id="errors"></div>

	</body>
</html>

This post has been edited by Atli: 24 November 2011 - 09:07 AM
Reason for edit:: Added the attached code into the post. It's easier for everybody if you just post your code, rather than attach it.


Is This A Good Question/Topic? 0
  • +

Replies To: ajax.open issues

#2 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: ajax.open issues

Posted 24 November 2011 - 09:34 AM

Hey.

I'm guessing this would be part of the problem:
ajax.open("GET", "nameMeaning.txt", "false");

The third parameter, which takes a Boolean to indicate whether it is asynchronous, must be just that: a Boolean. You've used the string "false" which when implicitly converted to a Boolean will actually be TRUE.

This causes the AJAX to execute asynchronously which will make your use of the ajax.responseText property a few lines later invalid.

Also, there are a few other things I would point out:

  • Why are you using XMLHttpResponse objects when you have already loaded jQuery into the page? You can use the jQuery.get method to execute AJAX queries in a much simpler way:
    $.get("path/to/file.txt", function(data) {
    alert("Data received: " + data);
}, "text");



  • This line is kind of odd:
    <?= $names = file("http://isat-cit.marshall.edu/babynames.php?type=list"); ?>;

    Why are you echoing the PHP array? This should just print "Array;" into the Javascript, doing nothing. You could just as well move the PHP code down down to where the foreach loop is populating the <select> box. - Keep in mind that PHP executes on the server, long before the Javascript is executed, so putting PHP code into the Javascript events won't make it execute with the Javascript event.


  • This is also incorrect:
    $("babyselect").onchange = namePicked;

    There is no onchange property on jQuery objects. You can set jQuery Events either by calling a function matching the event name or by using the .bind() function.
    // Either
$("#id").change(callbackFun);

// Or
$("#id").bind("change", callbackFunc);

Was This Post Helpful? 1
  • +
  • -

#3 m_hatcher  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 57
  • Joined: 12-December 09

Re: ajax.open issues

Posted 24 November 2011 - 10:30 AM

I didnt even realize that I had added quotes around false which is exactly what was wrong with it. Now on to things pointed out to me. I am using the XMLHttpResponse objects because I tried to implement the jQuery.get method kept getting that my $.get was not a function., so i tried a different way.
$.get("nameMeaning.txt", function(data) {
						$('.meaning').html(data);
						alert("name means: " + data);
					});

with ".meaning" being my id where i wanted in insert the data.

To the reason that I had some php in my .onload javascript was I had yet to move it down to my php loop, but that was the end goal.

This post has been edited by m_hatcher: 24 November 2011 - 10:31 AM

Was This Post Helpful? 0
  • +
  • -

#4 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: ajax.open issues

Posted 24 November 2011 - 10:57 AM

View Postm_hatcher, on 24 November 2011 - 05:30 PM, said:

with ".meaning" being my id where i wanted in insert the data.

That selector would search for elements with the CSS class "meaning" applied to it, not elements with the id "meaning". jQuery uses much the same selectors as CSS does.
// Looks for <meaning> elements.
$("meaning")

// Looks for elements with the "meaning" class
$(".meaning")

// Looks for the element with the "meaning" id
$("#meaning")

See: Selectors, in the jQuery docs.
Was This Post Helpful? 1
  • +
  • -

#5 m_hatcher  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 57
  • Joined: 12-December 09

Re: ajax.open issues

Posted 24 November 2011 - 11:25 AM

Ok that helps me understand why I couldn't even get my alert to show. I am messing with the jquery.get method you suggested and I keep getting a console error that my $.get is not a function. I looked over the code and it follows the syntax from the jquery site.
Was This Post Helpful? 0
  • +
  • -

#6 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: ajax.open issues

Posted 24 November 2011 - 11:42 AM

Ahh ok. I see. You aren't actually using jQuery. I just saw the $("#DOM") reference in your original post and assumed the two script includes in your header were jQuery and jQuery UI. On closer inspection, you are including Prototype and Scriptaculous. They use a different syntax than jQuery.

I haven't used it much, but as I understand it you use $("elem_id") to fetch a single element with the given ID, and $$("selector") to use a more CSS like selector to find elements.

Also see the Prototype Ajax.Request object instead of the $.get function.
Was This Post Helpful? 1
  • +
  • -

#7 m_hatcher  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 57
  • Joined: 12-December 09

Re: ajax.open issues

Posted 24 November 2011 - 12:36 PM

I did some looking into the prototype ajax.request method and I came up with this
new Ajax.Request('nameMeaning.txt', 
						{
							method:'get',
							onSuccess: function(transport) {
							$('meaning').insert(transport.responseText);
						},
					});


which does exactly like I wanted. I added the insert method
$('meaning').insert(transport.responseText);

which inserts the data from the .txt file and inserts into the element with a id of meaning.
Was This Post Helpful? 0
  • +
  • -

#8 m_hatcher  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 57
  • Joined: 12-December 09

Re: ajax.open issues

Posted 24 November 2011 - 06:31 PM

So I had a chance to mess with the code a little more and I am wondering if there is a way to insert a variable into the url spot of the Ajax.Request function? Right now I am just using a file I put on my server called nameMeaning.txt and am pulling the string and inserting it into my page. But my end goal is to be able to use a actually url that is in a variable to grab data from another server. But the url is built using the selected name from a select box.
I know that my code is shown in my first post but it has changed so im gonna show the entire code again
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">

	<head>
		<title>Baby Names</title>
		<meta http-equiv="Content-type" content="text/html; charset=utf-8" />
		<!-- stop the web browser from ever caching this page or its images -->
		<meta http-equiv="Cache-Control" content="no-cache" />
		<meta http-equiv="Pragma" content="no-cache" />
		<meta http-equiv="Expires" content="0" />
		<!-- instructor-provided CSS stylesheet and favicon; do not modify -->
		<link href="names.css" type="text/css" rel="stylesheet" />
		<!-- instructor-provided Javascript files; do not modify -->
		<script src="http://ajax.googleapis.com/ajax/libs/prototype/1.6.1.0/prototype.js" type="text/javascript"></script>
		<script src="http://ajax.googleapis.com/ajax/libs/scriptaculous/1.8.3/scriptaculous.js" type="text/javascript"></script>
		<!-- your file -->
		<!--<script src="names.js" type="text/javascript"></script>-->
		<script>
		
			window.onload  = function()
				{
					
				};
			
			function namePicked(myForm)
				{	
				
					document.getElementById('meaning').innerHTML = "";
				
					var selectedIndex = myForm.babyselect.selectedIndex;
					var selectedName = myForm.babyselect.options[selectedIndex].text;
					var nameMeaning1 = "http://isat-cit.marshall.edu/babynames.php?type=meaning&name=";
					var nameMeaning2 = nameMeaning1+ selectedName;
					var test = ".txt";
					
					new Ajax.Request('nameMeaning.txt', 
						{
							method:'get',
							onSuccess: function(transport) {
							$('meaning').insert(transport.responseText);
						},
					});
					
				}
		</script>
	</head>

	<body>
		<h1>Baby Names Redux</h1>

		<fieldset id="namearea">
			<legend>Name:</legend>
			<!-- list of baby names-->
				<form name='myform'>
					<select name="babyselect" id="babyselect" onchange="namePicked(this.form)">
						<option value="">Select a name...</option>
						<?php
						$names = file("http://isat-cit.marshall.edu/babynames.php?type=list");	
						foreach ($names as $nameValue => $name)
							{
								print '<option value="'.$nameValue.'">'.$name.'</option>';
							}
						?>
					</select>
				</form>
		</fieldset>


		<!-- baby ranking data should be graphed into the div below -->
		<div id="graph">
					
		</div>

		<fieldset id="meaningarea">
		<legend>Origin/Meaning:</legend>
			<!-- baby name meaning data should be inserted into the paragraph below -->
			<p id="meaning"></p>
		</fieldset>

		
		<!-- an empty div for inserting any error text -->
		<div id="errors"></div>

	</body>
</html>

Was This Post Helpful? 0
  • +
  • -

#9 Atli  Icon User is offline

  • D.I.C Lover
  • member icon

Reputation: 3044
  • View blog
  • Posts: 4,556
  • Joined: 08-June 10

Re: ajax.open issues

Posted 24 November 2011 - 06:43 PM

Sure, you can put the URL into a variable and hand that off to the Ajax.Request object if you want.
// This:
new Ajax.Request('nameMeaning.txt', ...);

// Is the equivalent of this:
var url = 'nameMeaning.txt';
new Ajax.Request(url, ...);


Which means you could just as well do:
var url = "getNameMeaning.php?name=";

var select = document.getElementById("my_select");
url += select.value;

new Ajax.Request(url, ...);

Was This Post Helpful? 1
  • +
  • -

#10 m_hatcher  Icon User is offline

  • D.I.C Head

Reputation: 1
  • View blog
  • Posts: 57
  • Joined: 12-December 09

Re: ajax.open issues

Posted 24 November 2011 - 07:11 PM

Thanks a ton, you have been super helpful.
Was This Post Helpful? 0
  • +
  • -
Page 1 of 1