CODEWITHSUNDEEP
jqueryhtmlajaxhyperlinkanchor
TARKUS
TARKUS

Reputation: 2200

jQuery AJAX returned HTML data anchor tags not clickable in Firefox

The problem: Anchor tagged text in returned html are not clickable in Firefox (no "hand cursor", and no action). IE 10 seems to handle it just fine.

The setup: Using jQuery AJAX to call a php page that grabs html content, then returns it to a div with the id="slideShowC" in the browsed page. The datatype=html. When I alert the returned html, it is the same as the called page.

The AJAX:

function populateContent(i,w,h){
    var url = "slideshow.php?ss="+ssContent[i]+"&i="+i+"&width="+w+"&height="+h;
    $.ajax({
        type: "GET",
        url: url,
        async: true,
        dataType: 'html',
        success: function(data) {
            $('#slideShowC').html(data);
        },
        error: function (){
            //alert("error: " + url);
        }
    });
    return true;
}

The html displays properly. The colors and text are correct, and even the color of the hyperlinked text looks correct, as a blue color, with the underline. You can see it is a hyperlink. But using Firefox, when I mouse over the link text, the cursor does not change to indicate that the text is hyperlinked.

Here is a sample html chunk, returned from a remote page (same domain, same site folder):

<!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>SlideShow 1</title>
<style> body{ margin:0; }
.ssBox{
    background-color:#CCC;
    color:#000;
    width:280px;
    height:280px;
    padding:10px;
 }
 .ssBox h1{ 
    margin:0px; 
 }
</style>
</head>
<body>
<div class="ssBox">
<h1>The Technology</h1>
<p>See the <a href="technology.php">technology</a>.</p>
</div>
</body>
</html>

The link is on the fourth line from the bottom. It renders into the html div container just fine, but like I said, it is not clickable in Firefox. Am I not seeing something obvious? Am I leaving some important information out?

Important update: As I mentioned in a comment below, I don't think my problem has anything to do with javascript, jQuery, AJAX, etc. When I hard code the html in my main page, the link is still not clickable:

 <div id="slideShowC" class="textBox" ><?php include("html/slideshow/slidecontent1.html"); ?></div>

I'm going to have to study the page html / stylesheet to see what's going on.

UPDATE: Blither and Blah! As per twil's reply, I had a transparent "mask" div covering the text div. I removed the mask div, and voila, it all works. If there is any redeeming quality to my question, it's that I had to ask it to get some good pointers to look in another direction. Thanks, all.

Upvotes: 1

Views: 942

Answers (1)

TARKUS
TARKUS

Reputation: 2200

The problem had nothing to do with the javascript, jQuery, or AJAX. What was going on was that I had a transparent "mask" div covering my slideShowC div. So my html output layer was covered by a transparency layer. Once I removed the transparency layer, the links were, of course, clickable.

Still odd that IE lets me click through div layers. But, ah well, not important at this point.

Upvotes: 1

Related Questions