• Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 248
  • Last Modified:

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
0
dolythgoe
Asked:
dolythgoe
  • 4
  • 3
1 Solution
 
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
 
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
Independent Software Vendors: We Want Your Opinion

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

 
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
 
KalpanCommented:
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
 
dolythgoeAuthor Commented:
Thanks for all your help!
0

Featured Post

VIDEO: THE CONCERTO CLOUD FOR HEALTHCARE

Modern healthcare requires a modern cloud. View this brief video to understand how the Concerto Cloud for Healthcare can help your organization.

  • 4
  • 3
Tackle projects and never again get stuck behind a technical roadblock.
Join Now