Ok, I have done the search through the forum.....I see the security issues with AJAX in FF and I checked in the URL calls, they are staying within the domain and not going to a third party. I did not write the AJAX script and I am pretty new to AJAX, my boss's son wrote it a few years ago. It was working on an older version of FF but not with the latest download. It also does not work in the latest Opera or Chrome, but works fine with IE7. Any ideas?
Roebuc 0 Junior Poster
Dani AI
Generated
A few clear, fixable issues jump out from the code posted (as and asked for). The behavior — works in IE but fails in Firefox/Chrome/Opera — usually means either the request payload or the DOM target is different across browsers. The following points explain the most likely causes and how to correct them.
-
Wrong POST body encoding: the serialized parameter string must use raw ampersands (&) between name=value pairs, not HTML-escaped entities. Also always apply
encodeURIComponentto names and values. Example of a safe body string:var body = 'select_state=' + encodeURIComponent(state) + '&select_city=' + encodeURIComponent(city); -
DOM id/name mismatch: the code that injects the <select> into the page targets it by id, but the server output only supplied a name. IE historically tolerates loose name/id access and may hide that bug; Firefox and others will not. Make the generated select include an
id="select_city"(or change the script to useform.elements['select_city']), so the DOM replacement and later reads are consistent. -
Browser sniffing / path differences: switching the requested URL based on
navigator.appNameis brittle. Use a single correct relative or absolute URL for all browsers, or detect features instead of browser strings. -
innerHTML on <select>: building options by injecting HTML can behave inconsistently in some engines. A robust approach is to remove old options and append new
Option/optionnodes via DOM methods.
Quick debugging checklist: open the browser Console (look for uncaught exceptions), use the Network panel to inspect the XHR request URL and actual POST payload, and check server logs to see which variables arrive. Useful references: MDN on XMLHttpRequest, getElementById, and innerHTML for authoritative details and examples (XMLHttpRequest, Document.getElementById, Element.innerHTML).
Recommended Answers
Jump to Post— Atli 182Could we see the code?
It's kind of hard to debug invisible code :)
All 3 Replies
Atli 182 Posting Pro
Could we see the code?
It's kind of hard to debug invisible code :)
nikesh.yadav 4 Posting Whiz in Training
i think u give code to forum so we can help u
Roebuc 0 Junior Poster
// JavaScript Document
function undisable_city(){
var num = document.restaurant_search.select_state.selectedIndex;
if(num==0){
document.restaurant_search.select_city.disabled=true;
}else{
document.restaurant_search.select_city.disabled=false;
}
}
function createXMLHttp(){
if(typeof XMLHttpRequest != "undefined"){
return new XMLHttpRequest();
} else if (window.ActiveXObject){
var aVersions = [ "MSXML2.XMLHttp.5.0", "MSXML2.XMLHttp.4.0","MSXML2.XMLHttp.3.0","MSXML.XMLHttp","Microsoft.XMLHttp"];
for (var i = 0; i < aVersions.length; i++){
try{
var oXmlHttp = new ActiveXObject(aVersions[i]);
return oXmlHttp;
}catch(oError){
//Do Nothing
}
}
}
}
function sendCityRequest(){
var oForm = document.restaurant_search;
var sBody = getCityRequestBody(oForm);
var oXmlHttp = createXMLHttp();
if(navigator.appName == "Microsoft Internet Explorer")
{
oXmlHttp.open("post", "*/goEdit/functions/find_cities.php", true);
}else{
oXmlHttp.open("post", "functions/find_cities.php", true);
}
oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200) {
saveCityResult(oXmlHttp.responseText);
} else {
saveCityResult("An error occurred: " + oXmlHttp.statusText);
}
}
};
oXmlHttp.send(sBody);
}
function getCityRequestBody(oForm){
var aParams = new Array();
for (var i=0 ; i < oForm.select_state.length; i++) {
var sParam = encodeURIComponent(oForm.select_state.name);
sParam += "=";
sParam += encodeURIComponent(oForm.select_state.value);
aParams.push(sParam);
}
return aParams.join("&");
}
function saveCityResult(sMessage){
var select_city = document.getElementById("select_city");
select_city.innerHTML = sMessage;
}
function undisable_category(){
var num=document.restaurant_search.select_city.selectedIndex;
if(num==0){
document.restaurant_search.select_category.disabled=true;
}else{
document.restaurant_search.select_category.disabled=false;
}
}
function sendCategoryRequest(){
var oForm = document.restaurant_search;
var sBody = getCategoryRequestBody(oForm);
var oXmlHttp = createXMLHttp();
if(navigator.appName == "Microsoft Internet Explorer")
{
oXmlHttp.open("post", "*/goEdit/functions/find_categories.php", true);
}else{
oXmlHttp.open("post", "functions/find_categories.php", true);
}
oXmlHttp.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
oXmlHttp.onreadystatechange = function () {
if (oXmlHttp.readyState == 4) {
if (oXmlHttp.status == 200) {
saveCategoryResult(oXmlHttp.responseText);
} else {
saveCategoryResult("An error occurred: " + oXmlHttp.statusText);
}
}
};
oXmlHttp.send(sBody);
}
function getCategoryRequestBody(oForm){
var aParams = new Array();
for (var i=0 ; i < oForm.select_state.length; i++) {
var sParam = encodeURIComponent(oForm.select_state.name);
sParam += "=";
sParam += encodeURIComponent(oForm.select_state.value);
aParams.push(sParam);
}
for (var i=0 ; i < oForm.select_state.length; i++) {
var sParam = encodeURIComponent(oForm.select_city.name);
sParam += "=";
sParam += encodeURIComponent(oForm.select_city.value);
aParams.push(sParam);
}
return aParams.join("&");
}
function saveCategoryResult(sMessage){
var select_category = document.getElementById("select_category");
select_category.innerHTML = sMessage;
} if you see an * in a directory area, that just replaces the domain. I did not feel comfortable posting the domain.
Also I re-wrote it to catch IE v FF. I was trying to single out IE.
What I have discovered is, in FF, my city value from the drop down list that is created in the following, is not being passed. It is in IE though. Here is my find_city script....
$city_dropmenu = @mysql_db_query($dbname, $city_dropmenu_query, $link);
while($city_selections = @mysql_fetch_array($city_dropmenu)){
$all_cities[] = $city_selections['rest_city'];
};
@sort($all_cities);
@reset($all_cities);
$n = 0;
while($n <= count($all_cities)){
if($n == 0){
$condensed_cities[0] = $all_cities[0];
}
else{
if($all_cities[$n] == $all_cities[$n - 1]){
}
else{
$condensed_cities[] = $all_cities[$n];
};
};
$n++;
};
$status = "<select name=\"select_city\" onChange=\"sendCategoryRequest(), undisable_categories()\" class=\"searchfields\"><option value=\"\">";
$status .= "Select a Category";
$status .= "</option>";
$n = 0;
while($n <= count($condensed_cities)){
$status .= "<option value=\"$condensed_cities[$n]\">";
$status .= "$condensed_cities[$n]";
$status .= "</option>";
$n++;
};
$status .= "</select>";
print $status; Be a part of the DaniWeb community
We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.