We Keep Coding

css selectors, set property for all except two tags

i have a modal and i try to implement nested comments
now i want to send the parent comment id to child comment in modal
button that show modal:
<button class="btn btn-xs btn-light" data-target="#commentModal" data-toggle="modal" data-parent="3">پاسخ</button>
<div class="modal fade" id="commentModal" tabindex="-1" role="dialog" aria-labelledby="commentModal" aria-hidden="true" dir="rtl">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<button aria-hidden="true" data-dismiss="modal" class="close" type="button">×</button>
<h4 id="modal-label-3" class="modal-title">ارسال نظر</h4>
</div>
<div class="modal-body">
<div class="respond-form" id="respond" style="padding-top: 0">
<form action="/comment" class="form-gray-fields">
{{ csrf_field() }}
<input type="hidden" name="parent_id" value="0">
<br>
<div class="row">
<div class="col-md-12">
<div class="form-group text-center">
<button class="btn btn-block" type="submit">ثبت دیدگاه</button>
</div>
</div>
</div>
</form>
</div>
</div>
</div>
</div>
</div>
i want to send value of data-parent in button, to "vlaue" attribute of input in modal
i see this for bootstrap modals:
$('#commentModal').on('show.bs.modal' , function (event) {
let button = $(event.relatedTarget);
let parentId = button.data('parent');
let modal = $(this);
modal.find("[name='parent_id']").val(parentId);
});
but i do not use bootstrap and following code not working for me!

How about something like this?
$(".btn").on("click", function(){
$(".modal-body").find("[name=parent_id]").val($(this).data("parent"));
// Code to show modal
});

Modal refactor over some common elements

These code works fine, but is repeating the same over and over, needs to refact.
The elements presented on page are Title and Description of all Modal. Rest
of functionality is the same. Css is default bootstrap, it can be the same
whithout any important change.
I added another Help button on the side of each primary button, to help
search some information about how to find the documentation on every element
inside the Modals. Is no needed to focus on that at the moment.
Lorem ipsum text, can be placed on the respective container to complete
the description, and title, feel free to do it by your own.
To test the code, link Bootstrap 4.0 js files on the page.
So some guide to refact here, will be apreciated. Thank you very much.
<!-- DESCRIPTION & HELP BUTTONS-->
<ul>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
<button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
</a></li>
</br>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-2" data-whatever="2. First Content">Title 2</button>
<button type="button" class="btn btn-secondary btn-circle">?<i></i></button>
</a></li>
</ul>
</div>
</div>
<!-- END DESCRIPTION & HELP BUTTONS-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text Description 1</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-2" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Title 2</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p>Some text Description 2</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
$('#example-1').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
} // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(recipient)
modal.find('.modal-body p').text(recipient)
})
$('#example-2').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever')
} // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text(recipient)
modal.find('.modal-body p').text(recipient)
})

I created a single modal in which the information can be replaced according to the button that clicked it. To take care of a longer text for modal body part, I added a that contains the relevant text along with the button in the same li but keeping the same hidden. So on click of the modal lonk all the relevant values can be replaced using jquery like this.
<!-- DESCRIPTION & HELP BUTTONS-->
<ul>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="1. First Content">Title 1</button>
<button type="button" class="btn btn-secondary btn-circle" title="Information regarding first modal or...">?<i></i></button>
<div id="1content" style="visibility: hidden;"> <p>Some text Description 1</p></div>
</a></li>
<li><a href="#">
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#example-1" data-whatever="2. Second Content">Title 2</button>
<button type="button" class="btn btn-secondary btn-circle" title="Information regarding second modal or...">?<i></i></button>
<div id="2content" style="visibility: hidden;"> <p>Some text Description 2</p></div>
</a></li>
</ul>
<!-- END DESCRIPTION & HELP BUTTONS-->
<!-- MODAL's BODY DESCRIPTION -->
<div class="modal fade" id="example-1" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Title 1</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Go to content</button>
</div>
</div>
</div>
</div>
<!-- END MODAL's BODY DESCRIPTION-->
<script>
$('a[data-toggle=modal], button[data-toggle=modal]').click(function () {
var button = $(this); // Button that triggered the modal
var recipient = $(this).attr("data-whatever");
var modal = $("#example-1");
modal.find('.modal-title').text(recipient);
var div = $( "div" );
// if last() is not used, then it brings that information button's ? as well
var bodyText = $(this).siblings(div).last().text();
modal.find('.modal-body p').text(bodyText);
});
</script>

How to open a particular tab inside a modal

I have 2 buttons and each is responsible for opening a modal, however, this modal has 2 tabs for signup and sign in. I want that if a user clicks on signup button then after the modal opens the signup tab should be active and if a user clicks on sign in button then after the modal opens the sign in tab should be active
The code of the button is
<button type="button" class="btn btn-primary" data-toggle="modal" data-target=".bd-example-modal-lg">SIGN UP</button>
<button type="button" class="btn btn-secondary" data-toggle="modal" data-target=".bd-example-modal-lg_two">SIGN IN</button>
The code of modal is
<div class="modal fade bd-example-modal-lg" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<ul class="nav nav-tabs" >
<li class="nav-item col ">
<a class="nav-link active" href="#signup" data-toggle="tab" >Sign up</a>
</li>
<li class="nav-item col ">
<a class="nav-link" href="#signin" data-toggle="tab" >Sign in</a>
</li>
</ul>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="container">
<div class="row">
<div class="col">
<div class="tab-content">
<div class="tab-pane active" id="signup">
signup box
</div>
<div class="tab-pane" id="signin">
signin box
</div>
</div>
</div>
<div class="col" id="social" >
Content
</div>
</div>
</div>
</div>
</div>
</div>
</div>
Can anyone please tell me how to do this

