$.ajax script not pulling php data into div

Question

I've spent the last couple of days wrestling with a .hover script that posts data to a php script then retrieves related data from a database.

Posting id data to the details.inc.php page is working fine. An alert in the script retrieves and show's the data correctly.

The problem arises when i try to include the data in a div, nothing seems to happen. Firefox show's the script to be executing and retrieving the correct id info as it should. I don't know where from here. I've tried all i can, but my understanding of java is limited Thanks for any help in advance.

A mouse over function executes and retrieves the id from an image

<img src="#" class="latest"  id="id_retrieved_from_DB">

id is then passed through jquery and ajax which retrieves data linked to id from details.inc.php, the data retrieved should then be included in the "details" div

<script type="text/javascript">
    //Mouse over
    $(function(){
        $('.latest').hover(function() {
            id = $(this).attr('id');
            $.ajax({
        cache: false,
                url: "details.inc.php",
                data: 'hovered_id='+id,
                success:function(data){

                alert(data);//showing data correctly

                //not working here
        $("#details").load('details.inc.php', data);
                }
            });
return false;
        }
      });
</script>

details.inc.php

<?php require_once('../../Connections/userauthentication_conn.php'); ?>
<?php 
require_once('../../includes/session_remap.inc');
require_once('../../includes/tNG_functions.inc.php');
?>

<?php
$KTColParam1_rsDetails = "0";
if (isset($_GET["hovered_id"])) {
  $KTColParam1_rsDetails = (get_magic_quotes_gpc()) ? $_GET["hovered_id"] : addslashes($_GET["hovered_id"]);
}
mysql_select_db($database_userauthentication_conn, $userauthentication_conn);
$query_rsDetails = sprintf("SELECT tbl_entries.id_ent, tbl_entries.country_ent, tbl_entries.date_ent, tbl_entries.title_ent, tbl_entries.subject_ent, tbl_entries.description_ent, tbl_entries.image_ent, tbl_entries.url_ent FROM tbl_entries WHERE (tbl_entries.id_ent=%s) ORDER BY tbl_entries.date_ent DESC ", $KTColParam1_rsDetails);
$rsDetails = mysql_query($query_rsDetails, $userauthentication_conn) or die(mysql_error());
$row_rsDetails = mysql_fetch_assoc($rsDetails);
$totalRows_rsDetails = mysql_num_rows($rsDetails);
?>
<!-- Details -->
<a href="<?php echo $row_rsDetails['url_ent']; ?>" title="Go to <?php echo $row_rsDetails['title_ent']; ?>">
<?php
    //show if file exists
    if (file_exists("../../images/entries/" . $row_rsDetails['id_ent'] . "__img.jpg")) {
  ?>
  <img src="../../images/entries/<?php echo $row_rsDetails['id_ent']; ?>__img.jpg" width="70" height="70">
  <?php
    }
    //end show if file exists
  ?>
<p class="seriesName"><?php echo $row_rsDetails['subject_ent']; ?></p>
<h4 class="programTitle"><?php echo $row_rsDetails['title_ent']; ?></h4>
</a>
<!-- End -->
<?php
mysql_free_result($rsDetails);
?>

This $("#details").load('details.inc.php', data); looks very wrong. Have you checked the manual on load? You probably want to do something else there. Could you state what your expected result is? $.ajax and $.load are certainly doing similar ajax jobs here. The second isn't right. — Steward Godwin Jornsen
– Steward Godwin Jornsen, Commented Mar 13, 2013 at 21:47
Hi I have tried a number if different alternative, as far as i can tell the correct code should be $("#details").html(data); but i get no joy from that either — user2166874
– user2166874, Commented Mar 13, 2013 at 22:50
<a href="url 2" title="Go to test 2"> <img src="../../images/entries/3__img.jpg" width="70" height="70"> <p class="seriesName">Recipe</p> <h4 class="programTitle">test 2</h4> </a>  — user2166874
– user2166874, Commented Mar 13, 2013 at 23:20

jeroen · Accepted Answer · 2013-03-13 22:51:42Z

1

Why are you doing a second ajax call?

If you already have the data available in javascript, you can replace:

$("#details").load('details.inc.php', data);

with:

$("#details").html(data);

edited Mar 13, 2013 at 22:51

answered Mar 13, 2013 at 21:44

jeroen

91.8k22 gold badges117 silver badges132 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

user2166874 Over a year ago

Hi thanks for the quick answer. I already tried what you are suggesting with no success. I'm confused as it make no sense why its not working.

jeroen Over a year ago

@user2166874 Can you add the output of console.log(data); in the success callback of your ajax function to your question. This should work.

user2166874 Over a year ago

[22:43:32.879]  <a href="url 2" title="Go to test 2"> <img src="../../images/entries/3__img.jpg" width="70" height="70"> <p class="seriesName">Recipe</p> <h4 class="programTitle">test 2</h4> </a>  This is also what the alert throws out

jeroen Over a year ago

@user2166874 Do you have an html element with the ID of details in your page?

user2166874 Over a year ago

Thanks for your help. It turns out that i had identified the details div with a 'class' instead of an 'id' so i just had to change the #hash to a dot. $(".details").html(data);

Steward Godwin Jornsen · Accepted Answer · 2013-03-13 21:58:40Z

0

if $("#details") is in the script page and that's the div you wish to display the result, you could use only load:

//Mouse over
var id = $(this).attr('id');
$("#details").load('details.inc.php', 'hovered_id='+id, function(data){alert(data);});

Or you could use $.get()

Jquery manual The POST method is used if data is provided as an object; otherwise, GET is assumed.

And your PHP script uses get.

answered Mar 13, 2013 at 21:58

Steward Godwin Jornsen

1,1791 gold badge7 silver badges13 bronze badges

1 Comment

Steward Godwin Jornsen Over a year ago

Surprised. good you have an answer. Usually, it is best to let's know the error you get. Sometimes, it might be how you use the code.

Collectives™ on Stack Overflow

$.ajax script not pulling php data into div

2 Answers 2

5 Comments

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related