[RESOLVED] PHP/xml and html-tags

Foss

Hi there.

I'm doing a calendar page with php. It's based on a template and in this template all the output text and html-tags are saved into a xml string.

I want to add a tooltip/hovering effect and found one on the net. I applied this script but it doesn't work. It works on "plain html", but when it is within the php it just won't work..

This is how my code looks like:

START:
$xml = '<?xml version="1.0" ?><response><content><![CDATA[';

--- kode -- kode -- kode ---

$xml.="<div class='calevent'>

            <a href='' class='someClass' title='<img src=1.jpg>'>Curabitur dolor eros</a>
            <a href='java script:navigate(\"\",\"\",\"".$row[0]."\")'>";


            $xml.=$erow[0];



            $xml.="</a></div>";

END:

echo $xml;

The script is supposed to add tooltips when an element is declared "someClass" and it works on plain html on the same page..
Take a look: http://clubbinghagen.dk/calendar/

Links in the calendar have no tooltip, but the Admin link in the center bottom (a bit hard to see!) has a working image as a tooltip.

Any ideas??

DaveRandom

Since your HTML is stored withing the XML as CDATA, there is no real difference to just straight printing the HTML. Browser controlled tooltips are based on the 'title' attribute of any given element, if you want to create your own, you have to use the 'onmouseover' and 'onmouseout' events of the elements to dynamically create an element (usually a <div>) in the right place to house the tooltip.

