I have a div inside an asp.net repeater. I would like to handle an event on the client side when a user clicks on one of the div's.
I've tried the onClick handler in the div (class="result"), but that doesn't seem to be firing. Is there another event I can tie this too?
I also try creating an event handler using jquery, but I'm not sure how to select the element that the user clicks. Right now, I seem to be tying the event to all the div's. Any idea how I can fix the jquery selector for the a single div element?
My repeater:
<div id="search-results" >
<asp:Repeater ID="pageResults" runat="server" ItemType="ArchiveViewer.Logic.PageResult"
SelectMethod="GetSearchResults" OnItemDataBound="pageResults_ItemDataBound" >
<ItemTemplate>
<div class="result" data-pageid="<%#:Item.PageId %>" data-pageNumber="<%#:Item.Number %>"
onclick="resultSelected" >
<div>
Page: <%#:Item.Number %>
</div>
<div>
<asp:Label ID="lblSearchResult" runat="server" ></asp:Label>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
And my jquery scripts:
$('#search-results div').click(function (e) {
$(this).removeClass('active');
$(this).addClass('active');
// this is setting the active class for all the div's in the repeater...
});
var resultSelected = function () {
// this is not working
};
There are a few things you need to change to make this work. Your repeater produces html similar to this:
You need to remove the active class on all divs, but only add it to the clicked div:
$("#search-results div.result").click(function(){
resultSelected = function(){$("div").removeClass("active");
$(this).addClass("active");
});
console.log("clicked, but don't really need this...");
}
If you wanted to add the onclick handler to the html you need to change it to be calling a function via () at the end of the name. You also need to change the script to declare the function without defining it as a var. There is no reason to do this though if you are using jQuery.
Your first jQuery script actually looks OK... except all it will ever do is apply the class active to a div. So when you click a 2nd div, now you have two divs with class active, and a 3rd you have three, etc...
What you want to do is clear out all the other active classes when you click:
$('#search-results div').click(function (e) {$('#search-results div').each(function () {
$(this).removeClass('active');
});
$(this).addClass('active');
});
This would be essentially the same as if you just applied a click event to all the divs with class="result". You'll be better off removing the inline onclick that you have in your repeater divs. Then you can call subsequent functions like:
$('#search-results div.result').on('click', function () {
//add the active class and click handler
var getHighlightResults = function (pageNumber) {
var activeDivAction = function(activeDiv) {var pageNumber = ($(this).attr('data-pageNumber'));
console.log('Fetched ' + pageNumber);
if (pageNumber != null) {
$('#search-results div.result').each(function () {
$(this).removeClass('active');
});
$(this).addClass('active');
getHighlightResults(pageNumber); //call getHighlightResults with pageNumber
activeDivAction(this); // call activeDivAction passing the div that was clicked
}
});
// Do some stuff
console.log('inside getHighlightResults for ' + pageNumber);
};
var pageNumber = ($(activeDiv).attr('data-pageNumber'));
console.log('inside activeDivAction for ' + pageNumber);
};