JavaScript - Ajax Not Working On Iphone Or Ipad, Page Is Blank

I am working on a website that features a custom javascript enabled audio player with an animated playhead to follow along with the provided spectrogram. An example of this is included below.

http://cetus.ucsd.edu/voicesinthesea.../humpback.html

I am having difficulty figuring out why the audio/spectrogram player does not work on an iPad. This component was built by a developer who I am not longer in contact with, thus I am in urgent need of some advice/wisdom.

Thank you!

Edit: Nevermind

Hi developers

Needing some help.

My javascript/css drop down menu is not working on the ipad or other touch screen devices. It works fine on laptops & desktops which use a mouse.

I've discovered that this is because touchscreen devices like the Ipad do not recognise the onmouseover/onmouseout event handler that my script relies on. Is there any way I can modify my script so that it is compatiable both with traditional devices and touchscreen devices?

The code I am using is:
<script type="text/javascript"><!--
var timeout = 500;
var closetimer = 0;
var ddmenuitem = 0;

// open hidden layer
function mopen(id)
{
// cancel close timer
mcancelclosetime();

// close old layer
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';

// get new layer and show it
ddmenuitem = document.getElementById(id);
ddmenuitem.style.visibility = 'visible';

}
// close showed layer
function mclose()
{
if(ddmenuitem) ddmenuitem.style.visibility = 'hidden';
}

// go close timer
function mclosetime()
{
closetimer = window.setTimeout(mclose, timeout);
}

// cancel close timer
function mcancelclosetime()
{
if(closetimer)
{
window.clearTimeout(closetimer);
closetimer = null;
}
}

// close layer when click-out
document.onclick = mclose;

//--></script>

Which drives the following html:

<ul id="links">

<li><a href="whats_new/whats_new.html">what's new</a></li>

<li><a href="#"

onmouseover="mopen('m1')"

onmouseout="mclosetime()">clothing</a>

<div id="m1"

onmouseover="mcancelclosetime()"

onmouseout="mclosetime()">

<a href="clothing/clothing_page1.html">clothing</a>

</div>

</li>

<li><a href="#"

onmouseover="mopen('m2')"

onmouseout="mclosetime()">accessories</a>

<div id="m2"

onmouseover="mcancelclosetime()"

onmouseout="mclosetime()">

<a href="bags/bags_page1.html">bags</a>

<a href="jewellery/jewellery_page1.html">jewellery</a>

</div>

</li>
</ul>

Any suggestions would be much appreciated.

Thank you.

Nonye

hi Pals,
I have a problem regarding the "target" attribute of "a" tag. in my code I use biggerlink jQuery script to give link to p element without come HTML validation problem. I pass the "target" value from PHP to smarty template , but it's not working , When I remove "biggerlink " it works but the link in <p> tag not working . My Tpl file is :


Code:

{if not empty($campaign)}
<div class="securti-adv biggerlink">
	{if not empty ($campaign.media)}
		<a href="{$campaign.url}" {if n($campaign.linkTarget)}target="{$campaign.linkTarget}"{/if} class="thumb">
			<img src="{$campaign.image}" title="{$campaign.title1 + $campaign.title2}" alt="{$campaign.title1 + $campaign.title2}" />	</a>
	{/if}
	<div class="details">
		{if not empty ($campaign.title1) || not empty ($campaign.sub_title)}
			<a href="{$campaign.url}" {if not empty($campaign.linkTarget)}target="{$campaign.linkTarget}"{/if} title="{$campaign.title1 + $campaign.title2}">
				 {text2image styleSlug=$campaign.titleStyle1 text=$campaign.title1}
				 {text2image styleSlug=$campaign.titleStyle2 text=$campaign.title2}
				 <span><img src="{$imagesDir}/btn-campaign-meet-security-advisor.png" alt="" title="" /></span>
			</a>
			<p> {text2image styleSlug=$campaign.subtitleStyle text=$campaign.subTitle}</p>
		{/if}
	</div>
</div>

<script type="text/javascript" language="javascript">
{literal}
$(document).ready(function(){
	$('.biggerlink').biggerlink();
});
{/literal}
</script>
{/if}

My plugin code is :



Code:

(function($) {
	$.fn.biggerlink = function(options) {

		// Default settings
		var settings = {
			hoverclass:'hover', // class added to parent element on hover
			clickableclass:'hot', // class added to parent element with behaviour
			follow: true	// follow link? Set to false for js popups
			
		};
		if(options) {
			$.extend(settings, options);
		}
		$(this).filter(function(){
			 return $('a',this).length > 0;

		}).addClass(settings.clickableclass).each(function(i){

			// Add title of first link with title to parent
			$(this).attr('title', $('a[title]:first',this).attr('title'));

			// hover and trigger contained anchor event on click
			$(this)
			.mouseover(function(){
				window.status = $('a:first',this).attr('href');
				$(this).addClass(settings.hoverclass);
			})
			.mouseout(function(){
				window.status = '';
				$(this).removeClass(settings.hoverclass);
			})
			.bind('click',function(){
				$(this).find('a:first').trigger('click');
			})

			// triggerable events on anchor itself

			.find('a').bind('focus',function(){
				$(this).parents('.'+ settings.clickableclass).addClass(settings.hoverclass);
			}).bind('blur',function(){
				$(this).parents('.'+ settings.clickableclass).removeClass(settings.hoverclass);
			}).end()

			.find('a:first').bind('click',function(e){
				if(settings.follow == true)
				{
					window.location = this.href;
				}
				e.stopPropagation(); // stop event bubbling to parent
			}).end()

			.find('a',this).not(':first').bind('click',function(){
				$(this).parents('.'+ settings.clickableclass).find('a:first').trigger('click');
				return false;
			});
		});
		return this;
	};
})(jQuery);

