Add event listener to links loaded in webview? (Titanium Mobile) - titanium-mobile

I am working on a sample app using titanium.
I have created a webview and loaded a local html as shown below
var webview = Ti.UI.createWebView({ borderWidth:0, paddingRight:10,width:310,top:25, height:210,left:5 });
webview.html = '<div></div>'
is it possible for me to add event listener for the anchor tag specified in the html?
if so how? if not please suggest me anyother possible solution.
thanks.

Yes you can add your custom event like this:
<div></div>
And listen to the event in your app.js file:
Ti.App.addEventListener('openLink', function(e){
Ti.Platform.openURL(e.linkUrl);
});
For complete details Communication Between WebViews and Titanium

Related

Integrating Surveyjs with Nativescript + Angular

I am trying to merge surveyjs along with my NativeScript application. I have referred URL for merging the same with Angular application
From the Angular demo code given on website, we have to add event handler for Complete button where we can get the response from surveyjs. Is it possible to integrate similarly for Nativescript Mobile application? Here is the approach which i feel can be taken.
Display
Create a HTML as provided by SurveyJS with required CSS and JS
referenced and add them as a file in project.
Modify HTML once i get the survey question json back from server.
Show the HTML as part of WebView. This will take care of displaying
the survey on my Application.
Here are my challenges during Submission
As per the process given on SurveyJS, i need to add handler for
oncomplete which will get the result json for me. How can i add
handlers for Complete button click in my code? Also please note that
there is a possibility that there may be multiple surveys on a single
page.
Apart from Survey, there are other fields also on the page and user
will submit them all in one go by clicking submit button of the page.
Hence i am planning to hide Complete button provided by SurveyJS
page. This needs to be triggered via code. Can this be done?
If someone can give directions on whether this scenario can be handled in nativescript application with Angular,it would help immensely.
yes it can be done using nativescript-webview-interface plugin.
add jS code inside WebView to handle oncomplete event from surveyJS. and on that function call emit some event to native app. after that add nativescript code to listen for that event and get the JSON back.
inside webView JS function
var oWebViewInterface = window.nsWebViewInterface;
// emit event to native app
oWebViewInterface.emit('anyEvent', jsonData);
inside native App
oWebViewInterface.on('anyEvent', function(jsonData){
// perform action on event
});
for more details on this you can check plugin readme file https://github.com/shripalsoni04/nativescript-webview-interface

Menu Item with JavaScript

The Abp documentation describes how the menu's associated JavaScript files are automatically generated by the framework based on NavigationProvider class.
My question is: has anyone tried extending the abp.nav.menus JavaScript files produced on the client-side?
If so, would you able to provide a code snippet(s) on how to assist?
My intention is to create a menu item that execute a JavaScript function rather than url, which redirect to a new page. For example, to open a modal dialog box on top of existing page.
Thanks.
You can do it with JQuery. Enter # for the menu link and set click with JQuery.
$($("#leftsidebar .menu ul li a")[2]).click(function(e){
e.preventDefault();
window.location = "https://www.google.com";
});

Jquery Mobile with checkboxes are slow on mobile devices

I have a mobile app where I use Jquery Mobile v. 1.3.1 and PhoneGap.
On a page there're a bunch of checkboxes. When I run the app the list with checkboxes respond very slow when you check/uncheck a checkbox.
What to do?
I used this in Cordova/PhoneGap but I wasn't using jQuery Mobile, just jQuery.
$('input[type="checkbox"]').on( 'touchstart', function(){
$(this).prop("checked", !$(this).prop("checked"));
});
$('input[type="checkbox"]').click(function(event){
event.preventDefault();
event.stopPropagation();
});
You could technically do it by using trigger() and pass custom data to the click event handler, but I couldn't get the parameters to go through for some reason. The above works tho.

Attach event handler to KendoUI widget (View)

I am attempting to work an existing web app to use Kendo (Mobile) UI widgets.
All of the existing javascript code base is contained within AMD modules (RequireJS).
I would like to attach a 'show' event handler to a view, so that the app can request data from the back end, however the data logic is within a module, and cannot be called from the page script (and thus, I can't use Kendo data-event attributes).
I thought that I would be able to to attach an event handler in code like so:
$('#tabstrip-browse').on("show", function(e) {...});
however, the event handler is not called.
Is there a way to do this?
Seems I'm finally able to answer my own question
My issue was that I was trying to use jQuery event binding syntax to bind to the events, however, KendoUI does not expose events in a jQuery friendly/compliant way.
However, there is a way to do this using the KendoUI API
There is no standard 'show' event in javascript or jQuery. You can bind custom events, but you need to also include a way to trigger them.
Here's a trivial example:
// bind the custom event
$('#element').on('show', function(e) {
// handle the custom event
});
// trigger the custom event
$('#element').trigger('show');
There is an attach event on Durandal
https://groups.google.com/forum/#!topic/durandaljs/UQ9hXpwP_ds

FullCalendar: Events not showing onload but show if I open IE developer

I'm using FullCalendar jquery pluging in my MVC3 project.
For some reason events aren't rendered when the calendar is first loaded. The strange thing is that they do appear if I open IE developer or if I change the agenda view.
Any suggestions?
Thanks
Looks like your calendar div is in a hidden element like a tab. You will need to render the fullCalendar on show of this hidden element to load your events properly in the calendar.
In case of jQuery tabs, you can do something like this:
$('#tabs').tabs({
show: function(event, ui) {
$('#calendar').fullCalendar('render');
}
});
Let me know if this helps!

Resources