Two way binding with ng-src (angularjs) - angularjs

I'm trying to display webview using angularjs and make the webview url stocken in a list of webviews : webview.url. The problem is when a person start navigate in the webview, the url change in the webview (src attribute) but not in the webvew.url in the list of items.
To understand this issue I made this example with Iframe : http://plnkr.co/edit/MTgNNNZefliS507Fw0Jj?p=preview
How can I make the src value changing in the webview modifie automatically the webview.url in my list of items ? I mean make ng-src 2-way-binding.
Thanks!
In my page:
<ul id="myviews" class="cd-nav">
<li id="{{webView.id}}" ng-repeat="webView in webViews">
<webview id="webview{{webView.id}}" class="mywebviews" ng-src="{{webView.url}}">
</webview>
</li>
</ul>
In my app.js :
var trustedUrl = $scope.trustSrc("http://google.com");
$scope.webViews = [
{
id : "webview0",
url: trustedUrl,
classe: "opened"
}
];
When a client try to visit an url:
var idnewwebview = $scope.webViews.length + 1;
var trustedUrl =.// Recupered via an input...
$scope.webViews.push(
{
id : idnewwebview,
url: trustedUrl,
classe: "opened"
}
);

Related

How to click on React Router Link to open tab in new chrome window not in new tab [duplicate]

I'm making a "share button" to share the current page. I would like to take the current page URL and open it in a new window. I have the current URL part working, but can't seem to get the next part working.
I'm struggling with the syntax. I would like to specify the new window size to width=520, height=570.
Something like:
<a target="_blank"
href="https://www.linkedin.com/cws/share?mini=true&url=[sub]"
onclick="this.href = this.href.replace('[sub]',window.location)">
LinkedIn
</a>
Any ideas?
Use window.open():
<a onclick="window.open(document.URL, '_blank', 'location=yes,height=570,width=520,scrollbars=yes,status=yes');">
Share Page
</a>
This will create a link titled Share Page which opens the current url in a new window with a height of 570 and width of 520.
Just use window.open() function? The third parameter lets you specify window size.
Example
var strWindowFeatures = "location=yes,height=570,width=520,scrollbars=yes,status=yes";
var URL = "https://www.linkedin.com/cws/share?mini=true&url=" + location.href;
var win = window.open(URL, "_blank", strWindowFeatures);
Don't confuse, if you won't give any strWindowFeatures then it will open in a new tab.
window.open('https://play.google.com/store/apps/details?id=com.drishya');
I know it's too late, but,
Steps for opening a link in a new tab:
Create an a element
Set the href ( "https://example.com" )
Set target to "_blank"
Click on the link
Code:
<button onclick="myFunction()">Open</button>
<script>
function myFunction() {
var link = document.createElement("a")
link.href = "https://example.com"
link.target = "_blank"
link.click()
}
</script>
The following is JavaScript to be used in a function:
Note, I have 1's and 0's instead of yes and no.
var theTop=((screen.height/2)-(theHeight/2))/2;
var theLeft=(screen.width/2)-(theWidth/2);
var features = 'height=600,width=800,top='+theTop+',left='+theLeft+',toolbar=1,Location=0,Directories=0,Status=0,menubar=1,Scrollbars=1,Resizable=1';
window.open(in_uri, WindowName, features);

How to read attribute "name" of my json array in Ionic

json array localstorage format
Hello, I'm developing an ionic app. I'm new in Ionic and Typescript.
As you can see in the image below I'm parsing from an API my data in a json array.
On ts file I'm writing this code
`
public categoryDetails:any;
const datacat = JSON.parse(localStorage.getItem('categoryData'));
this.categoryDetails = datacat.categoryData;`
And in my html file when I write this
<h1 class="business-top">Business of the category {{categoryDetails.name}}</h1>
I get the error message "TypeError: Cannot read property 'name' of undefined"
I know that I don't read the attribute "name" correctly. How can I do this one?
Moreover, how can I display Businesses which associate with the spesific term_id of the category?
In this example you need to do that
<h1 class="business-top">Business of the category {{categoryDetails?.name}}</h1>
public categoryDetails: any;
this.categoryDetails = localStorage.getItem('categoryData');
or you can use ionic storage. it is better if you are using ionic.
https://ionicframework.com/docs/storage/
import { Storage } from '#ionic/storage';
export class MyApp {
public categoryDetails: any;
constructor(private storage: Storage) { }
...
// set a key/value
storage.set('categoryData', 'Max');
// Or to get a key/value pair
storage.get('categoryData').then((val) => {
this.categoryDetails = val;
});
}
I finally fingured it out.
#Kilomat thanks for your help and your advice about using ionic storage. That saved me from futured problems.
About my json file that's what I did.
In my HTML code
<ion-grid no-margin>
<h1 class="business-top">Επιχειρήσεις της κατηγορίας {{businessData.name}} {{businessData.term_id}}</h1>
<ion-list>
<ion-item class="col col-50" *ngFor="let c of BusinessCategoryDetails" text-wrap (click)="product(c)">
<div *ngIf="c.term_id == businessData.term_id">
<h2>{{c.post_title}} {{c.term_id}}</h2> <img width="80" height="80" src="{{c.guid}}">
</div>
</ion-item>
</ion-list>
</ion-grid>
And in my TS code
`var businessCategory: categories = navParams.get("businessCategory");
console.log(businessCategory); /exports the Selected category/
var newData = JSON.stringify(businessCategory);
this.businessData = JSON.parse(newData);`
Which takes properties and values from my previous category page. TS code
`categories: [categoryDetails] = null;
gotobusiness(category: categories){
this.navCtrl.push(BusinessPage, { businessCategory: category});
}`

