Form validation not fired after submition - android

Im using Jquery mobile,Phonegap, and jquery validation to validate a contact form .
so the problem occurs when i go from an index page to my contact form page using a link in my index page.then when i try to validate my form using the submit button,my form is been submitted even if the form is not valid.But when i make my contact form my index page that means i don't navigate between pages my form validation works very well.
here's the code of my contact page :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Plane</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/inscription.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.validate.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).on("pageinit", "#main", function() {
$("#add").validate({
rules:
{
"name":{required:true},
"comment":{required:true}
}
});
});
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header" >
index
<h1>Inscription</h1>
</div>
<div data-role="content">
<form id="add" action="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="nom">
Nom
</label>
<input name="name" id="name" placeholder="name" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="prenom">
Prénom
</label>
<input name="comment" id="comment" placeholder="comment" value="" type="text" />
</fieldset>
</div>
<input id="submit" data-theme="c" type="submit" data-inline="true" value="submit">
<input id="reset" type="reset" data-inline="true" value="reset" />
</form>
</div>
</div>
</body>
</html>
and here is my index page :
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>plane</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"></script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript" charset="utf-8">
//*********************************************************
// Wait for Cordova to Load
//*********************************************************
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady() {
}
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header">
<h1>plane</h1>
</div>
<div data-role="content">
some content
begin
</div>
</div>
</body>
</html>
any help will be appreciated.


Try these url for validation
http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gestion des tests</title>
<script type="text/javascript" charset="utf-8" src="cordova-2.2.0.js"></script>
<link rel="stylesheet" type="text/css" href="jquery/css/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" type="text/css" href="css/inscription.css"/>
<script type="text/javascript" charset="utf-8" src="jquery/jquery-1.8.3.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="jquery/jquery.mobile-1.2.0.min.js"> </script>
<script type="text/javascript" charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.10.0/jquery.validate.min.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).on("pageshow", "#main", function() {
$("#add").validate({
rules:
{
"name":{required:true},
"comment":{required:true}
}
});
});
</script>
</head>
<body>
<div data-theme="b" data-role="page" id="main">
<div data-theme="b" data-role="header" >
index
<h1>Inscription</h1>
</div>
<div data-role="content">
<form id="add" action="">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="nom">
Nom
</label>
<input name="name" id="name" placeholder="name" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="prenom">
Prénom
</label>
<input name="comment" id="comment" placeholder="comment" value="" type="text" />
</fieldset>
</div>
<input id="submit" data-theme="c" type="submit" data-inline="true" value="submit">
<input id="reset" type="reset" data-inline="true" value="reset" />
</form>
</div>
</div>
</body>
</html>​

Related

Ionic/Cordova Web App - index.html errors on launch

