|
JavaScript - Ajax Not Working In Ie And Firefox
In IE online.php script was executed once, In Firefox didn't worked at all... Where is the problem?
Here is my AJAX script: PHP Code: <script language="javascript" type="text/javascript"> <!-- // Get the HTTP Object function gethttpObject2(){ if (window.ActiveXObject) return new ActiveXObject("Microsoft.XMLHTTP"); else if (window.XMLHttpRequest) return new XMLHttpRequest(); else { alert("Your browser does not support AJAX."); return null; } } // Change the value of the outputText field function setOutput(){ if(httpObject2.readyState == 4){ document.getElementById('online').innerHTML = httpObject2.responseText; } } // Implement business logic function doWork(){ httpObject2 = gethttpObject2(); if (httpObject2 != null) { httpObject2.open("GET", "../content/tables/tb_online.php", true); httpObject2.send(null); httpObject2.onreadystatechange = setOutput; } } setInterval(doWork, 10); var httpObject2 = null; //--> </script> <div id='online' ></div> Similar TutorialsIt works in Google Chrome but not Firefox and Internet Explorer. My computer has blocked Opera and I don't know how to change that. Too much energy to investigate now, I'll do so later. Are there any pros that can tell me why this is happening? I'm assuming GoogleChrome is fixing a syntax error that FF and IE don't. Code: var request;
request=false;
try {
request = new XMLHttpRequest();
} catch (trymicrosoft) {
try {
request = new ActiveXObject("Msxml2.XMLHTTP");
} catch (othermicrosoft) {
try {
request = new ActiveXObject("Microsoft.XMLHTTP");
} catch (failed) {
request = false;
}
}
}
function isAlNum(str){
return /^[a-z0-9]+$/i.test(str);
}
var preUsername;
var same;
function updatePage() {
if (username.value.length>0){
if ( request.responseText.indexOf("0") == -1 )
{userNameErrorBox.innerHTML=username.value + " has already been taken";
usernameSuccessBox.innerHTML="";}
else
{userNameErrorBox.innerHTML="";
usernameSuccessBox.innerHTML=username.value + " is available";}}
}
function nameTest()
{
if (username.value==preUsername)
{same=1;}
else
{same=0;}
if (!isAlNum(username.value))
{if (username.value.length>0)
{username.value=preUsername;}}
else
{preUsername=username.value;}
if (username.value.length>0 && username.focus && same===0)
{
userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";
request.abort();
var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
}
if (username.value.length===0)
{ userNameErrorBox.innerHTML="";usernameSuccessBox.innerHTML="";preUsername=""; }
}
I back tracked what i did and it appears that this code Code: var url = "/unseen/checkIfUserNameExist.php?name=" + username.value;
request.open("GET", url, true);
request.onreadystatechange = updatePage;
request.send(null);
has the problem. When I set up alerts to see what works and what doesn't, this code seems to be causing the FF and IE to not work, but I can't tell what it is that's causing them to fail. This is javascript that is suppose to check if a name has been taken by another user. I'm working on a fairly large project that I wish to be the new formspring, (size wise) I procrastinated for 2 weeks of my 12 week break and now that I'm just getting started on it I'm running into an ishness load of problems... Very de-motivating I have a form for user to enter an "id" and after clicking the Get Results button, it will retrieve information from database and alert on the screen. By using the scripts as shown, I am able to get the results from IE8 but I always get a "</body>" tag at the starting point. Also, when using firefox, it shows me nothing. As this is the first time I am trying out AJAX, can any experts out there tell me what have I done wrong?? Thanks in advance~ HTML code Code: <form name="user" method="post"> Enter your id : <input name="id" type="text" maxlength="30" size=30" value=""> <input name="get_result" type="submit" size="20" value="Get Results" OnClick="submitData()"> </form> My javascript Code: function submitData(){
var id = user.id.value;
var ajaxRequest;
try{
// Opera 8.0+, Firefox, Safari
ajaxRequest = new XMLHttpRequest();
}
catch (e){
// Internet Explorer Browsers
try{
ajaxRequest = new ActiveXObject("Msxml2.XMLHTTP");
}
catch (e) {
try{
ajaxRequest = new ActiveXObject("Microsoft.XMLHTTP");
}
catch (e){
alert("Your browser does not support AJAX!");
return false;
}
}
}
// Create a function that will receive data sent from the server
ajaxRequest.onreadystatechange = function(){
if(ajaxRequest.readyState == 4){
var result = ajaxRequest.responseText;
alert(result);
}
}
var queryString = "?id=" + id;
ajaxRequest.open("GET", "check.php" + queryString, true);
ajaxRequest.send(null);
}
My php file - check.php Code: <?PHP
include "../lib/opendata.php"; //<--just the database connection thingy
$id = $_GET['id'];
$result = mysql_query("SELECT * FROM user WHERE id = '$id'");
$db=mysql_fetch_assoc($result);
$name=$db['name'];
echo $name;
}
?>
I have a page that has a simple AJAX call that works fine in firefox and chrome but not in ie. In IE my loading image shows up but the actual sourceURL never loads or shows. Below is my html and javascript code. Can anyone help me with this? <div id="design_strap" style="display:none"> <a href="javascript:loadContent('#content', 'strap.html');">Link</a> <div id="content"></div> </div> <script type="text/javascript"> $.ajaxSetup ({ // Disable caching of AJAX responses cache: false }); function loadContent(elementSelector, sourceUrl) { $(""+elementSelector+"").html('<p><img src="images/loading.gif" width="150" height="150" /></p>'); $(""+elementSelector+"").load(""+sourceUrl+""); //$("content").height(350); } </script> i have made one page this is page link http://pickthefights.com/fantansy-fi...482&page=fight the code of this page is this <script type="text/javascript"> //////////////////////////////// // // Refreshing the DIV FANBOO2 // //////////////////////////////// function refreshdiv_fanboo2(){ // Customise those settings var seconds = 1; var divid = "fanboo2"; var url = "http://pickthefights.com/fanboo2/?id=<?php echo $idvar ?>"; // Create xmlHttp var xmlHttp_two = AJAX(); // No cache var timestamp = fetch_unix_timestamp(); var nocacheurl = url+"?t="+timestamp; // The code... xmlHttp_two.onreadystatechange=function(){ if(xmlHttp_two.readyState==4){ document.getElementById(divid).innerHTML=xmlHttp_two.responseText; setTimeout('refreshdiv_fanboo2()',seconds*1000); } } xmlHttp_two.open("GET",nocacheurl,true); xmlHttp_two.send(null); } // Start the refreshing process window.onload = function startrefresh(){ setTimeout('refreshdiv_fanboo2()',seconds*1000); } </script> <script type="text/javascript"> refreshdiv_fanboo2(); </script> <div name="fanboo2" id="fanboo2"></div> now what ever i put in fanboo2 page it works fine but javascript or jquery is not working here is code of fanboo2 page, you can check page here http://pickthefights.com/fanboo2/?id=482# here is it is working but not here http://pickthefights.com/fantansy-fi...482&page=fight </script> <script src="http://code.jquery.com/jquery-latest.js" type="text/javascript"></script> <script src="http://bxslider.com/sites/default/files/jquery.bxSlider.min.js" type="text/javascript"></script> <script type="text/javascript"> $(document).ready(function(){ $('#slider1').bxSlider(); }); </script> <ul id="slider1"> <li>Slide one content</li> <li>Slide two content</li> <li>Slide three content</li> <li>And so on...</li> </ul> please help me out i want to make java script work on both of this page Code: function addEvent(elem,type,func) {
var obj = document.getElementById(elem);
if(window.addEventListener) {
obj.addEventListener(type,func,false);
}
if(window.attachEvent) {
obj.attachEvent('on'+type,func);
}
}
function $e(obj) {
if(obj) obj = document.getElementById(obj);
if(!obj) return;
return obj;
}
function homeFunc() {
$e('home-wrapper').innerHTML = "<div id=\"choose-container\"><span class=\"choose-buttons\" onclick=\"loginFunc()\">Login Exisiting Account</span><span class=\"choose-buttons\" id=\"createAcct\">Create An New Account</span><span class=\"choose-buttons-highscores\" id=\"createAcct\">Highscores Table</span>";
}
function loginFunc() {
$e('home-wrapper').innerHTML = "<div id=\"login-container\"><div id=\"error-field\"></div><form method=\"post\" onsubmit=\"return validate_login()\" action=\"./index.php\"><label for=\"username\">Username</label><input name=\"username\" id=\"username\" class=\"input\" type=\"text\" /> <label for=\"password\">Password</label><input name=\"password\" id=\"password\" class=\"input\" type=\"password\" /><input name=\"login\" type=\"submit\" value=\"Login\" class=\"loginButtonClass\" /><div id=\"loginQuickLinks\"><span class=\"loginQuickLinks\" onclick=\"homeFunc()\">Register</span> - <span class=\"loginQuickLinks\">Forgot password?</span></form></div></div>";
}
function createAcct() {
alert("Create An Account");
}
function validate_usr() {
var usr = $e('username');
var pwd = $e('password');
if(usr.value.length <= 0 && pwd.value.length <= 0) {
loginErrorMsg('Please supply a username and password.');
return false;
}
if(usr.value.length >= 1 && pwd.value.length <= 0) {
loginErrorMsg('Please supply a password.');
return false;
}
if(pwd.value.length >= 5 && usr.value.length <= 0) {
loginErrorMsg('Please supply a username.');
return false;
}
if(pwd.value.length < 5) {
loginErrorMsg('Invalid username or password.');
return false;
}
if(usr.value.length >= 1 && pwd.value.length >= 5) {
$e('error-field').style.cssText='display:block;';
$e('error-field').innerHTML = "<img src=\"/images/ajax-loader.gif\" /> <span style=\"color:#ffffff\">Loading...</span>";
var req;
var params = 'user='+encodeURIComponent(usr.value.toLowerCase())+'&pass='+encodeURIComponent(pwd.value.toLowerCase());
if(window.XMLHttpRequest) {
req = new XMLHttpRequest();
}
if(window.ActiveXObject) {
req = new ActiveXObject("Msxml2.XMLHTTP" || "Microsoft.XMLHTTP");
}
req.open('POST','server/userChck.php',true);
req.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded');
req.send(params);
req.onreadystatechange = req;
if(req.readyState == 4 && req.status == 200) {
if(req.responseText == 0) {
window.scrollTo(0,1);
setTimeout(function(){loginErrorMsg('Invalid username or password');},1000);
return false;
}
}
}
return true;
}
function loginErrorMsg(msg) {
window.scrollTo(0,1);
$e('error-field').innerHTML = msg;
$e('error-field').style.cssText='display:block';
}
function validate_login() {
var isTurn = (!validate_usr()) ? false : true;
return isTurn;
}
window.onload = function() {
setTimeout(function(){window.scrollTo(0,1);},100);
addEvent('loginButton','click',loginFunc);
addEvent('createAcct','click',homeFunc);
}
This code works fine when I set this line to false Code: req.open('POST','server/userChck.php',false);
but as soon as I set this to true. I doesn't work.... What am I doing wrong here? Hi. Just started fooling around with Ajax a bit back. So far, it's been fine. Today, though, I'm hitting some error I can't figure out. It *should* work, but it doesn't, and I have no idea why. Simple HTML form page with a bit of css. No big deal. Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
<head>
<script type="text/javascript" src="livesearch.js"></script>
<style type="text/css">
#livesearch
{
margin:0px;
width:194px;
}
#txt1
{
margin:0px;
}
</style>
</head>
<body>
<form>
<input type="text" id="txt1" size="30" onkeyup="showResult(this.value)" />
<div id="livesearch"></div>
</form>type
</body>
</html>
Problem area below in bold. Code: function showResult(str){
if (str.length == 0)
{
document.getElementById("livesearch").innerHTML = "";
document.getElementById("livesearch").style.border = "0px";
}
var xmlhttp = getXMLHttpObject();
if (xmlhttp == null){
alert("Your browser does not support XML HTTP requests!");
return;
}
var url = "livesearch.php";
url = url + "?q=" + str;
url = url + "&sid="+Math.random();
xmlhttp.onreadystatechange=stateChanged ;
xmlhttp.open("GET", url, true);
xmlhttp.send(null);
}
function stateChanged(){
if (xmlhttp.readyState == 4){
alert("Never seems to hit a readystate==4");
document.getElementById("livesearch").innerhtml = xmlhttp.responseText;
document.getElementById("livesearch").style.border="1px solid #A5ACB2";
}
}
function getXMLHttpObject(){
//Current browsers
if (window.XMLHttpRequest){
return new XMLHttpRequest();
}
//For IE 5/6
if(window.ActiveXObject){
return new ActiveXObject("Microsoft.XMLHTTP");
}
else
{
return null;
}
}
My PHP file is just a simple echo statement to see that it works to that point. It doesn't. For whatever reason, it never seems to hit readyState ==4. It enters the function (I've checked with alerts), but the if statement never comes out to be true. I have no idea why. I've combed over the code for errors for a while now and I can't find anything. Any ideas? Would be much obliged. Hi, I'm trying to work through a head first book on ajax and javascript. I am also trying to emplement some of the codes in a small application I had built strictly with server side code. What it does is: two input fields for user defined values. Once the user inputs the two values, they are passed to the action page, some simple math is performed on these 2 values, and then 4 different resluts are displayed back on the action page. What I wanted was of course to make this asynchronous and display the results without a page reload. So, when I reworked the book code for my own use, and try to run the application, I get an error saying my url variable is undefined. The value of the first input seems to be passed though. One thing of note to mention is the application was written in coldfusion. The form values are passed using cf. Not sure if that matters. I mean cf works well with js and ajax, but maybe my original procedure doesnt work with my js code as it is now. Here is the javascript/ajax code: PHP Code: <script type="text/javascript" language="javascript"> var request = null; try { request = new XMLHttpRequest(); } catch (trymicrosoft) { try { request = new ActiveXObject("Msxm12.XMLHTTP"); } catch (othermicrosoft) { try { request = new ActiveXObject("Microsoft.XMLHTTP"); } catch (failed) { request = null; } } if(request == null) alert("Error creating request object!"); } function getLampVolts() { var lamp = document.getElementById("lampVoltage").value; var url = "calculatorAction.cfm?lamp = " + escape(lampVolts); request.open("GET", url, true); request.onreadystatechange = updatePage; request.send(null); } function updatePage() { if(request.readyState == 4) { if(request.status == 200) { var lumens = request.responseText; document.getElementById("lumens").value = lumens; } else alert("Error! Request Status is " + request.status); } } </script> Here is the form: Code: <form action="calculatorAction.cfm">
<table>
<tr>
<th>Lamp Voltage</th>
<td><input name="lampVoltage" id="lampVoltage" type="text" /></td>
</tr>
<tr>
<th>Socket Voltage</th>
<td><input name="socketVoltage" id="socketVoltage" type="text" /></td>
</tr>
<tr>
<td><input type="button" value="Submit" onClick="getLampVolts();" /></td>
<td><input type="reset" value="Reset" /></td>
</tr>
</table>
and here is my action page calculatorAction.cfm: Code: <cfparam name="bulbCalculator.cfm" type="any" default="0">
<!--- Set User Defined Values of Form --->
<cfset lampVolts = FORM.lampVoltage>
<cfset actualVolts = FORM.socketVoltage>
<!--- Set Constants For Calculations --->
<cfset lumens = 27500>
<cfset life = 500>
<cfset watts = 65>
<cfset colorTemp = 3500>
<!--- Perform Calculations --->
<cfset actualLumens = ((actualVolts/lampVolts)^3.4)*lumens>
<cfset lumenPercent = actualLumens/lumens*100>
<cfset hours = ((lampVolts/actualVolts)^13)*life>
<cfset hourPercent = hours/life*100>
<cfset actualWatts = ((actualVolts/lampVolts)^1.3)*watts>
<cfset wattPercent = actualWatts/watts*100>
<cfset temperature = ((actualVolts/lampVolts)^.42)*colorTemp>
<cfset tempReduction = temperature-colorTemp>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
</head>
<body>
<cfsavecontent variable="calculations">
<table>
<cfoutput>
<tr>
<td>Lamp Rated Voltage:</td>
<td>#lampVolts#</td>
</tr>
<tr>
<td>Socket Application Voltage:</td>
<td>#actualVolts#</td>
</tr>
<tr>
<td id="lumens">Percent of Lumens Used:</td>
<td>#round(lumenPercent)#%</td>
</tr>
<tr>
<td>New Rated life in Percentages:</td>
<td>#round(hourPercent)#%</td>
</tr>
<tr>
<td>Percent of Watts Used:</td>
<td>#round(wattPercent)#%</td>
</tr>
<tr>
<td>Change in Temperatu </td>
<td>#round(tempReduction)#°</td>
</tr>
</cfoutput>
</table></cfsavecontent>
</body>
</html>
Again, the url variable says it is undefined. But the variable "lamp" contains the form field value. Thanks for any help and tips in advance! ** sorry for posting this here. Kinda rushed on time, hoping for some clues. Hello, I am using this code: using prototype too. Code: Code: var haveData = false;
[xmllink1, xmllink2, xmllink3].each(function(xmlURL){
if(haveData == false){
new Ajax.Request( xmlURL, {
method: 'get',
contentType: "application/xml",
onSuccess: function( transport ) {
var titles = transport.responseXML.getElementsByTagName( 'titles' );
DO SOME WORK HERE
haveData = true;
throw $break;
}
},
onFailu function() {
return;
},
onException: function(request,error) {
return;
}
}
What I am trying to do is if my first item "xmllink1" has some data, we break out and end it and now we can 'build some structures' ie.. onSuccess If xmllink1 doesn't have any valid data, we go to xmllink2 etc.. and so forth. Basically, when I get some valid returns.. I want to then exit out of the loop and then act on my data. But I need it in order so I know that my xmllink1 is not being in a race conditiona with xmllink2 etc.. But what is happening is I have simulataneous things going on and I get an onException (because one of the links doesn't resolve or has bad data) and that ends up killing my javascript. How can I test in order.. if link1 is good, great.. exit the "each method" and act on that data.. if xmllink1 is bad (onfairlure or onexception) lets go to xmllink2 etc.... any ideas? Could somebody help me please to explain what I'm doing wrong.... a have this html file with references to some javascripts (datagrid from http://www.datatables.net) and this html file work ok..I mean javascripts a css styling works with table... but when I call this page by ajax and callback (this html page) is forward back into another div , table doesn't work ....just data from page but now functionality from javascript and css styling... how should I force callback result to use javascript and css? Code: <!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN" "http://www.w3.org/TR/html4/strict.dtd">
<html><head>
<meta http-equiv="Content-type" content="text/html; charset=UTF-8">
<link rel="shortcut icon" type="image/ico" href="http://www.datatables.net/media/images/favicon.ico">
<link rel="alternate" type="application/rss+xml" title="RSS 2.0" href="http://www.datatables.net/rss.xml">
<style type="text/css" media="screen">
@import "media/css/demo_page.css";
@import "media/css/demo_table.css";
@import "http://www.datatables.net/media/css/site_jui.ccss";
@import "media/css/demo_table_jui.css";
@import "media/css/themes/base/jquery-ui.css";
@import "media/css/themes/smoothness/jquery-ui-1.7.2.custom.css";
/*
* Override styles needed due to the mix of three different CSS sources! For proper examples
* please see the themes example in the 'Examples' section of this site
*/
.dataTables_info { padding-top: 0; }
.dataTables_paginate { padding-top: 0; }
.css_right { float: right; }
#example_wrapper .fg-toolbar { font-size: 0.8em }
#theme_links span { float: left; padding: 2px 10px; }
</style>
<script type="text/javascript" src="media/js/complete.js"></script>
<script src="media/js/jquery-1.4.4.min.js" type="text/javascript"></script>
<script src="media/js/jquery.dataTables.min.js" type="text/javascript"></script>
<script type="text/javascript" src="media/js/jquery.dataTables.editable.js"></script>
<script src="media/js/jquery.jeditable.js" type="text/javascript"></script>
<script src="media/js/jquery-ui.js" type="text/javascript"></script>
<script src="media/js/jquery.validate.js" type="text/javascript"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready( function () {
$('#example').dataTable().makeEditable({
sUpdateURL: "update.php",
sDeleteURL: "delete.php"
});
} );
</script>
</head>
<body id="index" class="grid_2_3">
<table cellpadding="0" cellspacing="0" border="0" class="display" id="example">
<thead>
<tr>
<th>
ID</th>
<th>
user</th>
<th>
password</th>
<th>
first</th>
<th>
last</th>
<th>
company</th>
</tr>
</thead>
<tbody>
<tr class="even_gradeA" id="1">
<td>
1
</td>
<td>
XY
</td>
<td>
passwoed
</td>
<td>
Ja
</td>
<td>
jajovic
</td>
<td>
2
</td>
</tr>
<tr class="even_gradeA" id="2">
<td>
2
</td>
<td>
jojo
</td>
<td>
fa25af5301e2dda1fddea740200aa10ab6c70d86
</td>
<td>
jojo
</td>
<td>
jojovicko
</td>
<td>
2
</td>
</tr>
<tr class="even_gradeA" id="3">
<td>
3
</td>
<td>
kuk
</td>
<td>
d588aebb93e3adf70eac1fb479d6d53f9dc21816
</td>
<td>
kuk
</td>
<td>
kukovic
</td>
<td>
3
</td>
</tr>
<tr class="even_gradeA" id="10">
<td>
10
</td>
<td>
admin
</td>
<td>
f865b53623b121fd34ee5426c792e5c33af8c227
</td>
<td>
admin
</td>
<td>
adminovic
</td>
<td>
3
</td>
</tr>
</tbody>
</table><button id="btnDeleteRow">Delete</button>
</body>
</html>
hi, When I navigate to a page with Ajax on my iphone or ipad, it doesn't show up, page is just blank, I have checked for errors and there is no errors?! here is my Ajax code Code: function datecheckFunction(){
var datecheckRequest; // The variable that makes Ajax possible!
try{
// Opera 8.0+, Firefox, Safari
datecheckRequest = new XMLHttpRequest();
} catch (e){
// Internet Explorer Browsers
try{
datecheckRequest = new ActiveXObject("Msxml2.XMLHTTP");
} catch (e) {
try{
datecheckRequest = new ActiveXObject("Microsoft.XMLHTTP");
} catch (e){
// Something went wrong
alert("Your browser broke!");
return false;
}
}
}
// Create a function that will receive data sent from the server
datecheckRequest.onreadystatechange = function(){
if(datecheckRequest.readyState == 4){
var ajaxDisplay = document.getElementById('ajaxDiv');
ajaxDisplay.innerHTML = datecheckRequest.responseText;
}
}
var datepicker = document.getElementById('datepicker').value;
var queryString = "?datepicker=" + datepicker;
//Add the following line
datecheckRequest.open("GET", "http://www.affordableappliancerepairs.co.uk/admin/checkdate.php" + queryString, true);
datecheckRequest.send(null);
}
Can somebody help me to find the problem with the below given code, its not working. $(document).on('keyup', ".add_commi", function() { typingTimer = setTimeout(doneTyping, doneTypingInterval); var pro = $(this).attr('id'); var selectvalue = $(this).html(); var id = pro.slice(-2); var amount = $('#amount'+id).html(); var rate = $('#v_rate'+id).html(); //alert('working'); var data = 'cur_amount='+cur_amount +'&cur_rate='+cur_rate+'&commision='+selectvalue; $.ajax({ type: "POST", dataType: "json", url: "http://localhost/agent/buy-currency-calculations/", data: data, success: function(output){ var cus_rate = output.cus_rate; var total = output.total; var tot_commision = output.commision; alert(cus_rate, total, tot_commision); $('#curr_rate'+id).html(cus_rate); $('#tot'+id).html(total); $('#tot_commi'+id).html(tot_commision); } }); return false; }); Reply With Quote 01-09-2015, 02:53 PM #2 Dormilich View Profile View Forum Posts Senior Coder Join Date Jan 2010 Location Behind the Wall Posts 3,532 Thanks 13 Thanked 372 Times in 368 Posts cur_amount, cur_rate and selectvalue are supposedly primitive values (like numbers) but you fetch them as HTML code which the interpreting server script certainly can’t process. (if it should be indeed primitives, you should rather consider using form elements for that). despite that jQuery has a method to fetch values off a form, which might be easier to implement, but that depends on the used HTML code. additionally, in your browser’s dev tools you can check the network pane for what values are sent/received in the AJAX call. hereis the html file and javascripton click of this button a html ***************************** <table class=matcolor id=topnav cellspacing=0 cellpadding=0 width=550 border=0 bgcolor="#FFCCCC"> <tbody> <tr align=middle> <td id=menu1 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Desk Top Publishing </font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu2 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Transcription</font></div> </td> <td width=1 bgcolor=#ff9900 class="mat"></td> <td id=menu3 onMouseOver="this.className='mPrimaryOn';showmenu(this);" onClick="this.document.location.href=''" onMouseOut="this.className='mPrimaryOff';hidemenu(this);" class="mat" height="20"> <div align="center"><font color="#FF0000">Accounts Processing </font></div> </td> </tr> </tbody> </table> ***************************************** <script language=JavaScript> ix = document.getElementById('tblmenu1').getBoundingClientRect(); new ypSlideOutMenu("menu1", "right",ix.left + ix.right ,ix.bottom + 10); </script> **any thing i have to alter to work in firefox please help Hey people! New to using Javascript but have a problem. Working in Firefox but not in IE, and no errors flash up - it just does not work! Here is my code if anyone has the time to take a peak! What it does in Firefox is has a drop down with two options, both of which call the functions passing over the name of the items to be hidden or displayed. Works fine, but not in IE. Javascript Function: Code: <script type="text/javascript">
function showStuff(id) {
document.getElementById(id).style.display = 'block';
}
function hideStuff(id) {
document.getElementById(id).style.display = 'none';
}
</script>
Form drop down to call javascript: Code: <select name="golf_package">
<option value='Yes' onClick="showStuff('Golf'); hideStuff('Accommodation')">Yes</option>
<option value='No' selected='selected' onClick="showStuff('Accommodation'); hideStuff('Golf')">No</option>
</select>
Hide and Show date: Code: <span id="Golf" style="display: none; return: false;">HIDE BIT</span><span id="Accommodation" style="display: none; return: false;">HIDE BIT TWO </span> Any help will be much appreciated! Thanks Hello all, I have a property of text box which works well in firefox but not in IE ..I am unable to understand why ..andy help is appreciated ? Code: onfocus="this.style.backgroundColor='#F1CC8E';" Hi, I'm new to JS and been thrown in at the deepend as our developer has just left! You are dealing with a total newbie! I have the following script that is not working in FF but is fine in Chrome and IE can anyone tell me what is wrong with it please?! Code:
function showTotalCost(val)
{
if(val=='yes')
{
if(document.getElementById('secondaryeventtype').value == 'adventure')
{
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) + 100).toFixed(2) + ' (including insurance)';
}
else
{
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) + 27).toFixed(2) + ' (including insurance)';
}
}
else
{
document.getElementById('totalcost').innerText = document.getElementById('cost').value;
}
}
Code: function calculateGroupMembers()
{
var iMultiplier;
if(document.getElementById('txtGroup1Firstname').value != '' || document.getElementById('txtGroup1Surname').value != '' || document.getElementById('txtGroup1Email').value != '')
{
iMultiplier=2;
}
if(document.getElementById('txtGroup2Firstname').value != '' || document.getElementById('txtGroup2Surname').value != '' || document.getElementById('txtGroup2Email').value != '')
{
iMultiplier=3;
}
if(document.getElementById('txtGroup3Firstname').value != '' || document.getElementById('txtGroup3Surname').value != '' || document.getElementById('txtGroup3Email').value != '')
{
iMultiplier=4;
}
if(document.getElementById('txtGroup4Firstname').value != '' || document.getElementById('txtGroup4Surname').value != '' || document.getElementById('txtGroup4Email').value != '')
{
iMultiplier=5;
}
if(document.getElementById('txtGroup5Firstname').value != '' || document.getElementById('txtGroup5Surname').value != '' || document.getElementById('txtGroup5Email').value != '')
{
iMultiplier=6;
}
document.getElementById('totalcost').innerText = Number(parseFloat(document.getElementById('cost').value) * iMultiplier).toFixed(2) + ' (inc group members)';
}
It is fired from an onblur event in the div below once the chkbox is ticked, the link to the page is https://www.doitforcharity.com/book-...eid=1990&cid=0 but you may need to progress through https://www.doitforcharity.com/book-....aspx?eid=1990 first: Code:
<div id="pnlGroupBooking">
<label class="boldfieldlabel" for="chkGroupBooking">Do you wish to book for others too? </label>
<input id="chkGroupBooking" type="checkbox" language="javascript" onclick="__doPostBack('chkGroupBooking','')" checked="checked" name="chkGroupBooking">
(you may book up to 5 additional people)
<div id="pnlGroupBookingNames" style="border: 1px solid LightGrey; width: 500px;" styles="padding:10px;">
<strong>Group Member Names</strong>
<br>
<p>
</p>
<p>
</p>
<p style="vertical-align: top;">
<strong>1) </strong>
<input id="txtGroup1Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup1Firstname">
<input id="txtGroup1Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup1Surname">
<input id="txtGroup1Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup1Email">
<br>
<strong>2) </strong>
<input id="txtGroup2Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup2Firstname">
<input id="txtGroup2Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup2Surname">
<input id="txtGroup2Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup2Email">
<br>
<strong>3) </strong>
<input id="txtGroup3Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup3Firstname">
<input id="txtGroup3Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup3Surname">
<input id="txtGroup3Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup3Email">
<br>
<strong>4) </strong>
<input id="txtGroup4Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup4Firstname">
<input id="txtGroup4Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup4Surname">
<input id="txtGroup4Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup4Email">
<br>
<strong>5) </strong>
<input id="txtGroup5Firstname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup5Firstname">
<input id="txtGroup5Surname" class="formfieldsmall" type="text" onblur="calculateGroupMembers();" name="txtGroup5Surname">
<input id="txtGroup5Email" class="formfield" type="text" onblur="calculateGroupMembers();" name="txtGroup5Email">
</p>
</div>
</div>
Thanks! This code works fine in IE but it won't in FF. The error console says topdiv.style and sidediv.style are 'undefined' This is the javascript: Code: function changeposition() {
topdiv = "document.getElementById('top')";
sidediv = "document.getElementById('side')";
if (document.scrolltop > 100) {
topdiv.style.position = "fixed";
topdiv.style.top = "-100px";
sidediv.style.position = "fixed";
sidediv.style.position = "35px";
} else {
topdiv.style.position = "absolute";
topdiv.style.top = "0px";
sidediv.style.position = "absolute";
sidediv.style.position = "135px";
}}
window.onscroll = changeposition();
and the HTML: Code: <!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd"> <html> <head> <link rel="stylesheet" type="text/css" href="standardstyle.css"> <script type="text/javascript" src="menuposition.js"></script> </head> <body> <div class="top" id="top"> ... </div> <div class="sidebar" id="side"> ... </div> ... </body> </html> I'm using FF4 Hello - I'm a total newbie to html and javascript but have been forced to learn it somewhat since I'm making a website for my wife's business. Anyway, the site has a page where people can choose from menuitems of a form ("select" elements). That form info is then used to call Foxycart. I've decided to link the choosing of those menu-items to showing appropriate product images, thus providing visual feedback for the buyer. I have hacked my way to a point that the page does what I want in Firefox, but it breaks in IE and I have no idea why since the same sort of simple code algorithm to poll the menus with "document.getElementByIdworks" works in IE until I leave the page, but then stops working when I return. The page is he http://angelatoyarn.squarespace.com/...our-own-gelato (the site is still a WIP obviously) In Firefox everything is fine - I can select the items I want and the pictures of those images appear at the bottom of the page. If I leave the page and come back, the function Updateyarn() is called which grabs the .selectedindex values and re-inserts the images. But in IE when I leave the page and come back the select-menus retain their previous values (as they should) but my update yarn () function errors out and doesn't return a valid integer. Please Help! I have no Earthly clue why the IE version is breaking. -thanks, - TJ Hi, This problem has completely stumped me, was hoping from a bit of advice. I have used the code of my affiliate software to show my company logo. This code works in Firefox, but for some reason doesn't work in IE. The company who own the affiliate software have never seen this problem before and have been unable to assist. Not sure if it's a server problem? To see the problem have a look at logo at the top of my test website in firefox then IE. http://www.nctshop.co.uk/staging/ Here is a snippet of the code below. It is the line where it links to nctshopaffiliate which is where the problem lies. Thanks! Adrian Code: <table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr><td class="topnav1bgcolor">
<table width="100%" border="0" cellpadding="0" cellspacing="0">
<tr>
<td valign="top"><a href="../default.asp"><script language="JavaScript" type="text/javascript" src="http://www.nctshopaffiliate.co.uk/display.php?token=logo" alt="NCTSHOP" width="650" height="89" border="0"/></script></a></td>
<td align="right" valign="top">
<table width="223" border="0" cellpadding="0" cellspacing="0">
<tr><td height="5" colspan="5"><img src="images/clear.gif" alt="" style="width:1;height:1;border:0"></td></tr>
<tr><td colspan="5"> </td></tr>
<tr><td height="25" colspan="5"><img src="images/clear.gif" alt="" style="width:1;height:1;border:0"></td></tr>
<tr>
<td class="plaintext"><a title="View Basket" href="basket.asp"><img src="images/newcart_Img.gif" alt="View Basket" style="width:23;height:12;border:0"></a></td>
<td><img src="images/clear.gif" alt="" style="width:5;height:1;border:0"></td>
<td style="background-image:url(images/bkg_cartinfo.gif);height:21">
<table width="200" border="0" cellpadding="0" cellspacing="0" >
<tr>
<td class="plaintext" align="center"><a title="View Basket" href="basket.asp"><span class="plaintext"><u>Items</u></span></a> <%=session("SL_BasketCount")%>
|
Sub Total <%=formatcurrency(session("SL_BasketSubTotal"))%></td>
</tr>
</table>
</td>
<td> </td>
<td><a class="topnav1" title="Checkout" href="<%=session("secureurl")%>custinfo.asp" ><u>Checkout</u></a></td>
</tr>
</table>
</td>
<td style="width:10"><img src="images/clear.gif" alt="" style="width:1;height:1;border:0"></td>
</tr>
</table>
</td>
</tr>
</table>
I have a function that checks to see the number entered in a textfield and then, if greater than 1, will change a radio button from Single to Multiple and visa versa. The function is called from the textfield with an onkeyup="function()". The problem I am having is that it works in IE just fine, but in Firefox it doesn't seem to be doing anything. I'm not getting any errors and can't seem to see what is the problem. Google doesn't seem to be any help... Anyone have any ideas? Thanks! Hi, After spending hours trying out many different examples that supposedly work with IE and FF, I've decided to post here This is the code I'm using to catch the down arrow: Code: function is_int(event)
{
var Key = event.keyCode ? event.keyCode : event.which ? event.which : event.charCode;
if(Key==40) {
alert('down arrow');
}
}
And called using the following on the text input of a form field: Code: onKeyDown="is_int(event);" This works in IE but still not in Firefox (3.5.7). Surprised as it has the .which in there - I thought this is what FF needed? |
|||||||