AngularJS tooltips/popovers with ng-repeated content - javascript

I am using Foundation 5 with AngularJS in my project. I have the following use case:
Click on a 'div' which is inside an ng-repeat.
Fetch a list specific to that div in response to the click.
Show that list in an ng-repeat in a tooltip/popover of that div(which was clicked).
How do I go about generating that tooltip?
I tried:
this library but I encountered some issues as mentioned in this question.
angular-foundation, but the popovers here don't have a popover-template functionality(like in ui.bootstrap).
AND I don't want to use ui.bootstrap because I am using Foundation 5 (Its a bad idea, right?).

Cannot say what "approach" exactly you need, in your particular case (fetch a list of something after something else has been clicked) - but you can always generate the content of the tooltip on the fly :
TEST
function :
$scope.buildToolTip = function() {
var list = ''
for (var i=0;i<3;i++) {
list+='<li><em>element #'+i+'</em></li>';
}
return '<ul>'+list+'</ul>'
}
now use the outcome of "Fetch a list specific to that div in response to the click" instead of the demonstration loop - you have the fetched list stored in a $scope variable somewhere anyway, I assume?
http://plnkr.co/edit/3P9PSN2FsRyViCVlqReg?p=preview

Related

how to set visibility of div in controller (SAP UI5)

I have designed a SAP UI5 Application
I have a div which contains highcharts.
<html:div id="Tab2Chart" class="sapUiSmallMarginBegin sapUiSmallMarginTop"
style="width:45%;float:left;height:auto"></html:div>
Now, A button is present in View. On clicking it, above div should hide i.e. highchart should not be visible. How to achieve this. i am able to get div in controller by using-
var _ID2= this.getView().byId("Tab2Chart").getId();
After this, suggest me solution.
Adding the answer to this here:
You can always refer any items through their ids as:
this.getView().byId("idOfIntentedElement")
Refer the view : this.getView()
Refer element in the views by their ids : this.getView().byId("id")
this.getView().byId("Tab2Chart").setVisible(false);
You can use the standard setVisible method or jQuery hide method commented below.
var _ID2= this.getView().byId("Tab2Chart").getId();
this.getView().byId("Tab2Chart").setVisible(false);
// $('#'+_ID2).hide();

How to manipulate the DOM with Onsen UI

I'm a total newbie to Onsen UI and I managed to make my first little app (static that is) with a few pages, popovers, lists, etc.
But when I try to add dynamic stuff in there, it does not want to cooperate.
When I click my side menu, it calls menu.setMainPage and in the callback I want to modify the content of the list (lets say iterate a JSON request and add a ons-list-item for each of them). However, they do not look styled with Onsen UI icing.
I guess it's because the menu.setMainPage has already parsed the ons-page and showed it in the browser.
Is there a way to do a load page, update the dom, and then pass it to be displayed?
I have a simila problem with an popover that contains a list. I want to add items in that list, but my jQuery append never work. Same reason I suppose.
Thanks!
Sounds like you're not running ons.compile() on the dynamic elements. The custom elements must be compiled after they've been added to the DOM to get the correct style and behavior.
I made a short example to illustrate it:
ons.bootstrap();
var addItem = function() {
var $myList = $("#my-list"),
$item = $("<ons-list-item>").text(Math.random());
$myList.append($item[0]);
ons.compile($item[0]);
};
If you attach the addItem function to a click handler you can add items dynamically to an <ons-list>.
This is a running example on codepen:
http://codepen.io/argelius/pen/gbxNEg

Button not disappearing on multiple views using common div id in jQuery

I am working on a .NET MVC application. I have added a button using jQuery using the following code:
var button_to_add = '<div id = "csv_button"><nav>CSV</nav></div>'
$("#titleDiv").append(button_to_add);
The problem is multiple views are using the "titleDiv" and each view is rendered through javascript. As a result, the button is appearing on all the views. The view slides in when another link is clicked. I could remove the button using:
$("#csv_button").remove();
But I am not sure how and when to call it so that the button disappears when the view slides off.
Edit: I am looking for a javascript call that will detect when the view starts sliding so that the button can be removed at that moment.
As you are saying titleDiv is use for multiple view then use it as a class rather than an id.
And you should have unique id's for each element if at all you are using id's.
so your expression will become:
var button_to_add = '<div id = "csv_button"><nav>CSV</nav></div>'
$(".titleDiv").append(button_to_add);
IDs in HTML cannot be reused. The browsers will accept it, but you jQuery will only look at the first one.
Use a distinct ID to allow for clean, single append.