When launching my Ionic app on iOS device and in Ionic Lab, there are various popups that appear on launching. I have not been able to find out what they mean and how to resolve so I'm hoping someone here might be able to help.
The app will load if I accept the first popup, then cancel the rest.
The popups are:
Popup 1:
gap_init:2
Popup 2:
gap:[null,"CoreAndroid","messageChannel","CoreAndroid867226728"]
Popup 3:
gap:[null,"CoreAndroid","show","CoreAndroid1105789195"]
Popup 4:
gap:[null,"CoreAndroid","overrideBackbutton","CoreAndroid633498247"]
Because of the error saying "CoreAndroid" I'm assuming it's something to do with an android configuration.
I'm using the framework based off the package found on CodeCanyon. Link below: Codecanyon Ionic App
I can post any code you wish me to so please let me know.
Here is the home.html file:
<ion-view view-title="{{appname}}">
<ion-nav-buttons side="right">
<div class="cart-total ink">
<button class="button ink icon-cart button-icon button-clear ion-ios-search-strong" ui-sref="quicksearch"></button>
</div>
<div class="cart-total ink" ui-sref="app.cart">
<div ng-if="totalCartItem>0">
<span>{{totalCartItem}}</span>
</div>
<button class="button ink button-icon button-clear fa fa-shopping-basket"></button>
</div>
</ion-nav-buttons>
<ion-content class="home bg" overflow-scroll="true" scroll-to-top="150" delegate-handle="scroller">
<ion-refresher
on-refresh="doRefresh()">
</ion-refresher>
<div class="slider" ng-if="homeSlider">
<ion-slide-box auto-play="1000" does-continue="true">
<ion-slide ng-repeat="x in slides track by $index">
<a href="#/app/{{x.params}}">
<div class="img" style="background-image: url({{x.img}})"></div>
<ion-spinner class="onload"></ion-spinner>
</a>
</ion-slide>
</ion-slide-box>
</div>
<div class="row">
<ion-scroll direction="x">
<div class="wide">
<div ng-repeat="x in categories" ui-sref="app.category({id: x.id, slug: x.slug, title: x.name})">
<div class="slide-item">
<div ng-if="!x.image" class="img" style="background-image: url(img/product.png)"></div>
<div ng-if="x.image" class="img" style="background-image: url({{x.image}})"></div>
<ion-spinner class="onload"></ion-spinner>
</div>
<span class="out"></span>
<h3 class="center" ng-bind-html="x.name"></h3>
</div>
</div>
</ion-scroll>
</div>
<div ng-if="products" class="item item-divider">
LATEST PRODUCTS
</div>
<div class="row grid" ng-repeat="x in products track by $index" ng-if="$index%2==0">
<div class="col col-50 ink item" ng-if="$index < products.length" ui-sref="app.product({id: products[$index].id})">
<div class="badge">
<span ng-if="!products[$index].in_stock" class="sold">{{$root.Dict.TXT_SOLD}}</span>
<span ng-show="products[$index].regular_price > 0 && products[$index].on_sale" class="sale">
{{products[$index] | discount | number:0}}% OFF
</span>
</div>
<ion-spinner class="onload"></ion-spinner>
<div class="img" style="background-image: url({{products[$index].featured_src ? products[$index].featured_src : 'img/product.png'}})"></div>
<div class="info">
<h3>{{products[$index].title}}</h3>
<span ng-bind-html="products[$index].price | currency:format:decimal"></span>
<del ng-show="products[$index].regular_price > 0 && products[$index].on_sale" ng-bind-html="products[$index].regular_price | currency:format:decimal"></del>
</div>
</div>
<div class="col col-50 ink item" ng-if="$index+1 < products.length" ui-sref="app.product({id: products[$index+1].id})">
<div class="badge">
<span ng-if="!products[$index+1].in_stock" class="sold">{{$root.Dict.TXT_SOLD}}</span>
<span ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" class="sale">
{{products[$index+1] | discount | number:0}}% OFF
</span>
</div>
<ion-spinner class="onload"></ion-spinner>
<div class="img" style="background-image: url({{products[$index+1].featured_src ? products[$index+1].featured_src : 'img/product.png'}})"></div>
<div class="info">
<h3 ng-bind-html="products[$index+1].title"></h3>
<span ng-bind-html="products[$index+1].price | currency:format:decimal"></span>
<del ng-show="products[$index+1].regular_price > 0 && products[$index+1].on_sale" ng-bind-html="products[$index+1].regular_price | currency:format:decimal"></del>
</div>
</div>
</div>
<ion-infinite-scroll on-infinite="loadMore()" distance="10%" ng-if="more"></ion-infinite-scroll>
</ion-content>
<scroll-to-top-button animate="true">
<div class="float-button">
<span class="height-fix">
<a class="content">
<i class="ion-ios-arrow-up"> </i>
</a>
</span>
</div>
</scroll-to-top-button>
And here is the index.html file:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * &apos;unsafe-inline&apos;; script-src * &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">
<title>Ionstore</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionic.material.min.css" rel="stylesheet">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/line-icon/css/line-icon.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<!-- LOAD IONIC -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ionic.material.min.js"></script>
<!-- NGCORDOVA -->
<script src="js/ng-cordova.min.js"></script>
<script src="cordova.js"></script>
<!-- PAYPAL GATEWAY -->
<script type="text/javascript" src="js/paypal-mobile-js-helper.js">
</script>
<!-- LOAD CONTROLLER -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/directive.js"></script>
<script src="js/services.js"></script>
<script src="js/config.js"></script>
<script src="js/language.js"></script>
<script src="js/topscroller.js"></script>
<script src="js/wcapi.js"></script>
<!-- LOAD ANGULAR MOMENT -->
<script src="js/moment.min.js"></script>
<script src="js/angular-moment.min.js"></script>
</body>
</html>

