Link to home
Start Free TrialLog in
Avatar of dolythgoe
dolythgoe

asked on

jquery $.get request on mouseover

Hi all,

I'm looking to get some dynamic date into the jquery get request.

I have a page which can will output a series of <div>'s like so:

<div class="resultset">
<div>
<div class="resultset">
<div>
<div class="resultset">
<div>
...so on..

Open in new window


What I'm trying to do is work out the best way to write unique data into each div that can be included in a jquery get request everytime a user hovers over the div area.

For example:

<div class="resultset">
//Some non visible data
<div>

Open in new window


Goes into:

$.get("resulthover.php",{ 
	//data
 },
	
	function(data) {
        //do something
  
	}
  );

Open in new window


Please could someone give me a hand on:

- The best way to package the data in the <div>
- A method of detecting hover state and making the get call with the data

Huge thanks
Avatar of Kalpan
Kalpan
Flag of India image

Please refer the below code which will detect the mouseover event of assigned div id and look for data using $.ajax function to connect with resultthrover.php will send the response and can be displayed to div id where you want to place the result.

You can use type as GET/POST.


Hope that helps.

Thanks

// js -- inline or link 

$(document).ready(function(){
   $("#somedivid").mouseover(function(){
        var dataString="";
$.ajax({
    type: "POST",
    url: "resultthrover.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
        $("#anotherdivid").html(html);
    }
});
   });
});


// resulthrover.php
<?php
if($_REQUEST){
   if($_REQUEST['somefield']){
      echo "Some data/information";
   }
}else
   echo "";

?>

Open in new window

Avatar of dolythgoe
dolythgoe

ASKER

HUGE thanks :)

If I don't have an id for the <div> since they're dynamically loaded and multiple (so the script can't know what the id is) would I need to do this inline?
You can use the class name instead of Id of div...but it should be different for each for getting the values.

you can use the js code as inline using <script type="text/javascript"></script> or link the js file

Please refer the below modified code.

Thanks
// js -- inline or link 

$(document).ready(function(){
   $(".somedivclass").mouseover(function(){
       divval = $(".somedivclass").val();
        var dataString="divval"+divval;
$.ajax({
    type: "POST",
    url: "resultthrover.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
        $(".anotherdivclass").html(html);
    }
});
   });
});


// resulthrover.php
<?php
if($_REQUEST){
   if($_REQUEST['divval']){
      echo "Some data/information";
   }
}else
   echo "";

?>

Open in new window

You can use the $(".somedivclass").each for mulitple named class for the div.

thanks
// js -- inline or link 

$(document).ready(function(){
   $(".somedivclass").mouseover(function(){
       $(".somedivclass").each(fucntion(){
       divval = $(".somedivclass").val();
        var dataString="divval"+divval;
$.ajax({
    type: "POST",
    url: "resultthrover.php",
    data: dataString,
    cache: false,
    success: function(html)
    {
        $(".anotherdivclass").html(html);
    }
});
});
   });
});

Open in new window

That's really neat! Thanks

Sorry, one last little thing :) - where your code goes:

    divval = $(".somedivclass").val();

Open in new window


Can that be a child element that I keep hidden?

Could I even do something like:

<div class="result">
//Some stuff
<div class="data">datastring</div>
</div>

Open in new window


Use CSS to hide it I guess...
ASKER CERTIFIED SOLUTION
Avatar of Kalpan
Kalpan
Flag of India image

Link to home
membership
This solution is only available to members.
To access this solution, you must be a member of Experts Exchange.
Start Free Trial
Thanks for all your help!