Twitter Bootstrap and Jsf - How to integrate the Fuel UX wizard.js - html

I want to include the fuelUx wizard into my jsf/java project. However, I am struggeling to convert the component into jsf:
<!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"
xmlns:h="http://java.sun.com/jsf/html"
xmlns:f="http://java.sun.com/jsf/core"
xmlns:ui="http://java.sun.com/jsf/facelets"
xmlns:p="http://primefaces.prime.com.tr/ui">
<h:head>
<title>Title</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta name="description" content="" />
<meta name="author" content="" />
<!-- Le styles -->
<link href="css/bootstrap.css" rel="stylesheet" type="text/css" />
<link href="css/bootstrap-responsive.css" rel="stylesheet"
type="text/css" />
<link href="css/override.css" rel="stylesheet" type="text/css" />
<link href="dist/css/fuelux.css" rel="stylesheet" type="text/css" />
<link href="dist/css/fuelux-responsive.css" rel="stylesheet"
type="text/css" />
<link href="dist/css/fuelux.min.css" rel="stylesheet" type="text/css" />
<link href="dist/css/fuelux-responsive.min.css" rel="stylesheet"
type="text/css" />
<!-- Le HTML5 shim, for IE6-8 support of HTML5 elements -->
<!--[if lt IE 9]>
<script src="http://html5shim.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
<!-- Le fav and touch icons
<link rel="shortcut icon" href="../assets/ico/favicon.ico">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="../assets/ico/apple-touch-icon-114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="../assets/ico/apple-touch-icon-72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="../assets/ico/apple-touch-icon-57-precomposed.png">
-->
<h:outputScript name="js/require.js" />
<script>
//<![CDATA[
requirejs.config({
paths: {
'jquery': 'lib/jquery',
'underscore': 'http://cdnjs.cloudflare.com/ajax/libs/underscore.js/1.3.3/underscore-min',
'bootstrap': 'lib/bootstrap/js',
'fuelux': 'src'
}
});
require(['jquery', 'sample/data', 'sample/datasource', 'sample/datasourceTree', 'fuelux/all'], function ($, sampleData, StaticDataSource, DataSourceTree) {
// WIZARD
$('#MyWizard').on('change', function(e, data) {
console.log('change');
if(data.step===3 && data.direction==='next') {
// return e.preventDefault();
}
});
$('#MyWizard').on('changed', function(e, data) {
console.log('changed');
});
$('#MyWizard').on('finished', function(e, data) {
console.log('finished');
});
$('#btnWizardPrev').on('click', function() {
$('#MyWizard').wizard('previous');
});
$('#btnWizardNext').on('click', function() {
$('#MyWizard').wizard('next','foo');
});
$('#btnWizardStep').on('click', function() {
var item = $('#MyWizard').wizard('selectedItem');
console.log(item.step);
});
$('#MyWizard').on('stepclick', function(e, data) {
console.log('step' + data.step + ' clicked');
if(data.step===1) {
// return e.preventDefault();
}
});
});
//]]>
</script>
</h:head>
<h:body>
<div class="container">
<!-- WIZARD -->
<div>
<div id="MyWizard" class="wizard">
<ul class="steps">
<li data-target="#step1" class="active"><span
class="badge badge-info">1</span>Step 1<span class="chevron"></span></li>
<li data-target="#step2"><span class="badge">2</span>Step 2<span
class="chevron"></span></li>
<li data-target="#step3"><span class="badge">3</span>Step 3<span
class="chevron"></span></li>
<li data-target="#step4"><span class="badge">4</span>Step 4<span
class="chevron"></span></li>
<li data-target="#step5"><span class="badge">5</span>Step 5<span
class="chevron"></span></li>
</ul>
<div class="actions">
<button class="btn btn-mini btn-prev">
<i class="icon-arrow-left"></i>Prev
</button>
<button class="btn btn-mini btn-next" data-last="Finish">
Next<i class="icon-arrow-right"></i>
</button>
</div>
</div>
<div class="step-content">
<div class="step-pane active" id="step1">This is step 1</div>
<div class="step-pane" id="step2">This is step 2</div>
<div class="step-pane" id="step3">This is step 3</div>
<div class="step-pane" id="step4">This is step 4</div>
<div class="step-pane" id="step5">This is step 5</div>
</div>
<h:button type="button" class="btn btn-mini" id="btnWizardPrev"
value="prev" />
<h:button type="button" class="btn btn-mini" id="btnWizardNext"
value="next" />
<h:button type="button" class="btn btn-mini" id="btnWizardStep"
value="current step" />
</div>
</div>
<!--/.fluid-container-->
<!-- Le javascript
================================================== -->
<!-- Placed at the end of the document so the pages load faster -->
<h:outputScript name="js/jquery-1.7.2.min.js" />
<h:outputScript name="js/bootstrap.min.js" />
<h:outputScript name="js/jquery.dataTables.min.js" />
<h:outputScript name="js/bootstrap.js" />
</h:body>
</html>
When I tested the component on a clear html page, whithout jsf, I saw that I had to include to make it work:
<html lang="en" class="fuelux">
However, I think thats not possible in jsf. Therefore, how to implement the component in jsf? I appreciate your answer!!!

