Semantic UI link: https://semantic-ui.com/elements/loader.html
Here is Semantic code provided:
<div class="ui segment">
<div class="ui active dimmer">
<div class="ui text loader">Loading</div>
</div>
<p></p>
</div>
I want to use loading spinner on Save and also for global(eg. form load).
When action is performed, spinner should be disappeared
Here is my HTML:
<button class="ui positive button" id="btn_save" formaction="AddNewDriver">Save</button>
"AddNewDriver" is my servlet which is performing save and lot of code.
Please give simple solution and where should i add that?
Related
I created a form with many sections the user can save the form using a button at the end of the form or a button that is kept in a fixed side nav. The structure is like this (with additional CCS to keep the form blocked).
<form id="myform" action="" method="POST" role="form">
<div class="sidenav">
<a> some section links</a>
<a> some section links</a>
<button type="submit" class="btn-success">SAVE</button>
<a class="btn-danger" onclick="return confirm('Leaving the page, might cause loosing the data not saved.');" href="/">Leave the page.</a>
</div>
<div class="main">
<div>
... a lot of stuff
</div>
<div>
<button type="submit" class="btn-success">SAVE</button>
</form>
A beta tester using Chrome told me that the button on the side nav sometimes is not working, while the one on the bottom is always working, but I can't reproduce this behaviour in my browsers or understand the causes.
Is there something I am missing? Which is the correct implementation of a form with two submit button?
Below is my first attempt to build a Razor page w/ Boostrap. When the page is first brought up, the form is collapsed. When the user clicks on the Revisit a quote button, the form then expand. I followed the documentation on Bootstrap's site to the dot, but no idea getting the toggle to work. What am I missing?
#page "/"
<div>
<label>What would you like to do?</label>
<div>
<button class="btn btn-primary"
type="button">
Create a new quote
</button>
</div>
<div>
<button class="btn btn-primary"
type="button"
data-toggle="collapse"
data-target="#quotesearchForm"
aria-expanded="false"
aria-controls="quotesearchForm">
Revisit a quote
</button>
<div class="collapse" id="quotesearchForm">
<form>
<input /><div class="dropdown" /><button></button>
</form>
</div>
</div>
</div>
Mystery solved...out of the box Blazor only has the bare-bones structure from Bootstrap and does not have the javascript portion. What Blazor wants you to do is to use its code to eliminate the use of javascript. Blazor does that by using its SignalR technology to transmit very small amount of data over the wire to do that. Tim Corey has a YouTube video on this.
I'm using ejs templates for my webpage, and I'm having layout troubles.
I have a button inside a <div> that's set to display:none as a dropdown, and should show up when the container is hovered over. Instead, the buttons that should be in the dropdown are rendered outside of it and have seemingly no relation to it.
Source ejs file:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
<button>TestButton</button>
</div>
</button>
And the resulting page according to chrome's element viewer:
<button class="mdc-button mdc-button--raised dropdown" id="clear">
Clear
<div class="mdc-card dropdown-content">
<p>Test</p>
</div>
</button>
<button>TestButton</button>
The <p> tag still displays correctly
I don't believe you can put a button element within a button element.
Try it out on MDN here:
https://developer.mozilla.org/en-US/docs/Web/HTML/Element/button
This is the example input I put into their live editor. When you inspect the button, you'll get the same output as you've shared in your post.
<button class="favorite styled"
type="button">
<button>Hello</button>
Add to favorites
</button>
Depending on where you need the button, you could try styling the outside or inside element to look like a button as a work around!
So I have a google map where the user selects their location, and I am trying to validate that they have selected a location, by populating a hidden input field. I was able to get it to work with a different validation engine, but now need it to work with parsley.
If the user has not selected a location, I need it to display the error message, as with all other validations. All my other validations are working, so I suspect it is something with my syntax. I am a bit confused by the parsley documentation as far as hidden input fields.
Here is my html:
<div class="col-md-6">
<!-- WIDGET GOOGLE MAP -->
<div class="widget">
<div class="widget-header" style="height: 115px;">
<h3><i class="fa fa-globe"></i> Part II: Click & drag to select your location <small>(Your actual location will never be stored or shared. It will always be randomized within a five (5) mile radius when shown to other users)</small></h3>
<em>- custom styled google map</em>
</div>
<div class="widget-content no-padding" style="height: 300px;" >
<div class="google-map">
<div id="register-map-canvas" style="height: 300px;"></div>
</div>
</div>
<div class="widget-content">
<div class="form-group">
<input type="hidden" name="homelat" id="latFld" required data-parsley-errors-container="#error-map"/> <!--the homelat input field is below the map only because it looks silly with two adjacent error messages-->
</div>
<div class="form-group">
<input type="hidden" name="homelng" id="lngFld" />
</div>
<p id="error-map"></p>
<button class="btn btn-primary btn-block" type="submit">Register</button>
<button type="submit" class="btn btn-primary">Validate</button>
</div>
</div>
<!-- END WIDGET GOOGLE MAP -->
</div>
So as you can see, I am trying to get the error message to pop up beneath my map within a widget box.
I populate the latFld and lngFld inputs but only validate one of them, so as to only generate one error message. But unfortunately I cannot get that one to validate. I know the fields are populating.
In the js parsley file (~line 195) you must on excluded: line put in comment or delete input[type=hidden]'
var ParsleyDefaults = {
// ### General
// Default data-namespace for DOM API
namespace: 'prsly-',
// Supported inputs by default
inputs: 'input, textarea, select',
// Excluded inputs by default
excluded: 'input[type=button], input[type=submit], input[type=reset]',
//input[type=hidden]',
I am currently using a button navigation bar from OnsenUI used to navigate through pages. One thing that I want to change is how it selects a different button based on a click event instead of a mousedown event (See the JSFiddler link I posted at the bottom). I want to change it because the mouse-down event is typically more responsive to user interaction than the click event. The code below is what I am currently using for my navigation bar:
<div class="navigation-bar">
<div class="navigation-bar__center">
<div class="button-bar" style="width:200px;margin:7px 50px;">
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-mousedown="resCtrl.tabIndex = 1;" checked>
<div class="button-bar__button">Search Criteria</div>
</div>
<div class="button-bar__item">
<input type="radio" name="navi-segment-a" ng-mousedown="resCtrl.tabIndex = 2;">
<div class="button-bar__button">Search Results</div>
</div>
</div>
</div>
</div>
The ng-mousedown event in the code above does change the resCtrl.tabIndex variable, but it obviously doesn't change which button-bar__item is checked in the GUI due to the click event. How do I fix this?
By the way, here is a JFiddler page for the button bar:
http://jsfiddle.net/5frafqtw/1/