the value of "target" , "_blank" is not work .... I highlight the code part regarding this, please check and give me a solution ASAP. You can mail me at : anes.pa@gmail.com



Thanks,
Anes

Hello all, I would like someone to help me with this. I'm building my portfolio website. I'm an illustrator and graphic designer (for printing). My website uses html and css. I introduce a jquery plugin to create a slide show with my work. Until then, everything was working well. The problem appears when I introduce php to my code in order not to repeat the navigation bar all the time. With php and the jquery together I get a blank page in my browser.

This link shows the blank page I'm getting using php and jquery together.
http://www.raulmv.com/calendar.php

This is an example of the site without the jquery.
http://www.raulmv.com/graphics.php

Could someone please help me with this thanks.



Code:

<!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" />
<meta name="description" content="#" />
<meta name="keywords" content="#" />

<title>#</title>

<meta name="google-site-verification" content="1ksaaEb5-Ur8h5ivruWp4iRcUB-tDLyM43L6yCl1OuQ" />

<link href="css/style.css" rel="stylesheet" type="text/css" />

<!-- include jQuery library -->
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>

<!-- include Cycle plugin -->
<script type="text/javascript" src="http://cloud.github.com/downloads/malsup/cycle/jquery.cycle.all.latest.js"></script>
<script type="text/javascript" src="/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="/js/jquery.cycle.all.js"></script>
<script type="text/javascript" src="/js/common.js"></script>


<!--Google Analytics-->

<script type="text/javascript">

  var _gaq = _gaq || [];
  _gaq.push(['_setAccount', 'UA-12002561-1']);
  _gaq.push(['_trackPageview']);

  (function() {
    var ga = document.createElement('script'); ga.type = 'text/javascript'; ga.async = true;
    ga.src = ('https:' == document.location.protocol ? 'https://ssl' : 'http://www') + '.google-analytics.com/ga.js';
    var s = document.getElementsByTagName('script')[0]; s.parentNode.insertBefore(ga, s);
  })();

</script>




</head>

<body class="#" id="portfolio">

<div id="container">

<!--Top Navigation-->  
<div id="navcontainer"> <?php {include("navbartop.html");} ?> </div>

  
 
<!--Left Navigation-->  
<div id="navBar"> <?php include("navbarleft.html"); ?> </div>


<!--Info-->
<div id="info">
       <span class="Title">ANYTIME CALENDAR | 2009</span>
          <span class="style">Calendar designed to be used any year, any occasion, anytime.</span>    
</div>  





<!--Imagenes-->
<div id="showreel-nav-wrap">
  <span>
    </span>
</div>



<ul id="buy-links" class="slideshow">
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
  
  <li>
  </li>
</ul>
        

<div id="showreel">
                <ul class="slideshow pics">    
                    <?xml version="1.0" encoding="utf-8"?>

<li><img src="images/Calendar.png" height="522px"/>
</li>

<li><img src="images/IMG_1162.png" height="522px" />
</li>

<li><img src="images/IMG_1307.png" />
</li> 

<li><a href="images/Calendar/Instructions.gif"><img src="images/Instructions_small.gif" /></a>
</li>        
      </ul>  
			</div><!--/showreel-->




<script type="text/javascript">
$(function() {	
	var totalImg = $("#showreel li").size() - 1;
	$("#buy-links li:gt(" + totalImg + ")").remove();
	
    $("#showreel-nav-wrap span").after('<div id="showreel-nav" class="showreel-nav">')

	$('.slideshow').each(function(index) {
        $(this).cycle({
			fx:     'fade',
			speed:  'slow',
			timeout: 0,
			sync:    false,
			pager:  '#showreel-nav',
			pagerAnchorBuilder: function(i) {
				if (index == 0)
					// for first slideshow, return a new anchor
					return '<a href="#">'+(i+1)+'</a>';
				// for 2nd slideshow, select the anchor created previously
				return '#showreel-nav a:eq('+i+')';
        	}
		});
    });

	//Image to trigger showreel links
	activeLink = $('#showreel-nav').find('.activeSlide');
	nextLink = activeLink.next();

	$('.slideshow img').bind('click',function(){
		activeLink = $('#showreel-nav').find('.activeSlide');
		nextLink = activeLink.next();
		nextLink.trigger('click');
	});
	
	//Get h1 text length
	var h1length = $('h1').text().length;
	if(h1length > 27) {
		$('.oj-title').css('margin-top','-21px');
	}
});
</script>

<!-- end #mainContent --></div>


</body>
</html>

Those <li> tags Im using is to numbered the images. It might not be a good practice but it works.

Thanks for reading this post, I hope someone could help me. It's frustrating I have been for the last two days going around trying to change things and nothing seems to work.

This used to work and suddenly it does not work in IE.

Here's the function
Code:

function pdfWindow(loc)
{
  if(loc == "#RefQuide") {
     location.href = loc;
  } else {
     // The window attributes
     var window_attribs = "height=650,width=850,resizable=yes,scrollbars=yes";

     window.open(loc,"PDF",window_attribs);
  }
}

Here's part of the HTML
Code:

<form name="myForm">
<select name="hypercomList">
<option value="/CWRWeb/pdf/HypercomT4000.pdf">Hypercom T4000 </option>
<option value="/CWRWeb/pdf/HypercomT4100.pdf">Hypercom T4100 </option>					
</select>
<input type="button" value="Go!" onclick="pdfWindow(myForm.hypercomList.options[myForm.hypercomList.selectedIndex].value)">
				
</form>

Any ideas why it would open a blank page instead of the PDF? Works ok in FF.

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

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> 

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>

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>&nbsp;-&nbsp;<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, 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)#&deg;</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!

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.

** 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>

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.