Develop Reference

changing state of bootstrap toggle button

I have a button:
<button type="button" class="btn btn-sm btn-primary" data-bind="attr: { 'data-target': '#MoreOptions' + Provider() }" data-toggle="collapse">More Options</button>
That controls when this div is open or closed to show 'more options'.
<div class="panel-collapse" data-bind="attr: { id: 'MoreOptions' + Provider() }, css: { collapse: $root.IsCollapsed }">---</div>
And I use a Knockout.js observable to keep it open when the data refreshes inside the div. I don't want a data refresh to collapse the div. The issue is when I do this and keep the div open, the button thinks that the div is closed. So the next time the user clicks the button, the div closes real quick and opens back up again, requiring two clicks on the button to get the div to close.
The expected behavior is to keep the div open during a data refresh, but have the button know that the div is open and close it with just one click.
I've set the CSS collapse with knockout in the div and I'm looking for a similar way to set the button for it to know that the div is not collapsed.
I've noticed that when the button is clicked to expand the div, the aria-expanded attribute is set to true where it didn't exist when the button is initially rendered; and when the button is clicked to collapse the div, the CSS property 'collapsed' is added to the button. I've played around with adding and changing these via knockout with no success.
It should be noted that the button is refreshed with the data.

I've decided to remove the bootstrap toggle button functionality and just go with the jQuery toggle in combination with knockout. The jQuery way just offers more control.
<button type="button" class="btn btn-sm btn-primary"
data-bind="click: $root.ChangeMoreOptions">
More Options
</button>
<div id="MoreOptionsDiv" style="padding-top: 10px; display: none;">
--- content ---
</div>
Knockout:
//Open or close div
self.ChangeMoreOptions = function () {
if (self.IsCollapsed() === true) {
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
self.IsCollapsed(false);
} else {
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
self.IsCollapsed(true);
}
}
//Keep div open on refresh if it is already open
//Search for 'none' in the style display: none
self.FixMoreOptions = function () {
if (($('#MoreOptionsDiv').attr('style').search('none') > -1)
&& (self.IsCollapsed() === false)) {
//Toggle closed div back to open
$('#MoreOptionsDiv').slideToggle('slow', function () {
// Animation complete.
});
}
}

delegate event on jquery for popover bootstrap not working correctly