If you're unable to include that class in your markup, you could try doing the following with jQuery:
$('html').addClass('fuelux');

Related

Removing the empty space top of the page

I want to remove the empty space above the login page. I have no idea which place to come to this space. I add a login page in my mvc project and by default have empty space on the top of the page. I want to remove that empty space on top of the page.
See this reference:
checkLogin.cshtml
#{
ViewBag.Title = "checkLogin";
}
#using (Html.BeginForm("checkLogin", "Home", FormMethod.Post))
{
<div class="limiter">
<div class="container-login100">
<div class="wrap-login100">
<form class="login100-form validate-form">
<span class="login100-form-title p-b-26">
kosmoanuaf
</span>
<span class="login100-form-title p-b-48">
<i class="zmdi zmdi-eye"></i>
</span>
<div class="wrap-input100 validate-input" data-validate="Valid email is: a#b.c">
<span class="btn-show-pass">
<i class="glyphicon glyphicon-envelope"></i>
</span>
<input class="input100" type="text" name="username" required/>
<span class="focus-input100" data-placeholder="Email"></span>
</div>
<div class="wrap-input100 validate-input" data-validate="Enter password">
<span class="btn-show-pass">
<i class="zmdi zmdi-eye"></i>
</span>
<input class="input100" type="password" name="password" required/>
<span class="focus-input100" data-placeholder="Password"></span>
</div>
<div class="container-login100-form-btn">
<div class="wrap-login100-form-btn">
<div class="login100-form-bgbtn"></div>
<button class="login100-form-btn">
Login
</button>
</div>
</div>
</form>
</div>
</div>
</div>
}
_Layout.cshtml (master page)
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="~/Content/bootstrap.css" rel="stylesheet" />
<link href="~/Content/font-awesome.css" rel="stylesheet" />
<link href="~/Content/custom.css" rel="stylesheet" />
<link href='https://fonts.googleapis.com/css?family=Open+Sans' rel='stylesheet' type='text/css' />
<link href="~/Content/Site.css" rel="stylesheet" type='text/css' />
#*login page*#
<link rel="icon" type="image/png" href="images/icons/favicon.ico" />
<link href="~/Content/bootstrap.min.css" rel="stylesheet" type="text/css" />
<link href="~/fonts/font-awesome-4.7.0/css/font-awesome.min.css" rel="stylesheet" type="text/css" />
<link href="~/fonts/iconic/css/material-design-iconic-font.min.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/animate/animate.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/css-hamburgers/hamburgers.min.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/animsition/css/animsition.min.css" rel="stylesheet" type="text/css" />
<link href="~/vendor/daterangepicker/daterangepicker.css" type="text/css" rel="stylesheet" />
<link href="~/vendor/select2/select2.min.css" rel="stylesheet" type="text/css" />
<link href="~/Content/util.css" rel="stylesheet" type="text/css" />
<link href="~/Content/main.css" rel="stylesheet" type="text/css" />
</head>
<body>
<script src="~/Scripts/jquery-1.10.2.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/Scripts/jquery.metisMenu.js"></script>
<script src="~/Scripts/custom.js"></script>
#RenderBody()
#*login page*#
<div id="dropDownSelect1"></div>
<script src="~/vendor/jquery/jquery-3.2.1.min.js"></script>
<script src="~/vendor/animsition/js/animsition.min.js"></script>
<script src="~/vendor/bootstrap/js/popper.js"></script>
<script src="~/Scripts/bootstrap.min.js"></script>
<script src="~/vendor/select2/select2.min.js"></script>
<script src="~/vendor/daterangepicker/moment.min.js"></script>
<script src="~/vendor/daterangepicker/daterangepicker.js"></script>
<script src="~/vendor/countdowntime/countdowntime.js"></script>
<script src="~/Scripts/main.js"></script>
#Scripts.Render("~/bundles/jquery")
#Scripts.Render("~/bundles/bootstrap")
#RenderSection("scripts", required: false)
</body>
</html>
site.css
body {
padding-top: 50px;
padding-bottom: 20px;
}
/* Set padding to keep content from hitting the edges */
.body-content {
padding-left: 15px;
padding-right: 15px;
}
/* Override the default bootstrap behavior where horizontal description lists
will truncate terms that are too long to fit in the left column
*/
.dl-horizontal dt {
white-space: normal;
}
/* Set width on the form input elements since they're 100% wide by default */
input,
select,
textarea {
max-width: 280px;
}
How to remove the empty space top of the page? Which place do I need to do correction?
I think here is the issue that I can see in css of body.
try it:
body {
padding-top: 0;
padding-bottom: 20px;
}
set padding-top to 0 for body or simply remove it.