If you have some JS template, chances are what it is doing is, when the page loads, looping through all elements on the page and, wherever className = "someClass", adding element.onmouseover = function () {// do the tooltip here}.

It's a tricky buisness this, as you have to get the current position of the mouse pointer and use that to create a 'position: fixed;' element containing the tooltip.

I know that's all fairly generic info, but maybe it will help you...

Foss

Hey and thanks for the reply.

I've looked at the JS code as well as the html code. And as I said the script works perfectly with the plain HTML in the bottom..

But the second it's inside the php-tag converting it to xml it's not working..
So I was wondering how I can make it work 🙂

Thanks!

DaveRandom

I can't see any of the code above on the page generated - if I view source I can't see any

<div class='calevent'>

elements...

Please post whole PHP code 🙂

samuelcook

After viewing the DOM elements, it appears that your title attribute is using htmlentities.

Where instead of [<img src="image-path" />] it is reading [<img src="image-path" />] Since it is being passed to javascript/jquery as a string, it is being read in this same manner of using < and > even though when your mouse hovers the link the title looks like "< >". You should ammend and see if that solves your problem.

Additionally, you should make sure that you are closing your CDATA brackets, as well as the remaining open xml tags.

Hope this help.

Foss

Like this:


<? 
header("Expires: Mon, 26 Jul 1997 05:00:00 GMT" ); 
header("Last-Modified: " . gmdate( "D, d M Y H:i:s" ) . "GMT" ); 
header("Cache-Control: no-cache, must-revalidate" ); 
header("Pragma: no-cache" );
header("Content-Type: text/xml; charset=ISO-8859-1");

//////////////////////////////////////
// set these variables for your MySQL
$dbhost = 
$dbuser = 
$dbpass = 
//////////////////////////////////////

$db = @mysql_connect($dbhost, $dbuser, $dbpass) or die ("<?xml version=\"1.0\" ?><response><content><![CDATA[<span class='error'>Database connection failed.</span>]]></content></response>");
mysql_select_db('clubcph_db');

$xml = '<?xml version="1.0" ?><response><content><![CDATA[';

if($_GET['event'] != '') {
	$fields = explode("-",$_GET['event']);
	$result = mysql_query("SELECT *,DATE_FORMAT(`date`,'%b %e, %Y at %l:%i%p') as thedate,DATE_FORMAT(`date`,'%c') as themonth,DATE_FORMAT(`date`,'%Y') as theyear FROM `events` WHERE YEAR(`date`) = ".$fields[0]." AND MONTH(`date`) = ".$fields[1]." AND DAYOFMONTH(`date`) = ".$fields[2]." ORDER BY `num` ASC");

$i = 0;
while($row = mysql_fetch_array($result)) {
	$xml .= "<div id='event'";
	if($i < (mysql_num_rows($result)-1)) $xml .= " style='border-bottom:none'";
	$xml .= "><div class='heading'><div class='title'>".$row['heading']."</div><div class='posted'>".$row['thedate']."</div>";
	if($i == 0) $xml .= "<div class='back'><a href='javascript:navigate(".$row['themonth'].",".$row['theyear'].",\"\")'>Return to calendar</a></div>";
	$xml .= "</div><div class='line'>".$row['body']."</div><br /></div><br />";
	$i++;
}

} else {
	$month = $_GET['month'];
	$year = $_GET['year'];

if($month == '' && $year == '') { 
	$time = time();
	$month = date('n',$time);
    $year = date('Y',$time);
}

$date = getdate(mktime(0,0,0,$month,1,$year));
$today = getdate();
$hours = $today['hours'];
$mins = $today['minutes'];
$secs = $today['seconds'];

if(strlen($hours)<2) $hours="0".$hours;
if(strlen($mins)<2) $mins="0".$mins;
if(strlen($secs)<2) $secs="0".$secs;

$days=date("t",mktime(0,0,0,$month,1,$year));
$start = $date['wday'];
$name = $date['month'];
$year2 = $date['year'];
$offset = $days + $start - 1;

if($month==12) { 
	$next=1; 
	$nexty=$year + 1; 
} else { 
	$next=$month + 1; 
	$nexty=$year; 
}

if($month==1) { 
	$prev=12; 
	$prevy=$year - 1; 
} else { 
	$prev=$month - 1; 
	$prevy=$year; 
}

if($offset <= 28) $weeks=28; 
elseif($offset > 35) $weeks = 42; 
else $weeks = 35; 

$prevmonth = date( 'F', mktime(0, 0, 0, $prev) );
$nextmonth = date( 'F', mktime(0, 0, 0, $next) );

$xml .= "<table class='cal' cellpadding='0' cellspacing='1'>
		<tr>
			<td colspan='7' class='calhead'>
				<table>
				<tr>
					<td id='calendarhead'>Clubbinghagen.dk </td>
					<td class='datepicker' align='center'>
					<a class='monthNav' href='javascript:navigate($prev,$prevy,\"\")' style='border:none' >$prevmonth $prevy </a>  
					<a class='monthNav' href='javascript:navigate(\"\",\"\",\"\")' style='border:none'><img src='images/calCenter.gif' alt='current' /></a> 
					<a class='monthNav' href='javascript:navigate($next,$nexty,\"\")' style='border:none'>$nextmonth $nexty</a> 
					<a class='monthNav' href='javascript:void(0)' onClick='showJump(this)' style='border:none'><img src='images/calDown.gif' alt='jump' /></a> 
					</td>
					<td align='right'>
						$name $year2
					</td>
				</tr>
				</table>
			</td>
		</tr>
		<tr class='dayhead'>
			<td>Mandag</td>
			<td>Tirsdag</td>
			<td>Onsdag</td>
			<td>Torsdag</td>
			<td>Fredag</td>
			<td>Lørdag</td>
			<td>Søndag</td>
		</tr>";

$col=1;
$cur=1;
$next=0;

for($i=1;$i<=$weeks;$i++) { 
	if($next==3) $next=0;
	if($col==1) $xml.="\n<tr class='dayrow'>"; 

	$xml.="\t<td ";

	if(($cur==$today[mday]) && ($name==$today[month]) && ($year2==$today[year])) $xml.=" style='background-color:#F4F4F4;'";

	$xml.="valign='top' onMouseOver=\"this.className='dayover'\" onMouseOut=\"this.className='dayout'\">";

	if($i <= ($days+($start-1)) && $i >= $start) {
		$xml.="<div class='day123'><div class='day'><b";

		if(($cur==$today[mday]) && ($name==$today[month]) && ($year2==$today[year])) $xml.=" style='color:#ff00cc;'";

		$xml.=">$cur</b></div></div>";

		$result = mysql_query("SELECT DATE_FORMAT(`date`,'%Y-%m-%e') FROM `events` WHERE MONTHNAME(`date`)='$name' AND DAYOFMONTH(`date`)=$cur AND YEAR(`date`)=$year2");

			//Get event name
			$equery = "SELECT `heading` FROM `events` WHERE MONTHNAME(`date`)='$name' AND DAYOFMONTH(`date`)=$cur AND YEAR(`date`)=$year2";
			$eresult = mysql_query($equery);			

		if(mysql_num_rows($result) > 0) {
			$row = mysql_fetch_row($result);
			while($erow = mysql_fetch_array($eresult)){
			$xml.="<div class='calevent'>

			<a href='' class='someClass' title='<img src=1.jpg>'>Curabitur dolor eros</a>
			<a href='javascript:navigate(\"\",\"\",\"".$row[0]."\")'>";


			$xml.=$erow[0];



			$xml.="</a></div>";
			}

		}
		$xml.="\n\t</td>\n";

		$cur++; 
		$col++; 

	} else { 
		$xml.="&nbsp;\n\t</td>\n"; 
		$col++; 
	}  

    if($col==8) { 
	    $xml.="\n</tr>\n"; 
	    $col=1; 
    }
}

$xml.="</table>	";

}

$xml .= "]]></content></response>";
echo $xml;
?>

Foss

Sorry what do you mean by ammend?

samuelcook

Just ensure that your "< >" are present rather than "< >"

A quick way to check is to modify the last line "echo $xml;" to "echo html_entity_decode($xml);"

Foss

Hmm okay I did this.

The tooltip still says <img src=1.jpg> rather than showing the image.

samuelcook

OK, after looking at the code, I think that I understand the problem.

Since you are using response requests, as specified in super_calander.js when you come back with the response it goes to function callback to fill in "calander" div with the response.

The problem with this, is because you are using tipTip calls inside of the html response, the page doesn't know that it needs to handle these requests. You need to re instantiate this jquery "method" in the "callback" function.

I believe it is this part of code inside of the tipTip.js file

$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});

