Javascript questions which don't deserve their own thread.

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Vanadium posted:

document.getElementById("a").onchange = function() { return an_object.onchange(); };

There is also call: https://developer.mozilla.org/en/Core_JavaScript_1.5_Reference/Objects/Function/call

code:

an_object.change_now.call(an_object);

You can also use private methods which will execute in the scope of the parent and avoid using "this" altogether if say_hooray is only accessed interally.

# ? May 21, 2010 15:04

Adbot: ADBOT LOVES YOU

# ? May 21, 2024 00:42

karms: Jan 22, 2006; by Nyc_Tattoo; Yam Slacker

Lumpy posted:

You can also use private methods which will execute in the scope of the parent and avoid using "this" altogether if say_hooray is only accessed interally.

That's even cooler! Hmm, letss see if crockford can give me some great examples of this..

# ? May 21, 2010 15:49

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

KARMA! posted:

That's even cooler! Hmm, letss see if crockford can give me some great examples of this..

I'm no Crockford, but:

code:

SomeObj = function(){

  var privateVar = 'private';
  var privateFunction = function(){
    alert( privateVar );
  }

  return {
    
     publicVar: "public",
     publicFunc: function(){
       privateFunction();
     }
  }
}

var bob = SomeObj();
bob.publicFunc(); // alerts 'private'

# ? May 21, 2010 15:54

sim: Sep 24, 2003

Anyone familiar with SWFObject know if I can add a Flash param using static publishing? I ask because a client is publishing videos on their blog by copying and pasting an embed code. Unfortunately I need a param value in there for every video, which I could easily do with dynamic publishing but I'm not sure if its possible when I'm using swfobject.registerObject().

# ? May 21, 2010 17:42

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

You could also use a "that" variable which keeps a record of "this" from the constructor.

code:

<select id="a">
    <option>1</option>
    <option>2</option>
    <option>3</option>
</select>
<script>
obj = function()
{
    var that = this;
    this.change_now = function()
    {
        console.log('Where does /that/ point to?');
        console.log(that);
        
        that.say_hooray(); // hj;alp
    }
    this.say_hooray = function()
    {
        alert('Hooray!');
    }
}

an_object = new obj();

document.getElementById("a").onchange = an_object.change_now;
</script>

peepsalot fucked around with this message at 18:53 on May 21, 2010

# ? May 21, 2010 18:39

grilldos: Mar 27, 2004; BUST A LOAF
IN THIS
YEAST CONFECTION; Grimey Drawer

I'd like to set up an iGoogle gadget that throws up an iframe of the forums' usercp.php which strips out everything except the thread list and number of unread posts. The gadget part is easy as hell, but my JavaScript skills are lacking. How should I attack it?

# ? May 27, 2010 00:09

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

Haven't looked at igoogle gadgets at all, so I don't know exactly how it works, but there's two main ways I could see being able to strip out the relevant data.

1) You could try to make a stylesheet that hides all the parts of the page you don't want, append a link element to the page which points to your css sheet, then just show the page in your iframe.
2) You could loop through each element in javascript and extract the relevant info, and append it to the body of your iframe

Number 2 is probably simpler to implement, since there's more things you would need to hide than there are things you want to display.

I inspected the usercp page with firebug and found that each thread title is in a td with class="title". If you are able to use something like jQuery in conjunction with igoogle, then a selector "td.title" makes it easy to grab the relevant elements, then .each can call a function over them:

code:

function processThreadTitle(i,el) {
   // use a regex on the innerhtml or traverse the child nodes of el, 
   // or whatever to get the data, and put it into a newly created element.
}
$("td.title").each(processThreadTitle)

# ? May 27, 2010 01:16

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

peepsalot posted:

Haven't looked at igoogle gadgets at all, so I don't know exactly how it works, but there's two main ways I could see being able to strip out the relevant data.

1) You could try to make a stylesheet that hides all the parts of the page you don't want, append a link element to the page which points to your css sheet, then just show the page in your iframe.
2) You could loop through each element in javascript and extract the relevant info, and append it to the body of your iframe

Number 2 is probably simpler to implement, since there's more things you would need to hide than there are things you want to display.

