2 (or more) forms in a modal with tabs - javascript

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
});

Related

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 do I refactor modals that operate on different DIVs to be DRY?

I have about 9 small javascript functions on my page that all do the same thing, open up a modal for the content inside the div where the button is located.
The only difference between them all is that each one references a different div. I'd like to refactor this code so that I'm not repeating any code that does the modal operation.
Here is the codepen:
Javascript:
// FINDS THE MODAL AND THEN PLACES THE IBOX CONTENT THAT IS CURRENTLY
// ACTIVE INSIDE THE MODAL'S BODY
$('[data-target="#enlargeElementModal"]').on('click', function () {
$('#enlargeElementModal .modal-body').html($('#ibox-1 .content.active').html());
});
$('[data-target="#enlargeStrategyModal"]').on('click', function () {
$('#enlargeStrategyModal .modal-body').html($('#ibox-2 .content.active').html());
});
....and many more of these
Some HTML:
// IMPORTANT PART OF ENLARGE MODAL
<div class="modal modal-wide fade" id="enlargeElementModal" role="dialog"><!--ENLARGE SCREEN MODAL-->
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">
<span class="glyphicon glyphicon-remove"></span>
</button>
<h4 class="modal-title">Element Map</h4>
</div>
<div class="modal-body">
<p></p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
// IMPORTANT PART OF IBOX-CONTENT
<div class="ibox-content mapStyle" id="ibox-1"><!--CONTENT INSIDE THE DIV BODY-->
<div class="active content" id="elementMap"><!--MAP CONTENT-->
....content
</div>
</div>
How do I refactor the modal JavaScript so I don't repeat code?
I would add another data-* attribute onto each button to indicate where the content comes from:
<button type="button" class="btn btn-default btn-xs" data-toggle="modal"
data-target="#enlargeStrategyModal" data-content="#ibox-2">
And then use this same code to activate every button:
$('[data-target]').on('click',function(){
var target = $(this).data('target');
var content = $(this).data('content');
$(target + ' .modal-body').html($(content + ' .content.active').html());
});
Live example: http://codepen.io/anon/pen/dojRRZ

Fade the li when modal is opened and added to other div

When I clicked on the product, it opened the Modal and added to the My product list but I want that particular product to get faded if it is added to the My Product list and the button also when the modal is reopened so that it could not be added again to list.
<script type="text/javascript"> <!--This is the code what i'm able to do so far-->
$(document).ready(function() {
$('button[id^="allttm"]').click(function(e) {
e.preventDefault();
var $this = $(this);
var data_id = $this.attr('data-id');
$("#mylist").append('<li class="has-item">' + data_id + '</li>');
});
});
</script>
<ul class="unstyled" id="products">
<li class="dummycontent" id="itemdetail" data-id="6425809">
<a class="dummyclass" href="javascript:void(0)" id="" data-toggle="modal" data-target="#basicModal">
<span class="itemname">product 1</span>
</a>
</li>
</ul>
<h3 id="myproductlistheader">My productlist</h3>
<ol id="mylist" class="productlist">
</ol>
This the modal area:
<div class="modal fade" id="basicModal" tabindex="-1" role="dialog" aria-labelledby="basicModal" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="procuctifo">
<div>
<h3 class="productheading">product 1</h3>
</div>
</div>
</div>
<div class="modal-footer">
<button type="submit" class="btn btn-default" data-dismiss="modal" id="allttm_1" data-id="product 1">Add to list</button>
</div>
</div>
</div>
</div>
you can add another class to your product item once it has been added to the list and based on whether the product items has the class or not you can add it to the list.your code may look something like this:
$('.products').click(function(){
if($(this).hasClass('added')){
//product in the list , no need to add
}else{
// add class and add product to list
$(this).addClass('added');
//add product to list
}
});
Hope it helps

How does one pop up a modal AND run a checkbox check in JavaScript/jQuery?