so your callback function will look like

function callback() {	
	if(req.readyState == 4) {
		var response = req.responseXML;	
		var resp = response.getElementsByTagName("response");
		getObject("calendar").innerHTML = resp[0].getElementsByTagName("content")[0].childNodes[0].nodeValue;
		fade(70);
		$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
	}
}

Try that please. 🙂

Foss

And where should I put this?

In my php-code somewhere or?

Sorry, I'm not that great with php yet :/

samuelcook

Its in super_calander.js

Second function down.

Foss

So from


$(function(){
$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
});

(function($){
	$.fn.tipTip = function(options) {
		var defaults = { 
			activation: "hover",
			keepAlive: false,
			maxWidth: "200px",
			edgeOffset: 3,
			defaultPosition: "bottom",
			delay: 400,
			fadeIn: 200,
			fadeOut: 200,
			attribute: "title",
			content: false, // HTML or String to fill TipTIp with
		  	enter: function(){},
		  	exit: function(){}
	  	};

function callback() {	
	if(req.readyState == 4) {
		var response = req.responseXML;	
		var resp = response.getElementsByTagName("response");
		getObject("calendar").innerHTML = resp[0].getElementsByTagName("content")[0].childNodes[0].nodeValue;
		fade(70);
		$(".someClass").tipTip({maxWidth: "auto", edgeOffset: 10});
	}
};

(function($){
	$.fn.tipTip = function(options) {
		var defaults = { 
			activation: "hover",
			keepAlive: false,
			maxWidth: "200px",
			edgeOffset: 3,
			defaultPosition: "bottom",
			delay: 400,
			fadeIn: 200,
			fadeOut: 200,
			attribute: "title",
			content: false, // HTML or String to fill TipTIp with
		  	enter: function(){},
		  	exit: function(){}
	  	};

Right?

samuelcook

Wrong file. Undo that, because you will need it.

It's in super_calander.js

The second function down, that is called "callback" needs to be replaced with that block of code. Its the same function that it is now with an addition of one line.

Foss

Ah, jeez. Sorry my eyes are not with me right now.
It's 3 in the night over here.

But oh my GAWD it works! Soo nice, thank you!!

samuelcook

Please marked as [RESOLVED].

Cheers.

Foss

Done.

Again thank you! Been posting at forums for a week now and it takes you 10 minutes to figure it out! I'm staying here 🙂