Using the following code opens InAppBrowser. I would like to open the other browsers like Chrome and anything that comes with Android.
var data = '<form id="Form" action="http://www.example.com/api/form/" method="post">' +
'<input type="hidden" name="firstname" value="' + firstname + '">' +
'<input type="hidden" name="lastname" value="' + lastname + '">' +
'</form><script type="text/javascript">document.getElementById("Form").submit();</script>';
var pageContentUrl = 'data:text/html;base64,' + btoa( pageContent );
let browser = new InAppBrowser(data, '_blank', 'hidden=no,location=no,clearsessioncache=yes,clearcache=yes');
var ref = cordova.InAppBrowser.open(url, target, options);
target: The target in which to load the URL, an optional parameter that defaults to _self. (String)
_self: Opens in the Cordova WebView if the URL is in the white list, otherwise it opens in the InAppBrowser.
_blank: Opens in the InAppBrowser.
_system: Opens in the system's web browser.
So therefore, your code with _system should do what you want
let browser = new InAppBrowser(data, '_system', 'hidden=no,location=no,clearsessioncache=yes,clearcache=yes');
You should read the documentation
Related
I am facing a strange error while adding the facebook comment plugin in my AngularJS app.
The simplified structure of the app page is
<html ng-app="myapp">
<head>
...
</head>
<body>
<div>
...
</div>
<div ng-view></div>
...
</body>
</html>
The page with fb comment box is loaded in ng-view. The structure of page that contains fb comment box is as follows
<div id="fb-comment-box>
<div class="fb-comments" data-href="http://mydomain.com/page/{{ page.id }}" data-numposts="5" data-colorsheme="light"></div>
</div>
The page is angularjs scope variable which comes from controller. When i load this page in browser and do inspect element. It shows the correct page id i.e. data-href is
data-href = "http://mydomain.com/page/2"
But below the fb comment box, Facebook shows following error
Warning: http://mydomain.com/page/%7B%7B%20page.id%7D%7D is
unreachable.
I can see the angularJS scope variable is not binding. Does anyone know how to solve this issue?
This is probably due to the fact that the FB functionality kicks in before Angular is able to change the data-href attribute.
A directive seems like a good choice here:
You basically need to create the comment-box after Angular can provide the correct URL.
Because this involves asynchronous DOM manipulation, you need to use FB.XFBML.parse() to let FB process the comment-box once the data-href attribute is changed.
The directive:
.directive('dynFbCommentBox', function () {
function createHTML(href, numposts, colorscheme) {
return '<div class="fb-comments" ' +
'data-href="' + href + '" ' +
'data-numposts="' + numposts + '" ' +
'data-colorsheme="' + colorscheme + '">' +
'</div>';
}
return {
restrict: 'A',
scope: {},
link: function postLink(scope, elem, attrs) {
attrs.$observe('pageHref', function (newValue) {
var href = newValue;
var numposts = attrs.numposts || 5;
var colorscheme = attrs.colorscheme || 'light';
elem.html(createHTML(href, numposts, colorscheme));
FB.XFBML.parse(elem[0]);
});
}
};
});
The HTML:
<div id="fb-comment-box" dyn-fb-comment-box
page-href="https://example.com/page/{{page.id}}"
numposts="5"
colorscheme="light">
</div>
NOTE:
The directive's scope will constantly watch for changes in the page-href attribute and update the comment-box. You can change this to suit your needs (e.g. also watch for changes in the other attributes or bind it once and stop watching).
See, also, this short demo.
How can I integrate FusionChart in my SPA application developed using MVVM architecture, Durandal and Knockout.js? I had created a simple HTML file, with hard coded data, in which the charts are working fine but I am not able to figure out how can I embed this code with my SPA Application.
I am sharing some details:
I have added following Js file in my HTML file :
<script type="text/javascript" src="./FusionCharts.js"></script>
<script type="text/javascript" src="./jquery-1.9.1.min.js"></script>
<script type="text/javascript" src="./lib.js"></script>
My HTML file code in which fusion chart is rendered successfully is as follows :
<div id="chartdiv" align="center">Chart will load here</div>
<script type="text/javascript">
var chart = new FusionCharts("Column3D", "myChartId", "300", "200");
chart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$' showBorder='1'>" +
"<set label='Current' value='24000' color='00FF00' />" +
"<set label='30+' value='19600' color='0000FF' />" +
"<set label='60+' value='15700' color='FFFF00'/>" +
"<set label='90+' value='14400' color='FF0000' />" +
"<styles>" +
"<definition>" +
"<style name='myCaptionFont' type='font' align='right'/>" +
"</definition>" +
"<application>" +
"<apply toObject='Caption' styles='myCaptionFont' />" +
"</application>" +
"</styles> " +
"</chart>");
chart.render("chartdiv");
</script>
I am not able to figure out what should be the code in my ViewModel.js, and view.html file to render FusionChart.
Please Help.
I developed a working demo for including FusionCharts in DurandalJS. Just copy the project to a webserver and access the app.
https://github.com/bhargav3/fcdurandal
First thing is to include fusioncharts.js which can be done using requirejs or by directly adding it in the index file. To avoid creating duplicate charts we shall check if the FusionCharts('myChartId') exists and avoid redraws.
Your viewmodel will look something like this,
define(['durandal/http', 'durandal/app'], function() {
return {
displayText: 'FusionCharts in a SPA app!',
viewAttached: function(view) {
if (typeof FusionCharts('myChartId') === 'undefined') {
$('#binder').append('<div id="chartContainer"></div>');
var myChart = new FusionCharts("Column3D", "myChartId", "400", "300", "0");
myChart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$' showBorder='1'>" +
"<set label='Current' value='24000' color='00FF00' />" +
"<set label='30+' value='19600' color='0000FF' />" +
"<set label='60+' value='15700' color='FFFF00'/>" +
"<set label='90+' value='14400' color='FF0000' />" +
"</chart>");
myChart.render("chartContainer");
}
}
};
});
Where as your view will look like
<h2 data-bind="html:displayText"></h2>
<div id="binder"></div>
main.js is the bootstrap file and you can add your routers(for navigation) there.
If your JavaScript files are added via script tags on index.html, then Fusion Charts should be available to use from your view model. There is a way to utilize require.js to dynamically load into the scope of your view model if there was a reason you don't want it globally. I didn't include that below in the view model example in order to keep it simple to demonstrate the use of viewAttached.
viewAttached (http://durandaljs.com/documentation/Hooking-Lifecycle-Callbacks/) seems to be the last method called in the lifecycle. As the documentation indicates, the method indicates when the "view is attached to the parent DOM node." This should allow you to manipulate the view as needed after binding has occurred. See also: http://durandaljs.com/documentation/Interacting-with-the-DOM/
Below is an example of using viewAttached in your view model:
define(function() {
var activate = function() {
};
var viewAttached = function() {
var chart = new FusionCharts("Column3D", "myChartId", "300", "200");
chart.setXMLData("<chart animation='0' caption='Aging' numberPrefix='$' showBorder='1'>" +
"<set label='Current' value='24000' color='00FF00' />" +
"<set label='30+' value='19600' color='0000FF' />" +
"<set label='60+' value='15700' color='FFFF00'/>" +
"<set label='90+' value='14400' color='FF0000' />" +
"<styles>" +
"<definition>" +
"<style name='myCaptionFont' type='font' align='right'/>" +
"</definition>" +
"<application>" +
"<apply toObject='Caption' styles='myCaptionFont' />" +
"</application>" +
"</styles> " +
"</chart>");
chart.render("chartdiv");
};
return {
activate: activate,
viewAttached: viewAttached
};
};
Finally, your view should contain:
<div id="chartdiv" align="center">Chart will load here</div>
I use the following code to dynamically add input fields to form, based on this source:
http://www.infotuts.com/dynamically-add-input-fields-to-form-jquery/
Here's a part of my code:
$(document).ready(function(){
var counter = 2;
$("#btnAddIngredients").click(function () {
var newIngredientsData = $(document.createElement('div'))
.attr("id", 'ingredientsData' + counter);
newIngredientsData.html('<div id="ingredientsData'+ counter + '" class="row">' +
'<div class="col-ingredients">#'+ counter + ' : <select id="ingredient'+ counter + '" name="ingredient'+ counter + '" class="selectIngredients"><select/></div>' +
'<div class="col-extra"><input type="text" name="extra'+ counter + '" id="extra'+ counter + '" size="30" maxlength="100" /></div>' +
'<div class="col-quantity"><input type="text" name="quantity'+ counter + '" id="quantity'+ counter + '" size="5" maxlength="30" /></div>' +
'<div class="col-unit"><select id="unit'+ counter + '" name="unit'+ counter + '" class="selectUnit"><select/></div>'+
'</div>');
newIngredientsData.appendTo("#ingredientsList");
counter++;
});
$(".selectIngredients").live("click",function () {
$(this).empty();
$(this).append('<option value="">Loading...</option>');
$.post("getdata.php", {what: "ingredients"},
function (data){
alert(data);
$(this).append(data);
}
,"html");
});
});
What i'm expecting is for the selected value to be populated every time I click on it But the only thing that appeared is "<option value="">Loading...</option>", which I appended first. It seems $(this).append(data) didn't do it's job. nothing is being appended. The alert(data) above it correctly displays the contents that should be appended.
If I change $(this).append(data); to $("#ingredients1").append(data); for example, the select data is loaded correctly, but not when I use $(this).append(data);
What's wrong here? Why do the appends; in the function (data){} doesn't work, while the preceding $(this).append('<option value="">Loading...</option>'); works correctly every time?
this isn't referring to the same element inside of the post closure, use a context variable:
var that = $(this);
$.post("getdata.php", {what: "ingredients"}, function (data) {
alert(data);
that.append(data);
});
$(this) in your ajax response is the window, not the <select>.
You can use the "context" setting for ajax http://api.jquery.com/jQuery.ajax/ ... and it transfer "this" to the success scope
I'm using the Soundmanager Mp3 Button on my site. However, I'd like to use the Soundcloud Api to stream tracks through Soundmanager instead of hosting MP3's. Basically, I'd like to stream a Soundcloud link through the Soundmanager button. Possible?
I've tried creating a jQuery loop (below) but still haven't had any luck.
<ol>
<li><a class="sm2_button" href="http://soundcloud.com/....">Track Title</a>
</li>
</ol>
and the jQuery
$("ol a").each(function()
{
var thisLink = $(this);
var track_url = this.href; // save href value of each link to 'track_url' i.e. soundcloud.com/...
this.href = this.href.replace(track_url, "#"); // replace href value with '#'
var consumer_key = 'My Consumer Key';
// now resolve the stream_url through Soundcloud's getJSON method
$.when($.getJSON('http://api.soundcloud.com/resolve?url=' + track_url + '&format=json&consumer_key=' + consumer_key + '&callback=?', function(track) {
url = track.stream_url + '?consumer_key=' + consumer_key;
})).done(function() {
// and place an 'onclick' on each link
$(thisLink).attr('onclick', "if (basicMP3Player.lastSound) { basicMP3Player.lastSound.stop(); } document.getElementById('mp3').type='audio/mpeg'; document.getElementById('mp3').href = '" + url + "'; basicMP3Player.handleClick({target: document.getElementById('mp3')});");
});
});
This was driving me nuts too. After a bunch of digging I was able to get it to work if I specified an mp3 mimetype in the link:
<ol>
<li><a type="audio/mp3" class="sm2_button" href="https://api.soundcloud.com/tracks/49349198/stream?client_id=YOUR_CLIENT_ID">Track Title</a></li>
</ol>
You could also try using the SoundCloud Javascript SDK, which'll take care of most of this for you.
SC.initialize({
client_id: "YOUR_CLIENT_ID",
redirect_uri: "http://example.com/callback.html",
});
SC.stream("/tracks/293", function(sound){
sound.play();
});
I tried this and thought I had it...anyone see anything?
<script src="http://connect.soundcloud.com/sdk.js"></script>
<script>
SC.initialize({
client_id: "My Consumer Key",
redirect_uri: "My Redirect",
});
SC.get("/users/MYUSERID/tracks", {limit: 1000}, function(tracks){
alert("Latest track: " + tracks[0].title);
});
$(".sm2_button").live("click", function(sound){
sound.play();
});
</script>
<script>
$(document).ready(function() {
$(".sm2_button").each(function()
{
var thisLink = $(this);
var track_url = this.href; // save href value of each link to 'track_url' i.e. soundcloud.com/...
this.href = this.href.replace(track_url, "#"); // replace href value with '#'
var consumer_key = 'My Consumer Key';
// now resolve the stream_url through Soundcloud's getJSON method
$.when($.getJSON('http://api.soundcloud.com/resolve?url=' + track_url + '&format=json&consumer_key=' + consumer_key + '&callback=?', function(track) {
url = track.stream_url + '?consumer_key=' + consumer_key;
})).done(function() {
// and place an 'onclick' on each link
$(thisLink).attr('onclick', "if (basicMP3Player.lastSound) { basicMP3Player.lastSound.stop(); } document.getElementById('mp3').type='audio/mpeg'; document.getElementById('mp3').href = '" + url + "'; basicMP3Player.handleClick({target: document.getElementById('mp3')});");
});
});
}); </script>
I load the WebContent edit portlet on a Popup window using the following code:
<liferay-ui:icon
image="edit"
label="true"
message="news-edit-url"
url="${oneNews.newsEditUrl}"
/>
editUrl:
taglibEditURL = "javascript:Liferay.Util.openWindow({dialog: {width: 960}," +
"id: '" + renderResponse.getNamespace() + "'," +
"title: '" + LanguageUtil.format(request.getLocale(), "edit-x", HtmlUtil.escape(assetRenderer.getTitle(request.getLocale()))) + "'," +
"uri:'" + HtmlUtil.escapeURL(editPortletURLString) + "'});";
When the content is saved or published, the portlet is loaded on the popup window. I want the popup window to close and the portlet with the editURL link to refresh.
Any help regarding this...
Here is the code to close the pop-up, this should be present in the parent page which opens the pop-up:
Liferay version 6.1
Liferay.provide(
window,
'<portlet:namespace />closePopup',
function(popupIdToClose) {
var A = AUI();
A.DialogManager.closeByChild('#' + popupIdToClose);
},
['aui-base','aui-dialog','aui-dialog-iframe']
);
Liferay version 6.2
Liferay.provide(
window,
'<portlet:namespace/>closePopup',
function(popupIdToClose) {
var popupDialog = Liferay.Util.Window.getById(popupIdToClose);
popupDialog.destroy();
},
['liferay-util-window']
);
Here is the code to refresh the portlet which opened the pop-up. This should be present in the parent page which opens the pop-up:
Liferay.provide(
window,
'<portlet:namespace />refreshPortlet',
function() {
<%-- refreshing the portlet [Liferay.Util.getOpener().] --%>
var curPortletBoundaryId = '#p_p_id<portlet:namespace />';
Liferay.Portlet.refresh(curPortletBoundaryId);
},
['aui-dialog','aui-dialog-iframe']
);
It is up to you how to call the closePopup & refreshPortlet functions. One way is you can let the pop-up refresh and call the closePopup function from the pop-up itself only when the request is successfully processed and then call the refreshPortlet function also from the pop-up.
Here is a code-snippet which would help you to call parent-page functions from the pop-up:
Liferay.Util.getOpener().<portlet:namespace />closePopup(popupIdToClose);
Liferay.Util.getOpener().<portlet:namespace />refreshPortlet();
The popupIdToClose is the same id which is used when opening the pop-up as shown:
taglibEditURL = "javascript:"
+ Liferay.Util.openWindow({"
+ "dialog: {width: 960},"
+ "id: '" + renderResponse.getNamespace() + "'," // This is the "popupIdToClose"
+ "title: '" + LanguageUtil.format(request.getLocale(), "edit-x", HtmlUtil.escape(assetRenderer.getTitle(request.getLocale()))) + "',"
+ "uri:'" + HtmlUtil.escapeURL(editPortletURLString)
+ "'}"
+ ");";
Hope this helps.
AUI taglib solution for 6.2 version. No additional JS required.
<aui:button cssClass="close-panel" type="cancel" value="close" />
Important part is cssClass="close-panel".