On my SP 2013 Master Page, I want to click a button and change the path to the style sheets. Not sure if it's a path issue or what... but it's not changing the style sheets.
My style sheets are stored in the Style Library/css folder.
alert($(this).attr('id') + ' clicked'); tells me that the click function are working per button.
JavaScript on Master page:
<script type="text/javascript">
$(document).ready(function(){
console.log("working...");
$('#style1').click(function (){
//alert($(this).attr('id') + ' clicked');
$('link[href="http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style2"]').attr('href',"http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style1");
});
$('#style2').click(function (){
//alert($(this).attr('id') + ' clicked');
$('link[href="http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style1"]').attr('href',"http://khsp.cloudapp.net/Style Library/css/DT_Override_main_style2");
});
});
</script>
HTML on Master page:
<div class="row">
<div class="col-md-1 col-md-offset-5">
<button type="button" id="style1" class="btn btn-primary" data-toggle="button">
<span class="ui-button-text">Style 1</span>
</button>
</div>
<div class="col-md-1 ">
<button type="button" id="style2" class="btn btn-primary" data-toggle="button">
<span class="ui-button-text">Style 2</span>
</button>
</div>
</div>
Thanks
Try this fiddle. Use an ID on the link tag but you may need to tweak it because SP is generating a client ID from #styleSheet to #ctl00_styleSheet on my VM. You can see in the console that the href of the link is changing with the clicks.
Related
I am using bootstrap version so I have created a slide down menu same like below example.
button not working second time
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" data-dismiss="alert">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
The problem is that when I click on close button in slide down the bar is closing up.
But when I again click on add wish list the slide down is not appearing again.
My problem is not only closing. It should close when i click on 'x' button if not it should close automatically after specific time.
Thanks.
Remove this from your close button 'data-dismiss="alert"' and add one more click function like below:
$(document).ready (function(){
$("#success-alert").hide();
$("#myWish").click(function showAlert() {
$("#success-alert").fadeTo(2000, 500).slideUp(500, function(){
$("#success-alert").slideUp(500);
});
});
$('#success-alert .close').click(function(){
$(this).parent().hide();
});
});
HTML will like:
<div class="product-options">
<a id="myWish" href="javascript:;" class="btn btn-mini" >Add to Wishlist </a>
Purchase
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close">x</button>
<strong>Success! </strong>
Product have added to your wishlist.
</div>
This simple trick worked for me. Use this close.bs.alert bootsrap's event type to hide the element instead of removing it.
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).addClass('hidden');
});
or
$('.alert').on('close.bs.alert', function (e) {
e.preventDefault();
$(this).hide();
});
Instead of writing whole code .I used slideUp() dealy() and slideDown() methods of Jquery.
$(document).ready(function() {
$("#success-alert").hide();
$("#btn2").click(function showAlert() {
$("#success-alert").slideDown(300).delay(2000).slideUp(400);
});
});
$('#success-alert .close').click(function() {
$(this).parent().hide();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="product-options">
<input type="button" id="btn2" value="Add to wish list" />
</div>
<div class="alert alert-success" id="success-alert">
<button type="button" class="close" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
<strong>Success! </strong> Product have added to your wishlist.
</div>
I used a loop to get and display all the details for each event that a user added. Inside the loop i included a button for a modal. The thing is if i have more than one event, the <button class="btn btn-success" id="read">Read More</button> won't work. How will work around this?
This the php code
<?php
while ($event_row = mysqli_fetch_array($event_data)){
$event_img = $event_row['event_img'];
$img_src = "../admin/eventImages/".$event_img;
echo '<div class="col-sm-6 p0">
<div class="box-two proerty-item">
<div class="item-thumb">
<img src="'.$img_src.'">
</div>
<div class="item-entry overflow">
<h5>'.$event_row['event_name'].'</h5>
<div class="dot-hr"></div>
<span class="pull-left"><b> Date: </b>'.date("Y-m-d h:i A", strtotime($event_row['event_start'])).'</span>
<span class="pull-left"><b>Location: </b>'.$event_row['event_location'].'</span>
<div class="property-icon">
<button class="btn btn-success" id="read">Read More</button>
</div>
</div>
</div>
</div>';
}
?>
and this is my jquery code:
$(document).ready(function(){
$("#read").click(function(){
("#readmore").modal("show");
});
});
Add class selector. Also add some unique attribute to each button for identification.
<button class="btn btn-success read-more" id="read-more-1">Read More</button>
$(document).ready(function(){
$(".read-more").click(function(){
console.log($(this).id);
$("#readmore").modal("show");
});
});
If you have multiple buttons, than you need to use class instead of id as ID is always unique:
Change in HTML:
<button class="btn btn-success readmore">Read More</button>
Change in JQuery:
$(document).ready(function(){
$(".readmore").click(function(){
("#readmore").modal("show");
});
});
So I've been trying to get a button to work on my phone (Android) running Firefox. I've tried changing from the onClick to on('click touchstart' that was recommended on other posts here without success. I also added cursor: pointer to my css file for the button. Not sure what else to do. Maybe something to do with hover?
I'm using jquery 1.12.0
$(".add-to-cart").on('click touchstart',function(event){
event.preventDefault();
var name = $(this).attr("data-name");
var price = Number($(this).attr("data-price"));
RWC_shoppingCart.addItem(name, price, 1);
RWC_shoppingCart.displayCart();
RWC_shoppingCart.saveCart();
});
<div class="portfolio-box-caption">
<div class="portfolio-box-caption-content">
<div class="project-category text-faded">
<h2>$30</h2>
</div>
<div class="project-name">
Short Candles
</div>
<br>
<button class="add-to-cart btn btn-default btn-xl" href="#" data-name="Short Candle" data-price="30.00">Add To Cart</button>
<!--
<form paypal stuff
</form>
-->
</div>
</div>
I am using twitter bootstrap to share my post on social media, i have made a link whose popover with some buttons content, but further when i click on buttons in popover, their popover function does not work.
<div class="well text-center">
<button id="but1" title='Popover' class="btn btn-success" rel='popover' data-placement="bottom" data-toggle='popover2'>Share</button>
</div>
<div class='container hide' id='cont'>
<a onclick="Facebook()"
class="btn btn-default">
Facebook
</a>
<a onclick="twitter()"
class="btn btn-default">
Twitter
</a>
<a class="btn btn-default"
data-placement="bottom" data-toggle="popover" data-title="Login" data-container="body"
type="button" data-html="true" href="#" id="login">
Email
</a>
</div>
<div id="popover-content" class="hide">
<form class="form-inline" role="form">
<div class="form-group">
<input type="text" placeholder="Name" class="form-control" maxlength="5">
<button type="submit" class="btn btn-primary" onclick="EmailToSomeOne();">Send</button>
</div>
</form>
</div>
and the js
$('#but1').popover({
html: true,
content: $('#cont').html()
});
$("[data-toggle=popover]").popover({
html: true,
content: function() {
return $('#popover-content').html();
}
});
function Facebook(){
alert('share on facebook');
}
function twitter(){
alert('share on twitter');
}
function EmailToSomeOne(){
alert('Email to send');
}
for more clearing i have created a fiddle also.
Your code works fine. Its just a jsFiddle setting issue.
In your fiddle select no wrap (head) in the dropdown on the left, click Run and it will work.
See example
When onLoad is selected your functions are defined within the closure of the $(document).ready(function() {}); only. Thats the reason it shows the error Uncaught ReferenceError: Facebook is not defined (see the console)
BTW, here's an equivalent example on plunkrenter link description here
You can simply bind the buttons with an id like
<a id="Facebook"class="btn btn-default">Facebook </a>
and access it using
$("#Facebook").on('click',function(){
alert('share on facebook');
})
EDIT:
You cannot have nested popover in bootstrap.However you can use the below two approaches
1)You can change the html inside the popover and display your email form
$('.popover-content').html($('#emailform').html())
Please refer to the fiddle attached for this appproach
https://jsfiddle.net/mohit181191/mxstLfnf/
2)You can open a modal on popover button click.
<a data-toggle="modal" data-target="#facebook"
class="btn btn-default">
Please refer to the below fiddle for this approach
http://jsfiddle.net/mohit181191/o35zqy7w/
Bootstrap not support the Nested popover
http://getbootstrap.com/javascript/#modals
Use this :
$('body').on('click',".btn-default", function(){
alert('share on facebook');
});
.btn-default change this to your button default id
I have an issue where hiding a bootstrap popover just resets the text content of my textarea within the popover. There are many of these in my page and they are created dynamically in a loop (with int i being the counter). Here is my html:
<button class="btn btn-sm" data-toggle="popover" data-container="body" data-title="FOR EVALUATOR'S ATTENTION" type="button" data-html="true" #*id="commentPopOver-#i"*# #*onclick="getAttention(#i)"*#>
<span class="glyphicon glyphicon-pencil"></span>
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<input name="values[#i].AttentionComment" id="comment-#i" hidden />
<textarea class="form-control" onchange="updateText(#i)" id="commentText-#i" rows="3">someText</textarea>
</div>
</div>
and my JS:
$(function () {
$("[data-toggle=popover]").popover({
html: true,
content: function () {
return $('.popoverContent').html();
}
});
})
Now I understand that it's just recreating the popover with it's default text on load, but it should at least be keeping the changes and the value of the textarea after it is closed/hidden. I wrote this JS to try and make it populate a separate hidden input to contain the value even after reset but it didn't work:
function updateText(id) {
var newtext = $('#commentText-' + id).val();
$('#comment-' + id).val(newtext);
}
Any ideas?
When you use content: function () {return $('.popoverContent').html();} the set the content of your tooltips, the tooltips content a copy of the HTML code return by $('.popoverContent').html(); The textarea is also a copy and not reference to the original textarea in your DOM.
When a tooltips opens the plugin inserts its HTML (including the copy mentioned above) in the DOM with a random unique ID. The plugin also insert a aria-describedby attribute to the elements that trigger the tooltip (the button in your case). The aria-describedby holds the same unique ID set for the tooltip.
Now you can use the 'hide.bs.popover` event. When the tooltips close you should copy the content of the textarea inside your tooltip to the (hidden) textarea in your DOM
Example
HTML:
<button type="button" id="po1" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
Popover on right
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<textarea class="form-control" rows="3">someText 1</textarea>
</div>
</div>
<br>
<button type="button" id="po2" class="btn btn-default" data-container="body" data-toggle="popover" data-placement="right" data-html="true">
Popover on right
</button>
<div class="popoverContent" style="display: none !important">
<div class="form-group">
<textarea class="form-control" rows="3">someText 2</textarea>
</div>
</div>
javascript:
$("[data-toggle=popover]").each(function( index ) {
var that = $(this);
$(this).popover({
html: true,
content: function () {
return $('#' + $(this).attr('id') + ' + .popoverContent').html();
}
});
});
$('[data-toggle=popover]').on('hide.bs.popover', function () {
$('#' + $(this).attr('id') + ' + .popoverContent textarea').html( $('#' + $(this).attr('aria-describedby') + ' .popover-content textarea').val());
});
Demo: http://www.bootply.com/DvOYV12bHg