I am trying to implement bootstrap's typeahead but I am trying to have the input bar appear on a popover when a button is click.
Pretty much have a typeahead functionality inside a popover.
<div id="popover-button-container">
<button id="popover-button" type="button" class="btn btn-default"
data-toggle="popover"
data-placement="left">${entries.size() - 4} more</button>
<div id="popover-content" class="hide">
<input class="typeahead" type="text" placeholder="Search by Artist Name" />
</div>
</div>
Adding the JS:
<script>
$("#popover-button").popover({
html:true,
content: function(){
return $('#popover-content').html();
}
})</script>
The typeahead doesnt seem to work in the popover however. If I remove the class=hide part, the unhidden input works but not the one in the popover.
Wondering if anyone has ran into this?
Any help would be great!
did you try this?
// Constructs the suggestion engine
// Typehead codes here
$('#myPopover').on('show.bs.popover', function () {
// Initialize your typehead script
typehead.initilize();
// Followed by your Typehead codes here...
})
Related
What i'm after doing is
a) show the regular submit button
b) when you hit submit, the spinner version appears
c) the form submits and my Flask code goes to the database call.
d) then when the database call is finished it shows the result on a new page.
I'm okay with A, C and D..... they work right now, but I can't fathom out the spinner switch bit.
I've been trying and failing miserably to get all sorts of javascript copied and pasted from a whole host of stackoverflow searches.
Most have some JS function like on('click', function..... but I don't know where to place that in the HTML....
Could I do some CSS container swap trick?
Apologies for being a newb!!
Here's my little form and buttons.
<form class = "js-battery-form" action="/home" method="POST">
<div class="input-group mb-3">
<div class="input-group-prepend">
<label class="input-group-text form-control-sm" for="battery_size">Battery size</label>
</div>
<select class="custom-select custom-select-sm" id="battery_size", name="battery_size">
<option value="1.2">1.2kWh</option>
<option value="2.4">2.4kWh</option>
<option value="3.6" selected>3.6kWh</option>
<option value="4.8">4.8kWh</option>
<option value="7.2">7.2kWh</option>
</select>
</div>
<button type="submit" id="btn" class="btn btn-primary btn-sm btn-block" >Submit Query</button>
<button class="btn btn-primary btn-sm btn-block">Submit Query
<span class="spinner-border spinner-border-sm"></span>
</button>
</form>```
this worked for me. Altered slightly though as for some reason i couldn't get the spinner to spin:
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script>
$(document).ready(function() {
$("#btnFetch").click(function() {
// disable button
$(this).prop("disabled", true);
// add spinner to button
$(this).html(
`<i class="fa fa-spinner fa-spin"></i> Loading`
);
$("#batteryform").submit();
});
});
</script>
Think i've solved this one for anyone interested.
https://jsfiddle.net/zarch/2w6Lnp4m/3/
So I sorted a working spinner in JS Fiddle (see above) using $(document).ready(function(), but it wouldn't fire on my webpage.
I've got my JS at the end of my HTML at the bottom of the page, so it turns out you need to load the JS before the $(document).ready(function() .
So I moved the src="https://code.jquery.com/jquery-3.4.1.slim.min.js" etc to BEFORE the $(document).ready(function()
Then I hit another problem, the spinner worked but the form never submitted. It just sat there spinning forever.
So I added an id tag to the form "battery-form" and then made a submit call at the end of the $(document).ready(function()
$("#battery-form").submit();
Hope this helps someone out.
I am trying to turn a password row into an input field when the 'change password' button is clicked. I am kind of halfway there already using Jquery. So I have made it so that when you click 'change password' the input field gets added. Also when they click 'back' the original state is shown. If you look on the codepen, you'll notice that after clicking 'back', you can't then click 'change password' again, the jquery doesn't work. Is there a solution to this?
Also I have used jquery 'replaceWidth', is there a better way to do this? I am putting a lot of html into my Jquery and not sure if that's the best way to do it.
Please take a look!
https://codepen.io/liamdthompson/pen/WYwXeK
$("#change").click(function () {
$("#container").replaceWith('<input class="form-control" id="zing" required="required" type="text" value="Change password" id="website_name">');
$(this).replaceWith('<button type="button" id="yeet" class="btn btn-light lighter">back</button>');
$("#yeet").click(function () {
$(this).replaceWith('<button type="button" id="change" class="btn btn-light lighter">Change password</button>');
$("#zing").replaceWith('<div class="" id="container">*********</div>');
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="accountmain" style="padding-top:25px;">
<div class="row">
</div>
<div class="row">
<div class="col">
<h6> Password</h6>
</div>
<div class="col" id="container">
*********
</div>
</div>
<button type="button" id="change" class="btn btn-light lighter">Change password</button>
</div>
This is because your #change on click event is bound to the dom element when the page loads.
To bind events to dynamically created elements, bind to the document using the .on feature, like this.
You have to re-attach the event listener again when you insert the button back in.
Otherwise another solution is to use the derived event on the parent class ie.
$('body').on('click', '#change', function(){});
This will affect any element with Id change that has body in its line of ancestors.
I would like to have focus on the tokenfield input field when the modal shows up.
Currently it's focused only if I click on the input field in the modal.
https://jsfiddle.net/csisanyi/h19Lzkyr/12/
I tried to add the following code
Mousetrap.bind('w', function() {
document.getElementById("keywordButton").click();
document.getElementById("keyword-input").focus();
});
I also tried to add <input autofocus> but when the tokenfield is initialized it seems like it's overriden.
I have checked the bootstrap-tokenfield documentation but input field focus is not really mentioned there.
Any suggestions?
Do you want the focus on the button or the input field? The ID you specified is for focusing on the button. You mention wanting the field to focus, but it doesn't seem you are calling on it. I can't make comments but will edit this as time goes on.
HTML:
<div class="modal-body">
<p class="modal_text">Add keywords.</p>
<input class="token-input input-group-lg keywordmodalclass" id="keyword-input" type="text" name="keywords" value="" placeholder="Keywords">
</div>
<div class="modal-footer">
<button id="saveKeyword" type="submit" class="btn btn-success" onclick="submitKeywords()">Save Keywords</button>
Jquery:
Mousetrap.bind('w', function() {
document.getElementById("keywordButton").click();
document.getElementById("keyword-input").focus();
});
I found a solution to the problem.
after the tokenfield is initialized, bootstrap-tokenfield.js appends the id of the input with -tokenfield.
So i added the following code.
https://jsfiddle.net/csisanyi/h19Lzkyr/43/
Mousetrap.bind('w', function() {
document.getElementById("keywordButton").click();
setTimeout(() => {
document.getElementById("keyword-input-tokenfield").focus();
}, 400);
});
And it works with setting a minimal timeout on the focus expression.
I am trying to add dynamically text into Bootstrap 3 Popover data-content="" at this demo. Basically what I want to do is updating the data-content="" text buy clicking different buttons. I tried to do this by adding:
$("#poper").('[data-content="City"]');
but this is not doing the job! Here is the jquery I have
$("#show-content-one").click(function(){
$("#poper").popover('show');
$("#poper").('[data-content="City"]');
$("#poper").popover('show');
});
$("#show-content-two").click(function(){
$("#poper").('[data-content="Country"]');
$("#poper").popover('show');
});
and HTML is:
Dynamic Content Popover
<input type="button" class="btn btn-info" id="show-content-one" value="content One" />
<input type="button" class="btn btn-info" id="show-content-two" value="content Two" />
Can you please help me to fix this? Thanks
To update a custom attribute use the method data().
$("#poper").data('content', 'city');
What you've written is a selector, not an updater.
I'm trying to run a function from a button onClick event and for some really strange reason, it doesn't want to work.
I want to get the function to run from the button with the onClick attribute of "all()" however it doesn't work but when I changed it to an anchor with a href attribute of "javascript:all()" it worked?
Html:
<div id="content">
<input id="heroes" type="text" class="form-control" id="tokenfield-typeahead" />
<button id="all" onClick="all()">Select/Deselect All</button>
<button id="random" onClick="random()">Random</button>
<!-- Example Link to Prove Point -->
Example: Select/Deselect All
</div>
jsfiddle: http://jsfiddle.net/spedwards/2T9TA/
Can anyone tell me why this isn't working? If need be, I'll make a javascript click event instead but I'd rather not.
Not sure why its not working, but I tried changing you all name function to allt and it worked:
<a onclick="allt()">Example: Select/Deselect All</a>
function allt() {
//your code
}
I believe you will need a type attribute in your tag. So, try this:
<button id="all" type="button" onClick="all()">Select/Deselect All</button>