Different CSS for subpage doesn't load [duplicate]

I have a Header File by the name header.php which goes like this :
It is inside a folder called includes so the path is includes/header.php
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN"
"http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html dir="ltr" lang="en-US" xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
<title>***</title>
<link rel='stylesheet' href='../_layout/scripts/jquery.fullcalendar/fullcalendar.css' type='text/css' media='screen' />
<link rel='stylesheet' href='../_layout/scripts/jquery.fullcalendar/fullcalendar.print.css' type='text/css' media='print' />
<!-- Styles -->
<link rel='stylesheet' href='style.css' type='text/css' media='all' />
<!--[if IE]>
<link rel='stylesheet' href='../_layout/IE.css' type='text/css' media='all' />
<![endif]-->
<!-- Fonts -->
<link href='http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|PT+Sans+Narrow:regular,bold|Droid+Serif:i&v1' rel='stylesheet' type='text/css' />
<script type='text/javascript' src='../../../ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min97e1.js?ver=1.7'></script>
<!-- WYSISYG Editor -->
<script type='text/javascript' src='../_layout/scripts/nicEdit/nicEdit.js'></script>
<!-- Forms Elemets -->
<script type='text/javascript' src='../_layout/scripts/jquery.uniform/jquery.uniform.min.js'></script>
<link rel='stylesheet' href='../_layout/scripts/jquery.uniform/uniform.default.css' type='text/css' media='screen' />
<!-- Scripts -->
<script type='text/javascript' src='../_layout/custom.js'></script>
</head>
<body>
<div id="layout">
<div id="header-wrapper">
<div id="header">
<div id="user-wrapper" class="fixed">
<div class="color-scheme">
</div>
<div class='user'>
<?php
if($_SESSION['user'] != 'NULL')
{
?>
<img src="../_content/user-img.png" alt="" />
<span>Welcome Admin <?PHP echo $_SESSION['user']; ?></span>
<span class="logout">Logout</span>
<?php
}
?>
</div>
</div>
<div id="launcher-wrapper" class="fixed"><img src="../_layout/images/NGBU Logo.png" width="68" height="81" alt="logo" style="margin-left:35px;" /> <img src="../_content/NGBU_logo.png" width="777" height="57" alt="logo" longdesc="http://index.php" style="margin-top: 25px; float: left; margin-left: 25px;"/></div>
</div>
</div>
I am calling this file at the beginning of my Index.php but for some reasons its not rendering from the hosted server although it is being rendered when i was testing it under localhost?
My index.php which is inside a folder admin goes like :
<?PHP
session_start();
ob_start();
$_SESSION['user'] = "NULL";
$_SESSION['password'] = "";
$_SESSION['error'] = 0;
include_once("../includes/header.php");
if(!$_SESSION['error'])
$_SESSION['error'] = "Please Login to Continue";
?>
<?PHP
if(isset($_REQUEST['check']))
{
if(!$_REQUEST['User'] == "")
{
if(!$_REQUEST['Password'] == "")
{
$_SESSION['user'] = $_REQUEST['User'];
$_SESSION['password'] = $_REQUEST['Password'];
unset($_SESSION['error']);
header('Location: checklogin.php');
}
else
{
$_SESSION['error'] = "<FONT color='#FF0000'>Both fields are required</FONT>";
}
}
else
{
$_SESSION['error'] = "<FONT color='#FF0000'>Both fields are required</FONT>";
}
}
?>
<DIV class="page fixed">
<DIV id="sidebar" style="height:400px; width:250px; margin-left:5px;"> </DIV>
<DIV id="content">
<?PHP
echo "<h1 style='margin-left:150px;' >".$_SESSION['error']."</h1>";
?>
<FORM action="index.php" method="post" name="loginfrm" class="form-elements-inputs" style="margin-left:150px;width:90px;">
<INPUT class="normal" type="text" name="User" value="User Name" /><BR />
<INPUT class="normal" type="password" name="Password" value="Password" /><BR />
<INPUT type="hidden" name="check" value="login" />
<INPUT type="submit" value="Login" class="button-orange" style="width:100px; margin:auto;" />
</FORM>
</DIV>
</DIV>
</div>
</BODY>
</HTML>
The style.css file is sitting right next to header.php in includes folder then why it is not being applied?
While checking through firebug in mozilla its showing me this output :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 2.0//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html lang="en-US" xmlns="http://www.w3.org/1999/xhtml" dir="ltr">
<head>
<title>***</title>
<link type="text/css" href="style.css" rel="stylesheet">
<html><head>
<title>404 Not Found</title>
</head><body>
<h1>Not Found</h1>
<p>The requested URL /style.css was not found on this server.</p>
<p>Additionally, a 404 Not Found
error was encountered while trying to use an ErrorDocument to handle the request.</p>
<hr>
<address>Apache Server at www.***.com Port 80</address>
</body></html>
</link>
<link media="screen" type="text/css" href="scripts/jquery.fullcalendar/fullcalendar.css" rel="stylesheet">
<link media="print" type="text/css" href="scripts/jquery.fullcalendar/fullcalendar.print.css" rel="stylesheet">
<link media="screen" type="text/css" href="scripts/jquery.uniform/uniform.default.css" rel="stylesheet">
<link type="text/css" rel="stylesheet" href="http://fonts.googleapis.com/css?family=Droid+Sans:regular,bold|PT+Sans+Narrow:regular,bold|Droid+Serif:i&v1">
<script src="../../../ajax.googleapis.com/ajax/libs/jquery/1.7/jquery.min97e1.js?ver=1.7" type="text/javascript">
<script src="../_layout/scripts/nicEdit/nicEdit.js" type="text/javascript">
<script src="../_layout/scripts/jquery.uniform/jquery.uniform.min.js" type="text/javascript">
<script src="../_layout/custom.js" type="text/javascript">
</head>
<body>
</html>
Why there is a 404 not found error when the path is correct?
Please help
You're including ../include/header.php and style.css is there too, namely ../include/style.css. So, you must either use the same relative path or an absolute path to your css /include/style.css.
The link to your CSS file should be relative to the URL of the page you are viewing.
For example, if you view your page at example.com, you must reference the CSS file with example.com/includes/style.css.
Maybe it's better to test with header.php absolute path first.
Also path of your scripts and style sheets should be relative to index.php not header.
(Sorry for bad English)