I inspected the usercp page with firebug and found that each thread title is in a td with class="title". If you are able to use something like jQuery in conjunction with igoogle, then a selector "td.title" makes it easy to grab the relevant elements, then .each can call a function over them:
code:
function processThreadTitle(i,el) {
   // use a regex on the innerhtml or traverse the child nodes of el, 
   // or whatever to get the data, and put it into a newly created element.
}
$("td.title").each(processThreadTitle)

I'd go with #2 as well, and here's the code to grab the data:

code:

jQuery('tr.thread').each( function(){
  var row = jQuery(this);
  var threadTitle = row.find('a.thread_title').text();
  var unreadPosts = row.find('a.count b').text() || 0;
  window.console.log( "thread '" + threadTitle + "' has " + unreadPosts + " unread posts." );
});

# ? May 27, 2010 03:36

grilldos: Mar 27, 2004; BUST A LOAF
IN THIS
YEAST CONFECTION; Grimey Drawer

Thank you dudes for the help. Now I need to figure out how to get the code to fire only after the iframe has actually loaded. Waiting for the dom doesn't seem to actually do anything from within an iGoogle gadget.

Edit: That was taken care of with a dumb simple 'load' event. Now I'm running into a problem where apparently accessing a document pulled from a remote HTTP server is an ethical no-no so I "don't have access" to do it.

Edit 2: What a pain in the rear end. I've been told to have a service run on another server that will log into the forums, parse the usercp.php, and then provide the output in JSON format. Or even have the gadget handle it. This just opens up security risks and a bunch of unnecessary work when Same Origin Policy is just an imaginary ethical barrier.

I just want my bookmarked thread list on iGoogle so I can keep one tab open dammit.

This gets even more ridiculous when it's totally cool to set up a userscript that does it. Just because I want to put the page within another I am being unethical.

grilldos fucked around with this message at 23:53 on May 27, 2010

# ? May 27, 2010 22:15

Nigglypuff: Nov 9, 2006; BUY ME BONESTORM
— OR —
GO TO HELL

The same-origin policy is a very good idea. Many of the major web security problems � CSRF, clickjacking etc � exist because it does not go far enough.

# ? May 28, 2010 17:38

MononcQc: May 29, 2007

Nigglypuff posted:

The same-origin policy is a very good idea. Many of the major web security problems � CSRF, clickjacking etc � exist because it does not go far enough.

I have trouble seeing how it could go further without being a burden on some very common practices, like hosting image and javascript files or an additional component (i.e.: chat server, stats service) on a foreign domain, might it be for spead/reliability reasons or just having a sane backend architecture.

# ? May 28, 2010 20:48

grilldos: Mar 27, 2004; BUST A LOAF
IN THIS
YEAST CONFECTION; Grimey Drawer

I agree that the Same Origin Policy is a good idea and practice, but the problem comes in cases like what I'd like to do. Especially given the prevalence of userscripts combined with the fact I'm just wanting to do what a userscript can easily do -- and then just put the results in a tiny window.

# ? May 28, 2010 20:56

JingleBells: Jan 7, 2007; Oh what fun it is to see the Harriers win away!

I'm wondering if there are any recommended resources, books, tutorials and the like related to messing around with the canvas element in javascript? Also anything related to JQuery, I'd like to delve more into JQuery and look at some of the more advanced things you can do with the canvas element. Where I'm working at the moment "cutting edge technology" means working on IE6 (exclusively, we aim to upgrade to IE7 at some point) so I feel I'm getting a little rusty on proper cutting edge stuff

# ? May 31, 2010 21:22

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

JingleBells posted:

I'm wondering if there are any recommended resources, books, tutorials and the like related to messing around with the canvas element in javascript? Also anything related to JQuery, I'd like to delve more into JQuery and look at some of the more advanced things you can do with the canvas element. Where I'm working at the moment "cutting edge technology" means working on IE6 (exclusively, we aim to upgrade to IE7 at some point) so I feel I'm getting a little rusty on proper cutting edge stuff

https://developer.mozilla.org/en/Canvas_tutorial

http://docs.jquery.com

# ? Jun 2, 2010 16:49

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