i am quite new with this delegate thing for dynamic elements. so today i tested again with a generated dynamic template from some example in stackover for popover.
here is my dynamic html content.
<a id="testpop" class="btn btn-primary" data-placement="top" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>
and then, i have this script on my js
$('#resultContent').on('click','#testpop', function(e) { //use on if jQuery 1.7+
// Enables popover #2
$("[data-toggle=popover]").popover({
html : true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
});
resultContent is the div here where i add .html all my html codes.
i manage to attached the delegate event (i think) but is acting strange as my 1st click on the testpop button, the popover won't show. Until i press the 2nd and 3rd time only it will pop up. Am i doing this delegating wrong?
credits for this test code: HTML inside Twitter Bootstrap popover

You forgot to add a trigger in the popover options. The data-trigger in the element doesn't do too much when you really only initialize the popover() once you click the element. In fact, your JS code would propably work better like so:
$("[data-toggle=popover]").popover({
html : true,
trigger: 'click',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
EDIT
Popover should generally be initialized on page load:
$("[data-toggle=popover]").popover();
Putting it inside a click event will not enable popover on the element until you click it first.
Removing the click event from your original JS code should enable it on page load.
If however, the element you mean to attach the popover to is dynamically added to the DOM after page load, you should reinitalize the popover after adding it.
Wrapping the popover in a function would make that much easier.
function addPopover(selector){
$(selector).popover({
html : true,
trigger: 'click',
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
});
}
And whenever you add an element to the page that should have a popover, you simply call the function, with a selector for the element. Example for the element you have in your code:
addPopover("[data-toggle=popover]");

In your code, you are configuring the popover on click event of the button.
So, this is how it happens.
Click the anchor link
Initialize the popover with options. (This doesnt mean it displays the popover, it is just a initialization)
Click on the popover again (Popover is already bound because of the earlier call and then it shows)
Also, you need to ensure the popover is not bound to the element again and again to avoid repeated popover bindings.
$('#resultContent').on('click', '#testpop', function(e) { //use on if jQuery 1.7+
// Enables popover #2
$("[data-toggle=popover]").popover({
html: true,
content: function() {
var content = $(this).attr("data-popover-content");
return $(content).children(".popover-body").html();
},
title: function() {
var title = $(this).attr("data-popover-content");
return $(title).children(".popover-heading").html();
}
}).popover('show');
// Explicitly show the popover.
});
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.0/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<div id="resultContent">
<a id="testpop" class="btn btn-primary" data-placement="bottom" data-popover-content="#a1" data-toggle="popover" data-trigger="focus" href="#" tabindex="0">Popover Example</a>
</div>
<!-- Content for Popover #1 -->
<div class="hidden" id="a1">
<div class="popover-heading">
This is the heading for #1
</div>
<div class="popover-body">
This is the body for #1
</div>
</div>

jQuery click fires on second click but not first

I've checked some other threads but can't seem to find a response that goes with my code. My issue is my click event only fires on the second click, at which point it works perfectly (second click opens, third click closes, fourth opens, etc...)
$('.expand-btn').click(function() {
var clicks = $(this).data('clicks');
if (clicks) {
$('.expand-wrapper').animate({
right: "0"
}, 500, function() {
});
} else {
$('.expand-wrapper').animate({
right: "-325px"
}, 500, function() {
});
}
$(this).data('clicks', !clicks);
});
EDIT: Here is my HTML code. It works like this jquery plugin where .expand-wrapper is the contact form which is hidden off screen and .expand-btn is the little flap that is on the side of the screen and clickable.
<div class="expand-wrapper">
<i class="fa fa-envelope-o" aria-hidden="true"></i> Contact
<div class="expand-form">
<?php echo do_shortcode('[contact-form-7 id="2173" title="Home 01 Request_no_title"]'); ?>
</div>
</div>

This sounds like an issue where your data-clicks attribute isn't initialized on your element (as you are setting it at the end of your first click and then it appears to work as expected).
Try initializing it on your .expand-btn element as follows :
<a href="#" class="expand-btn" data-clicks='false'>...</a>
Or if you have multiple expand button elements, you can initialize them when your page is loaded using jQuery :
$(function(){
$('.expand-btn').data('clicks',false);
});

Trigger file input dialog

How can I auto trigger file input? ie. in the link below I want to trigger upload button on load
DEMO
<form id="test_form">
<input type="file" id="test">
<div id="test1">
<button>Upload</button>
</div>
</form>
$("#test1").trigger('click');
$("#test").trigger('click');

File input can't be automatically triggered in onload due to security purpose. It can't be fired without any user interaction. It is very disgusting when a page activates anything itself when the page loads.
By the way.
You can use label instead of button like following:
<label for="test">Upload</label>

$("document").ready(function() {
setTimeout(function() {
$("#test1").trigger('click');
},10);
$('#test1').click(function(){
alert('hii');
})
});
click event triggerd.
http://jsfiddle.net/j9oL4nyn/1/

You can do it somthing like as :
<button id="upld_btn">Upload</button>
$(document).ready(function () {
$('#upld_btn').trigger('click');
});

you can write something like this
$(document).ready(function(){
$("input#test").click();
});
this should work fine

The problem with your code is that you are applying a click event to the input and also to the div enclosing the button, but not to the actual button.
if you change your fiddle to this
<form id="test_form">
<input type="file" id="test">
<div id="test1"><button onclick="alert('click');">Upload</button></div>
</form>
and
$("#test1 button").trigger('click');
then the click trigger will be applied to the button. Alternatively give your button an ID and fo
$("#buttonid").trigger('click');

<form id="test_form">
<input type="file" id="test">
<div id="test1"><button>Upload</button></div>
</form>
Change your JS code like below.
$("#test1 button").click(function() {
$("#test").trigger('click');
});
Working Demo

It is not possible to programically open "Open File" dialog utilizing javascript without user action ; see Trigger click on input=file on asynchronous ajax done() .
Could, alternatively, create an element to overlay html at document .ready() event to provide user with options to click to open "Open File" dialog by calling click on input type="file" element , or close overlay of html by clicking "Close" .
$(function() {
function openFileDialog() {
button.fadeTo(0,1).find(input)[0].click();
dialog.hide();
}
function closeDialog() {
dialog.hide();
button.fadeTo(0,1);
}
var input = $("input[type=file]")
, button = $("#button").on("click", function(e) {
e.stopPropagation();
this.firstElementChild.click()
})
, options = $("<button>", {
css: {
position: "relative",
top: "36vh",
left: "12vw",
fontSize: "3.6em"
}
})
, dialog = $("<div>", {
id: "dialog",
css: {
position: "absolute",
zIndex: 2,
opacity: 0.25,
background: "dodgerblue",
width: window.innerWidth - 30,
height: window.innerHeight
}
})
.append(
options
.clone(false)
.on("click", openFileDialog)
.html("Open File")
, options
.clone(false)
.on("click", closeDialog)
.html("Close")
)
.prependTo("body");
});
input {
width: 0;
opacity: 0;
}
#button {
position: relative;
font-size: 32px;
width: 150px;
left: 32vw;
opacity: 0;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js">
</script>
<form id="test_form">
<div id="test1">
<button id="button">Upload
<input type="file" id="test">
</button>
</div>
</form>

Show input file dialog on load?
As described here only Internet Explorer allows for programmatic opening of the File Upload dialog. So the short answer is no, there is no way to automatically open the File Upload dialog on page load.
The long answer that you might consider is that you can show it when the user clicks on anything. The fact that you prefer an AngularJS solution tells us that you are writing a Single Page Application. Also, I don't think you need to show the File Upload dialog when the app first loads. You most likely need it to show after some user interaction - after the user clicks on something. That something, using the an AngularJS directive from here, could look like anything but be a file input. On click (the same user interaction) you can also switch to another route in your AngularJS app, effectively simulating a user navigating to another page and automatically presenting him the File Upload dialog.

Share This buttons in Bootstrap Popover not clickable

I have a link which opens a popover, and in the popover I load content from a div.
The content is some sharethis.com buttons and the javascript which is presented by sharethis to be added to the page.
So the set up looks like this :
Button and content :
<i class="fa fa-share"></i> Share
<div id="share_this_btns" class="hidden">
<script type="text/javascript" src="http://w.sharethis.com/button/buttons.js"></script>
<script type="text/javascript">stLight.options({publisher: "xxxxxxxx-xxxx-xxxx-xxxx-xxxxxxxxxx", doNotHash: false, doNotCopy: false, hashAddressBar: false});</script>
<div class="margin-10"><span class='st_facebook_hcount margin-10' displayText='Facebook'></span></div>
<div class="margin-10"><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>
<span class='st_pinterest_hcount' displayText='Pinterest'></span>
</div>
Popover init
$('#shareHead').popover({
title : "Share",
html : true,
content : function(){
return $('#share_this_btns').html();
},
placement : 'bottom'
});
The buttons turn up just fine and also show the count - however, they can't be clicked.
I have also tried putting the script tags outside of the content div, and removing them completely (as there is a second instance of the sharethis script, but with a different publisher ID).
Can you please advise?
EDIT//
It seems to work every now and then without me changing anything. So the scripts seem to run, maybe it is an issue with how the elements are layered?

Ok I figured it out. I cannot just load sharethis data into the popover, so what I did is this :
I added the normal tags provided by sharethis, and the reinitialised the buttons by calling stButtons.locateElements();
For that, I made a custom callback (courtesy of https://stackoverflow.com/a/14727204/1206437 ) where I call this init.
After that, however, the popover isn't positioned correctly because the width changes after the load. So I also wrote a function that resizes everything. It has to be in a setTimeout because locateElements() doesn't seem to have a callback, and so the width changes again after the numbers of tweets and shares are loaded.
The two sharethis scripts are already loaded in the header.
The final body code looks like this :
Button that opens popover
<div id="btnParent_head">
<button class="btn btn-white opaque30 btn-large marginR10" id="shareHead"><i class="fa fa-share"></i> Share</button>
<i class="fa fa-thumbs-o-up"></i> Pledge
<button href="#contact" id="contactHead" data-fancybox-href="#contactBox" class="btn btn-white opaque30 btn-large marginL10"><i class="fa fa-envelope"></i> Contact</button>
</div>
Javascript/JQuery
$(document).load(function(){
$('#shareHead').popover({
title : "Share",
html : true,
content : function(){
var text = '';
text += '<div class="margin-10"><span class="st_facebook_hcount margin-10" displayText="Facebook"></span></div>';
text += "<div class='margin-10'><span class='st_twitter_hcount margin-10' displayText='Tweet'></span></div>";
text += "<span class='st_pinterest_hcount' displayText='Pinterest'></span>";
return text;
},
placement : 'bottom',
callback : function(){
reloadStBtns(resizePopover,$('#btnParent_head .popover'),$('#shareHead'));
}
});
});
var tmp = $.fn.popover.Constructor.prototype.show;
$.fn.popover.Constructor.prototype.show = function () {
tmp.call(this);
if (this.options.callback) {
this.options.callback();
}
}
function reloadStBtns(callback,popover,parent) {
stButtons.locateElements();
setTimeout(function(){
callback(popover,parent);
},500);
}
function resizePopover(popover, parent) {
var i_width = parent.outerWidth();
var i_swidth = popover.outerWidth();
var i_nleft = (i_width - i_swidth)/2
popover.css({'left':i_nleft});
}
I wish there was a better solution than doing the setTimeout, but I couldn't find anything.

It doesn't look like you have linked the share buttons up to anything. Try wrapping each span pointing to a resource in an anchor tag e.g.:
<span class='st_facebook_hcount margin-10' displayText='Facebook'></span>
Also, it doesn't actually matter where your Javascript goes, however you should put it all at the end of your document as it will make your page load faster.