i have a slide show code in HTML, but when using chrome or mozzila sometimes when refreshing the page all the images get stacked

i am trying to make a slidehsow using HTML+ CSS
but when using chrome or mozzila sometimes when refreshing the page all the images get stacked
works fine on IE.
enter code here:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1- strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>A.R.Grada</title>
<link data-turbolinks-track="true" href="/assets/custom.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/inscricaos.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/scaffolds.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/static_page.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/users.css?body=1" media="all" rel="stylesheet" />
<link data-turbolinks-track="true" href="/assets/application.css?body=1" media="all" rel="stylesheet" />
<script data-turbolinks-track="true" src="/assets/jquery.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/jquery_ujs.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/turbolinks.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/inscricaos.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/slideShow.js?body=1"></script>
<script data-turbolinks-track="true" src="/assets/application.js?body=1"></script>
<meta content="authenticity_token" name="csrf-param" />
<meta content="b/G7IFct+anugyX+DeDZhI5xYSzmREjC2Y2uPXx7HHA=" name="csrf-token" />
<!--[if lt IE 9]>
<script src="//cdnjs.cloudflare.com/ajax/libs/html5shiv/r29/html5.min.js">
</script>
<![endif]-->
</head>
<body>
<header class="navbar navbar-fixed-top navbar-inverse">
<div class="container">
Associação Recreativa de Grada
<nav>
<ul class="nav navbar-nav pull-right">
<li>Pagina inicial</li>
<li>Mapa</li>
<li>xxx</li>
</ul>
</nav>
</div>
</header>
<div class="container">
<div class="center jumbotron">
<div id="slideShowImages" class="slideshow">
<img alt="1" src="/assets/1.jpg" />
<img alt="2" src="/assets/2.jpg" />
<img alt="3" src="/assets/3.jpg" />
<img alt="4" src="/assets/4.jpg" />
<img alt="5" src="/assets/5.jpg" />
<img alt="6" src="/assets/6.jpg" />
</div>
<script src="slideShow.js"></script>
</h2>
|Inscrição |
| Lista incritos|
</div>
<div class="logo">
</h1>
<img alt="xxx_logo" src="/assets/logo.png" />
</div>
<footer class="footer">
<nav>
<ul>
<li>About</li>
<li>Contact</li>
<li>News</li>
</ul>
</nav>
</footer>
</div>
</body>
</html>
CSS code:
.slideshow
{
background-colour:#F5F5F5; border:1px solid #FFFFFF; height:340px; margin:150px auto 0; position:relative; width:640px; -moz-box-shadow:0 0 22px #111; -webkit-box-shadow:0 0 22px #111; box- shadow:0 0 22px #111;
}
The images become stacked on above anothe. to resolve the issue i must press CTRL F5.
i can not upload a imge so i try to explain with this:
it look like that:
image1
image2
image3
image4
it should look like that
image1
wait 1 sec
image2
...
Try to hide the images using CSS first. The page must not have been loaded fully for the script to run.

