I have multiple DIVs on my page and I’m having problems populating the correct one with another page view. I’d appreciate some help.
I have a loop that populates a list of DIVs. In the end parsed HTML looks like this:
<div id="replycontainer:1">
CONTENT1
<button id="to:1" class="reply">REPLY</button>
</div>
<div id="replycontainer:2">
CONTENT2
<button id="to:2" class="reply">REPLY</button>
</div>
<div id="replycontainer:3">
CONTENT3
<button id="to:3" class="reply">REPLY</button>
</div>
Now lets say a user clicked on a button “to:3” and now I need to add a “Comment” box to “#replycontainer:3”.
My JavaScript, which I thought is correct is not working. It’s correctly detecing the clicked DIV class but no other page content is added to the selected DIV.
What could be the issue ?
Javascript/Jquery I use to detect which DIV button was clicked:
<script type="text/javascript">
$(document).ready(function () {
$("button.reply").click(loadComment);
});
function loadComment() {
var id = this.id.split('to:');
var postId = id[1];
var containername = "#replycontainer:" + postId;
$(containername).load("/Post/Comment"); //MVC Action pointer
}
</script>
Thanks in advance!
You will need to escape “:” with “\\” per jQuery selector API. Bad system for delimiting class names
http://api.jquery.com/category/selectors/
“:” is used to define a variety of selectors like “:input”, “:checked” etc