error on page

[billybrag]

Hello all,

Im hoping i can get some help with what may be a simple fix.

Im using jquery to validate an image upload, and its working a treat.

However, the js file that the coding is on is called in the header throughout the site.

When the code isnt used (ie the page has no upload form) it throws an error in IE saying...

object doesn t support this property or method jquery

I assume its because it cant find the right form to run the code on?

Any ideas?

I tried firebug, and it wont load the page, it just hangs and highlights this line....

$().ready( function() {
31 $("#addImageForm").validate({
32 event: "keyup",
33 rules: {
34 image_title: { required: true },
35 image_filename:{ required: true,
36 accept: "(jpe?g|gif|png|GIF|JPG|PNG)"
37 }
38
39 },
40 messages: {
41 image_title: "The Image needs a name",
42 image_filename: {
43 required: "You need to select an image to upload",
44 accept:"Only image files are allowed. (gif, jpg or png)"
45 }
46 }
47 });
48});

(line 44)

[Dashman]

Hi, Im not an expert on jQuery (or JS for that matter), but, somewhere in your script, where you detect the form, add the following lines:

if(!document.getElementById('addImageForm')){
return;
}
else{
var theFormTovalidate = document.getElementById('formIdnameHere');
***
}

Hope that is useful in some way ...

D

[Raffles]

It's looking for something with the ID #addImageForm and if it doesn't find it it's going to throw an error. You have to add something to check if it's there:

if $('#addImageForm') {
  $("#addImageForm").validate({
    ...
  });
}

[billybrag]

Thanks for the replies.

I tried the suggestions and the jquery one didnt work, but i think that is because it is trying to test the boolean value of an object - which doesn't have one .. so i tried this...

 if($("#addImageForm").size > 0){
...
.
..
..
..
}

And this stops the error, but it wont execute the code. inside even when i think it should be true.

We are getting closer though!!

any more ideas?

[Raffles]

Just use document.getElementById then. I don't see why the jquery syntax shouldn't work, what is it returning? If it's a reference to an HTML element, it should not be evaluating to false.

Doing if(document.getElementById) is just fine, as is if(var) where var may be an integer, object literal, array, string... basically, in if statments (and other things like while) the contents are treated as true if they aren't false, undefined, 0, an empty string or null.

Try an alert on $('#addImageForm'), see what it returns.

[billybrag]

thanks again for the reply,

Here is the full code of what i am using....

for the js I have...

if($("#addImageForm").size() > 0){
$().ready( function() {

	$("#addImageForm").validate({
		event: "keyup",
		rules: {
			image_title: { required: true },
			image_filename:{ 	required: true,
								accept: "(jpe?g|gif|png|GIF|JPG|PNG)"
			}
			
		},
		messages: {
			image_title: "The Image needs a name",
			image_filename: {
						required: "You need to select an image to upload",
						accept:"Only image files are allowed. (gif, jpg or png)"
							}
		}
	});
});

and the html code is

	<form method="post" class="addform" id="addImageForm" enctype="multipart/form-data" >
	 <input type="hidden" name="process_form" />
		<table>
			<tr>
				<td>Image Name</td>
				<td><input type="text" id="image_title" name="image_title" /></td>
			</tr>
			<tr>
				<td colspan="2">Add a short description for the Picture below</td>
			</tr>
			<tr>
				<td colspan="2"><textarea id="image_description" name="image_description" cols="45" rows="50"  ></textarea></td>
			</tr>
			<tr>
				<td>Image Filename</td>
				<td><input  class="{accept:true}" type="file" id="image_filename" name="image_filename" /></td>
			</tr>
			
			<tr>
				<td><input type="submit" name="submit" value="Add Image" /></td>
				<td><input type="reset" name="reset" value="Reset" /></td>
			</tr>
		</table>
	</form>

So basically I want to do the error checking when the above form exists.

At the moment it does not execute the code whether the form is on that page or not - but it doesnt error either.

I placed an alert in the js if statement and it doesnt pop up ever?

:s

[billybrag]

can anyone help with this?

[Raffles]

The alert isn't working because the if statement is resolving to false. Put the alert outside the if statement to see what $('#addImageForm') returns.

The problem is with this:

if($("#addImageForm").size() > 0) { }

What is size() ? It probably is something that can't deal with what $() returns. I can see no reason for $("#addImageForm") not working unless it is returning null, undefined, 0, false or an empty string. In which case the form doesn't exist or there is something wrong with that function.

In any case, with a nodeList, you should use the length property, not this custom size() thing.

[billybrag]

Thanks again Raffles!!

I think i may have caught it - the if statement was outside of the $().ready( function() where as i think it should have been the other way around!!

idiocy on my part

I used the length attribute as you mention too - I got the size one from visual Jquery, where it appeared to be similar!

I think* though that it is sorted