Firefox not submitting

[gerkintrigg]

hello,

I'm using this code to link a form to an ajax include:

<form name="url_submission" action="javascript: MyAjaxRequest('credits_used','../includes/credit_calculator.php?url='+url_submission.url.value);" method="post">

It works fine in chrome, but not in firefox. I'm fairly sure it's this line that's causing the issue. Javascript seems to be active.

 

Any ideas?

[Adam]

Have you checked the error console?

 

There's nothing visibly wrong with the call, must be an issue with the MyAjaxRequest() code.

[gerkintrigg]

error console? What's that?

[trq]

error console? What's that?

 

It is firebug's javascript debugger.

[gerkintrigg]

Oh, yes, there were a few issues with Firefox's cupport for the CSS code:

	cursor: hand;

but I removed all references by commenting them out

	/*cursor: hand;*/

Still the form is not submitting. I'll put it up on a test server so you can see what I mean.

[trq]

better still, why not post some relevant code? I'd start with the MyAjaxRequest() function.

[gerkintrigg]

weird... i am unsure whether the test server will help as it's acting rather strange...

<div id="credits_used"><form name="url_submission" action="javascript:  MyAjaxRequest('credits_used','<?php echo $root;?>includes/credit_calculator.php?url='+url_submission.url.value);" method="post">
            <div align="right">
              Enter a Web Address: 
              <input name="url" type="text" class="input" />
              <input name="submit_url" type="submit" class="button" id="submit_url" value="Submit"/>
            </div>
          </form></div>

 

i was using it with a javascript realtext box, but removed it for the test server: http://www.myointernational.com/shine/test.php

[trq]

Can you post some relevant code?

[gerkintrigg]

like the ajax code?

