I've got a mvc site that displays a result set in a table. To get more details from the elements within the table the user will hover the mouse over the chosen row. This invokes a callback
to get the details from a webservice. this all works, now im trying to delay the mouse capture event before calling the webservice. I've opted for hoverIntent from jquery. I'm just struggling to
1) Get the row from which the hoverIntent was fired
2) #tr is apparently undefined and not a function... what does that mean?
Heres the JS....
$("#tr").hoverIntent(AddNew, close)
function close() { }
AddNew is my webservice. This in turn when completed calls another method to display a jquery modal. The mouse out will cancel the request / close the window
$('#tr') will look for a control with ID tr. Is that what you intended? Perhaps you want something like: $('#tableId tr').blahblah where tableId is the ID of you <table> (?). I'm just guessing because I don't know what you HTML/View looks like.
So now we're getting into the specific usage of this plugin. I, for one, am not familiar with it. Maybe someone else is. Are you sure you're calling it the right way? Don't know what "AddNew"; and "Close"; are...
Hi, first, please make sure that you have added “jquery.hoverIntent.js” reference to your page. Here is an example, after mouse over “<td></td>”, it will show the “td” content with “<p id="result"></p>”, after mouse out, it will prompt up an alert window
and clear “<p id="result"></p>” content five second (you can set the time) later.
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title></title>
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script>
<script src="jquery.hoverIntent.js" type="text/javascript"></script>
<script type="text/javascript">
var config = {
over:
// function here (this function will be called when mouseover), for example:
function () {
$('#result').html($(this).html());
},
timeout: 500, // number = milliseconds delay before mouseout
out:
// function here (this function will be called when mouseout), for example:
function () {
alert($(this).html());
$('#result').empty();
}
};
$(document).ready(function () {
$('td').hoverIntent(config);
});
</script>
</head>
<body>
<table>
<tr>
<td>1</td>
<td>2</td>
</tr>
<tr>
<td>3</td>
<td>4</td>
</tr>
</table>
<p id="result"></p>
</body>
</html>
ruddj16
Member
59 Points
92 Posts
jquery hoverintent method not working
Feb 19, 2012 02:28 PM|LINK
Heres the JS.... $("#tr").hoverIntent(AddNew, close) function close() { } AddNew is my webservice. This in turn when completed calls another method to display a jquery modal. The mouse out will cancel the request / close the windowMetalAsp.Net
All-Star
112754 Points
18375 Posts
Moderator
Re: jquery hoverintent method not working
Feb 19, 2012 02:36 PM|LINK
$('#tr') will look for a control with ID tr. Is that what you intended? Perhaps you want something like: $('#tableId tr').blahblah where tableId is the ID of you <table> (?). I'm just guessing because I don't know what you HTML/View looks like.
ruddj16
Member
59 Points
92 Posts
Re: jquery hoverintent method not working
Feb 19, 2012 02:41 PM|LINK
Hello,
My table has an ID so i've tried altering my JS
$("#Results tr").hoverIntent(AddNew, close)
but it still tells me that
$("#Results tr").hoverIntent(AddNew, close) is not a function
MetalAsp.Net
All-Star
112754 Points
18375 Posts
Moderator
Re: jquery hoverintent method not working
Feb 19, 2012 02:44 PM|LINK
Where do you have this code? Have you included the necessary references to jQuery & hoverIntent (not familiar with hoverIntent, by the way)?
ruddj16
Member
59 Points
92 Posts
Re: jquery hoverintent method not working
Feb 19, 2012 02:56 PM|LINK
Oops! I've added the jquery plugin to my site.master file. Its just not firing. At least its not throwing errors
MetalAsp.Net
All-Star
112754 Points
18375 Posts
Moderator
Re: jquery hoverintent method not working
Feb 19, 2012 04:49 PM|LINK
ruddj16
Member
59 Points
92 Posts
Re: jquery hoverintent method not working
Feb 19, 2012 05:08 PM|LINK
yeah, its in a document.ready method
MetalAsp.Net
All-Star
112754 Points
18375 Posts
Moderator
Re: jquery hoverintent method not working
Feb 19, 2012 05:23 PM|LINK
Allen Li - M...
Star
10411 Points
1196 Posts
Re: jquery hoverintent method not working
Feb 22, 2012 01:49 AM|LINK
Hi, first, please make sure that you have added “jquery.hoverIntent.js” reference to your page. Here is an example, after mouse over “<td></td>”, it will show the “td” content with “<p id="result"></p>”, after mouse out, it will prompt up an alert window and clear “<p id="result"></p>” content five second (you can set the time) later.
<html xmlns="http://www.w3.org/1999/xhtml"> <head> <title></title> <script type="text/javascript" src="http://code.jquery.com/jquery-latest.js"></script> <script src="jquery.hoverIntent.js" type="text/javascript"></script> <script type="text/javascript"> var config = { over: // function here (this function will be called when mouseover), for example: function () { $('#result').html($(this).html()); }, timeout: 500, // number = milliseconds delay before mouseout out: // function here (this function will be called when mouseout), for example: function () { alert($(this).html()); $('#result').empty(); } }; $(document).ready(function () { $('td').hoverIntent(config); }); </script> </head> <body> <table> <tr> <td>1</td> <td>2</td> </tr> <tr> <td>3</td> <td>4</td> </tr> </table> <p id="result"></p> </body> </html>If you have any feedback about my replies, please contact msdnmg@microsoft.com
Microsoft One Code Framework