JQuery with dynamic content
If I had a div tag inside a repeater and I want to add a jquery effect to each of those div tags, how do I do that?
<script type="text/javascript">
$(function() {
//run the currently selected effect
function runEffect() {
//most effect types need no options passed by default
var options = {};
//check if it scale, transfer, or size - they need options
//if (selectedEffect == 'scale') { options = { percent: 0 }; }
//run the effect
$("#effect").effect('explode', options, 500, callback);
};
//callback function to bring a hidden box back
function callback() {
setTimeout(function() {
$("#effect:hidden").removeAttr('style').hide().fadeIn();
}, 1000);
};
//set effect from select menu value
$(document).ready(function() {
$("div.effect").click(function() {
runEffect();
return false;
});
});
});
</script>
<asp:Repeater ID="repItems" runat="server">
<ItemTemplate>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
I tried above but only the first div works. What am I doing wrong?
source to share
Values id
for HTML elements must be unique throughout the document . You use the same value id
for every item displayed by this repeater in violation of this rule. Now, on the internet for what it is, your browser doesn't complain about it, but try running the rendered HTML through a validator . jQuery only acts on the first such element, because it expects it to be only one.
If you switch from id
to class
, you should have much better results.
source to share
Another idea to consider is to put a div tag with ID AROUND in a relay. the repeater itself looks pretty simple and looking at your jquery it doesn't seem to matter which of the div tags in the repeater gets clicked.
$(document).ready(function() {
$("#base").click(function() {
runEffect();
return false;
});
});
<div id="base">
<asp:Repeater ID="repItems" runat="server">
<ItemTemplate>
<div class="toggler">
<div id="effect" class="ui-widget-content ui-corner-all">
<h3 class="ui-widget-header ui-corner-all"><%#Eval("Tag") %></h3>
</div>
</div>
</ItemTemplate>
</asp:Repeater>
</div>
source to share
I think you need to change in the "ready" function where you attach the click event - you are using $ ('div.effect') as the selector, which doesn't look valid to me. I suggest using $ ('. Ui-widget-content'). This selects based on class, not id (which must be unique as others have noted). In the meantime, there is no need to know about it. ”
source to share
If you don't want to use a class for these sections nested in your relay, you can use partial ID matching. Although the relay will add information to the beginning of your ID for each div (to make sure it's unique), the ID will still end with "effect" or whatever name you used.
You can use this to your advantage. In the jQuery code where you are working with the "effect" id, change the code:
$("#effect")
:
$("[id$='effect']")
This will select all items with ID END in "effect", so when the repeater renames the ID of each div to "repItems_ ctl001_ effect" or whatever you have, jQuery will find it anyway.
Also note that at the end of your jQuery code referenced in your question, you are trying to access the div based on the "effect" of the class, not the ID. Just FYI.
source to share