I need a question answered, that in all honesty is almost completely identical to this one. The only difference is that instead of displaying a JS alert, I'm trying to display a modal using Bootstrap 3.1.1.
Here's what I have for relevant code so far:
HTML
<!DOCTYPE HTML>
<form id="aForm" method="post" action="">
...
<p class="alert alert-error alert-danger" id="errorMsg" style="display:none;">You must check the checkbox!</p>
<label class="checkbox"><input type="checkbox" id="theChkbox" required="required" />Click the box.</label>
<button id="clickButton" class="btn" type="button" onclick="submitCheck('theChkbox','errorMsg');">Click</button>
...
<div class="modal" id="myModal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">x</button>
<h4 class="modal-title">Modal Title</h4>
</div>
<div class="modal-body">
<!-- Content here -->
</div>
<div class="modal-footer">
<button type="button" onclick="submitModal()" class="btn">Click Me</button>
</div>
</div>
</div>
</div>
...
</form>
JavaScript
function submitCheck(chkbox,error) {
if (document.getElementById(chkbox).checked == false) {
document.getElementById(error).style.display = "block";
} else {
window.location.href = "#myModal";
}
}
Now, the condition that the checkbox must be checked has to be there, and only when it is checked, and the button is pressed is the modal supposed to pop up.
Any advice is welcome. Seriously, this is driving me nuts! >.<
I'll guess that you have JQuery...
Here is a JSFiddle that might show you how to do so with bootstrap : JSFIDDLE
// everytime the button is pushed, open the modal, and trigger the shown.bs.modal event
$('#openBtn').click(function () {
$('#modal-content').modal({
show: true
});
});
HTML
Open modal
<div id="modal-content" class="modal fade" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3>Modal header</h3>
</div>
<div class="modal-body">
<p>
<input type="text" id="txtname" />
</p>
</div>
<div class="modal-footer">
Close
Save changes
</div>
</div>
</div>
</div>

Jquery modal pop up with dynamic content

I am working on someone script.I can t understand it clearly to implement my code.I need this content in modal pop up.
<div data-rel="close" data-role="panel" data-display="overlay" data-position="right" id="circle-more">
<div class="details-arrow">
<div class="boxscroll">
<div class="contentscroll circle-more-cont">
</div>
</div>
</div>
</div>
Actually now its taking data dynamically from db and hidden.It working fine but it shows in page.I want to show this entire content in modal.can anybody help me.I tried all options nothing work out.
it get contents from here
function circleMoreDetailsSocial(social_ring_obj_index, comment_details, cur_obj)
{
$(".circle-more-cont").html('');
if (nice) nice.remove();
var i = 1;
$.each(circleData4[social_ring_obj_index], function(social_value_index, social_value)
{
$.each(social_value, function(value_index, value)
{
if(value[1] == 'facebook')
social_media_link = "https://facebook.com/"+value[2];
// <div class='"+value_index+"' style='background-color:"+eval("color"+i)+"'> </div>
$(".circle-more-cont").append("<a href="+social_media_link+" onclick='javascript: void(0)' return false;' ><p>"+value[0]+"</p></a>");
i++;
});
});
$("#circle-more").panel('open');
nice = $(".boxscroll").niceScroll(".contentscroll",{cursorcolor:"#F00",cursoropacitymax:0.7,boxzoom:true,touchbehavior:true});
return false;
}
This make some sense i think.it dynamically add content from json file as pargraphs.so when i click a paragraph it will redirect to some links.I dont want to get redirected.instead of that i just want to wrap everything under modal so i can stay in same page.redirect will done only in modal.
please check demolink
Reference link http://getbootstrap.com/javascript/#modals
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">
Launch demo modal
</button>
<!-- Modal -->
<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-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
...
</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>
use jqueryui dialog -modal ...https://jqueryui.com/dialog/
example:
html
<div id="dialog-modal" title="Basic modal dialog">
<p>Adding the modal overlay screen makes the dialog look more prominent because it dims out the page content.</p>
</div>
js:
$(function() {
$( "#dialog-modal" ).dialog({
height: 140,
modal: true
});
});
you can use jquery + jquery ui
the code
$(function(){
$( "#circle-more" ).dialog({
height: 140,
modal: true
});
});
this a demo
https://jqueryui.com/dialog/#modal
that's open the dialog at the start of the page.

Categories