Using Bootstrap, an application has a page with one form and multiple panels, each with a submit button. The first panel's button is the form default button whenever the Enter key is pressed. When a user fills in text inputs in the second panel and hits Enter, the second panel's button value should be sent to the Controller, but the first panel button's value, the form default button, is always sent instead.
I've tried adding a script to trigger focus or activation on the appropriate panel button when that panel is clicked or activated, to no avail. Does anyone know how to target a panel button for submission when it's panel is the one being used by the User? Thanks in advance!
Snippet:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js"></script>
<link href="https://bootswatch.com/bower_components/bootstrap/dist/css/bootstrap.min.css" rel="stylesheet"/>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-default" id="basicsPanel">
<div class="panel-heading">Basic Info</div>
<div class="panel-body">
<div class="row">
<!-- Text boxes and such -->
</div>
<div class="row">
<!-- This is always the default button upon pressing Enter key -->
<button type="submit" id="saveBasics" name="buttonCommand" class="btn btn-success pull-right" value="Save Basics">Save Basics</button>
</div>
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info" id="ownerPanel">
<div class="panel-heading">Owner</div>
<div class="panel-body">
<div class="row">
<div class="col-lg-4">
<!-- Other text boxes and such -->
</div>
</div>
<div class="row">
<div class="col-lg-12 text-right">
<!-- This button should be the one used when a User presses the Enter key while filling in data in this panel -->
<button type="submit" id="saveOwner" name="buttonCommand" class="btn btn-success" value="Save Owner">Save Owner</button>
</div>
</div>
</div>
</div>
</div>
</div>
Example of attempted script, which does indeed focus on the correct button when a panel is activated, but prevents the user from actually entering information into the panel's text boxes:
$("#ownerPanel").click(function () {
$("#saveOwner").focus();
});
$("#basicsPanel").click(function () {
$("#saveBasics").focus();
});
As of HTML5, the default button is the first button defined. You have a couple options to handle multiple buttons with enter presses:
Define multiple forms, each with one submit button. That way each panel is tied directly to the button you want it to use. This is nice and clean if the forms are independent, but if you still want the data from all forms, you'd need to catch the submission in JavaScript and pull the other forms' data into the payload.
Capture the keypress event in JavaScript and use the currently focused field to determine which button should be pressed. This lets you keep a single form with all the data in one place. A simple strategy for picking the button to use might be to traverse from the focused field to .closest('panel') and then back down to children('input[type=submit]').
Related
I have a button that wraps around an input to upload files to my angular app, I want to add a click event to listen for when the button is clicked and hide it, so every time the button is clicked to upload a file it gets hidden because I intend to replace it with a progress bar.
Here is the code I tried :
<div (click)="fileField.click()" (fileDropped)="upload($event)">
<div *ngIf="this.isButtonVisible">
<button
class="button is-primary mt-2"
(click)="this.isButtonVisible = false"
>
<input
type="file"
name="txts"
#fileField
(change)="upload($event.target.files)"
hidden
multiple
/>
Upload
</button></div>
<!-- Progress Bar -->
<div *ngIf="progress">
<div class="progress is-primary form-group">
<div
class="progress-bar progress-bar-striped bg-success"
role="progressbar"
[style.width.%]="progress"
></div>
</div>
</div>
</div>
I get the following error Property 'fileField' does not exist on type 'SourceComponent'. it has to do with the ngIF how do I fix it?
Thank you in advance.
You're right the issue has to do with the *ngIf. One way of fixing the error is by using the hidden directive to hide the div instead:
<div [hidden]="!this.isButtonVisible">
StackBlitz example
I have a popup form in html based website ,in popup form there are three options,if I click on first option then it goes to that particular section,but popup form remains there.if I click on close then form will close.but I want automatically form close if I visit particular section.
below is my code.
Picture of the website
<html>
<body>
<!-- popup form start here -->
<div id="popScroll">
<div class="popScroll">
<div class="popup">
<div id="option">
<!-- Home -->
<!-- Close -->
<!-- <button class="btn" id ="close-btn"> Close </button> -->
<div class="text">
<img src="demo.png" alt=""><br>
Chemical
</div>
<div class="text">
<br>
logistics
</div>
<div class="text">
<img src="demo.png" alt="polymer">Polymer
</div>
<!-- <span onclick="document.getElementById('popScroll').style.display='none'" class="w3-button w3-display-topright" class="boxi">Close</span> -->
</div><br><br>
<span onclick="document.getElementById('popScroll').style.display='none'" class="w3-button w3-display-topright" >Close</span>
</div>
</div>
</div>
</body></html>
I'm not exactly sure what you are trying to achieve but I assume you want to close a popup whenever you scroll down to a certain section within your site?
To achieve this, you could use the Intersection Observer.
More information here: https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API
What you can do is add click functionality on options using click listener and close modal after a user clicks on options.
// NOTE: choose appropriate id according to your code
const popup = document.querySelector('#popup'); // id is popup id
const first = document.querySelector('#first'); // first is id of first option
first.addEventListener('click', function sectionClickListeners() {
// Perform some tasks...
popup.style.display = 'none';
})
This website gives a good understanding of using modals and gives different examples.
https://jquerymodal.com/
On my page are repeating triggers, which should open (change the visibility) a specific form on click. On some pages, there are multiple triggers and forms.
The HTML markup is like this:
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form
</div>
</div>
I'm trying to work on a script, where on click on #form-trigger-x the resonating form (#form-x) get's displayed. That's not the problem, but I want to automate this, so if a page has one form it works and also if it has 10 forms it works, without the need to hardcode every number in the script.
I tried an approach with .each and $(this) but it opened all forms at once instead of the form that should be triggered.
First you need to add click event on all the a tag where id starts with form-trigger with
$("a[id^='form-trigger']").click(function(){
And then you just need to get the next of clicked a tag and play with its display property or whatever you want like
$(this).next()
$("a[id^='form-trigger']").click(function(){
$(this).next().slideToggle();
})
$(".btn").click(function(){
$(this).closest("div").slideToggle();
})
#form-2{
display:none;
}
#form-1{
display:none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div id="form-container-1">
<a id="form-trigger-1">Open Form</a>
<div id="form-1">
content of form 1
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 1</button>
</div>
</div>
<div id="form-container-2">
<a id="form-trigger-2">Open Form</a>
<div id="form-2">
content of form 2
<button type="button" class="btn"><i class="fa fa-close"></i> Close form 2</button>
</div>
</div>
Here is how I approached this. You don't need to target them with specific ID value, Instead, use classes because the basic structure of each container is same it would work no matter how many different forms you got.
When you click on the anchor tag, my script would look for closest form-container class and find the showform class in that dom element and show it.
I have added the code snippet below as an example.
Hope this helps!
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet"/>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="form-container-1" class="form-container">
<a onclick="showform(this);" id="form-trigger-1">Open Form</a>
<div id="form-1" class="showform hide">
content of form
</div>
</div>
<div id="form-container-2" class="form-container">
<a onclick="showform(this);" id="form-trigger-3">Open Form</a>
<div id="form-2" class="showform hide">
content of form
</div>
</div>
<script>
function showform(caller){
$(caller).closest(".form-container").find(".showform").removeClass('hide');
}
</script>
I'm looking to create a search function in CodeIgniter.
My view file has been splitted in two parts:
Header part, that contains the search bar
<?php echo form_open('controller/live_search');?>
<div class="toolbar-icon-bg hidden-xs" id="toolbar-search">
<div class="input-group">
<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-search"></i></button></span>
<input type="text" name="search" id="search" class="form-control" placeholder="Search...">
<span class="input-group-btn"><button class="btn" type="button"><i class="ti ti-close"></i></button></span>
</div>
</div>
<?php echo form_close();?>
Body part, that contains the result of the search.
<div class="static-content-wrapper">
<div class="static-content">
<div class="page-content">
<ol class="breadcrumb">
<li class="">Home</li>
<li class="active">Search</li>
</ol>
<div class="container-fluid">
<div class="row">
<div class="col-sm-12">
<div class="panel panel-white">
<div class="panel-heading">
<h2><!-- Panel --></h2>
</div>
<div class="panel-body">
<div style="clear:both;"></div>
<div id="update"><!-- search results will be added here --></div>
</div>
<div class="panel-footer">
<span class="text-gray"><em>Footer</em></span>
</div>
</div>
</div>
</div>
</div> <!-- .container-fluid -->
</div> <!-- #page-content -->
</div>
In my controller I've written the following code:
public function live_search()
{
//load page template
$this->load->view('templates/header');
$this->load->view('templates/sidebar');
$this->load->view('templates/live_search');
$this->load->view('templates/footer');
}
I would like to "activate" the "live_search" public function simply selecting the search field. Just to give you an example, you can think to the search function of Netflix. When you select the search bar, a black page is loaded automatically and start typing you see the results of your search.
So, when I select the search text field my script should load the "templates/live_search" page.
How could I do this?
Thanks for your kind support.
DOM manipulation like this isn't done in CodeIgniter on the server, its done client site in JS. You need JS to listen for the search input focus, and then either AJAX in your "live search page" (not exactly clear on what you want there), or load everything on initial page load, and then just show the "live search page" on focus of the search bar.
If you're using jQuery it might look something like this:
$('body').on("focus","#search",function(){
$('.live-search-container').show()
//or do an ajax call
});
I'm trying to add a Bootstrap toggle button that when is pressed collapses a chart. I've first added the same button for a datatable and it worked but when I added it to my chart on the first click the panel where the chart is in it shrink, on the second click it hides the chart and on the third (when it should open it) it opens but it's shrink (out of the panel).
<div class="mypanel" id="PanelA">
<div class="panel panel-default">
<div class="panel-body">
<div class="demo-container">
<div id="ChartA" class="demo-placeholder"></div>
</div>
<div class="demo-container" data-bind="visible:dataList().length>0">
<br />
<div class="btn-group" style="padding-right:10px; padding-left:10px">
<button type="button" class="btn btn-default pull-left" data-toggle="collapse" id="BtnCA">
<span class="fa fa-bar-chart" aria-hidden="true"></span>
<span class="btnFont">Show Chart</span>
</button>
</div>
<div id="ChartA-Overview" style="width: 100%; min-height:100px" class="demo-placeholder"></div>
</div>
</div>
</div>
</div>
Is there any way to collapse/show a Flot chart whenever the toggle button is pressed?
First thing is you're missing an ending double-quote in your ID. You'll want to also add class="collapse" to the div if you want the div to start off collapsed.
<div id="ChartA-Overview ...
It should be <div id="ChartA-Overview" class="collapse" ... >
Since you're using a <button>, add the data-target attribute to target the div's ID that you want to collapse and expand (i.e. data-target="ChartA-Overview").
Edit 2
Sometimes the Id's come from data-bind... its' something like ""ChartA-Overview"+Id(),
If this is the case, you can use jQuery to get the div ID to add the data-target attribute. Here's a codepen for you to review.
http://codepen.io/yongchuc/pen/QGLdez