TL;DR I need to change the URL of a WebView I previously created in alloy.js inside a new controller but the URL is not changing no matter what I do. How do I do this?
====================================
I've been having problems left and right with Titanium's webview... Require serious assistance ASAP.
I'm using Alloy. What I'm trying to do is to change the URL of a webview that I've previously created in alloy.js.
My alloy.js file first creates a webview:
Alloy.Globals.webview = Titanium.UI.createWebView();
Alloy.Globals.setUserAgent(); //function that just sets the user agent
Alloy.Globals.webview.url = "http://www.google.ca";
Then on index.js, I have a button where when clicked, it creates and opens a new controller (the controller that contains the webview:
var win = $.index;
...
button.addEventListener('click',function(e)
{
var theTest = Alloy.createController('web').getView();
theTest.open();
win.close();
});
On web.js, I add the WebView (from alloy.js) to a view:
$.view_webview.add(Alloy.Globals.webview);
Still on web.js, I have another view (acts as a button) where when I click on it, it tries to change the url of this the webview I made in alloy.js:
view_getpoints.addEventListener('click', function(e){
$.Alloy.Globals.webview.url = "http://www.youtube.com";
$.Alloy.Globals.webview.reload();
});
This did not work, the url did not change. It was still on google.
I also tried setUrl("http://youtube.com"); instead of just url, nothing.
I then figured it might be because I'm trying to change just the variable, where when I really should be directly changing the element object I added to my $.view_webview view. So I tried that:
view_getpoints.addEventListener('click', function(e){
$.view_webview.getChildren(0).url = "http://www.youtube.com";
}
Aw man, "url" is undefined? Maybe I'm getting the child wrong. Let's output $.view_webview.getChildren(0) and see what we get:
view_getpoints.addEventListener('click', function(e){
Ti.API.info("child: " + $.view_webview.getChildren(0));
}
I was expecting this to output "child: undefined" but no...it isn't undefined..It outputs: "child: [object WebView]".
Whoa whoa whoa, hold on back up. It knows it's a WebView object? But...shouldn't I be able to access the url and setUrl() fields from this object then as stated by the docs?
http://docs.appcelerator.com/titanium/3.0/#!/api/Titanium.UI.WebView-property-url
Why can't I change it directly?
I'm out of options.
TL;DR I need to change the URL of a WebView I previously created in alloy.js inside a new controller. How do I do this?
Related
I want the user to open website / web page inside app and not in browser. I have a button, which should open a webpage on click.
I am using native.showWebPopup function for this in main.lua. The problem that I am getting is, a white colored page flashes and disappears immediately.
Below is my code. Any help is greatly appreciated. Thanks.
function openLink(event)
if(event.phase == "ended")then
native.showWebPopup("http://www.google.co.in")
end
end
btn:addEventListener("touch", openLink)
Make sure you check that you've provided access to the internet on Android!
Referring to the documentation: http://docs.coronalabs.com/api/library/native/showWebPopup.html
For Android
If the web popup is displaying web pages from the Internet, you must add the INTERNET permission to the build.settings file.
settings =
{
android =
{
usesPermissions =
{
"android.permission.INTERNET",
},
},
}
Other than that, the syntax looks correct, so I suspect it is a permissions problem.
Hope that helps!
I have an app which works in IOS 6. I am trying to get it to work on basically any andriod version.
I have an index controller and view which load fine.
I can load the register page but when I bypass the register page. It works fine in IOS but not Android. I am not using tabgroups just windows.
Any ideas ? NOTE I can't get the full xml tags to load in code view which is why there are no brackets.
I get this error:
new Error("Cannot add window/tabGroup to another window/tabGroup.");
Index Controller
if (!isRegistered) {
var register = Alloy.createController( 'register' );
register.getView().open();
}
else {
var main = Alloy.createController( 'main' );
Alloy.Globals.mainController = main;
}
index view
Alloy
Window id="index"
Require type="view" src="slider" id="slider"
Window
Alloy
main js controller
// code above
$.main.open();
// code below
main view
Alloy
Window id="index"
View id="loadingOverlay" /
View id="main"
ImageView id="background" image="/images/background.jpg"/
Require type="view" src="slider" id="slider" /
/OptionDialog
/View
/Window
/Alloy
Thanks,
the error messag explains it
new Error("Cannot add window/tabGroup to another window/tabGroup.");
hard to tell what is going on here, you might need to add a gist or pastebin, but a window cannot contain another window
I have a titanium app where I load a web view. In this web view I load a html5 with a chart.
I want to show a vertical line and get some information about the position of the line. This line will be controlled by a slider in Titanium App, so the line would change its position very fast and very often.
You can see something similar here: graph
In html file, I write the graph and I add a listener for an event. When the event is fired, it draw a line in some position with this code:
function updateVerticalLine(posX) {
drawSeries(c);
c.strokeStyle = '#000000';
c.beginPath();
c.moveTo(getXPixel(posX), graph.height() - yPadding);
c.lineTo(getXPixel(posX), 0);
c.stroke();
}
In Titanium app, I only fire the event when I receive the change slider event and I pass the new position of the line:
slider.addEventListener('change', function(e) {
Ti.App.fireEvent('sliderhtml5line:change', {
value : e.value
});
});
It works ok on ios, but on Android, it is very slow and events are disorganized.
Do you know how I can solve it? Is there any better option for this?
Thanks!!
it should be done the otherway.
when the user changes the slider, you should call the method in the HTML page using the evaljs function to update the user interface directly
I would like to create a single-choice dialog form ( similar to what you get when using setSingleChoiceItems on the Dialog builder) that is called from javascript out of a webview and returns its result to javascript.
1) My understanding is that onJsAlert would allow to implement the dialog call but it does only return true or false to the javascript. Is there any workaround that allows this method to return an integer ?
2) The select tag will create such a dialog on small screens, is it possible to invoke that manually from javascript ? I can not use the select tag mainly because I have a lot of items on my page that would call this dialog, having the whole list in a select tag for every single entry would create a huge overhead.
My apologies for not providing any code but I'm stuck in the concept here - I'll post a working solution if I can get some hints on how to do this.
in webview you can use "shouldOverrideUrlLoading" method to fire Dialog.
ex: if you want to fire a alertbox , when you click some link
in html:
<a href='mycall:00'>click here<a>
in java
public boolean shouldOverrideUrlLoading(WebView view, String url){
// if url is eqal to "mycall:00" launch the dialog box
}
to pass a data to javascript
webview.loadUrl("javascript:changeSize(\"" + fontSize + "\")");
here is the JavaScript function which is loaded in webview
function changeSize(fontSize){
$('#article').css('font-size', fontSize);
$('#articleDes').css('font-size', fontSize);
return false;
}
Couldn't you just let have a single js string containing the options you want in your select tags. Then when page is loaded set innerHtml on all select tags that should have the options. That way you don'n need any special integration with the android app. Something along the lines of this using jQuery:
var options = '<option value="foo">Foo</option><option value="bar">Bar</option>'
$(document).ready(function() {
$(select).html(options);
});
Haven't tested it, but something like the above should work.
Otherwise, you could use addJavascriptInterface(Object, String) method to do a tighter integration between your webapp and the android app.
I am using Prototype JavaScript library for creating dynamic drop-down menus. Before the page loads, there is no event attached to the select statements with id, id_bran and id_gen. As can be seen, the init_image is called when the page loads, and the onclick event is attached to those select statement.
This works fine in desktops where I can use a mouse to execute the click event. It however does not work in my Android and iPhone browsers. When the page loads, the init_image is called and the getval function is executed. Later however, when I make a selection in the dropdown menu, the onclick event does not call the getval function. So I am confident that the prototype library is working on my Android and iPhone as the ajax request is made on page load but it fails subsequently. What's going wrong here?
<!--
MY HTML body->onload
The init_image is called the first time when the page is loaded
-->
<body onLoad="init_image();">
//Javscript function called on page load
function init_image() {
getval();
//Assigning the event to id_gen and id_bran for mouse clicks
document.getElementById("id_gen").onclick = getsize;
document.getElementById("id_bran").onclick = getsize;
};
//Javascript function called on page load and during mouse click on the select
//statement with id = id_bran and id_gen
function getval() {
ur = 'szv/c1--'+$F('id_bran')+'/g1--'+$F('id_gen');
new Ajax.Request(ur,
{
method:'get',
onSuccess: function(transport){
var response = transport.responseText;
$('id_val').replace(response);
}
});
};
First of all, you're force-injecting events and the load event which may lead to potential cross-browser issues. If you're using prototype.js, rely on it's native methods which are cross-browser:
<script type="text/javascript">
document.observe("dom:loaded", function() {
.. your code here ..
});
</script>
Then again for properly localizing and observing the click events, instead of:
document.getElementById("id_gen").onclick = getsize;
Use something like:
$('id_gen').on('click', getsize(e).bindAsEventListener(this)); // for prototype 1.7 branch
Or:
$('id_gen').observe('click', getsize(e).bindAsEventListener(this)); // for prototype 1.6 branch
Also by setting passing the e variable there, your getsize() function will have the Event object there, so you could stop it's native behaviour (like leading to #):
function getsize(e) {
e.stop();
.. your code here ..
}
Additionally, it would be best and much less bloated if you lock your whole logic into class and create an object for it... but that's a whole different story... :)
prototype.js is a powerfull tool, but needs some care.
I would suggest you reading some basics on the framework and following the API documentation later on:
http://prototypejs.org/learn/
http://api.prototypejs.org/