Javascript retrieve what in the tag using class attribute

im working on a Asp.net MVc application to create a scheduler application for workers.
The schedule is auto-generate using a JavaScript library called: Dhtmlx Scheduler.
upon populating the data, it creates some Html and places the content.
I would like to retrieve the content and was wondering if it's possible by obtaining the info from its class.
Pic for reference:
I am trying to retrieve the "Abel Toribio" so i can do a reverse search in my database for his name and eventually display a tooltip over that td with further information about the person.
So far I have tried:
var engName = document.getElementsByClassName("dhx_matrix_scell");
alert(engName[0].getData());
alert(engName[0].getContent());
alert(engName[0].getText());
alert(engName[0].getValue());
They all seem to give me undefined.
Thanks!
engName[0].innerHTML - for contents inside the tag 'html'.
engName[0].outerHTML - for contents inside the tag wrapped in the tag.
engName[0].textContent - for contents inside the tag 'text'.
As you tagged jquery as well,for tooltip purpose, you can write mouseover event using jquery this way :
$(".dhx_matrix_scell").on("mouseover",function(){
alert($(this).text());
// do something here
});
if you want to get all, you can get them like this:
$.each(".dhx_matrix_scell",function(){
alert($(this).text());
});

Show pop-ups the most elegant way

I have this AngularJS app. Everything works just fine.
Now I need to show different pop-ups when specific conditions become true, and I was wondering what would be the best way to proceed.
Currently I’m evaluating two options, but I’m absolutely open to other options.
Option 1
I could create the new HTML element for the pop-up, and append to the DOM directly from the controller.
This will break the MVC design pattern. I’m not happy with this solution.
Option 2
I could always insert the code for all the pop-ups in the static HTML file. Then, using ngShow, I can hide / show only the correct pop-up.
This option is not really scalable.
So I’m pretty sure there has to be a better way to achieve what I want.
Based on my experience with AngularJS modals so far I believe that the most elegant approach is a dedicated service to which we can provide a partial (HTML) template to be displayed in a modal.
When we think about it modals are kind of AngularJS routes but just displayed in modal popup.
The AngularUI bootstrap project (http://angular-ui.github.com/bootstrap/) has an excellent $modal service (used to be called $dialog prior to version 0.6.0) that is an implementation of a service to display partial's content as a modal popup.
It's funny because I'm learning Angular myself and was watching some video's from their channel on Youtube.
The speaker mentions your exact problem in this video https://www.youtube.com/watch?v=ZhfUv0spHCY#t=1681 around the 28:30 minute mark.
It comes down to placing that particular piece of code in a service rather then a controller.
My guess would be to inject new popup elements into the DOM and handle them separate instead of showing and hiding the same element. This way you can have multiple popups.
The whole video is very interesting to watch as well :-)
Create a 'popup' directive and apply it to the container of the popup content
In the directive, wrap the content in a absolute position div along with the mask div below it.
It is OK to move the 2 divs in the DOM tree as needed from within the directive. Any UI code is OK in the directives, including the code to position the popup in center of screen.
Create and bind a boolean flag to controller. This flag will control visibility.
Create scope variables that bond to OK / Cancel functions etc.
Editing to add a high level example (non functional)
<div id='popup1-content' popup='showPopup1'>
....
....
</div>
<div id='popup2-content' popup='showPopup2'>
....
....
</div>
.directive('popup', function() {
var p = {
link : function(scope, iElement, iAttrs){
//code to wrap the div (iElement) with a abs pos div (parentDiv)
// code to add a mask layer div behind
// if the parent is already there, then skip adding it again.
//use jquery ui to make it dragable etc.
scope.watch(showPopup, function(newVal, oldVal){
if(newVal === true){
$(parentDiv).show();
}
else{
$(parentDiv).hide();
}
});
}
}
return p;
});
See
http://adamalbrecht.com/2013/12/12/creating-a-simple-modal-dialog-directive-in-angular-js/
for a simple way of doing modal dialog with Angular and without needing bootstrap
Edit: I've since been using ng-dialog from http://likeastore.github.io/ngDialog which is flexible and doesn't have any dependencies.
Angular-ui comes with dialog directive.Use it and set templateurl to whatever page you want to include.That is the most elegant way and i have used it in my project as well.
You can pass several other parameters for dialog as per need.

Categories