angular ng-src not working with iframe

I am completely new to angular js and am trying to build a google map widget in Service Portal within ServiceNow that dynamically shows the user's job location. I have a server script that pulls and formats the location:
var gr = new GlideRecord('cmn_location');
gr.addQuery('sys_id', gs.getUser().getLocation());
gr.query();
if(gr.next())
{
var loc = gr.street.getHTMLValue();
}
loc1 = loc.replace(/,/g, "");
loc2 = loc1.replace(/ /g, "+");
data.src = loc2;
And my HTML looks like this:
<div class = "map-container">
<iframe ng-src='https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}}'></iframe>
</div>
The iframe and {{data.src}} do not work together. If I take away the iframe portion of the code and replace it with {{data.src}}, the address loads correctly. Also, if I replace {{data.src}} with a real address (i.e. washington+dc), the map shows Washington DC correctly.
Can someone help me troubleshoot this issue?
Thanks!
You can have a function defined in the controller and pass the url to it,
routerApp.controller('AppCtrl', ['$scope','$sce', function($scope,$sce) {
$scope.trustSrc = function(src) {
return $sce.trustAsResourceUrl(src);
}
HTML
<iframe ng-src="{{trustSrc(https://www.google.com/maps/embed/v1/place?key=AIzaSyCmoLpiJFrdXLLUYsM3PRfPD0zQ0uATAUw&q={{data.src}})}}'></iframe>
demo

Could we add our menu items in Gitkit Starter kit "Sign In cum User Info " ( #navbar )?

Could we add our menu items in Starter kit Gitkit NavBar ?
There are two list items in the drop down : Manage Account and Sign Out.
Is it possible to add a third option with a URL link ( say like Update Profile ) ?
The html for the #navbar gets loaded through Javascript code of Gitkit.
I use GAE Python.
Possible solutions which I could think of are :
After my webpage loads completely, I could add my own <li> items to the list of dropdown menu provided by #navbar.
Or
Write a custom "Sign In cum User Info " ( #navbar ) widget.
Is there a better and simpler approach ?
MY REQUEST TO GITKIT TEAM FOR ENHANCEMENT
It would be great if we could provide our custom menu items along with their URL links as options to below JS code which loads #navbar :
<script type=text/javascript>
window.google.identitytoolkit.signInButton(
'#navbar', // accepts any CSS selector
{
widgetUrl: "http://www.mywebsite.com/oauth2callback",
signOutUrl: "/",
// Example of possible solution ( my suggestion ):
custom_menu_item__1__name : "item_1", // My Custom Menu Item 1
custom_menu_item__1__link : "http://site/link_url_1",
::
custom_menu_item__n__name : "item_1", // My Custom Menu Item n
custom_menu_item__n__link : "http://site/link_url_1",
}
);
</script>
UPDATE
Temporary Fix = I have added the needed menu options using jquery temporarily. Code snippet provided below to help anyone with similar needs till official solution arrives :
On page load,
custom_menu_add_job_id = setInterval(function(){
add_custom_menu();
}, 5000);
function add_custom_menu(){
if ($("#navbar").find(".gitkit-user-card-menu").length){
$(".gitkit-user-card-menu").append($("<li class='gitkit-user-card-menuitem' id='smh_user_profile' tabindex='0'> <img src='/images/person_32x32.png' class='user_profile_menu_icon' > Profile </li>")
.click(function(){
window.location.href = window.location.protocol + "//" + window.location.host + "/user/";
})
);
clearInterval(custom_menu_add_job_id);
}
}
If you want, you could check it live at ShowMyHall.
Customized menu items are now supported in Google Identity Toolkit javascript widget. Examples:
window.google.identitytoolkit.signInButton(
'#navbar', // accepts any CSS selector
{
widgetUrl: "...",
dropDownMenu: [
{
'label': 'Check Configuration',
'url': '/config'
},
{
'label': 'Sign out',
'handler': function() {google.identitytoolkit.signOut();}
},
{
'label': 'Manage Account',
'handler': function() {google.identitytoolkit.manageAccount();}
},
]
};
Until this feature arrives, I also implemented a similar temporary fix that you outlined at the end of your question. I got around using a timer as follows (note that my gitkit is using the div login):
$(window).load(function() {
$("#login").hover(function() {
add_custom_menu_items();
})
});
function add_custom_menu_items(){
if ($("#login").find(".gitkit-user-card-menu").length == 1){
if ($("#my_data_link").length == 0) {
$(".gitkit-user-card-menu li:eq(0)").after($('<li class="gitkit-user-card-menuitem" id="my_data_link" tabindex="0">My data</li>'));
}
}
}
Basically when you hover over the div it adds the menu item, but only if it hasn't already been added.
The navbar drop down menu does not support images but if you really need that, here's a hacky way to do it in jquery:
var config = {...}; // your config which includes the custom drop down menu.
// Render button on load. (now supported)
window.onload = function() {
window.google.identitytoolkit.signInButton(
'#navbar', // accepts any CSS selector
config);
// This will modify the html content of the first option in drop down menu.
// Make menu dom changes.
jQuery('#navbar li:first-child').html('<img src="img.png">My Label');
}

DNN 7 Open a page/module in a modale

Working on DNN 7 , I have a grid where I display somes users infos.
I would like to set an "edit action", to edit the user, like into admin panel.
So I choose to make a modale into the same page.
<rad:GridTemplateColumn HeaderStyle-Width="0" ItemStyle-HorizontalAlign="Center" AllowFiltering="False">
<ItemTemplate>
<a href="#" data-id="<%#((CustomerViewModel)Container.DataItem).UserID%>" class="e">
<img src='<%=ResolveUrl("~/Icons/Sigma/Edit_16x16_Standard.png")%>' title='Edit user' />
</a>
</ItemTemplate>
</rad:GridTemplateColumn>
// edit user infos
$('.e').click(function () {
var url = "<%= GetEditUrlUser() %>".replace(new RegExp("KEYFIELD", "g"), $(this).attr("data-id"));
//alert(url);
dnnModal.show(url, true, 550, 950, false, '');
return false;
});
And here my cs function
public string GetEditUrlUser()
{
// I need to show "dnndev.me/en-us/Admin/User-Accounts/ctl/Edit/mid/"+ModuleId+"/UserId/KEYFIELD/filter/All/pagesize/10/currentpage/0?popUp=true ";
var url = Globals.NavigateURL("393", "Edit", "mid=" + ModuleId, "UserID=KEYFIELD", "filter/All/pagesize/10/currentpage/0", "popUp=true");
return url;
}
But that's not good, since Globals.NavigateURL() return me the page where I am.
I have also took a look about ResolveUrl() function, but didn't succeed to do something well.
So if someone can help me, or give me an example / tips, it would be great.
Thanx
EDIT : It working with this code, but it doesn't seems optimised and really great
public string GetEditUrlUser()
{
var url = Globals.NavigateURL("Edit", "mid","393","UserID","KEYFIELD", "filter/All/pagesize/10/currentpage/0", "popUp=true");
return url;
}
EDIT 2 : To make it more efficient, I got this actually. But this isn't working, I got a blank modale.
But this way look like really better, since it will search itself for admin module
public string GetEditUrlUser()
{
// dnndev.me/en-us/Admin/User-Accounts/ctl/Edit/mid/"+ModuleId+"/UserId/KEYFIELD/filter/All/pagesize/10/currentpage/0?popUp=true
var moduleController = new ModuleController();
var adminUserModule = moduleController.GetModuleByDefinition(PortalId, "User Accounts");
var url = EditUrl(adminUserModule.TabID, "Edit", false, "mid="+adminUserModule.ModuleID, "userId=KEYFIELD");
return url;
}
Okay, I think, finally, I got it.
The ASCX code would be
<rad:GridTemplateColumn HeaderStyle-Width="0" ItemStyle-HorizontalAlign="Center" AllowFiltering="False">
<ItemTemplate>
<a href="#" data-id="<%#((CustomerViewModel)Container.DataItem).UserID%>" class="e">
<img src='<%=ResolveUrl("~/Icons/Sigma/Edit_16x16_Standard.png")%>' title='Edit user' />
</a>
</ItemTemplate>
</rad:GridTemplateColumn>
With somes Javascript Function for self-update without reload the page.
function refreshGrid() {
// grdCustomers should be the ID of your grid
$find("<%= grdCustomers.ClientID %>").get_masterTableView().rebind();
}
// edit user infos
$('.e').click(function () {
var url = "<%= GetEditUrlUser() %>".replace(new RegExp("KEYFIELD", "g"), $(this).attr("data-id"));
dnnModal.show(url,/*showReturn*/true, 550, 950, true, 'javascript:parent.window.refreshGrid()');
return false;
});
And into the CS file, it should be like.
public string GetEditUrlUser()
{
var moduleController = new ModuleController();
var adminUserModule = moduleController.GetModuleByDefinition(PortalId, "User Accounts");
var url = Globals.NavigateURL(adminUserModule.TabID, "Edit", "mid=" + adminUserModule.ModuleID, "userId=KEYFIELD", "popUp=true");
return url;
}
And it work fine.
I hope it could help someone.

Resources