I am building a site and I have a list of status updates and I want to allow the users to write comments for each of of the items in the list
However I am trying to implement a UI similar to the way stack overflow works
specifically the collapsible comment form / list where a user clicks on add comment on the specific status update in the list, and below that item in the list the comment entry form shows up along with the specific comments already posted.
How do I accomplish this using Jquery?
Note: looking also for the markup example another words a working sample. Thanks
And yes if you could show Async postback that would be nice too
To load the content you can just hook up a click event to populate a div using the load method.
For example in the view you could have something like:-
<%= Html.ActionLink("Comments", "CommentList", "Questions", new { Id = this.ViewData.Model.Id }, new { id = "commentLink" })%>
<div id="commentContainer" style="display:none;">
Loading...
</div>
while the javascript to hook everything up would be:-
$(function() {
$("#commentLink").click(function() {
$("#commentContainer").toggle();
if ($("#commentContainer").is(":visible")) {
$("#commentContainer").load($(this).attr("href"));
} else {
$("#commentContainer").html("Loading..."); //Or just leave it as is...
}
return false; //Prevent default action
});
});
The quick approach (for just showing / hiding the comment area) would resemble something like this:
$(function(){
$('#id_of_element_to_use_for_click').click(function(){
$('#id_of_comment_area').slideToggle();
});
});
The jQuery site will provide you with doco on different approaches such as fades, slides or other combined animations.
Your "Comment Area" I've used in the example here would likely be a <div> tag that contains your existing comments, plus whatever textarea or text input box you wanted users to type their answers into.
Do you need to do an asynchronous postback?
Related
I'm trying to clear my search filter without deleting the texts on the search field but by using a button. The search field clears up but the whole items on the grid won't reappear.
I tried to make the clear button a part of the combination filter and add a data-filter="*" but still won't work.
<div class="button-group js-radio-button-group" data-filter-group="clear">
<a class="button" id="clearme" data-filter="">Clear</a>
</div>
Here's the code that I'm using to clear the search field:
$('#clearme').on( 'click', function() {
$(".quicksearch").val("");
})
And here's the whole codepen
You can try something like
$("#clearme").click(function(){
$(".grid").isotope({
filter: '*'
});
});
This will clear all filters.
The problem with the isotope re-initialization in the other answer is that after clicking it redefines the filter function, thus the initial function that you wrote gets reset and it stops working, which is a bad idea in your specific use case.
A simple way of doing this without messing with the previously create filter function would be something like this :
$('#clearme').on( 'click', function() {
$(".quicksearch").val("");
$(".quicksearch").keyup();
})
I currently have made a way so the user can add another text field to the form by pressing on a 'add_another' div, this uses basic JS so when the user presses on the div 'add_another' the div 'author_2' is toggled.
I would like to make it so that when the user presses on the 'add_another' div for a second time it shows 'author_3' div, and when they press 'add_another' again, it then shows 'author_4'. I have put all the CSS and HTML divs in place to support this, I am just trying to adapt my code so it shows one div after another, rather then toggling a single div.
Here is my JS:
<script>
$(document).ready(function() {
$('.add_another').on('click', function(){
$('.author_2').toggle();
});
});
</script>
I have tried altering this code, however with no luck.
I haven't added my HTML as it is just 4 divs, 'author_1' 'author_2' ... 3...4
Thankyou for your help
There are two solutions to Your problem.
First one - use static code
It means the max author count is 4 and if user gets to 4, this is it.
If so - You need to store the number of authors already shown.
var authors_shown = 1;
$(document).ready(function() {
$('.add_another').on('click', function(){
authors_shown++;
if (!$('.author_'+authors_shown).is(":visible")) {
$('.author_'+authors_shown).toggle();
}
});
});
But there is also a second - more dynamic option.
What if user wants to input 10 or 20 authors? You don't want to pre render all that html code and hide it. You should clone the div and change its id or if the (HTML) code (for another author) is not too long, you can render it within JS code.
var div = document.getElementById('div_id'),
clone = div.cloneNode(true); // true means clone all childNodes and all event handlers
clone.id = "some_id";
document.body.appendChild(clone);
If it's a form, then change names of input fields to array as author_firstname[]
Also You can store number of added authors in another hidden field (so you know how long to loop the form fields on the server side.
The second option is a bit more complex and longer, but way more dynamic.
You should make another div when clicked on add_another:
something like this:
<script>
$(document).ready(function() {
$('.add_another').on('click', function(){
$('<div><input type="text" name="name[]" /></div>').appendTo('.your_container');
});
});
</script>
as you see, input's name has [] which means you should treat with the inputs as an array.
let me know if you got any further questions
good luck.
I have a while loop in my php page which sets a different id for every button and form through a counter variable. Every button has to open a different form (they each have different default information preselected, this is for a prescription renewal ability). I can get this to work by having in my javascript a click function for every id which calls a show on the right form. But, obviously this is not scalable, and so it cannot adapt to the amount of prescriptions I have. Looking through the web, I saw people using classes and the id starts with solutions to this problem. However, when I use this solution, the buttons open all the forms... not the desired behavior. Currently my javascript function is the following:
$('[id^="add-renew-link"]').click(function () {
$('[id^="add-renew-form"]').show();
});
Like mentioned above, the function does get called by all different IDs button. That code however opens all the forms every time one of the buttons get click. IDs are actually of the form add-renew-form0, add-renew-form1, add-renew-form2... (same pattern for add-renew-link). Forms and links with the same number at the end are meant to be linked. Does anybody know how I can achieve this? Thanks a lot!!
You can't have multiple DOM elements with the same ID. What you can do here is to assign classes for the elements:
<div class="add-renew-link"></div> <div class="add-renew-form"></div>
And then use .each
$('.add-renew-link').each( function(x){
$(this).click(function(){
$(".add-renew-form:eq("+x+")").show();
});
});
You can check out the JSFiddle here.
You're close. The $('[id^="add-renew-form"]').show(); is going to match ALL ELEMENTS that start w/ "add-renew-form" as the id, so that's why you're experiencing all forms being shown when clicking any link/button.
You can use a regex to pull the number from the end of the id to find a match on the associated form as below:
$('a[id^="add-renew-link"]').click(function() {
var idx = $(this).attr("id").match(/\d+$/)[0]; // Pull index number from id
$("#add-renew-form" + idx).show();
});
This jsbin has a full working example.
http://jsbin.com/xicuwi/1/edit
Try, using the .each() method:
$('[id^="add-renew-link"]').each(function(i){
var ths = $(this);
(function(i){
ths.click(function(){
$('#add-renew-form'+i).show();
}
})(i);
});
I am trying to use jQuery to show section if a user selects a certain checkbox in a sharepoint form. I have had success doing this with a button and with a simple checkbox with one value to show all from this blog post http://akanoongo.blogspot.com/2008/04/how-to-hide-fields-in-sharepoint-list.html, but am struggling with if they select multiple values.
<script type="text/javascript" src="/SiteAssets/Libraries/jquery-1.10.2.min.js"></script>
<script>
$(document).ready(function(){
$("nobr:contains('Desk Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Calendar Refills')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Spiral Bound')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Wall Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Misc. Calendars')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Franklin Covey')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Comments')").parent('h3').parent('td').parent('tr').hide();
$("nobr:contains('Retention Policy')").parent('h3').parent('td').parent('tr').hide();
});
</script>
It would appear the value needs to be an if statement for contains VALUE not a click function. I am not sure what to do with this though.
$("input[title$='ShowFields']").click(function()
Basically if they select Wall Calendars it should show jsut wall calendar but if they do Wall and desk, it should toggle them both.
Any guidance would be fantastic. Thank you!
EDIT: I change my answer based on your comment below
To do what you want I'll use the library I created that is called SharepointPlus (please load jQuery and SharepointPlus in your page). Then the JavaScript code would be something like:
// hide all the rows by default
$SP().formfields("Desk Calendars,Calendar Refills,Spiral Bound,Wall Calendars,Misc. Calendars,Franklin Covey,Comments,Retention Policy").row().hide();
// add a trigger for when you click a checkbox
$SP().formfields("Calendar Type").elem().on('click', function(event) {
// the value of the checkbox is found with the "title" attribute from the parent
// if it's checked, then we show the row, if it's not then we hide it
$SP().formfields($(this).parent().attr("title")).row().toggle(this.checked)
})
I'm looking for a jQuery script or idea on how to create a similar window to the one facebook uses when you invite friends to an event.
So basically a dialog window that has a list of people inside and when you select your friends it changes the background color and checks the checkbox of that friend so when they submit the form I can collect the data.
Thanks,
How about something like this? Oversimplified, but this should get the point across...
Markup:
<div class="member">
<span class="member_name">Mike</span>
<input type="checkbox" class="member_checkbox" />
<input type="hidden" value="002" class="member_id" />
</div>
Member Select javascript:
// .member-selected would set a new background color
$(".member").click(function() {
$(this).addClass("member-selected");
// Find the checkbox
var checkbox = $(this).find('.member_checkbox');
// If the checkbox is checked, uncheck it, and
// if it's not, then check it
if( $(checkbox).attr("checked") != true) {
$(checkbox).attr("checked", true);
} else {
$(checkbox).attr("checked" false);
}
});
Form submission javascript:
// Create an array to hold ID numbers to submit
var add_members = [];
$(".member").each(function() {
if( $(this).find('.member_checkbox').is(":checked") ) {
add_members.push( $(this).find('.member_id').val() );
}
});
You would end up with an array of member IDs that you could then post using AJAX.
** EDIT **
In the click function (see above) there should be additional lines that check or uncheck the checkbox based on its current state.
EDIT: I made a JSBIN out of Mike's suggestion. May help you solve your problem. When a checkbox is clicked its class is alerted then changed (member-selected is added or removed, I'm using toggleClass()) and then its class is alerted again. Check it out: jsbin.com/uxuxu3/4/edit
I don't know how facebook's 'invite friends to an event' window looks these days, but I believe you will find Facebox a similar modal. Check Facebox and other, perhaps even better options, at 19 jQuery Modal Boxes to improve your UI.