jquery hover with ajax not working

Question

I am having a.php file where is a div in body whose content are to be display using Jquery which is not working. It doesn't display the jquery content in a div as well their's a annchor tag in jquery onhovering its content a div within which is a iframe (in b.php) with a divs content using ajax this should work but am not sure was is it not working .both a.php and b.php are in the same folder

Both in a.php and b.php:

a.php:

$("document").ready(function()
{
    $("#pcontent").html('');
    $("#pcontent").append('<div class="product"><div class="title1"><div class="title">fdfsfsd</div><div class="title">&nbsp;&nbsp;<a class="reference">sdfsf</a></div><div id="showdata"></div></div></div>');
    $("#pcontent").fadeIn(1);

    $(".reference").hover(function()
    {
        $("#showdata").css("display","block");
        $.ajax({
            url:"b.php",
            type:"GET"
        });
    });
});

<div id="pcontent"></div>

b.php:

 $("document").ready(function()
 {
    $("#pcontent").html('');
    $("#pcontent").append('<div class="product"><div class="title1"><div class="title"><b>&nbsp;&nbsp;ghgj</b></div><div class="title">&nbsp;&nbsp;hjhk</div></div></div>');
    $("#pcontent").fadeIn(1);
});

 <iframe id="pcontent" width="100px" height="10px"></iframe>

Can anyone let me know were I am wrong or is there a better way to achieve it?

to both szpic BeatAlex .... have removed jquery1.3 know it shows the content of a.php .but the iframe of b.php did not appear on hover where as the showdata div did appear — Tested, Jan 23 '14 at 09:46
@tisha Can you improve your spelling, punctation and pronaunceation? — Reporter, Jan 23 '14 at 10:03
@reporter Am extremely sorry for any of my posts where i don't have proper spelling, punctuation and pronunciation. its just due to time constraint :) am not poor at my language — Tested, Jan 23 '14 at 10:16

score 0 · Answer 1 · answered Jan 23 '14 at 09:40

Change :

    <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
 <script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.js"></script>

into :

  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>

And your ajax should start working

i did do that yet ajax not working iframe dosent appear – Tested Jan 23 '14 at 09:52 — Tested, Jan 23 '14 at 09:52

score 0 · Answer 2 · edited May 23 '17 at 11:49

It was a hard job to figure out why the hover did not working.

According the api documentation of jquery, .hover() needs a function for event 'onMouseOver()' and a function for 'onMouseOut()'. The second thing was the use of .css(). According this post, the method does not work correctly with all browsers. For invastigating I used Firefox. so I changed it using css class

Here my working example, based on your code (a.php):

<html>
    <head>
        <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>   
        <script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.9.1/jquery-ui.min.js"></script>
        <style>
            .displayObject {display:block;}
            .disDisplayObject {display:none;}
        </style>
        <script>
            $("document").ready(function()
            {
                $("#pcontent").html('');
                $("#pcontent").append('<div class="product"><div class="title1"><div class="title">fdfsfsd</div><div class="title">&nbsp;&nbsp;<a class="reference" style="text-decoration:underline">sdfsf</a></div><div id="showdata" class="disDisplayObject">showData</div></div></div>');
                $(".reference").hover(
                    function()
                    {
                        $("#showdata").fadeIn(300).removeClass("disDisplayObject").addClass("displayObject");
                    }, function() {
                        $("#showdata").fadeOut(300).removeClass("displayObject").addClass("disDisplayObject");
                    }
                );
            });
        </script>
    </head>
    <body>
        <div id="pcontent"></div>
    </body>
</html>

A note to the content of b.php:

The use .html() and .append() has no effect to an iframe. I can only guess what your intention was. My theory is, that you want to insert the content of b.php into the div of a.php. If so then you can go an easier way:

Develop b.php so that generates an appropiate html snippet and then insert this ajax response into the div in file a.php. Using iframes raised mostly in trouble.

l try and let u know. thank you for the explaination – Tested Jan 31 '14 at 04:22 — Tested, Jan 31 '14 at 04:22

jquery hover with ajax not working

2 Answers2