Modify your index.html file. cordova.js must be called at the bottom of the page. This worked for me.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="initial-scale=1, maximum-scale=1, user-scalable=no, width=device-width">
<meta http-equiv="Content-Security-Policy" content="default-src * gap://ready; style-src * &apos;unsafe-inline&apos;; script-src * &apos;unsafe-inline&apos; &apos;unsafe-eval&apos; data: gap: https://ssl.gstatic.com http://ionstore.ionicpremium.com https://*.paypal.com/*">
<title>Ionstore</title>
<link href="lib/ionic/css/ionic.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet">
<link href="css/ionic.material.min.css" rel="stylesheet">
<link href="fonts/font-awesome/css/font-awesome.min.css" rel="stylesheet">
<link href="fonts/line-icon/css/line-icon.css" rel="stylesheet">
<!-- IF using Sass (run gulp sass first), then uncomment below and remove the CSS includes above
<link href="css/ionic.app.css" rel="stylesheet">
-->
</head>
<body ng-app="app">
<ion-nav-view></ion-nav-view>
<!-- LOAD IONIC -->
<script src="lib/ionic/js/ionic.bundle.js"></script>
<script src="js/ionic.material.min.js"></script>
<script type="text/javascript" src="js/paypal-mobile-js-helper.js">
</script>
<!-- LOAD CONTROLLER -->
<script src="js/app.js"></script>
<script src="js/controllers.js"></script>
<script src="js/filter.js"></script>
<script src="js/directive.js"></script>
<script src="js/services.js"></script>
<script src="js/config.js"></script>
<script src="js/language.js"></script>
<script src="js/topscroller.js"></script>
<script src="js/wcapi.js"></script>
<!-- LOAD ANGULAR MOMENT -->
<script src="js/moment.min.js"></script>
<script src="js/angular-moment.min.js"></script>
<script src="js/ng-cordova.min.js"></script>
<script src="lib/ngCordova/dist/ng-cordova.js"></script>
<script src="cordova.js"></script>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
</body>
</html>

You are using the android cordova.js in the iOS app.
You don't have to add any cordova.js file, just link it in the index.html, it will be generated per platform and copied to the right place.

Windows phone JQuery Mobile Code not working - Blank screen

I'm using visual studio to develop hybrid applications to windows phone, android and iphone.
I can't get this code to work, and I don't know why. This is working good in Android but not in Windows Phone.
Basically I can not see the form. Blank appears instead.
Can someone, please, help me?
My code:
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<!-- CidadaoAtivo references -->
<link rel="stylesheet" href="css/jquery/jquery.mobile-1.4.5.min.css">
<script src="cordova.js"></script>
<!--<link rel="stylesheet" href="css/jquery/jquery.mobile.structure-1.4.5.css">-->
<script src="scripts/JQuery/jquery-2.1.3.min.js"></script>
<script src="scripts/JQuery/jquery.mobile-1.4.5.min.js"></script>
<script src="scripts/index.js"></script>
<script src="scripts/main.js"></script>
<script src="scripts/contactos.js"></script>
<script src="scripts/winstore-jscompat.js"></script>
<script src="scripts/platformOverrides.js"></script>
<div data-role="page" id="login">
<div data-role="header" style="background-color:lightblue; color:black;">
</div>
<div data-role="main" class="ui-content" style="max-width: 500px; margin:auto">
<div style="max-width: 500px; margin:auto; font-family: Arial, Helvetica, sans-serif" >
<form>
<input type="email" placeholder="Email" />
<input type="password" placeholder="Palavra-Passe" />
<div data-role="controlgroup" data-type="vertical">
<a class="ui-btn ui-corner-all ui-icon-check ui-btn-icon-left" id="loginMail">Entrar com Email</a>
<a class="ui-btn ui-corner-all" style="background-color:blue; color:whitesmoke; background-image:url(images/Facebook_Sticker_Icon.png); background-position:10px; background-repeat:no-repeat; background-size:24px;">Entrar com Facebook</a>
</div>
</form>
</div>
</div>
<div data-role="footer" data-position="fixed" style="background-color:lightblue; color:black; font-family: Arial, Helvetica, sans-serif; font-size:10px" >
<div data-role="navbar" style="max-width: 500px; margin:auto">
<ul>
<li>Entrar</li>
<li>Registar</li>
</ul>
</div>
</div>
</div>

