i have downloaded a ganttChart library from here
(https://github.com/thegrubbsian/jquery.ganttView) and added to my application after that i have created a html file like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>TITLE</title>
<script language="javascript" type="text/javascript" src="jquery-1.4.2.js">
</script>
<script language="javascript" type="text/javascript" src="jquery-ui-1.8.4.js">
</script>
<script type="text/javascript" src="jquery.ganttView.js"></script>
<script language="javascript" type="text/javascript" src="date.js"></script>
<script language="javascript" type="text/javascript" src="data.js"></script>
<link type="text/css" href="jquery.ganttView.css" rel="stylesheet"/>
</head>
<body>
<div id="Pluginwrapper">
<div id="Plugincontainer"></div>
</div>
</body>
</html>
then i am loading this html file via webview like this
[webview loadRequest:[NSURLRequest requestWithURL:[NSURL fileURLWithPath:[[NSBundle
mainBundle] pathForResource:#"sample" ofType:#"html"] isDirectory:NO]]];
but webview doesn't show anything. please tell what i am missing?
The web view doesn't show anything because you haven't added any visible content to the page, just markup.
If you're looking for your plugin to generate you some output, you should look at it's example files.
Related
Getting this error $(..).tabs not a function.
here are my imports
<link rel="stylesheet" href="css/jquery-ui-1.10.4.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="js/home.js"></script>
Can you help debugging that.
JSP FILE
<%# page language="java" contentType="text/html; charset=ISO-8859-1"
pageEncoding="ISO-8859-1"%>
<%# taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%# taglib uri="http://java.sun.com/jsp/jstl/functions" prefix="fn" %>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=ISO-8859-1">
<title>Login to Web Service Details Tool</title>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.9.2.custom.js"></script>
<script type="text/javascript" src="js/home.js"></script>
<link rel="stylesheet" href="css/jquery-ui-1.9.2.custom.css" type="text/css"></link>
</head>
<body>
<div id="tabs">
<ul>
<li>Overview</li>
<li>Web Service Dashboard</li>
<li>Console</li>
</ul>
<div id="tabs1">
<jsp:include page="overview.jsp" />
</div>
<div id="tabs2">
<jsp:include page="dashboard.jsp"/>
</div>
<div id="tabs3">
<jsp:include page="menu.jsp" />
</div>
</div>
<br><br>
This was working until today, i don't know why it stopped working & console is throwing me error tabs is not defined function
The structure would need to look like this:
page.html
-js (folder)
--jquery-2.1.1.js
--jquery-ui-1.10.4.js
The html file would then have the references as you've show above:
<link rel="stylesheet" href="css/jquery-ui-1.10.4.css" type="text/css"></link>
<script type="text/javascript" src="js/jquery-2.1.1.js"></script>
<script type="text/javascript" src="js/jquery-ui-1.10.4.js"></script>
<script type="text/javascript" src="js/home.js"></script>
You could also use chrome dev tools (F12) to check if the resources have loaded
NOTE: if you're home.js is using any jquery functionality, this file should always be added after the jquery files.
EDIT: based on comment
make sure you're using it like $("#name").tabs(); and not $("#name").tabs;
I had included jquery.js in one of the included jsp page which was causing the issue & the browser was not able to load the jquery files.
I have main html:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0" />
<title>Home</title>
<link rel="stylesheet" href="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/Home.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<link rel="stylesheet" href="css/theme-addon.css" type="text/css" media="screen" title="no title" charset="utf-8" />
<script src="js/jquery-1.7.2.min.js" type="text/javascript" charset="utf-8"></script>
<script src="js/jquery.mobile-1.2.0/jquery.mobile-1.2.0.min.js" type="text/javascript" charset="utf-8"></script>
</head>
<body id="content" style="display: none">
<div data-role="page" id="homePage">
<div data-role="header"><div class="ui-title">Home</div></div>
<div data-role="content" style="text-align: center">
<a data-role="button" id="login" class="fullWidth">Login</a>
</div>
</div>
<script src="js/initOptions.js"></script>
<script src="js/Home.js" type="text/javascript" charset="utf-8"></script>
<script src="js/messages.js"></script>
</body>
Then in Home.js:
// Worklight comes with the jQuery framework bundled inside. If you do not want to use it, please comment out the line below.
window.$ = window.jQuery = WLJQ;
function wlCommonInit(){
// Common initialization code goes here
}
$("#homePage").live('pagecreate', function(event,ui) {
$('#login').click(function(){
$.mobile.changePage($('#nextPage.html'));
});
});
When I tap on login button, it gives error $.mobile is undefined on this line:
$.mobile.changePage($('#nextPage.html'));
Is there anyone can give insight what's wrong with my code? I believe I do the right things? In addition, I use 5.0.2.407-developer-edition Worklight version.
Finally I solved this issue by:
<script src="js/jquery-1.9.1.min.js" type="text/javascript" charset="utf-8"></script>
<script>
var jq = jQuery.noConflict();
</script>
<script src="js/jquery.mobile-1.3.1/jquery.mobile-1.3.1.min.js" type="text/javascript" charset="utf-8"></script>
and later in js:
jq.mobile.changePage("the.html");
instead of
$.mobile.changePage("the.html");
Worklight is already bundled with jQuery, so you shouldn't add it a second time as you did at the bottom of the HTML. Also, you shouldn't place it at the bottom anyway, rather in the HEAD - remove that line.
Additionally, move the reference to jQuery Mobile to the HEAD a as well.
Using Worklight 5.0.6.1 (the latest version, which you seem not to use) and jQuery Mobile 1.3.1, I created a new project and application, and modified the HTML as follows:
<!DOCTYPE HTML>
<html>
<head>
<meta charset="UTF-8">
<title>testapp</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0, user-scalable=0">
<link rel="shortcut icon" href="images/favicon.png">
<link rel="apple-touch-icon" href="images/apple-touch-icon.png">
<link rel="stylesheet" href="css/testapp.css">
<script src="jqueryMobile/jquery.mobile-1.3.1.min.css"></script>
<script src="jqueryMobile/jquery.mobile-1.3.1.min.js"></script>
<script>window.$ = window.jQuery = WLJQ;</script>
</head>
<body id="content" style="display: none;">
<div data-role="page">
testapp
</div>
<script src="js/initOptions.js"></script>
<script src="js/testapp.js"></script>
<script src="js/messages.js"></script>
</body>
</html>
I place the minified .css and .js files in a folder, and referenced them inside the HEAD element.
I added inside the BODY element.
Build All and Deploy
Preview via Worklight Console
Works...
I suggest you start small like the above (including using the latest versions of Worklight and jQuery Mobile), and build on that (working) foundation).
You can get the latest version of Worklight from the Eclipse Marketplace (in Eclipse, look at the Help menu >> Marketplace).
I have to make a reward functionality for my customers.In this if any customer share, follow link of website then I have to store their details.Question Is that how can we get either user shared something or not.Any help would be appreciated.
I am using following code.
twitter.com/share?text=Your+Email+Marketing&url=http://blog.abc.com/your-email-marketing.html
I have found a solution using jquery.twitterbutton.js
code :-
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Untitled Document</title>
<script src="http://code.jquery.com/jquery-latest.pack.js" type="text/javascript"></script>
<script src="http://platform.twitter.com/widgets.js"></script>
<script src="jquery.twitterbutton.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$('#twitterbutton-example').twitterbutton({
user:'YourUsername',
title:'jQuery-Twitter-Button Plugin with callback functions',
onfollow:function(response){
$('.twitterbutton-uncontent:visible').hide('fade');
$('.twitterbutton-content').show('fade');
$.cookie('tw','followed');
},
ontweet:function(response){
alert("hello");
},
onretweet:function(response){
},
lang:'en'
});
});
</script>
</head>
<body>
<div id="twitterbutton-example"></div>
</body>
</html>
I'd like a page transition effect like the "slide" transition on jqmobile, but with the option of dragging between one page and the other.
I have the transition I want using this plug in the problem is that this plug in needs jqmobile and my project uses jquery ui extensively so dropping jq ui is not an option. Is there any way the two libreries can coexist? (or any other solution to have this kind of transition)
Here is the working code for my two pages.
page1:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<link href="css/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='Js/Libs/jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='Js/Libs/jquery.mobile-1.0b2.min.js'></script>
<script type='text/javascript' src='Js/Libs/jquery.mobile.pagination.js'></script>
</head>
<body>
PAGE1
<ul data-role="pagination">
<li class="ui-pagination-prev">Prev</li>
<li class="ui-pagination-next">Next</li>
</ul>
</body>
</html>
page 2:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<link href="css/jquery.mobile-1.0b2.min.css" rel="stylesheet" type="text/css" />
<link href="css/jquery.mobile.pagination.css" rel="stylesheet" type="text/css" />
<script type='text/javascript' src='Js/Libs/jquery-1.6.2.min.js'></script>
<script type='text/javascript' src='Js/Libs/jquery.mobile-1.0b2.min.js'></script>
<script type='text/javascript' src='Js/Libs/jquery.mobile.pagination.js'></script>
</head>
<body onload="">
<script type="text/javascript">
$('div').live('pageshow', function (event, ui) {
alert('This page was just hidden: ');
});
</script>
</body>
</html>
I am having a strange issue with trying to style a link as a JQuery UI button. It's showing up as a button in Chrome and as a link in Firefox and IE8.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<script type="text/javascript" src="script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.9.custom.min.js"></script>
<link rel="stylesheet" type="test/css" href="stylesheet/jquery-ui-1.8.9.custom.css">
<link rel="stylesheet" type="text/css" href="stylesheet/styles.css">
<script type="text/javascript">
$(document).ready(function(){
$("a").button();
});
</script>
<title>Introduction</title>
</head>
<body class="indexbody">
<div class="indexwrapper">
<div id="introduction">
<div class="btn">
<a href="test.html" >link</a>
</div>
</div>
</div>
</body>
</html>
It looks like there is an easy to miss typo in your CSS link element. The type attribute should be text/css, not test/css.
The x and s are just so close to each other.
<link rel="stylesheet" type="text/css"
href="stylesheet/jquery-ui-1.8.9.custom.css">
While Chrome adapted, the other browsers are more strict with their syntax. Chrome follows the Robustness Principle.
Finally, the order in which you load the CSS or JavaScript does not appear to matter. The link tag can come either before or after the script elements.
CSS comes first to JS inclusion, that should solve your problem.
<link rel="stylesheet" type="test/css" href="stylesheet/jquery-ui-1.8.9.custom.css">
<link rel="stylesheet" type="text/css" href="stylesheet/styles.css">
<script type="text/javascript" src="script/jquery-1.4.2.js"></script>
<script type="text/javascript" src="script/jquery-ui-1.8.9.custom.min.js"></script>