MVC mobile page title is changing to null/empty

I have a mobile web site used with MVC 4.0 Razor Mobile version and HTML 5. When i call a page on browser or submit form page title not shown. Also it comes in view but after 1 second, it is going to null. When clicking a url in page title is coming. How can I stop changing page title to empty?
My layout page:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<title>#Html.Raw(ViewBag.Title)</title>
<meta name="description" #Html.Raw("content=\"" + ViewBag.Description + "\"") />
<meta name="keywords" #Html.Raw("content=\"" + ViewBag.Keywords + "\"") />
<meta name="viewport" content="width=device-width" />
<link href="~/favicon.ico" rel="shortcut icon" type="image/x-icon" />
<link rel="stylesheet" href="/Content/jquery.mobile-1.4.0.min.css" />
<script src="/Scripts/jquery-1.10.2.min.js" type="text/javascript"></script>
<script src="/Scripts/jquery.mobile-1.4.0.min.js" type="text/javascript"></script>
#RenderSection("scripts", required: false)
<script src="~/Scripts/myjs.js" type="text/javascript"></script>
<link href="/Content/mycss.css" rel="stylesheet"/>
</head>
<body>
<div data-role="page" data-theme="a" id="layout-page">
<div data-role="header" >
<h1>
<a style="background:none;border:none;" href="http://m.sozcukcevir.com"><img style="height:40px;border:0" src="/Content/images/logo-mobile.png" alt="sözcük çevir" /></a> </h1>
Menu
</div>
<div data-role="content">
#RenderBody()
</div>
<div data-role="panel" id="right-panel" data-display="push" data-position="right" data-theme="a">
<ul data-role="listview" data-inset="true">
<li>Kelime Çeviri</li>
<li>Metin Çeviri</li>
<li data-icon="audio">Okunuşu Dinle</li>
<li data-icon="gear">Ayarlar</li>
<li data-icon="delete">Kapat</li>
</ul>
</div>
<div data-role="footer" data-theme="b">
<div data-role="navbar" data-theme="c">
<ul data-theme="c">
<li data-theme="c">Sözlük</li>
<li data-theme="c">Metin Çeviri</li>
<li data-theme="c">Dinle</li>
</ul>
</div>
</div>
</div>
<script>
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
});
</script>
<!-- analytics --><!-- analytics -->
</body>
</html>
Page : http://m.sozcukcevir.com

Connecting To Restful WCF Web Service and Jquery Mobile/HTML