Set the Build Action of each script as Content. To do this right click on a script file from the Solution Explorer and choose Properties. You will get Build Action in the Properties windows then.

"Input type=text" tab indexing issue in phonegap .apk

I am using https://build.phonegap.com to create phonegap .apk file.
After opening .apk file I have got a very peculiar bug regarding tabindexing. Tab button of soft keybord is not shifting cursor to next textbox from a textbox.
Tabbing is working fine from input[type=tel] but not from input[type=text], input[type=email] and input[type=search].
Device used is Iball slide 3G Q1035 tablet and android version is 4.2.2.
HTML Code:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<meta name="viewport" content="user-scalable=no, initial-scale=1, maximum-scale=1, minimum-scale=1, width=device-width, height=device-height, target-densitydpi=device-dpi" />
<link rel="stylesheet" type="text/css" href="css/index.css" />
<title>Hello World</title>
</head>
<body>
<div class="app">
<form>
<div>
<span><input id='test1' tabindex='1' name='test1' type='text'></span>
</div>
<div>
<span><input id='test2' tabindex='2' name='test2' type='text'></span>
</div>
<div>
<span><input id='test3' tabindex='3' name='test3' type='search'></span>
</div>
<div>
<span><input id='test4' tabindex='4' name='test4' type='url'></span>
</div>
<div>
<span><input id='test5' tabindex='5' name='test5' type='email'></span>
</div>
<div>
<span><input id='test6' tabindex='6' name='test6' type='tel'></span>
</div>
</form>
</div>
<script type="text/javascript" src="cordova.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
INDEX.JS
var app = {
initialize: function() {
this.bindEvents();
},
bindEvents: function() {
document.addEventListener('deviceready', this.onDeviceReady, false);
},
onDeviceReady: function() {
},
receivedEvent: function(id) {
}
};

Including Jquery mobile locally in android app

Jquery mobile styles are not rendering in android App when storing the jquery mobile css and js file locally in assets folder of android project. But the same is working by including the jquery mobile files from CDN. Help me
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>SAMPLE</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="file:///android_asset/www/css/jquery.mobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="file:///android_asset/www/js/cordova-2.7.0.js"></script>
<script src="file:///android_asset/www/js/jquery.mobile-1.3.2.min.js"></script>
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.css" />
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.2/jquery.mobile-1.3.2.min.js"></script>
<script src="js/TamkeenJQ.js"></script>
-->
</head>
<body>
<div data-role="page" id="page1">
<div data-role="header" data-position="fixed">
Header
</div>
<div data-role="content">
content
<button onclick="changePageFn()">Change Page</button>
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
<div data-role="page" id="page2">
<div data-role="header" data-position="fixed">
Header
</div>
<div data-role="content">
content
</div>
<div data-role="footer" data-position="fixed">
Footer
</div>
</div>
</body>
</html>

First add the jquery css files.
Then add the jquery 1.9.1 js file.
then add the jquery mobile 1.3.2 js file.

Actually it looks some issue in your implementation.
If you have included the correct path of your js and css files related to jquery mobile.
Solution: Reverify the path of js and css files.

Use the following order in the head tag
<link rel="stylesheet" href="css/jquerymobile-1.3.2.min.css" />
<script type="text/javascript" charset="utf-8" src="js/cordova-2.7.0.js"></script>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquerymobile-1.3.2min.js"></script>

Android: Twitter link is not working in phonegap app