function MyAjaxRequest(target_div,file,check_div)
{
var MyHttpRequest = false;
var MyHttpLoading = '<p>Loading...</p>'; // or use an animated gif instead: var MyHttpLoading = '<img src="loading.gif" border="0" alt="running" />';
var ErrorMSG = 'Sorry - No XMLHTTP support in your browser, buy a newspaper instead';

if(check_div)
{
var check_value = document.getElementById(check_div).value;
}
else
{
var check_value = '';
}

[Adam]

That code wouldn't produce any visible output, could you show the rest of it? When you say it's not working what exactly *does it do* in each browser?

[gerkintrigg]

Firefox does nothing at all when I click on the submit button. It doesn't even submit.

 

here is the ajax script. Let me know if you need anything else

// start ajaxrequest.js


// Following is a javascript function that makes a httprequest - AJAX. This is the AJAX bit and all that is needed in that manner.
// Only in this one we won't be using XML in our response, we will accept and handle
// pure text and html and display this response directly to the user within the
// desired <div id> tags. It can even be used to include pure html files as a substitute
// solution to the "old" frames method where as no php or other scripting language is nessesary on the server.
// but use it with care - it is not a search engine supported method and indexing will fail. Workaround for this is not included here

function MyAjaxRequest(target_div,file,check_div)
{
var MyHttpRequest = false;
var MyHttpLoading = '<p>Loading...</p>'; // or use an animated gif instead: var MyHttpLoading = '<img src="loading.gif" border="0" alt="running" />';
var ErrorMSG = 'Sorry - No XMLHTTP support in your browser, buy a newspaper instead';

if(check_div)
{
var check_value = document.getElementById(check_div).value;
}
else
{
var check_value = '';
}



if(window.XMLHttpRequest) // client use Firefox, Opera etc - Non Microsoft product
{
try
{
MyHttpRequest = new XMLHttpRequest();
}
catch(e)
{
MyHttpRequest = false;
}
}
else if(window.ActiveXObject) // client use Internet Explorer
{
try
{
MyHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch(e)
{
try
{
MyHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch(e)
{
MyHttpRequest = false;
}
}
}
else
{
MyHttpRequest = false;
}



if(MyHttpRequest) // browser supports httprequest
{
var random = Math.random() * Date.parse(new Date()); // make a random string to prevent caching

var file_array = file.split('.'); // prepare to check if we have a query string or a html/htm file
if(file_array[1] == 'php') // no query string, just calling a php file
{
  var query_string = '?rand=' + random;
}
else if(file_array[1] == 'htm' || file_array[1] == 'html') // calling a htm or html file
{
  var query_string = '';
}
else // we have presumable a php file with a query string attached
{
  var query_string = check_value + '&rand=' + random;
}


MyHttpRequest.open("get", url_encode(file + query_string), true); // <-- run the httprequest using GET


// handle the httprequest
MyHttpRequest.onreadystatechange = function ()
{
if(MyHttpRequest.readyState == 4) // done and responded
{
document.getElementById(target_div).innerHTML = MyHttpRequest.responseText; // display result
}
else
{
document.getElementById(target_div).innerHTML = MyHttpLoading; // still working
}
}
MyHttpRequest.send(null);
}
else 
{
document.getElementById(target_div).innerHTML = ErrorMSG; // the browser was unable to create a httprequest
}
}
// end of "AJAX" function


// Here follows a function to urlencode the string we run through our httprequest, it has nothing to do with AJAX itself
// If you look carefully in the above httprequest you se that we use this url_encode function around the file and query_string
// This is very handy since we are using GET in our httprequest and for instance
// any occurrance of the char # (from textboxes etc) will brake the string we are sending to our file - we don't want that to brake!
// It will also convert spaces to +

function url_encode(string)
{
var string;
var safechars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/-_.&?=";
var hex = "0123456789ABCDEF";
var encoded_string = "";
for(var i = 0; i < string.length; i++)
{
var character = string.charAt(i);
if(character == " ")
{
encoded_string += "+";
}
else if(safechars.indexOf(character) != -1)
{
encoded_string += character;
}
else
{
var hexchar = character.charCodeAt(0);
if(hexchar > 255)
{
encoded_string += "+";
}
else
{
encoded_string += "%";
encoded_string += hex.charAt((hexchar >> 4) & 0xF);
encoded_string += hex.charAt(hexchar & 0xF);
}
}
}
return encoded_string;
}

// end .js file

[trq]

Can you indent it so it is readable?

[gerkintrigg]

// start ajaxrequest.js


// Following is a javascript function that makes a httprequest - AJAX. This is the 
// AJAX bit and all that is needed in that manner.
// Only in this one we won't be using XML in our response, we will accept and handle
// pure text and html and display this response directly to the user within the
// desired <div id> tags. It can even be used to include pure html files as a substitute
// solution to the "old" frames method where as no php or other scripting language is
// nessesary on the server.
// but use it with care - it is not a search engine supported method and indexing will 
// fail. Workaround for this is not included here

function MyAjaxRequest(target_div,file,check_div){
var MyHttpRequest = false;
var MyHttpLoading = '<p>Loading...</p>'; // or use an animated gif instead: var 
MyHttpLoading = '<img src="loading.gif" border="0" alt="running" />';
var ErrorMSG = 'Sorry - No XMLHTTP support in your browser, buy a newspaper instead';

if(check_div){
	var check_value = document.getElementById(check_div).value;
}
else{
	var check_value = '';
}

if(window.XMLHttpRequest){ // client use Firefox, Opera etc - Non Microsoft product
	try{
		MyHttpRequest = new XMLHttpRequest();
	}
	catch(e){
		MyHttpRequest = false;
	}
}
else if(window.ActiveXObject){ // client use Internet Explorer
	try{
		MyHttpRequest = new ActiveXObject("Msxml2.XMLHTTP");
	}
	catch(e){
		try{
			MyHttpRequest = new ActiveXObject("Microsoft.XMLHTTP");
		}
		catch(e){
			MyHttpRequest = false;
		}
	}
}
else{
	MyHttpRequest = false;
}

if(MyHttpRequest){ // browser supports httprequest
	var random = Math.random() * Date.parse(new Date()); // make a random 
	// string to prevent caching

	var file_array = file.split('.'); // prepare to check if we have a query string or
	// a html/htm file
	if(file_array[1] == 'php'){ // no query string, just calling a php file
		var query_string = '?rand=' + random;
	}
	else if(file_array[1] == 'htm' || file_array[1] == 'html'){ // calling a htm or 
		//html file
		var query_string = '';
	}
	else{ // we have presumable a php file with a query string attached
		var query_string = check_value + '&rand=' + random;
	}

	MyHttpRequest.open("get", url_encode(file + query_string), true); 
	// <-- run the httprequest using GET

	// handle the httprequest
	MyHttpRequest.onreadystatechange = function (){
		if(MyHttpRequest.readyState == 4){ // done and responded
			document.getElementById(target_div).innerHTML = 
			MyHttpRequest.responseText; // display result
		}
		else{
			document.getElementById(target_div).innerHTML = MyHttpLoading; 
			// still working
		}
	}
	MyHttpRequest.send(null);
}
else{
	document.getElementById(target_div).innerHTML = ErrorMSG; 
	// the browser was unable to create a httprequest
}
}
// end of "AJAX" function


// Here follows a function to urlencode the string we run through 
// our httprequest, it has nothing to do with AJAX itself
// If you look carefully in the above httprequest you se that we use this 
// url_encode function around the file and query_string
// This is very handy since we are using GET in our httprequest and for instance
// any occurrance of the char # (from textboxes etc) will brake the string we are 
//sending to our file - we don't want that to brake!
// It will also convert spaces to +

function url_encode(string){
var string;
var safechars = "0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZabcdefghijklmnopqrstuvwxyz/-_.&?=";
var hex = "0123456789ABCDEF";
var encoded_string = "";
for(var i = 0; i < string.length; i++){
	var character = string.charAt(i);
	if(character == " "){
		encoded_string += "+";
	}
	else if(safechars.indexOf(character) != -1){
		encoded_string += character;
	}
	else{
		var hexchar = character.charCodeAt(0);
		if(hexchar > 255){
			encoded_string += "+";
		}
		else{
			encoded_string += "%";
			encoded_string += hex.charAt((hexchar >> 4) & 0xF);
			encoded_string += hex.charAt(hexchar & 0xF);
		}
	}
}
return encoded_string;
}

// end .js file

[Adam]

Has this been fixed? Tested on your 'test server' and it appears to be doing something in FF..

[gerkintrigg]

no, it's not fixed... I think something may be causing the issue on the live one because the test is working fine...

[Adam]

Okay so perhaps giving a clearer explanation of what the problem is may help. I've tested on your "test server" and the button does appear to do something. However I don't know what the expected outcome is / what's not working, so I'm not really able to help at the moment. Could you break down the problem further?

[gerkintrigg]

the script is used to check how many words are on a particular website and then divide that number by 250 to find out how many credits will be used when analysing the webpage.

 

When you enter a web address and click "submit" it runs the ajax script.

In firefox, on my live website, it's not doing anything... I can click on submit as much as I like - nothing happens. It looks like a Javascript / ajax issue as my popup box is having a similar issue of not outputting database content...

 

I'll have a look into it and get back to you.

[Adam]

Strange. As I mentioned I've tested the live link (http://www.myointernational.com/shine/test.php) and submitting the form does work for me in FF (3.5.6):

 

Analysing http://google.co.uk

1 credit will be used. Do you wish to continue?

 

Perhaps passing "javascript:" commands through the form action is an issue with older versions, which version are you using? My suggestion would be to use a normal URL in the form action (building on non-JS support as well) and call the function using the "onsubmit" HTML attribute:

 

form [...] onsubmit="return MyAjaxRequest('credits_used','../includes/credit_calculator.php?url='+url_submission.url.value);"

 

Returning false from that function call will then suppress the form submission (note the return statement used in the call).

[gerkintrigg]

hmm. That's weird... It worked with your fix... though I just tried the test server myself and it worked with the older code too.

I reverted back on the live site and it stopped working again...

 

I now have it working (thanks so much for the tip) I'm still a bit confused on exactly what's caused the issue in the first place, but by replacing the code with yours, it now works, so I'm happy.