2 ajax requests onMouseOver and onClick in one span segment.

technotool · November 2, 2008

First, thanks for taking the time to read this problem.

I have a script which uses some text in <span> tags. When the user onMouseOver 's the text an ajax function( toolTip() ) is called and --> some text in a div displays. When the same text is onClick 'ed another ajax function( recallText() ) is called and some text is inserted into a textarea.

individually, the ajax behaviors work perfectly but when I combine the behaviors only the onMouseOver function works. The onClick function doesn't work. I keep both functions on the same js source file.

Here is the span segment.

Do I need to do something special when there are 2 requests in the same tag?

echo "<span id=\"$field_id\" onMouseOver=\"toolTip(this.id);\" onMouseOut=\"clearPopup();\" 

onClick=\"recallText(this.id);\">".$field_title."</span><br>";

Here is the entire code files in one text file.


//////////////////////////// get_pText.php file ////////////////////////

<?php

$q=$_GET["q"];



$con = mysql_connect('localhost', 'root', 'password');

if (!$con)

{

die('Could not connect: ' . mysql_error());

}



mysql_select_db("osemr", $con);



$sql="SELECT * FROM textfields WHERE fld_id = '".$q."'";



$result = mysql_query($sql);



while($row = mysql_fetch_array($result))

{



echo $row['fld_text'];



}



mysql_close($con);

?>

/////////////////end get_pText.php file ///////////////////////////   

/////////////////// soap3.inc.php file starts  (this is really the opening HTML file.) ////////////////////////

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">

<html>

<head>

<meta http-equiv="Expires" content="Fri, Jan 01 1900 00:00:00 GMT">

<meta http-equiv="Pragma" content="no-cache">

<meta http-equiv="Cache-Control" content="no-cache">

<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">

<meta http-equiv="content-language" content="en">

<meta name="author" content="">

<meta http-equiv="Reply-to" content="@.com">

<meta name="generator" content="PhpED 5.2">

<meta name="description" content="">

<meta name="keywords" content="">

<meta name="creation-date" content="09/20/2007">

<meta name="revisit-after" content="15 days">

<title>Untitled</title>

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



<script src="select_pText.js"></script>



</head>

<body>

<?php 

$con = mysql_connect('localhost', 'root', 'password');

if (!$con) { die('Could not connect: ' . mysql_error()); }

mysql_select_db("osemr", $con);

$sql="SELECT * FROM textfields";

$result = mysql_query($sql);



while($row = mysql_fetch_array($result))

{



$field_id= $row[fld_id];

$field_title= $row[fld_title];



echo "<span id=\"$field_id\" onMouseOver=\"toolTip(this.id);\" onMouseOut=\"clearPopup();\" 

onClick=\"recallText(this.id);\">".$field_title."</span><br>";

}

?>



<div>

<textarea cols="25" rows="10" id="txtOutput">User info will be listed here.</textarea>

</div>



<div id="toolTip">popup here</div>



</body>

</html>

///////////////end soap3.inc.php///////////////////////////////////////////////////////////

/////////////////////start file select_pText.js //////////////////////////////////////////////////////



var xmlHttp

function recallText(str)     // AJAX function to insert data into the textbox (id="txtOutput").
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="get_pText.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 || xmlHttp.readyState=="complete")
{ 
document.getElementById("txtOutput").innerHTML=xmlHttp.responseText 
} 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}


function toolTip(str)         // AJAX function to insert data into the div (id="toolTip"). 
{ 
xmlHttp=GetXmlHttpObject()
if (xmlHttp==null)
{
alert ("Browser does not support HTTP Request")
return
}
var url="get_pText.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 || xmlHttp.readyState=="complete")
{ 
document.getElementById("toolTip").innerHTML=xmlHttp.responseText 
} 
}

function GetXmlHttpObject()
{
var xmlHttp=null;
try
{
// Firefox, Opera 8.0+, Safari
xmlHttp=new XMLHttpRequest();
}
catch (e)
{
//Internet Explorer
try
  {
  xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
  }
catch (e)
  {
  xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
}
return xmlHttp;
}


function clearPopup(str)              //clear xmlHttp request
{ 
xmlHttp=GetXmlHttpObject() ;
xmlHttp=null ;
  document.getElementById("toolTip").innerHTML='';        //reset toolTip innerHTML
}

///////////////////////////////end javascript file select_pText.js /////////////////////

////////////////////////////  start textfields.sql file    //////////////////////
-- phpMyAdmin SQL Dump
-- version 2.11.5.1
-- http://www.phpmyadmin.net
--
-- Host: localhost
-- Generation Time: Nov 01, 2008 at 11:50 PM
-- Server version: 5.0.51
-- PHP Version: 5.2.4-2ubuntu5

SET SQL_MODE="NO_AUTO_VALUE_ON_ZERO";

--
-- Database: `osemr`
--

-- --------------------------------------------------------

--
-- Table structure for table `textfields`
--

CREATE TABLE IF NOT EXISTS `textfields` (
  `fld_id` int(11) NOT NULL auto_increment,
  `fld_position` int(11) NOT NULL default '0',
  `fld_title` varchar(200) NOT NULL default '',
  `fld_text` text NOT NULL,
  `fld_type` varchar(50) NOT NULL default '',
  `fld_style` varchar(100) NOT NULL default '',
  `form_id` varchar(5) default NULL,
  PRIMARY KEY  (`fld_id`)
) ENGINE=MyISAM  DEFAULT CHARSET=latin1 AUTO_INCREMENT=7 ;

--
-- Dumping data for table `textfields`
--

INSERT INTO `textfields` (`fld_id`, `fld_position`, `fld_title`, `fld_text`, `fld_type`, `fld_style`, `form_id`) VALUES
(2, 1, 'it''s only', 'when I lose myself\r\nwith someone else\r\nthat I find', 'change', '%link%<font color=''red''><b>%title%</b></font>%/link%', '3'),
(3, 3, 'in your room', 'time stands still', 'append', '%link%<u>%no%.%title%</u>%/link%', '3'),
(4, 4, 'changing me', 'and I''ve changed! once more a change', 'change', '%link%%no%. %title% %/link%', '3'),
(5, 2, 'emptyyy', '', 'empty', '<b>%title%</b>', '3'),
(6, 5, 'this item is directly inserted', 'this item is directly inserted', 'append', '', '3');


             ////end

xtopolis · November 4, 2008

Didn't check it, but I noticed clearPopup has one argument (str), and in your span , you call it without any arguments...

could that be it? I know javascript is picky. Also, use firefox's error console to debug javascript!

technotool · November 4, 2008

function recallText() didn't have enough closing braces "}" and so it was executing the function downstream. basically needed to close off each of the ajax functions with closing "}". It is working great now. thanks

Sign In

2 ajax requests onMouseOver and onClick in one span segment.

Recommended Posts

technotool

Link to comment

Share on other sites

xtopolis

Link to comment

Share on other sites

technotool

Link to comment

Share on other sites

Join the conversation

Browse

Activity

Important Information