my jquery code doesnot work in bootstrap - javascript

My jquery code doesnot work in bootstrap. i have some columns and i want to put submission form within specific column but when i use form tag my jquery wont work.
<body>
<form>
<div class="row" id="row1">
<div class="col-sm-6" id="col-1">
<button id="btn">hide me</button>
</div>
<div class="col-sm-6" id="col-2">
</div>
</div>
<div class="row">
<div class="col-sm-6" id="col-3">
</div>
<div class="col-sm-6" id="col-4">
</div>
</div>
</form>
</body>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.4/jquery.min.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#btn").click(function(){
$("#row1").slideUp("slow");
});
});
</script>

You need to use preventDefault() as shown below:
$(document).ready(function(){
$("#btn").click(function(e){
e.preventDefault();
$("#row1").slideUp("slow");
});
});
When you are putting the form tag and there is a button tag inside it, the default action is to submit the form. So you need to prevent that first using preventDefault().
Please let me know if it solved the issue or not.

Related

How to place a datetimepicker in html page?

I have all of these files in my website header:
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js" integrity="sha256-T0Vest3yCU7pafRw9r+settMBX6JkKN06dqBnpQ8d30="crossorigin="anonymous"></script>
<script src="http://localhost:8080/Javascript/bootstrap.bundle.js" type="javascript/text"></script>
<link rel="stylesheet" href="http://localhost:8080/Css/bootstrap.css" />
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/css/bootstrap-datepicker.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-datepicker/1.8.0/js/bootstrap-datepicker.js" type="javascript/text"></script>
Then I have the following in my body:
<div class="container-fluid">
<div class="row">
<div class="col-md-6 col-sm-6 col-xs-12">
<!-- Form code begins -->
<form method="post">
<div class="form-group"> <!-- Date input -->
<label class="control-label" for="date">Date</label>
<input class="form-control" id="date" name="date" placeholder="MM/DD/YYY" type="text"/>
</div>
<div class="form-group"> <!-- Submit button -->
<button class="btn btn-primary " name="submit" type="submit">Submit</button>
</div>
</form>
<!-- Form code ends -->
</div>
</div>
</div>
<script>
$(document).ready(function(){
$("#date").datepicker();
});
</script>
I want it to look like this: https://formden.com/blog/date-picker.
But instead it looks like this:
What do I do? I have been trying for hours. I have tried different ordering of the files. When I try to do datetimepicker(). I get an error. I just do not know what to do please help.
It looks like you are Using JqueryUI as well as BootstrapDatepicker. Since bootstrapDatepicker and JqueryUI both has got the same function name for their datepicker to be initialized hence there is an ambiguity.
Now your markup has got jqueryUI js loaded first so it is ideally using the jqueryUI datepicker function and expecting the CSS of jqueryUI which can be found here.
If you want to use the bootstrap datepicker then you might need to remove the jqueryUI.js or generate the jqueryUI js which is excluding the datepicker functionality.

How to redirect a page by a button

I have a button on a page like this:
<div class="boxfather">
<div class="box">
<h1>Welcome</h1>
<button>See Dashboard</button>
</div>
</div>
Now I want to add an action to this which can redirect the page to another page for example. So how can I do that ?
Note that it must be a button and not an input with type of submit!
You can use a button as long as it's wrapper in a <form>. This will work even if Javascript is disabled.
<form method="get" action="http://example.com">
<button type="submit">
Click me
</button>
</form>
I have a working example at https://jsfiddle.net/u5mxab1b/
All you need is to use window.location.href like below.
<button onclick="window.location.href='LinkGoesHere'">See Dashboard</button>
<button onclick="window.location.href='b.php'">Click me</button>
The easiest way is to change the value of window.location.href which will direct you to the url.
<script type="text/javascript">
function myFunc(){
window.location.href = "https://someurl.com/";
}
</script>
<div class="boxfather">
<div class="box">
<h1>Welcome</h1>
<button onclick="myFunc()">See Dashboard</button>
</div>
</div>
just do this my friend.
<button> See Dashboard </button>
:))

Show eonasdan.github datetimepicker without text input

I need to show datepickers on page load, not by clicking on input or icon.
http://eonasdan.github.io/bootstrap-datetimepicker/
It's this plugin. I can't find any example for this, is this possible ?
Yes, it is possible, you have to use the inline option. You can use the doc's example:
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true
});
});
</script>
</div>
I'm sure since you provided the link with the actual answer, you found that the code from that page, what I copied below didn't work.
<div style="overflow:hidden;">
<div class="form-group">
<div class="row">
<div class="col-md-8">
<div id="datetimepicker12"></div>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$('#datetimepicker12').datetimepicker({
inline: true
});
});
</script>
</div>
Your problem is the actual libraries. I tried using all the latest jquery, moment, and bootstrap libraries, which was giving me an error. So I tried the libraries that was used on the site, which works.
Here's the example:
https://jsfiddle.net/hx2xyufw/1/

Click listener for button doesn't work in Bootstrap

I want to run some JavaScript code before modal window is shown, but when i click on button nothing happens and browser console doesn't give me any error.
jsfiddle
EDGE
<div id="addEdgeModal" class="modal hide fade">
<div class="modal-body">
<form class="form-horizontal">
<div class="control-group">
<div class="controls">
<textarea rows="3"></textarea>
</div>
</div>
<script>
$("#addEdgeModalB").on("click",function(e){
alert("click");
$("addEdgeModal").modal("show");
});
</script>
Try,
$("[href='#addEdgeModalB']").on("click",function(e){
alert("click");
});
There is no id there for using id selector here. Use attribute equals selector at this context.
DEMO
Please refer to this for the correct modal markup.
DEMO
$("a.btn").on("click",function(e){
alert("click");
});

dynamic scroll bar division with ajax

im trying to have a dynamic scroll bar with ajax in it, meaning i try and update the division with the scroll bar via ajax, im having a little trouble with this, im using a sample scroll bar i downloaded called Tiny Scrollbar: http://www.baijs.nl/tinyscrollbar/
you can have a preview of mine here : http://www.luminusconsult.com/apps/testing/index.html
this is what i have in the index page...
<div id="reloaded">
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb">
<div class="end"></div></div></div></div>
<div class="viewport">
<div class="overview">
....
</div>
</div>
</div></div>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
and when i try and reload the "reloaded" division with ajax...
<div id="scrollbar1">
<div class="scrollbar"><div class="track"><div class="thumb">
<div class="end"> </div></div></div></div>
<div class="viewport">
<div class="overview">
....
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('#scrollbar1').tinyscrollbar();
});
</script>
is there any way i can solve this problem?
Add the tinyscrollbar update method in the success callback of your ajax request.
$('#scrollbar1').tinyscrollbar_update();

Categories