I'm attempting to register an ng-click event using a custom template to display items in an accordion but they do not get registered at all. I've tried everything, using a hideExpression/watcher, putting the ng-click event in the template, using ng-class/ng-init/ng-click to set the element to active, etc...nothing has worked. Even put an onClick function in the templateOptions. Still no luck...
It almost seems like the items are there but they are not there...never have had such an issue with getting a simple click to work. Basically I want the user to be able to click an item, and then that item becomes active and updates the model with the selection, while the previous item becomes inactive...I've got a very simple piece of jQuery code that works in other things but is not working here...
At my wit's end as to why any of these ways haven't worked...please help...
Here is the plunker;
http://plnkr.co/edit/d5kHjH?p=preview
template: '<a li class="list-group-item small" ng-click="active = !active" ng-init="active = true""><span class="glyphicon glyphicon-chevron-right"></span> {{to.label}}</li></a>'
Got it working with a few changes...
template: `<div ng-init= "active = false">
<label class="list-group-item small" onclick="$('.list-group-item').removeClass('active'); $(this).addClass('active')" ng-click="updateModel()" ><span class="glyphicon glyphicon-chevron-right"></span> {{to.label}}</label>
</div>`,
Related
On an xpage I have an editbox control and xe:namepicker nicely grouped beside each other with a Bootstrap add-on component.
However I would like to trigger the xe:namepicker when the cursor enters the editbox.
In the DOM I see that for the namepicker an anchor link is generated such as:
a class="glyphicon glyphicon-user xspPickerLink" href="javascript:;"
And I could trigger the click event via csjs
$("a.xspPickerLink").trigger('click');
But I happen to have multiple xe:namepicker-s on my xpage.
Does anyone have a clue how I can trigger a SPECIFIC xe:namepicker ?
You can work with wrapper elements:
<div id="namePicker1Wrapper">
<xe:namePicker id="namePicker1" pickerText="Select..."></xe:namePicker>
</div>
<div id="namePicker2Wrapper">
<xe:namePicker id="namePicker2" pickerText="Select..."></xe:namePicker>
</div>
Now you have the opportunity to select a SPECIFIC xe:namepicker:
$("#namePicker1Wrapper a.xspPickerLink").trigger('click');
Greetings everyone :)
My question pertains to the bootstrap tooltips. I have a bunch of tooltips within my page (5 to be exact).
The tooltips look (more or less) like this:
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" title="{{'calculation.ttSD' | translate}}"></span>
I initialize them at the very top of the page (right after the ) with the classic:
<script>
$(document).ready(function(){
$('[data-toggle="tooltip"]').tooltip();
});
</script>
Most tooltips are initialized without any problems, however 2 are not working properly. There are some parts of the page that are hidden as the page loads and revealed depending upon what the user has entered.
Example:
<tr ng-if="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">
...
These tooltips are not getting initialized properly at the beginning. As a quick fix i just copied the above javascript and placed it right after the tooltips, which works. Except that kills the DRY principle since the same exact js comes up 3-4 times within the page.
What is a better way (if there is a way at all) of initializing all bootstrap tooltips, regardless if hidden or not?
Thanks :)
ng-if prevents DOM Element from being rendered. Hence the initialization in document.ready will not take effect on your ng-if false elements
Instead you can use ng-show/ ng-hide as they only changes display css-poperty
modified your example to ng-show instead of ng-if
<tr ng-show="condition == 'true'">
<label data-translate="the.text.to.put.in.the.label"/>
<span class="glyphicon glyphicon-info-sign" data-toggle="tooltip" data-placement="top" tittle="someText">
hope it helps
I'm using October CMS and in the framework I can make an AJAX call using the following HTML element:
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'0'">
<i class="material-icons pink-text listfavorite">favorite</i>
</a>
Whenever this link is clicked on a favorite button fires off an update to a controller "onSavedeal". Updating the database works fine on the first click. However, after updating, the value for the "data-request-data" attribute isn't updated so the button does not work for subsequent clicks.
I need to make the link change so that "active:'0'" becomes "active:'1'". The resulting full element would be
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'1'">
<i class="material-icons pink-text listfavorite">favorite</i>
</a>
In the framework I can add another attribute called "data-request-success" which executes a javascript function (or code) up successful completion of the AJAX call. How can I make a function called "updateactive()" which would toggle the active value between 0 and 1. The final element should look like:
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'0'"
data-reuqest-success="updateactive();">
<i class="material-icons pink-text listfavorite">favorite</i>
</a>
If you can safely identify this a element by attribute data-request having value onSavedeal, you would write the updateactive function as follows:
function updateactive() {
var newAttrValue = "deal_ID:'14779255',type:'local',active:'1'";
$('[data-request="onSavedeal"]').attr('data-request-data', newAttrValue);
}
Don't forget to correct data-reuqest-success to data-request-success.
UPDATE
If you have many a elements on the page, you can reuse same function like below. Check demo - Fiddle .
function updateactive() {
var clickedA = event.currentTarget,
newAttrValue = $(clickedA).attr('data-request-data').replace("active:'0'", "active:'1'");
$(clickedA).attr('data-request-data', newAttrValue);
}
Make change to your anchor tag this way
<a href="#" class="sbutton" data-request="onSavedeal"
data-request-data="deal_ID:'14779255',type:'local',active:'0'"
data-reuqest-success="updateactive(this);">
<i class="material-icons pink-text listfavorite">favorite</i>
Note the change updateactive(this);
Then in your jquery you can have the function definition this way.
function updateactive(element) {
$(element).attr('data-request-data', $(element).attr('data-request-data').replace("active:'0'", "active:'1'"));
}
I have some content coming in which I am running through a repeat, each one of these content items has to have a toggle open/close functionality to it. I figured my best bet in marking them individually is using something like the $index of the item in the repeat. I am just using a (bootstrap) class to show/hide like so :
<a ng-click="{{$index}}inner = !{{$index}}inner" >{{item.node.id}}</a>
<div class="nested " ng-class="{'collapse' : !{{$index}}inner">
So - a click toggle on the a above. This does not work because of the syntax, but what I'm wondering here is if there is a nice elegant solution to this problem. This way I tried first seems a little messy. Thanks!
The ng-repeat directive created a scope for each of the elements. Therefore you could just use the ng-click to toggle a property on that scope.
Also the syntax of your ng-class is not totally correct.
For working example see http://jsbin.com/yuyucojeco/edit?html,js,output
I like adding properties to the actual objects themselves. Then, within your ng-repeat, you can just reference the individual object (instead of trying to re-index into the array) and apply all logic as you need.
Maybe something like this:
<div ng-repeat="item in array">
<a ng-click="item.collapsed = !item.collapsed" >{{item.node.id}}</a>
<div class="nested " ng-class="{'collapse' : item.collapsed"></div>
</div>
I have implemented smt similar inside an ng-repeat using bootstrap as well like so:
here is the button:
<a data-toggle="collapse" data-target="#{{item.id}}" class="accordion-toggle btn btn-xs btn-success"></a>
then the collapsible tab:
<div class="accordion-body collapse" id="{{item.id}}"> <!-- accordion starts -->
<!-- some content here -->
</div> <!-- accordion ends -->
I'm trying to get my webpage to use the kind of color box that is demoed on this website here.
http://www.jacklmoore.com/colorbox/example2/. (Outside HTML ajax Example).
In their code for this, they have:
$(".ajax").colorbox();
targeting:
<p>
<a class='ajax' href="../content/ajax.html" title="Homer Defined">
Outside HTML (Ajax)
</a>
</p>
My question is, I want the colorbox to display another page I have, when I click this Icon span on my page.
<span id="pause">
<i class="fa fa-pause"></i>
</span>
I've used on() to make it so when it's clicked it runs a function.
$("#pause").on("click", function() {
game.pause();
});
Where as game.pause(); will create this effect, but I'm not sure how to make it happen, because I am not using a link like the examples.