I want to allow users to edit their posts, to do this i'd like them to be able to click a link, once pressed the div their post is in originally would hide and a new div would be visible with the text from the old div inside the textarea - so they can literally edit their old post with ease.
I've tried searching for the past hour and cannot find a solid answer anywhere.
The HTML I have:
<div class="post-content">
<div class="post-inner-content">
<p>Users comment will go here</p>
</div><!-- .post-inner-content -->
Edit Post
<div class="edit-post-area">
<textarea></textarea>
</div><!-- .edit-post-area -->
</div><!-- .post-content -->
Should be pretty simple:
$("a.edit-post").click(function() {
//Get the text
var text = $(this).prev("div.post-inner-content").text();
//Create a text area selector (container, rather)
var textarea = $(this).next("div.edit-post-area");
//Give the textarea a value
$("textarea", textarea).val(text);
//Show it (if hidden)
//textarea.show();
});
Fiddle: http://jsfiddle.net/tudcP/
Use IDs instead of classes and select them that way:
<div class="post-content">
<div id="post-inner-content">
<p>Users comment will go here</p>
</div><!-- .post-inner-content -->
Edit Post
<div id="edit-post-area">
<textarea></textarea>
</div><!-- .edit-post-area -->
</div>
JavaScript:
$("#edit-post").click(function() {
//Get the text
var text = $("#post-inner-content").text()
//Create a text area selector (container, rather)
var textarea = $("#edit-post-area");
//Give the textarea a value
$("textarea", textarea).val(text);
//Show it
textarea.show();
});
Fiddle
Alternative you can use this:
js
$(".edit-post").on("click",
function(){
var edit = $(this)
.prev()
.find("p")
.html();//find comment to edit
$(this)
.next()
.find("textarea")
.val(edit);//find textarea and insert comments to edit
});
fiddle
Related
I have a page with such structure
<div id=0>
...
<textarea id=sometext></textarea>
...
<button class="coolbutton"></button>
...
...
</div>
<div id=1>
...
<textarea id=sometext></textarea>
...
<button class="coolbutton"></button>
...
...
</div>
<div id=2>
...
<textarea id=sometext></textarea>
...
<button class="coolbutton"></button>
...
...
</div>
I need to hide button only in the first div (id=0) when textarea in this div is empty. Please notice that only div ids differs. Ids of textareas are same. Buttons in other divs don't need to be hidden.
Please provide solution using js or asp.net mvc tools. Ask me if anything is unclear.
See my solution below. Since all of your buttons have the same id you can use childNodes to target the empty text area in the first div.
If the first textarea in div1 is empty then hide its second child which is the button.
The code snippet has comments for explanation.
//Declare div one using childNodes
var div1 = document.getElementById("0").childNodes;
//Target second child of div using index [1]
//The second child of the first div is the empty text area
if (div1[1].innerHTML === "") {
//If the text area is empty then hide the button
div1[3].style.display = "none";
}
<div id="0">
<textarea id="sometext"></textarea>
<button class="coolbutton">Click</button>
</div>
<div id="1">
<textarea id="sometext">some text</textarea>
<button class="coolbutton">Click</button>
</div>
<div id="2">
<textarea id="sometext">some text</textarea>
<button class="coolbutton">Click</button>
</div>
I have this html
<div class="col-md-6">
<div class="jumbotron">
read more...
<div class="read-more hidden">
<p>1 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
</div>
</div>
<div class="col-md-6">
<div class="jumbotron">
read more...
<div class="read-more hidden">
<p>2 - THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
</div>
</div>
This is the section of the modal where I need to append the text within the element with the class read-more
<div class="modal-body">
<!-- TEXT FROM THE READ MORE CLASS ELEMENT NEEDS TO BE APPENDED HERE -->
</div>
And this the jQuery function I have so far where I am adding a data-attr for every element with the class read-more:
jQuery(document).ready(function($) {
var $readmore = $('.read-more');
var $readmoreParagraph = $('.read-more p');
$readmore.each(function(i, el) {
var $dataAttr = $(el).attr('data-attr', i);
});
});
To get this output:
<div class="read-more" data-attr="0">
<p>THE TEXT I NEED TO APPEND TO THE MODAL</p>
</div>
TL;DR:
I need to append to the modal-body the text on the <p> under the div with the class read-more.
Any suggestions?
UPDATE
I did this:
$('#myModal .modal-body').append($("[data-attr="+i+"] > p"));
But as a result I am getting this in the modal-body:
1 - THE TEXT I NEED TO APPEND TO THE MODAL
2 - THE TEXT I NEED TO APPEND TO THE MODAL
Use the show.bs.modal event to change the contents of the body each time it is shown.
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget), // Button that triggered the modal
content = button.siblings('.read-more').html(),
modal = $(this);
modal.find('.modal-body').html(content);
});
See http://getbootstrap.com/javascript/#modals-related-target
From what I understood after the comments, I suggest the following:
After triggering the modal, get the content of the read-more you would like, and just use that text and place it at the modal (not appending, an append adds to the object).
Like this (example for the id 1):
$('#myModal .modal-body').html($("[data-attr=1] > p").text());
I am trying to change a div content box when a link above that box is clicked. I added a click function to the individual buttons then the corresponding dive containing the content for that particular box should be displayed.
When I apply the jQuery to the page, the content does not change according to the link that is clicked and the page displays awkwardly.
This is the jsfiddle I'm working with.
The webpage I'm working with is here.
Place where am i making the mistake.
The jQuery I'm working with so far looks like this
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
$('.question2').click(function(){
$('.new_member_box_display').load('#answer2');
})
$('.question3').click(function(){
$('.new_member_box_display').load('#answer3');
})
$('.question4').click(function(){
$('.new_member_box_display').load('#answer4');
})
});//end of ready
The HTML I'm working with looks like this :
<div class="new_member_box">
<h4>Vision</h4>
</div>
<div class="new_member_box">
<h4>Church History</h4>
</div>
<div class="new_member_box">
<h4>Becoming a Member</h4>
</div>
<div class="new_member_box">
<h4>Pastor-in-Training</h4>
</div>
</div>
<div class="clear" class="question"></div>
<div id="answer1">
1
</div>
<div id="answer2">
2
</div>
<div id="answer3">
3
</div>
<div id="answer4">
4
</div>
<div class="new_member_box_display" id="question">
Text will appear here when one of the tabs above is clicked
</div>
load() loads an external file with ajax, not elements on your page. You're probably just trying to hide and show elements :
$('[class^="question"]').on('click', function(e){
e.preventDefault();
var numb = this.className.replace('question', '');
$('[id^="answer"]').hide();
$('#answer' + numb).show();
});
FIDDLE
Here's a fiddle that does what I think you're looking to do. There are cleaner ways to do it, but this should work.
http://jsfiddle.net/PZnSb/6/
Basically you want to set the inner html of one element to the inner html of another, like this:
$('.question1').click(function(){
$('.new_member_box_display').html($('#answer1').html());
})
instead of this:
$('.question1').click(function(){
$('.new_member_box_display').load('#answer1');
})
It seems you just want the text to change when you click, try this.
$(document).ready(function() {
$('.question1').click(function(){
$('.new_member_box_display').text($('.answer1 ').text());
});
$('.question2').click(function(){
$('.new_member_box_display').text($('.answer2').text());
});
$('.question3').click(function(){
$('.new_member_box_display').text($('.answer3').text());
});
$('.question4').click(function(){
$('.new_member_box_display').text($('.answer4').text());
});
});
http://jsfiddle.net/cornelas/PZnSb/7/embedded/result/
I have about 50 p tags and next to these are again 50 divs. on click of each p tag, its div should be shown and the rest hidden. How do i acheive this. I can use something like below:
$(function() {
$('.p1').click(function(){
$('.div1').show();
$('.div2','.div3','.div4','.div5','.div6',.........,'.div50').hide()
})
$('.p2').click(function(){
$('.div2').show();
$('.div1','.div3','.div4','.div5','.div6',.........,'.div50').hide()
})
//////////////
//////
})
but as you see that this is not an effiecient solution. I am also not sure how the jquery each can be leveraged here or how can this implementation be done using arrays. Can somebody point me in the right direction. I think we should use a function and pass that no. as a parameter, but I dont know how to use custom functions in jquery.
UPDATE:
This is what I have done
$(function() {
$('.p1').click(function() {
$('.div').hide();
$('.d1').show();
})
})
I have added the class div to all of my 50 divs and I am showing d1 on click of p1. Now how do I replace 1 for each instance till 50.
I would have a common class to all div and p so that the binding the handler and the hide can be simple. And for the div, I would associate a data-tag to each p to link each p tag to div
<p class="p1 pclass" data-showdiv="div1">
...
</p>
<p class="p2 pclass" data-showdiv="div2">
..
<div class="mydiv div1" ..>
..
</div>
<div class="mydiv div2" ..>
..
</div>
And the script would be,
$(function() {
$('.pclass').click(function(){
$('.mydiv').hide();
$('.' + $(this).data('showdiv')).show();
});
});
As Jason told,
Use this
$('p').click(function() {
$('div').hide();
$(this).next('div').show();
});
If the div is next to each paragraph.
But, if there's an element between p and div, it wont work.
For you problem, you can do,
$('p').click(function() {
$('div').hide();
var divClass = $(this).attr("class").replace('p','div');
$('.' + divClass).show();
});
provided you have only p1, p2 .... in paragrah classes ;)
Update
See this fiddle
Notice , we have <br> tags between <p> and <div> as you wanted.
Assuming your HTML structure is
<p>Some text</p>
<div>More text to hide and show</div>
<p>Some text</p>
<div>More text to hide and show</div>
<p>Some text</p>
<div>More text to hide and show</div>
....
Use the following in your $(function(){}); method:
$('p').click(function() {
$('div').hide();
$(this).next('div').show();
});
var dvs = ['.div1','.div2','.div3','.div4','.div5','.div6',.........,'.div50'];
$('p').click(function() {
var index = parseInt(this.className.replace('p','')) - 1;
$(dvs[index]).show();
$(dvs.join(', ')).not(dvs[index]).hide();
});
The jQuery click event will automatically be registered on all elements that match the selector, so you shouldn't have to use the each() method. I would suggest having two CSS classes to distinguish between elements that have this toggling behaviour and elements that are primary (i.e. should be shown when their parent is clicked).
The markup:
<body>
<p class="togglable">
<div class="primary">
This is the primary div that will be shown when our parent is clicked.
</div>
<div>Regular div child</div>
<p>Nested paragraph</p>
<ul>
<li>A list perhaps</li>
</ul>
</p>
<p class="togglable">
<div class="primary">
This is the primary div that will be shown when our parent is clicked.
</div>
<div>Regular div child</div>
<p>Nested paragraph</p>
<ul>
<li>A list perhaps</li>
</ul>
</p>
<p>This is a normal paragraph</p>
</body>
The code:
$(function () {
$('.togglable').click(function () {
// hide all our children
$(this).children().hide();
// now only show our primary chlid
// NOTE: we pass 'this' as the second argument
// so that the selector will only apply to the
// children of the element that was clicked
// (i.e. we are providing a custom context for the selector).
$('.primary', this).show();
// You could even use the position of the child as well:
// $(this).children().first().show();
// This will show the first child element.
});
});
In this example all elements with the class togglable will show their primary child element when clicked and hide all other child elements.
I have a calendar with an event list below it on my page. When the user clicks on the next or previous button, I want to populate a div with the contents of rows only containing the currently displayed month and year on the calendar. Here's the structure of the rows (created with Drupal 7 Views).
<div id="all-events">
<div class="views-rows">
<div class="field-date">
<div class="field-content">
<span>June 2011</span>
</div>
</div>
</div>
<div class="views-rows">
<div class="field-event-title">
<div class="field-content">
<span>Some Event</span>
</div>
</div>
</div>
</div>
I got this far with jQuery, but I'm getting a huge list of errors:
$('#calendar span.fc-button-next').live('click', function(){
var month = $('#calendar .fc-header-title h2').html();
$('.event-list').fadeOut(350, function(){
$(this).html('');
$('#all-events').each('.views-rows',function(){
// Code goes here...
});
});
});
I should also mention that I'm using FullCalendar to create the calendar, so it's created with this plugin. Right now I can get the current month the user is viewing, but I want to go through the list and find all rows that contain this month and display them in the .event-list div.
I couldn't fully understand what you want, but to filter elements by its text use filter
<div>text 1</div>
<div> not this text </div>
JS
$("div").filter(function(){
return $(this).text().indexOf("text 1") >= 0; // if contains desired text
}).html("this one matches 'text 1'");
See this example on jsFiddle
This seems wrong:
$('#all-events').each('.views-rows',function(){...});
How about this:
$('.views-rows', '#all-events').each(function(){...});
Since version 1.1.4, jQuery has a contains selector to select elements containing a specific text.
$('#calendar span.fc-button-next').live('click', function(){
var month = $('#calendar .fc-header-title h2').html();
$('.event-list').fadeOut(350, function(){
var event_list = $(this).html('');
$('#all-events .views-rows:contains(' + month + ')').each(function(){
event_list.append($(this).html);
});
event_list.fadeIn();
});
});