conflict with jquery

Posted by Klbaiju under jQuery on 12/4/2011 | Points: 10 | Views : 1454 | Status : [Member] | Replies : 4
Hi,

In my application iam using jquery in gridview.

when i hover mouse on an anchor ,atooltip with corresponding records will display.

my problem is gridview contains paging. only first page of gridview shows tooltip.another pages doesn't show tooltip.

code is follows

for this code i have 3 records

every page contains 1 record. iam struck here any one have an idea plz help me.

Regards

K L BAIJU

<script src="jquery-1.2.6.js" type="text/javascript"></script>
<script src="vsdoc.js" type="text/javascript"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {

var rows = $('#<%=GridView1.ClientID%>').find(' tbody .record ').length;
alert(rows);
var no_rec_per_page = 1;
var no_pages = Math.ceil(rows / no_rec_per_page);
var $pagenumbers = $('<div id="pages"></div>');
for (i = 0; i < no_pages; i++) {
$('<a href="#" class="page">' + (i + 1) + '</a>').appendTo($pagenumbers);
}
$pagenumbers.insertAfter('#<%=GridView1.ClientID%>');
$('.page').hover(function() {
$(this).addClass('hover');
}, function() {
$(this).removeClass('hover');
});
$('#<%=GridView1.ClientID%>').find(' tbody .record ').hide();
var tr = $('#<%=GridView1.ClientID%> tbody .record ');
for (var i = 0; i <= no_rec_per_page - 1; i++) {
$(tr[i]).show();
}
$('a').click(function(event) {
$('#<%=GridView1.ClientID%>').find(' tbody .record ').hide();
for (i = ($(this).text() - 1) * no_rec_per_page; i <= $(this).text() * no_rec_per_page - 1; i++) {
$(tr[i]).show();

}
});



//

$('.anchor1').mouseover(function() {

$("#disp").show();

var pos = $(this).offset();
var width = $(this).width();

$("#disp").css({

left: (pos.left + width) + 'px',
top: pos.top - 5 + 'px'
});
var id1 = $(this).attr("id");




var ID = 'CustomerID=' + id1;
// Display(ID);

$.ajax({
type: "GET",

url: "CricketProcess.aspx",
data: ID,

success: function(data) {

$("#disp").show("slow");
$("#disp").html(data);

}
});
return false;


});

$('.anchor1').mouseout(function() {
$("#disp").hide();

});
$('#Text1').mouseout(function() {

$("#dsp").hide();

});

});




Responses

Posted by: Virendradugar on: 12/5/2011 [Member] [MVP] Silver | Points: 25

Up
0
Down
Hi,

Please let me know if you are using ajax. As if you use ajax with jquery, then document.ready() event is fired when you DOM is ready. It does not fire on ajax async postback. So it doesn't reattach the functionality to the elements. Read this post.

http://jquerybyexample.blogspot.com/2010/07/jquery-does-not-work-properly-after.html

If you are using master pages, then please read this post
http://jquerybyexample.blogspot.com/2010/09/use-jquery-and-ajax-with-aspnet-master.html

Thanks,
Virendra



Klbaiju, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Klbaiju on: 12/5/2011 [Member] Starter | Points: 25

Up
0
Down
Hi friend iam using master pages. and no ajax in my page.

Regards
K L BAIJU

Klbaiju, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Klbaiju on: 12/5/2011 [Member] Starter | Points: 25

Up
0
Down
Hi i refer your link
I got this code

<script type="text/javascript">
function pageLoad() {
// Master pageLoad() code.

//Content Page Load function
if(typeof contentPageLoad == 'function')
contentPageLoad();
}
how to implement this code


Klbaiju, if this helps please login to Mark As Answer. | Alert Moderator

Posted by: Virendradugar on: 12/5/2011 [Member] [MVP] Silver | Points: 25

Up
0
Down
Well, if you are not using ajax then these two links are not useful. But you are using master page then you should try below syntax to access your control.

http://jquerybyexample.blogspot.com/2011/03/useful-jquery-code-examples-for-aspnet.html

Access your control in jQuery using clientID.
$('#<%=TextBox1.ClientID%>')


Thanks,
Virendra

Klbaiju, if this helps please login to Mark As Answer. | Alert Moderator

Login to post response