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
dolythgoeAsked:
Who is Participating?
 
KalpanConnect With a Mentor Commented:
yes..you can do that for child divs but for that you would need to assign child div class to js code

you would need to add as modified below

instead of

divval = $(".somedivclass").val(); you can use

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


// 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);
    }
});
});
   });

$(".data").mouseover(function(){
       $(".data").each(fucntion(){
       divval = $(".data").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

0
 
KalpanCommented:
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

0
 
dolythgoeAuthor Commented:
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?
0
Free Tool: IP Lookup

Get more info about an IP address or domain name, such as organization, abuse contacts and geolocation.

One of a set of tools we are providing to everyone as a way of saying thank you for being a part of the community.

 
KalpanCommented:
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

0
 
KalpanCommented:
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

0
 
dolythgoeAuthor Commented:
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...
0
 
dolythgoeAuthor Commented:
Thanks for all your help!
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

All Courses

From novice to tech pro — start learning today.