This is my HTML code:
<div class="panel panel-default">
<div class="panel-heading">
Datensätze
<button type="button" class="btn btn-xs btn-success pull-right" id="command-add" data-row-id="1">
<span class="glyphicon glyphicon-plus"></span> bla</button>
<button type="button" class="btn btn-xs btn-info pull-right" id="command-import" data-row-id="1">
<span class="glyphicon glyphicon-hdd" href="javascript:void(0);" onclick="$('#importFrm').slideToggle();" </span> blu</button>
<div class="clearfix"></div>
</div>
<div class="panel-body">
<form action="script.php" method="post" enctype="multipart/form-data" id="importFrm">
<input type="file" name="file" />
<input type="submit" class="btn btn-primary" name="importSubmit" value="go!">
</form>
</div>
</div>
</div>
Fiddle: https://jsfiddle.net/ddt3skr6/
As you can see, I want to show the import option only after clicking the import button. I set the link, but now the font of this button is very ugly...
Maybe someone could help me finding a solution for the correct function and font of this button.
You didn't close your <span> tag after the button that has id="command-import".
Also in your case you only need to slide it down, so firstly it has to be slide up then, on click you can slide it down.
You can check this demo you will have to click the HDD icon "Datensätze importieren" for toggle.
This tag <span class="glyphicon glyphicon-hdd" href="javascript:void(0);" onclick="$('#importFrm').slideToggle();" There was no end character >
And Last div in last line is useless.
Demo
Related
My code below submit's perfectly as i want but the Add & Create new item in the bootstrap dropdown i need to be a submit, i've tried with javascript but then the html5 validation dosen't trigger. Is my only option to try and style the submit button like the bootstrap dropdown-item ?
$('btnWorkorder_Add_Create').click(function(event) {
event.preventDefault();
$('#WorkOrderFrm').append('<input type="hidden" name="btnWorkorder_Add_Create" value="1">');
$("#WorkOrderFrm").valid();
$('#WorkOrderFrm').submit();
});
HTML
<form id="WorkOrderFrm" name="WorkOrderFrm" action="/proc/WorkOrderFrm.php" method="post" autocomplete="off">
<div class="btn-group">
<div class="btn-group">
<button type="submit" id="BtnAdd" class="btn btn-custom btn-sm" name="btnWorkorder_Add">Add</button>
<button type="button" class="btn btn-custom btn-sm dropdown-toggle dropdown-toggle-split" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="sr-only">Toggle Dropdown</span>
</button>
<div class="dropdown-menu">
<a class="dropdown-item" href="" name="btnWorkorder_Add_Create" id="btnWorkorder_Add_Create">Add & Create New</a>
</div>
</div>
Why are you needing a dropdown if there is only one option?? Why not just use <input type='submit' value='Add And Create New' />
you are missing '#' tag. try this code and let me know if it is still not working
$('#btnWorkorder_Add_Create').click(function(event) {
event.preventDefault();
$('#WorkOrderFrm').append('<input type="hidden" name="btnWorkorder_Add_Create" value="1">');
$("#WorkOrderFrm").valid();
$('#WorkOrderFrm').submit();
});
I have a Bootstrap modal popup form which is opened as per button click in AngularJS, I am wondering how is it still showing even if a button is disabled.
please take a look button code below:
<a class="btn btn-sm btn-info" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="!ItemName || ItemDescription">
Submit
</a>
I have below model popup code:
<div id="modal-form-submit" class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="blue bigger"> DEMO MODEL FORM </h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col-sm-12 col-xs-12">
<div class="form-group">
<label class="control-label" for="toitems">To:</label>
<div class="tags full-width">
<span class="tag" ng-repeat="tag in tags">{{ tag.Description }}</span>
</div>
</div>
</div>
</div>
</div>
<hr />
<div class="modal-footer">
<button class="btn btn-sm" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Cancel
</button>
<button class="btn btn-sm btn-primary " ng-disabled="!ItemCode || !ItemDescription"
ng-click="SaveEntireFormData()" type="button">
<i class="ace-icon fa fa-check"></i>
Confirm
</button>
</div>
</div>
</div>
</div>
I don't want to use the jquery js, I really want to resolve this using angular js.
Just add disabled to your anchor tag class
<a class="btn btn-sm btn-info disabled" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false" ng-disabled="ItemName || ItemDescription">
The disabled attribute doesn't work for anchor tags. They are built for tags like button, fieldset etc.
Consider adding this CSS to fix this issue:
a[disabled] {
pointer-events: none;
}
I did this and its working perfect.
<a class="btn btn-sm btn-info" ng-class="{'disabled':(!ItemName || !ItemDescription)}" data-toggle="modal" href="#modal-form-submit" data-backdrop="static" data-keyboard="false">
try this
ng-disabled="(!ItemName) || (ItemDescription) "
if possible plz tell what is ItemName and ItemDescription.
remember that in angularjs if you want to disable any field you have to do this
ng-disabled = 'true' ;
<div class="row">
<div class="col-md-8">
<h3 >
<button type=submit class="btn btn-primary btn-lg btn-block" .button><a href = "mrequest.php">make a request</button>
</h3>
</div>
</div>
<div class="row">
<div class="col-md-8"> <h3>
<button type=submit class="btn btn-primary btn-lg btn-block" .button><a href = "mviewreq.php">view requests</button>
</h3>
</div>
</div>
<div class="row">
<div class="col-md-8"> <h3>
<button type=submit class="btn btn-primary btn-active btn-lg btn-block" .button><a href = "mviewstaff.php">Quotation requests</button>
</h3>
</div>
How can I change the button to active when some particular button is clicked , and i also want to use same thing on the navigation tabs too. and make it active too, please can some post any jquery or some thing like that so I can use it. I have searched on internet about it but i am unable to understand it
Add a bootstrap Active class using jquery
<button id="btn1" type=submit class="btn btn-primary btn-lg btn-block" .button>
$('#btn1').on('click', function (e) {
$('#btn1').each(function () {
$(this).addClass('active');
})
});
This works well with the navigation , if you replace the ElementId with li.
I want to expand and collapse div elements with same id seperately when i click different buttons.
here is my HTML code
<body>
<button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
<span class="glyphicon glyphicon-collapse-down"></span> Show Status
</button>
<div class="collapse" id="dem">
<p>This is first</p>
</div>
<button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
<span class="glyphicon glyphicon-collapse-down"></span> Show Status
</button>
<div class="collapse" id="dem">
<p>This is Second</p>
</div>
<button id="button" type="button" class="btn btn-primary btn-block hidden-md hidden-sm hidden-lg" data-toggle="collapse" data-target="#dem">
<span class="glyphicon glyphicon-collapse-down"></span> Show Status
</button>
<div class="collapse" id="dem">
<p>This is Third</p>
</div>
</body>
Here is my script
$(function(){
$('#dem').on('show.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-up"></span> Hide Status');
})
$('#dem').on('hide.bs.collapse', function () {
$('#button').html('<span class="glyphicon glyphicon-collapse-down"></span> Show Status');
})
})
When I click the first button it expands and when I click second or third button the content of first button collapses.The content is not expanding for other buttons.I know I am missing some script code but i don't know what the code is.
IDs should always be DISTINCT.
Change these to classes ... since you are using jQuery, you can do something like this inside the click events ...
$(".className").hide()
$(".className").show()
$(".className").toggle()
Assuming they have different ID, the change would simply be something like ...
$("#button1").on('click', function() {
if ($(this).is(":visible")) {
$(".className").hide()
} else {
$(".className").show()
}
});
Can you please take a look at this demo and let me know why the
$(".onealert").on("click",function(){
alert("You clicked on A");
});
is not functioning?
here is the code I have :
<div class="the-box">
<div class="pull-right btn-group btn-group-sm" id="downloadSelect">
<button type="button" class="btn btn-default">1</button>
<button href="#" class="trigger btn btn-default">2</button>
<button type="button" class="btn btn-default">3</button>
</div>
<div class="head hide">Alphabet Select</div>
<div class="content hide">
<div class="form-group">
<div class="btn-group btn-group-sm">
<button type="button" id="1Download" class="btn btn-default onealert">A</button>
<button type="button" id="2Download" class="btn btn-default">B</button>
<button type="button" id="3Download" class="btn btn-default">C</button>
</div>
</div>
</div>
</div>
I am not getting any error message too!
Thanks
That's because Bootstrap builds new markup for the little dialog as it appears, using the hidden markup as a template only, which means it's dynamic content that didn't exist when you added the event handler, and you'll need a delegated handler
$('.the-box').on("click", ".onealert", function(){
alert("You clicked on A");
});
FIDDLE