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
Related
I am using the following code:
Here is the HTML for the navigation:
<li>Open... <p class="shortcut">(Ctrl + O)</p></li>
Here is the window that has the button:
<div class="panel panel-default ui-draggable" style="visibility: hidden" id="openDocument">
<div class="panel-heading ui-draggable-handle" id="openDocumentHandle">Open File <button class="btn btn-default btn btn-default btn-sm windowButtons" id="openDocumentClose"><i class="fa fa-close"></i></button></div>
<div class="panel-body">
<form>
<div class="form-group">
<label for="filesToOpen">Choose File to Open</label>
<select class="form-control" id="filesToOpen"></select>
</div>
<button type="button" class="btn btn-default btn-block" id="openBtn" onclick="filesystem.loadFloorplan()">Open File</button>
</form>
</div>
Here is the JS section:
var ui = new fp.FloorplanUI(myFloorplan, "ui", "myFloorplan", fp.GUI_STATE);
function floorplanUIHideShow(id, div) {
document.getElementById(id).addEventListener('click', function(e) {
ui.hideShow(div);
e.preventDefault();
});
}
floorplanUIHideShow('showOpenWindow', 'openDocument', 'openDocumentClose');
Each id has a button that needs to use the same ui.HideShow(); function.
I am unable to get this to work..
Any help would be great.
Thanks-
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
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 need to get the value of the value attribute of the button element and write this value into another modal.
I have a loop in my PHP which writes the following HTML:
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="1">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="2">Confirm</button>
<button data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" value="3">Confirm</button>
When I click on a button it shows a modal with two buttons, one to continue and one to cancel. I want store the value of the value attribute of the first button in the href attribute of the "continue" button in the second modal.
My modal:
<div class="modal-body">
<div class="text-center">
<div class="i-circle danger"><i class="fa fa-times"></i></div>
<h4>Are you sure?!</h4>
<p>If yes click on Continue!</p>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<a href="IWANTGETIDHERE">
<button type="button" class="btn btn-danger" data-dismiss="modal">Continue</button>
</a>
</div>
</div>
</div>
Here is a demo of my modal.
Using jQuery:
$(document).ready(function() {
$('.btn').click(function() {
alert($(this).attr("value"));
});
});
Instead of alert, use:
$('.modal-footer a').attr("href", $(this).attr("value"));
See the JSFiddle
Using Pure Javascript
document.getElementById('btn').onclick = function() {
document.getElementById('link').setAttribute('href', this.value);
}
See the JSFiddle
button = document.getElementById("buttonID");
button.onclick = function(){
document.getElementsByClassName("class")[0].href = document.getElementById("buttonID").value
}
If you are looking for no dependancies.
You may try this, add a data-customId attribute and remove the value from all of your buttons:
<button data-customId="1" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="2" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn">Confirm</button>
<button data-customId="3" data-toggle="modal" data-target="#mod-error" type="button" class="myclasses btn" >Confirm</button>
Also, add an id to your modal div like:
<div id='confirmAction' class="modal-body">
<!-- Markup -->
</div>
Then register a handler for bootstrap show event:
$('#confirmAction').on('show.bs.modal', function (e) {
$id = $(e.relatedTarget).attr('data-customId'); // Get the customId
$(this).find('a:first').attr('href', $id);
});