I am new to phonegap app development. In my app I had embedded twitter timeline feed using following script in my html page:
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s)[0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
The script is working fine, and it gave the results also. Below is the screenshot:
But, when click on image link or image: which is as follows, it opens blank:
Here, is the link:
pic.twitter.com/CJMo0nyFmH
I tried to open the link on my mobile's browser, and it worked perfectly. But, same is not working in app. Please help.
Update:
This is my html page:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>info</title>
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="themes/f.css" rel="stylesheet" type="text/css">
<link href="styles/dst_mobile.css" rel="stylesheet" type="text/css">
<link href="styles/jquery.zrssfeed.min.js" rel="stylesheet" type="text/css">
<link href="styles/jquery.zrssfeed.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="phonegap.js"></script>
<script src="code/jquery.zrssfeed.min.js" type="text/javascript"></script>
<!--<script type="text/javascript">
$(document).ready(function () {
$('#news').rssfeed('http://dstinc1913.wordpress.com/category/News/feed/', {
limit: 10,
});
});
</script>-->
</head>
<body>
<div align="center">
<div data-role="page" id="info" data-theme="c">
<div data-role="header" data-theme="a">
<h1>News</h1>
Home
</div>
<div data-role="content">
<div><a class="twitter-timeline" href="https://twitter.com/DSTinc1913" data-widget-id="350541068783210496">Tweets by #DSTinc1913</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
</div>
</body>
</html>

Here's the Fiddle.
I did no change in codes, Its working for me !! ?
What's the issue here !?
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>info</title>
<link href="jquery-mobile/jquery.mobile.theme-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="jquery-mobile/jquery.mobile.structure-1.0.min.css" rel="stylesheet" type="text/css"/>
<link href="themes/f.css" rel="stylesheet" type="text/css">
<link href="styles/dst_mobile.css" rel="stylesheet" type="text/css">
<link href="styles/jquery.zrssfeed.min.js" rel="stylesheet" type="text/css">
<link href="styles/jquery.zrssfeed.css" rel="stylesheet" type="text/css">
<script src="jquery-mobile/jquery-1.6.4.min.js" type="text/javascript"></script>
<script src="jquery-mobile/jquery.mobile-1.0.min.js" type="text/javascript"></script>
<script src="phonegap.js"></script>
<script src="code/jquery.zrssfeed.min.js" type="text/javascript"></script>
<!--<script type="text/javascript">
$(document).ready(function () {
$('#news').rssfeed('http://dstinc1913.wordpress.com/category/News/feed/', {
limit: 10,
});
});
</script>-->
</head>
<body>
<div align="center">
<div data-role="page" id="info" data-theme="c">
<div data-role="header" data-theme="a">
<h1>News</h1>
Home
</div>
<div data-role="content">
<div><a class="twitter-timeline" href="https://twitter.com/DSTinc1913" data-widget-id="350541068783210496">Tweets by #DSTinc1913</a>
<script>!function(d,s,id){var js,fjs=d.getElementsByTagName(s) [0],p=/^http:/.test(d.location)?'http':'https';if(!d.getElementById(id)){js=d.createElement(s);js.id=id;js.src=p+"://platform.twitter.com/widgets.js";fjs.parentNode.insertBefore(js,fjs);}}(document,"script","twitter-wjs");</script>
</div>
</div>
</div>
</div>
</body>
</html>
EDIT : Use this code to open links in childbrowser. This may help.
<!DOCTYPE html>
<html>
<head>
<title>InAppBrowser.removeEventListener Example</title>
<script type="text/javascript" charset="utf-8" src="cordova.js"></script>
<script type="text/javascript" charset="utf-8">
// Wait for device API libraries to load
//
document.addEventListener("deviceready", onDeviceReady, false);
// Global InAppBrowser reference
var iabRef = null;
function iabLoadStart(event) {
//alert(event.type + ' - ' + event.url);
}
function iabLoadStop(event) {
alert(event.type + ' - ' + event.url);
}
function iabLoadError(event) {
alert(event.type + ' - ' + event.message);
}
function iabClose(event) {
//alert(event.type);
iabRef.removeEventListener('loadstart', iabLoadStart);
iabRef.removeEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.removeEventListener('exit', iabClose);
}
// device APIs are available
//
function onDeviceReady() {
}
function inappbrowser()
{
iabRef = window.open('http://google.com', '_blank', 'location=yes');
iabRef.addEventListener('loadstart', iabLoadStart);
iabRef.addEventListener('loadstop', iabLoadStop);
iabRef.removeEventListener('loaderror', iabLoadError);
iabRef.addEventListener('exit', iabClose);
}
</script>
</head>
<body>
<h1>
THis is demo for the inappbrowser
<button onclick="inappbrowser()" type="submit">Click me</button>
</h1>
</body>
</html>

Categories

Resources