This is driving me batty. I have an element that is reporting the wrong offsetTop. Using either document.getElementById('myel').offsetTop and jQuery's jQuery('#myel').offest().top both give me 90 as the value... but I know for a fact that the element is at 97, since it's right up against something that's 97px tall that has no margin. In addition, Inspecting the element properties shows me offsetTop is, in fact 97.

:wtf:

Only registered members can see post attachments!

Lumpy fucked around with this message at 03:37 on Jul 22, 2010

# ? Jul 22, 2010 02:25

epswing: Nov 4, 2003; Soiled Meat

Can you duplicate this with a minimal example and post it?

# ? Jul 22, 2010 06:45

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

epswing posted:

Can you duplicate this with a minimal example and post it?

I can duplicate it, but only on one machine... it's the damndest thing. On my Mac Mini, in Safari and Chrome, I see that ( even after a reboot, cache cleared, etc. ) My iMac and MBP, in both Safari and Chrome, as well as my XP machine with Chrome, FF and IE all report it correctly as 97.

I'm going to chalk it up to internet gremlins for now.

# ? Jul 22, 2010 18:47

sim: Sep 24, 2003

I've got a similar, but more complicated question that involves offset. I'm trying to implement this: http://static.jqueryfordesigners.com/demo/fixedfloat.html into my design, but I'd like it to stay contained within a parent div so that it doesn't overlap the footer. I actually managed to do that by calculating the difference between the height of the fixed piece and the height of its container, then checking if position() + scrollTop() was greater than the difference.

That all works great. However now I need it to scroll back up, which means I need to find out if the scrollbar has moved past the height of the footer and my mind is sort of melting trying to figure out how to calculate that number since I can only get scrollTop() and not scrollBottom() like I wish I could. Here's the code:

code:

var top = $('#side').offset().top - parseFloat($('#side').css('marginTop').replace(/auto/, 0));

$(window).scroll(function (event) {
  // what the y position of the scroll is
  var y = $(this).scrollTop();
  
  var difference = $('#side').offsetParent().height() - $('#side').height();
  var topspace = $('#side').position().top;
		  
  // whether that's below the form
  if (y >= top) {
	// if so, ad the fixed class
	$('#side').addClass('fixed').removeClass('top');

	if(topspace + y >= difference){
		$('#side').removeClass('fixed').addClass('bottom');
	}
			
  } else {
  // otherwise remove it
        
        $('#side').removeClass('fixed').removeClass('bottom').addClass('top');
  }
	  
});

# ? Jul 25, 2010 22:49

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

sim posted:

I've got a similar, but more complicated question that involves offset. I'm trying to implement this: http://static.jqueryfordesigners.com/demo/fixedfloat.html into my design, but I'd like it to stay contained within a parent div so that it doesn't overlap the footer. I actually managed to do that by calculating the difference between the height of the fixed piece and the height of its container, then checking if position() + scrollTop() was greater than the difference.

That all works great. However now I need it to scroll back up, which means I need to find out if the scrollbar has moved past the height of the footer and my mind is sort of melting trying to figure out how to calculate that number since I can only get scrollTop() and not scrollBottom() like I wish I could. Here's the code:
code:
var top = $('#side').offset().top - parseFloat($('#side').css('marginTop').replace(/auto/, 0));

$(window).scroll(function (event) {
  // what the y position of the scroll is
  var y = $(this).scrollTop();
  
  var difference = $('#side').offsetParent().height() - $('#side').height();
  var topspace = $('#side').position().top;
		  
  // whether that's below the form
  if (y >= top) {
	// if so, ad the fixed class
	$('#side').addClass('fixed').removeClass('top');

	if(topspace + y >= difference){
		$('#side').removeClass('fixed').addClass('bottom');
	}
			
  } else {
  // otherwise remove it
        
        $('#side').removeClass('fixed').removeClass('bottom').addClass('top');
  }
	  
});

It would probably be easier to pass it the #footer and use that position().top + #side.outerHeight(true) as a limit.

I wrote a plugin that does that "pop out to fixed" a while back, and doing what you are trying to do, plus making sure if the thing you are floating is taller than the viewport it scrolls are on my TODO list. You have motivated me to finish!!

