I've been looking at examples and nothing seems to work. Right now I have a button group, where each button serves as a separate category. Once the button is clicked, it will show an accordion and within the accordion there will be forms. For testing purposes, I only have one form right now.
The problem I'm running into is that once I click the submit button, the page completely reloads and once the page is returned everything is closed. I've tried using updatePanel and have had zero luck.
Basically, I want everything to remain open after the reload that was open before the reload.
<asp:ScriptManager id="script1" runat="server"></asp:ScriptManager>
<asp:UpdatePanel id="panel1" runat="server">
<div class="btn-group-vertical" style="width:100%; ">
#* Bucket Group 1 *#
<div class="btn-group">
<button type="button" class="btn btn-primary" id="formButton1" style="background-color:#EEEEEE; border-color:darkgrey; color:black;"><p>Bucket </p> <text style="font-size:80%;"> Bucket1</text></button>
#* Overall form for Monitoring *#
<form asp-controller="test" method="post" role="form" onsubmit="return confirm('Do you really want to carry out this action?');" id="form1" style="display:none;">
<div id="accordion" role="tablist" aria-multiselectable="true">
#* Form 1 *#
<div class="card">
<div class="card-header" role="tab" id="headingTwo">
<h5 class="mb-0">
<a class="collapsed" data-toggle="collapse" data-parent="#accordion" href="#collapseTwo" aria-expanded="false" aria-controls="collapseTwo" style="font-size:15px;">
Test1
</a>
</h5>
</div>
<div id="collapseTwo" class="collapse" role="tabpanel" aria-labelledby="headingTwo">
<div class="card-block">
<div class="form-group">
<div class="form-group">
<p> This script will return a value.</p>
</div>
#Html.DropDownList("Envs", new SelectList(Enum.GetValues(typeof(Envs))), "Select Enivronment", new { #class = "form-control" })
<br>
<div>
<button type="submit">Submit</button>
</div>
<br />
#* Space to display output *#
<h5>Output: </h5>
<div>
<textarea cols="20" rows="2" class="form-control" style="color:cadetblue;font-weight:bold;"> #ViewBag.serviceResponse </textarea>
</div>
</div>
</div>
</div>
</div>
#* Form 2 *#
</div>
</form>
</div>
#* Bucket Group 2 *#
<div class="btn-group">
<button type="button" class="btn btn-primary" id="formButton2" style="background-color:#EEEEEE; border-color:darkgrey; color:black;"><p>Test2</p> <text style="font-size:80%">Test 2</text></button>
<form id="form2" method="post" style="display:none;">
<div id="accordion" role="tablist" aria-multiselectable="true">
<div class="card" id="get">
<div class="card-header" role="tab" id="heading">
<h5 class="mb-0">
<p> Test2.</p>
</h5>
</div>
</div>
</div>
</form>
</div>
</div>
</asp:UpdatePanel>
Javascript functions to open when buttons are clicked.
$("#formButton1").click(function () {
$("#form1").toggle();
});
// Write your JavaScript code.
// Write your Javascript code.
$("#formButton2").click(function () {
$("#form2").toggle();
});
You have two options:
Don't reload the page (add a click handler to submit form data without using the built-in HTML submit)
Use local storage to store the state of which accordion section was open and initializing the page with the same section open
Related
I got a little problem with Javascript in laravel 5.6.
I have a wizard setup here, and there are 3 steps.
Step 1. login or register
Step 2. another div (hidden)
Step 3. another div (hidden)
If I still don't have a login session (here I use the session for the login)
then I want to go directly to step 2 (hidden div 1 and 2)
And my statement is how do I get login session logic on javascript?
This is the markup for the view:
<div class="container">
<div class="stepwizard1">
<div class="stepwizard-row1 setup-panel">
<div class="stepwizard-step1">
<a id="a-step1" href="#step-1" type="button" class="btn btn-primary btn-circle"></a>Step 1</p>
</div>
<div class="stepwizard-step1">
<a id="a-step2" href="#step-2" type="button" class="btn btn-default btn-circle disabled"></a>
<p>Step 2</p>
</div>
<div class="stepwizard-step1">
<a id="a-step3" href="#step-3" type="button" class="btn btn-default btn-circle disabled"></a>
<p>Step 3</p>
</div>
</div>
</div>
<div class="tab-panel setup-content" id="step-1">
<div class="col-md-12">
<section class="content">
<div class="login">
<h2>masuk</h2>
<div class="alert alert-danger alert-dismissible alert-login" style="display:none;"></div>
<form id="form-login">
<div id="label_email">
<input type="text" placeholder="Email" name="email" id="email"/>
</div>
<div id="label_password">
<input type="password" placeholder="Password" name="password" id="password"/>
</div>
<button type="submit" class="button nextBtn">Masuk</button>
</form>
</div>
</section>
</div>
<div class="tab-panel setup-content " id="step-2">
<div class="col-md-12">
<section class="content">
<div class="login">
<h2>Alamat</h2>
<div class="alert alert-danger alert-dismissible alert-login" style="display:none;"></div>
<div id="label_email">
<input type="text" placeholder="alamat" name="alamat" id="alamat"/>
</div>
<div id="label_password">
<input type="text" placeholder="kodepos" name="kodepos" id="kodepos"/>
</div>
<button type="submit" class="button nextBtn">Next</button>
</div>
</section>
</div>
</div>
</div>
btw, here I use ajax for the login form...
Thanks in advance, and I'm sorry if it's still wrong because I am still relatively new in the world of programs and my bad...very bad English.
First of all, if you are using a laravel then you can take advantage of blade templating engine
#auth
// The user is authenticated...
#endauth
#guest
// The user is not authenticated...
#endguest
Then you could set some classes inside those code blocks and style them. Your steps will be easier to implement.
If, however, you really want to use Ajax to check if user is authenticated, You could make a function in your controller to return a user status like
public function isLogged() {
if (Auth::check()) {
// The user is logged in...
}
}
And set up a root path like
Route::post( '/isUserLogged', 'UserController#isLogged' );
Oh, and one more thing, if you are using steps that could get ugly JS code pretty fast. I would suggest to use a Vuejs framework which has already built in the Laravel.
Good luck :)
When i clicked on ADD Button, it's appearing the text in the bellow but it's appearing the same column. here is 2 input field.
i have used : <input id="accordion_input" type="text"/>
another one is : <div id="accordion_body" class="panel-body"></div>
So i want, if i fill-up the input and div area & clicked ADD button then i should be appear and second time if i clicked on add button then it's should be CLONE the First input data. The data must be showing on different column every clone part, not in the same column! Like the below snapshot:
$(document).ready(function() {
$('#Add_btn').click(function() {
$('#accordion_body').append($('#editableDiv').html());
var x = $("#accordion_input").val();
$("#accordion_title").append(x);
});
});
<html>
<head>
<title>404</title>
</head>
<body>
<input id="accordion_input" type="text">
<div id="editableDiv" contenteditable=""></div><br/>
<div id="acc_main" contenteditable="false" class="accordion-main">
<div class="panel-group trash_removed" id="accordion" role="tablist" aria-multiselectable="true" contenteditable="false">
<div class="panel panel-default">
<div class="panel-heading" role="tab" id="headingOne" contenteditable="false">
<h4 class="panel-title">
<a id="accordion_title" style="display: block"></a>
</h4>
<div id="expandingCol" class="panel-collapse collapse" role="tabpanel" aria-labelledby="headingOne" style="display: block">
<div id="accordion_body" class="panel-body"></div>
</div>
</br>
</div>
</div>
</div>
</div>
<button id="Add_btn">Add</button>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</body>
</html>
Wrap the content in a <p> tag or insert a <br/> after each one.
Using Bootstrap...
How to make this so that only one accordion collapsable DIV is open at a time. When one is clicked open, the other should close (if it is open?)
Looking for the most simple and streamlined solution...
<div class="row" id="nav-top">
<div class="col-md-6">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >SIGN-IN</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-6">
<div>
REGISTER
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
</div>
You have to use show.bs.collapse event which is fired immediately when the collapse element starts showing. Then you can hide other collapsible menus, Like this:
// when showing signin accordion
$('#signin').on('show.bs.collapse', function () {
// hide register accordion
$('#register').collapse('hide');
});
$('#register').on('show.bs.collapse', function () {
$('#signin').collapse('hide');
});
But If you have multiple accordion you can't call this event in each one of them, You have to use a class to select them all and call show.bs.collapse only one time, Here is a working example:
$( document ).ready(function() {
$('.collapse').on('show.bs.collapse', function () {
// hide all accordion except the clicked one
$('.collapse').not(this).collapse('hide');
});
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div class="container">
<div class="row" id="nav-top">
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#signin" >ABOUT</a>
</div>
<div id="signin" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#register" >REGISTER</a>
</div>
<div id="register" class="collapse">
FORM HERE
</div>
</div>
<div class="col-md-4">
<div>
<a href="#" data-toggle="collapse" data-target="#about" >SIGN-IN</a>
</div>
<div id="about" class="collapse">
FORM HERE
</div>
</div>
</div>
</div>
I'm trying to change the collapse behavior in bootstrap, but without success.
I want to create a page with small panels (maybe col-md-4 that I named tabs) that changes the width after click, when the panel collapse.
Here is a example first page:
Here is the same page after click in the "tabs":
My current code, can't hide the <div>something here</div> and change the panel's width.
Below is the code for one panel with simple collapse effect.
<section class="col-md-4">
<h3 class="page-header title">Forms</h3>
<div class="panel-group">
<div id="panel-form-1" class="panel panel-default">
<div class="panel-heading">
<h4 class="panel-title">
<span class="glyphicon glyphicon-chevron-right"></span><a data-toggle="collapse" href="#panel1"> Panel #1</a>
</h4>
</div>
<div id="panel1" class="panel-collapse collapse">
<div class="panel-body">
<form role="form" id="form1">
<div class="row">
<div class="col-md-6">
<div>Stuff</div>
</div>
</div>
</form>
</div>
<div class="panel-footer">
<span class="glyphicon glyphicon-question-sign"></span>
</div>
</div>
</div>
<!-- Other panels-->
</div>
</section>
<div class="col-md-8 something">Something here</div>
JS (not working. No console errors):
<script type="text/javascript" src="../bootstrap/js/bootstrap.min.js"></script>
<script type="text/javascript">
$('.collapse').on('show.bs.collapse', function (e) {
$(this).parent("section").removeClass("col-md-4").addClass("col-md-12");
$(document).find("div.something").hide();
});
</script>
My result page with opened panels is something like (please ignore the glyphicon problems):
I tried to follow the example in this another question here in SO, but I didn't understand it very well.
Is it possible achieve it using bootstrap?
Misc:
Bootstrap 3.3.7
JQuery 3.1.1
Chrome and Firefox
I have a file upload control as shown below,
Code:
<div class="row">
<div class="col-md-12">
<div class="alert alert-warning normal-text hide" role="alert" id="ImportErrorMessage"></div>
<div class="panel panel-default">
<div class="panel-body">
<form id="FileImportForm" method="POST" action="api/FileUpload/Upload" enctype="multipart/form-data">
<div class="col-md-1">
<span class="glyphicon glyphicon-download-alt"></span> Get Template
</div>
<div class="col-md-3">
<select id="ItemDdl" class="col-md-12 item-list" title="Items"></select>
</div>
<div class="col-md-3">
<input type="file" id="ImportFile" name="ImportFile" accept="*.xlsx" class="col-md-12" />
</div>
<div class="col-md-1">
<button class="btn btn-danger btn-xs" id="ImportFileBtn" type="Submit" title="Import and Validate"><span class="glyphicon glyphicon-import"></span>Validate</button>
</div>
</form>
</div>
</div>
</div>
</div>
Expectation:
I want to show the 'No file chosen' message in the center as shown in the image. The reason is, to reduce the empty space between the 'Validate' button and the 'Choose file' button.
Options Tried:
I tried to modify this via css property and jquery but could not locate the text in UI.
Any help is appreciated.
Sorry, there is no simple way to do it. The only way to do it is to hide that input, put an image where that input is and some text with margin-left. With javascript you can easily position it and make sure that the click works cross-browser.