You'll have to do it with Javascript. Here's one way. Working JSFiddle.
First, get rid of the data-toggle="modal" data-target=".bd-example-modal-lg" on both buttons. You'll need to run your tab-targeting Javascript when you open the modal, and you can easily do that if you manually open the modal using the modal show method, rather than via the data attributes.
Next, in their place, add something to each button to identify which tab it targets - for eg a data attribute, with the id of your tabs:
<button type="button" class="btn btn-primary" data-tab="signup">SIGN UP</button>
Last, add some Javascript to do the work:
// Add an event handler to fire when our buttons are clicked
$('button').on('click', function() {
// Find which button was clicked, so we know which tab to target
var tabTarget = $(this).data('tab');
// Manually show the modal, since we are not doing it via data-toggle now
$('.bd-example-modal-lg').modal('show');
// Now show the selected tab
$('.nav-tabs a[href="#' + tabTarget + '"]').tab('show');
});
Note that as the docs describe, you target the tab with the a link which opens it, not the div of the tab itself.

Dynamically changing content of modal on list element click

I have a html page that is simulating the newsfeed of a social network website. here, posts from different users are generated as li on an un-ordered list. I want to show a pop up modal on the click even of any of these list elements that would dynamically show the content of that particular list element. the mark up is like below:
<body>
<div class="container" >
<ul id="newsfeed">
<li class="news" data-toggle="modal" data-target="#myModal">
<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">jhon</p>
<p class="text">good moprning every body</p>
<p>posted at 12:30pm</p>
<hr>
</li>
<li class="news" data-toggle="modal" data-target="#myModal">
<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">jimmy</p>
<p class="text">hello every body</p>
<p>posted at 12:30pm</p>
<hr>
</li>
<li class="news" data-toggle="modal" data-target="#myModal">
<img src="someimage_1.png" class="img-thumbnail" alt="Cinque Terre" width="60" height="60">
<p class="title">joe</p>
<p class="text">felling bored at home</p>
<p>posted at 12:30pm</p>
<hr>
</li>
</ul>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body" id="popup">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
</body>
The JQuery i have tried:
<script>
$('#myModal').on('show.bs.modal', function (event) {
var element = $(event.relatedTarget); // the li that triggered the modal to show
var dynamic_text = element.find('.text').val(); // Extract the value of the .text div inside that li
var modal = $(this);
$("#popup").html('the users post says: ' + dynamic_text);
});
</script>

.popup is the class, not the id. Need to Change
modal.find('.popup').text('the users post says: ' + dynamic_text);
to
$("#popup").html('the users post says: ' + dynamic_text);
and change val to text this:
var dynamic_text = element.find('.text').text();
fiddle http://jsfiddle.net/6oh9aacL/1/

2 (or more) forms in a modal with tabs

I have a modal with some tabs, and each tab has its own form. I am looking for some way to change the footer so the submit works based on the active tab.
http://jsfiddle.net/r9b3ugs5/
<button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="tabbable">
<ul class="nav nav-tabs" data-tabs="tabs">
<li class="active">
One
</li>
<li>
Two
</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="One">
<form id="FormOne" role="form" class="container-fluid" action="One.asp" method="post">
<div class="row">
FormOne
</div>
</form>
</div>
<div class="tab-pane" id="Two">
<form id="FormTwo" role="form" class="container-fluid" action="Two.asp" method="post">
<div class="row">
FormTwo
</div>
</form>
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
What should be the way to do this? adding one footer for each tab and show it when the tab is active? Some other way?
UPDATE:
http://jsfiddle.net/r9b3ugs5/2/
Everthing is ok, besides the trigger url when I click in each button.

use jquery:
$("#tab1").click(function(){
$("#submit1").css("display","inline-block !important");
$("#submit2").css("display","none");
});
$("#tab2").click(function(){
$("#submit2").css("display","inline-block !important");
$("#submit1").css("display","none");
});
Fiddle: Demo

I updated the JFiddle. Look at this:
http://jsfiddle.net/r9b3ugs5/1/
Instead of alerting the id you can decide which tab has to be saved using the retrieved id. All you need to do is to add an id and a unique class (mytabs here) to all the tabs (on the li tag).
$("#save-button").click(function() {
alert($(".mytabs.active")[0].id);
});
EDIT: Actually you don't really need the class you could select over the parent ("#my-tab-ul li.active"). Several possibilities.
EDIT2: Further explanation
give the form ids like tab-id-form (tab-id = id of tab belonging to form)
replace the alert line with
$("#" + $(".mytabs.active")[0].id + "-form").submit();
Complete solution (tested in IE and FF): http://jsfiddle.net/r9b3ugs5/5/
// optional: change the text on the button when the tab is switched
$("#tab1").click(function() {
$("#save-button").html("Submit 1");
});
$("#tab2").click(function() {
$("#save-button").html("Submit 2");
});
$("#save-button").click(function() {
var id = $(".mytabs.active")[0].id;
if (id == "tab1") {
// you can also do the submits here, then there is no need for a
// special id, e.g. $("#completely-unrelated-form-id").submit()
} else {
// other submit if done in here, however with this approach you
// always have to modify the code when adding tabs.
}
$("#" + id + "-form").submit(); // == EDIT2, no more code manipulation needed
});