# ? Jul 26, 2010 03:59

sim: Sep 24, 2003

Brilliant! I updated the code with what you suggested and it works! This is what I ended up with (had to hard code 60 for the margin of the parent container many levels above #side):

code:

var top = $('#side').offset().top - parseFloat($('#side').css('marginTop').replace(/auto/, 0));
		
$(window).scroll(function (event) {
  // what the y position of the scroll is
  var y = $(this).scrollTop();
  var footer = $('#footer').position().top;
	  
  // whether that's below the form
  if (y >= top) {
	
	if($('#side').outerHeight(true) + 60 + y >= footer){
		$('#side').removeClass('fixed').addClass('bottom');
	} else {
	        $('#side').addClass('fixed').removeClass('top').removeClass('bottom');
	}
			
  } else {
	// otherwise remove it
	$('#side').removeClass('fixed').removeClass('bottom').addClass('top');
  }
		  
});

Thanks Lumpy and let me know when you finish that plugin.

# ? Jul 26, 2010 06:09

OneEightHundred: Feb 28, 2008; Soon, we will be unstoppable!

I'm not even sure what the word is for what I'm looking for so Google is failing me:

Python and Lua both support ways to override how objects interact with other objects when you attempt to operate on them using mathematical operators, and ways to override the attribute get/set operations as well.

i.e. if you do a.b = c, you can hook it so that it calls someHookFunction(a, "b", c)

... what's JavaScript's equivalent of this functionality?

# ? Jul 29, 2010 23:26

peepsalot: Apr 24, 2007; ��PEEP THIS...
��BITCH!

OneEightHundred posted:

I'm not even sure what the word is for what I'm looking for so Google is failing me:

Python and Lua both support ways to override how objects interact with other objects when you attempt to operate on them using mathematical operators, and ways to override the attribute get/set operations as well.

i.e. if you do a.b = c, you can hook it so that it calls someHookFunction(a, "b", c)

... what's JavaScript's equivalent of this functionality?

I think the term you are looking for is "operator overloading". AFAIK you don't do that in javascript.

# ? Jul 29, 2010 23:51

ronin109: Aug 23, 2002

OneEightHundred posted:

I'm not even sure what the word is for what I'm looking for so Google is failing me:

Python and Lua both support ways to override how objects interact with other objects when you attempt to operate on them using mathematical operators, and ways to override the attribute get/set operations as well.

i.e. if you do a.b = c, you can hook it so that it calls someHookFunction(a, "b", c)

... what's JavaScript's equivalent of this functionality?

Sounds like you're talking about "setters" and "getters". There is no standard, cross-browser, way to do setters and getters in JavaScript.

# ? Jul 30, 2010 16:32

Goon in the Mist: Jan 6, 2006

I'm trying to make a web app that will let users make sweet comic-book style protocols for biology experiments. Here's a sketch of what I'm going for http://doxiecloud.com/h89jh

Initially I was trying to hack everything together using jQuery but I realized there are already billions of image galleries built in jQuery, so I was wondering: can anyone recommend an image gallery that would be a good basepoint for this project?

Thanks!

# ? Aug 3, 2010 10:58

Finite: Jan 9, 2003; What do you mean mullets aren't fashionable?!?

I'm playing around with jQuery.

code:

$(document).ready(function()
{
	$(".checkbox input").bind("change", function() { return checkBoxToggle(this); });
}


function checkBoxToggle(e)
{
	var valueBox = $(e).siblings(".value");
	
	if ($(e).is(":checked"))
	{
		$(valueBox).removeClass("bad");
		$(valueBox).addClass("good");
		$(valueBox).text('Yes');
	}
	else
	{
		$(valueBox).removeClass("good");
		$(valueBox).addClass("bad");
		$(valueBox).text('No');
	}
	return false;
}

This code with some CSS builds something like this:

This works and is fine, but I'd like to run the code when the page loads as well as when the box is clicked, so it looks pretty from the beginning as opposed to just when you use it.

Is there a neat way to do this, another event I can tap into (and declare on the same line)? Or is it just a matter of manually calling checkBoxToggle() with a reference to the specific checkbox.

While that would be grand for one box, if I have 15 checkboxes and other fields with enhancements too, it's going to be a fair bit of clutter.

# ? Aug 4, 2010 15:39

karms: Jan 22, 2006; by Nyc_Tattoo; Yam Slacker

code:

$(document).ready(function()
{
	$(".checkbox input")
	.bind("change", function() { return checkBoxToggle(this); })
	.change();
}

edit: I think that works, but if it does not:

code:

$(document).ready(function()
{
	$(".checkbox input")
	.bind("change", function() { return checkBoxToggle(this); })
	.each(function() { checkBoxToggle(this); });
}

karms fucked around with this message at 16:01 on Aug 4, 2010

# ? Aug 4, 2010 15:58

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Finite posted:

I'm playing around with jQuery.
code:
$(document).ready(function()
{
	$(".checkbox input").bind("change", function() { return checkBoxToggle(this); });
}


function checkBoxToggle(e)
{
	var valueBox = $(e).siblings(".value");
	
	if ($(e).is(":checked"))
	{
		$(valueBox).removeClass("bad");
		$(valueBox).addClass("good");
		$(valueBox).text('Yes');
	}
	else
	{
		$(valueBox).removeClass("good");
		$(valueBox).addClass("bad");
		$(valueBox).text('No');
	}
	return false;
}
This code with some CSS builds something like this:

This works and is fine, but I'd like to run the code when the page loads as well as when the box is clicked, so it looks pretty from the beginning as opposed to just when you use it.

Is there a neat way to do this, another event I can tap into (and declare on the same line)? Or is it just a matter of manually calling checkBoxToggle() with a reference to the specific checkbox.

While that would be grand for one box, if I have 15 checkboxes and other fields with enhancements too, it's going to be a fair bit of clutter.

Before I get into your question proper, you should try not to perform the same selector over and over in your code. Your function should only call $(e) and $(valueBox) once. Speeds tings up a great deal. Also, siblings() already returns a jQuery wrapped object, so you don't need to re-wrap it.

As for the actual question:

code:

jQuery( function(){
  jQuery(".checkbox input").bind("change", function(){ 
   checkBoxToggle( jQuery(this) ); 
  }).each( function(){
    checkBoxToggle( jQuery(this) );
  });
});

function checkBoxToggle( jQe ){ // we now get a jQuery object
  var valueBox = jQe.siblings(".value");
  if ( jQe.is(":checked") ) {
    valueBox.removeClass("bad").addClass("good").text("Yes");
  } else {
    valueBox.removeClass("good").addClass("bad").text("No");
  }
}

# ? Aug 4, 2010 16:06

Finite: Jan 9, 2003; What do you mean mullets aren't fashionable?!?

Lumpy posted:

Before I get into your question proper, you should try not to perform the same selector over and over in your code. Your function should only call $(e) and $(valueBox) once. Speeds tings up a great deal. Also, siblings() already returns a jQuery wrapped object, so you don't need to re-wrap it.

This is my first foray into jQuery, so I'm not sure what to wrap and what not to at this point. Is it safe to assume that anything that comes from a jQuery function is wrapped object?

Thanks for the pointers, and the help. You too KARMA!.

# ? Aug 4, 2010 16:33

Haystack: Jan 23, 2005

Finite posted:

This is my first foray into jQuery, so I'm not sure what to wrap and what not to at this point. Is it safe to assume that anything that comes from a jQuery function is wrapped object?

Thanks for the pointers, and the help. You too KARMA!.

The documentation lists each function's return value in the upper right corner. If it reads "Returns: jQuery," that function will return a jQuery object.

# ? Aug 4, 2010 16:40

Tap: Apr 12, 2003; Note to self: Do not shove foreign objects in mouth.

Is there a way to do wildcard selectors in jQuery?

For example, I want to select all elements starting with the string ums_phone that end with a number.

ums_phone1
ums_phone2
ums_phone3
etc...

I'm looking for something like $('.ums_phone*').text(phone)

Any ideas?

Edit: Figured it out - [class^=ums_phone] works like a charm.

Tap fucked around with this message at 17:12 on Aug 6, 2010

# ? Aug 6, 2010 17:06

swalk: Nov 20, 2004; bucka blaow

You should probably just add a common class to all of them anyway.

# ? Aug 8, 2010 20:01

hey mom its 420: May 12, 2007

i expected that foo would be out of scope when calling the alert in the following example:

code:

{ 
    var foo = 10;
}
alert(foo);

but it prints out 10 just fine. does making code blocks like this serve any purpose at all in javascript?

# ? Aug 9, 2010 20:49

OddObserver: Apr 3, 2009

Yep, there are no block scopes in JS, just function scopes (which can be nested), plus some special cases like the catch scope and 'with'.

Also, keep in mind that here:

code:

function foo() {
   bar = 42;
   var bar;
}

bar has the same scope (function local) throughout the body.

.... So unless you're using the blocks with a conditional/loop (or break, which noone does) they don't have any effect indeed.

# ? Aug 9, 2010 21:22

ronin109: Aug 23, 2002

The braces is simply intended to be a way to denote multiple statements in JS (compound statement) as a single expression.

edit: So, to answer your question, no, it doesn't make sense with the example you provided.

ronin109 fucked around with this message at 21:45 on Aug 9, 2010

# ? Aug 9, 2010 21:31

Coffee Mugshot: Jun 26, 2010; by Lowtax

I'm new to javascript and apparently I must have missed something somewhere, but is there a way to read from a file on YOUR domain and parse the contents, etc., using javascript. So far, all of my searching has led me to use XMLhttpRequest or ActiveXObject depending on the browser, but how do I get the contents of the file that's stored in the XMLhttpRequest Object? Whenever I use XMLhttpRequest.requestText/XML, the result is blank. I'm checking for the ready state being 4 and 200 before I proceed but everytime, XMLhttpRequest.requestText/XML has nothing stored in it. I'm starting to think I'm using the wrong tool to open a file in javascript. What am I doing wrong?

EDIT: Actually, now I'm getting an error saying that says "not well-formed". I don't understand how it isn't well-formed, though, it is just a text file called test.txt and it contains: "6/21 Meeting" and nothing else.

Coffee Mugshot fucked around with this message at 03:44 on Aug 10, 2010

# ? Aug 10, 2010 03:09

Haystack: Jan 23, 2005

Rainbow Pony Deluxe posted:

I'm new to javascript and apparently I must have missed something somewhere, but is there a way to read from a file on YOUR domain and parse the contents, etc., using javascript. So far, all of my searching has led me to use XMLhttpRequest or ActiveXObject depending on the browser, but how do I get the contents of the file that's stored in the XMLhttpRequest Object? Whenever I use XMLhttpRequest.requestText/XML, the result is blank. I'm checking for the ready state being 4 and 200 before I proceed but everytime, XMLhttpRequest.requestText/XML has nothing stored in it. I'm starting to think I'm using the wrong tool to open a file in javascript. What am I doing wrong?

EDIT: Actually, now I'm getting an error saying that says "not well-formed". I don't understand how it isn't well-formed, though, it is just a text file called test.txt and it contains: "6/21 Meeting" and nothing else.

To take a wild guess, the XMLhttpRequest might be expecting the HTTP response to have a particular mime-type (text/XML, for instance), and giving that error because the response is text/html or something.

Personally, I just use jQuery for all of my AJAX stuff. Much easier to deal with than the browser-level objects. If you're just starting out with javascript, I seriously recommend taking a look at jQuery.

# ? Aug 10, 2010 03:58

Supervillin: Feb 6, 2005; Pillbug

Rainbow Pony Deluxe posted:

I'm new to javascript and apparently I must have missed something somewhere, but is there a way to read from a file on YOUR domain and parse the contents, etc., using javascript. So far, all of my searching has led me to use XMLhttpRequest or ActiveXObject depending on the browser, but how do I get the contents of the file that's stored in the XMLhttpRequest Object? Whenever I use XMLhttpRequest.requestText/XML, the result is blank. I'm checking for the ready state being 4 and 200 before I proceed but everytime, XMLhttpRequest.requestText/XML has nothing stored in it. I'm starting to think I'm using the wrong tool to open a file in javascript. What am I doing wrong?

EDIT: Actually, now I'm getting an error saying that says "not well-formed". I don't understand how it isn't well-formed, though, it is just a text file called test.txt and it contains: "6/21 Meeting" and nothing else.

First, make sure you're checking responseText/XML and not requestText/XML, as that second pair doesn't exist. Since you're getting errors, I figure this was just a typo here, but better safe than sorry since you did it twice.

Second, "6/21 Meeting" is not valid XML, so you definitely need to check only responseText. As Haystack said, if the XHR is expecting XML or the server is serving that as XML, that's where the error's coming from.

I doubt any server serves .txt files as XML by default though. Can you post the URL to your text file here? We can check the headers and see if your server is at fault, either setting the MIME type incorrectly or possibly another header.

Otherwise, the XHR object may be built incorrectly. Post your code?

# ? Aug 10, 2010 05:02

Coffee Mugshot: Jun 26, 2010; by Lowtax

Haystack posted:

To take a wild guess, the XMLhttpRequest might be expecting the HTTP response to have a particular mime-type (text/XML, for instance), and giving that error because the response is text/html or something.

Personally, I just use jQuery for all of my AJAX stuff. Much easier to deal with than the browser-level objects. If you're just starting out with javascript, I seriously recommend taking a look at jQuery.

Holy poo poo, dude, thank for the advice. jQuery makes Javascript into something resembling a sane programming language. It only took me a couple of minutes to do what I spent hours failing to do in Javascript. Cheers.

Supervillin posted:

Otherwise, the XHR object may be built incorrectly. Post your code?

I can't post the url to my file because I don't actually have a server up, yet. My code, however, was something like this:

code:

function fillEventList()
{
	var eventList = document.getElementById("eventList");
	
	var ajax;
	
	if ( window.XMLHttpRequest )
		ajax = new XMLHttpRequest();
	else
		ajax = new ActiveXObject("Microsoft.XMLHTTP");
		
	alert(eventList.innerHTML);
	
	ajax.open("GET", "events.txt", true );
	
	ajax.onreadystatechange = function()
	{
		if (ajax.readyState == 4 )
		{
			alert("Ready");
			if (ajax.status == 200 )
			{
				alert("found");
				alert(ajax.responseXML);
				eventList.innerHTML =ajax.responseText.split("\n");
			}
			
			alert(ajax.status);
		}
	}
	
	ajax.send(null);
}

Honestly, I don't understand what half of it is for. I did get it working in jQuery, though, with a simple

code:

     $(function() 
 {
	$.ajax({
	url: "events.txt.",
		success: function(data)
		{
			var events = data.split("\n");
		
			$("#eventList").html(data);
		}
	});
	
	
 });

so I'm not really worried about it. If you could explain what's wrong with the original code, though, that'd be cool.

Coffee Mugshot fucked around with this message at 05:20 on Aug 10, 2010

# ? Aug 10, 2010 05:16

Lumpy: Apr 26, 2002; La! La! La! Laaaa!; College Slice

Rainbow Pony Deluxe posted:

Holy poo poo, dude, thank for the advice. jQuery makes Javascript into something resembling a sane programming language. It only took me a couple of minutes to do what I spent hours failing to do in Javascript. Cheers.

so I'm not really worried about it. If you could explain what's wrong with the original code, though, that'd be cool.

Javascript is a very sane programming language.

code:

eventList.innerHTML =ajax.responseText.split("\n");

You were trying to set the innerHTML of a DOM node to an Array object.

# ? Aug 10, 2010 16:36

Adbot: ADBOT LOVES YOU

# ? May 21, 2024 00:42

OddObserver: Apr 3, 2009

Lumpy posted:

code:
eventList.innerHTML =ajax.responseText.split("\n");
You were trying to set the innerHTML of a DOM node to an Array object.

That actually works in general, due to Array.prototype.toString

# ? Aug 10, 2010 16:44

The Something Awful Forums > Discussion > Serious Hardware/Software Crap > The Cavern of COBOL > Javascript questions which don't deserve their own thread.

«‹›277 »