I have created a small web application which i am trying to connect to my web service. For some reason, i am receiving the error '200'.
The functionality is simple:
1) The user enters a value (product number) on the Home.html page.
2) The service is called and performs a search based on the value entered.
3) If a result is found, output the product number on the SearchResult.html page.
Home.html
<!DOCTYPE html>
<!--[if IEMobile 7 ]> <html class="no-js iem7"> <![endif]-->
<!--[if (gt IEMobile 7)|!(IEMobile)]><!--> <html class="no-js"> <!--<![endif]-->
<head>
<meta charset="utf-8">
<title></title>
<meta name="description" content="">
<meta name="HandheldFriendly" content="True">
<meta name="MobileOptimized" content="320">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta http-equiv="cleartype" content="on">
<link rel="apple-touch-icon-precomposed" sizes="144x144" href="img/touch/apple-touch-icon-144x144-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="114x114" href="img/touch/apple-touch-icon-114x114-precomposed.png">
<link rel="apple-touch-icon-precomposed" sizes="72x72" href="img/touch/apple-touch-icon-72x72-precomposed.png">
<link rel="apple-touch-icon-precomposed" href="img/touch/apple-touch-icon-57x57-precomposed.png">
<link rel="shortcut icon" href="img/touch/apple-touch-icon.png">
<!-- Tile icon for Win8 (144x144 + tile color) -->
<meta name="msapplication-TileImage" content="img/touch/apple-touch-icon-144x144-precomposed.png">
<meta name="msapplication-TileColor" content="#222222">
<script src="js/vendor/modernizr-2.6.1.min.js"></script>
<link href="StyleSheet.css" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.1/jquery.mobile-1.1.1.min.js"> </script>
</head>
<body>
<header class="Navigation">
<div class="headerImage"><img src="images/logo-small.png" alt="Home"/</div>
</header>
<div id="product" class="Banner">
Product Search
</div>
<br />
<div class="nine-tenths">
Please enter a product number.
</div>
<input id="productNum" class="productNum" type="text" placeholder="Enter Product Number"/>
<br />
<button type="button" id="btnSearch" onclick="btnSearch()">Search</button>
<script src="js/main.js"></script>
</body>
main.JS
function btnSearch() {
// document.location.href = 'SearchResult.html';
var productNum= $("#productNum").val();
alert(productNum);
var ajaxSearch = "http://localhost:8008/Product/ProductList/GetProduct.php?prod_num?" + productNum;
alert(ajaxSearch);
$.ajax(ajaxSearch,
{
beforeSend: function (xhr) {
// $.mobile.showPageLoadingMsg();
},
complete: function () {
// $.mobile.hidePageLoadingMsg();
},
contentType: 'application/json',
dataType: 'jsonp',
jsonp: 'callback',
type: 'GET',
error: function (xhr, ajaxOptions, thrownError) {
alert(xhr.status);
alert(xhr.responseText);
//alert(thrownError);
},
success: function (data) {
var result = data.GetEmployeeListingResult;
$.each(result, function (index, output) {
$('#EmployeeList').append('<li> <a href=SearchResult.html?productNum=' + output.prod + '> </a> .....</li>');
});
//$('#EmployeeList').listview('refresh');
}
});
}
SearchResult.html
<table style="width:100%;" class="searchResultFound">
<tr>
<td style="width: 10%;">
<img src="images/resultFound.png" align="left">
</td>
<td>
<input id="productNum" type="text" class="no-outline " disabled="disabled" value="">
<label>Was found</label>
</td>
</tr>
</table>
<table style="width:100%;" class="searchResultNotFound">
<tr>
<td style="width: 10%;">
<img src="images/resultNotFound.png" align="left">
</td>
<td>
<input id="productNum" type="text" class="no-outline " disabled="disabled" value="">
<label>Was not found</label>
</td>
</tr>
</table>
I have tried using this site as an example (why you may see references to Employee's):
http://wrvishnu.wordpress.com/2012/07/29/step-by-step-tutorial-restful-wcf-web-service-and-jquery-mobile/
Thanks
declaration of URL is wrong in main.js.. 'prod_num',
use "'GetProduct.php?prod_num=' + productNum"
instead of "'GetProduct.php?prod_num?' + productNum"
try using this:
var ajaxSearch = "http://localhost:8008/Product/ProductList/GetProduct.php?prod_num=" + productNum;