I use a ASP.NET MVC 4 project with JQuery, JQuery Mobile, etc.
This is my popup dialog that is in the same page of my main page.
<div data-role="popup" id="popupDialog" data-overlay-theme="a">
<div data-role="header">
<p id="headerMessage">Recherche de recettes</p>
</div>
<div data-role="content">
#using(Html.BeginForm("GetRecipes","Recipes",FormMethod.Post)){
<input id="classicSearchInput" name="classicSearchInput" type="text" />
<div id="buttonDialog">
<button id="okBtn" data-role="button" data-ajax="false" data-inline="true" data-rel="back" data-theme="c">OK</button>
<a id="cancelDialogBtn" href="#" data-role="button" data-inline="true" data-rel="back" data-theme="c">Cancel</a>
</div>
}
</div>
</div>
In my popup, when I click on the "OK" button, it's going well to the "GetRecipes" controller :
[HttpPost]
public ActionResult GetRecipes() {
String recipe = HttpContext.Request.Form["classicSearchInput"];
try{
var client = new FacebookClient((String)Session["accessToken"]);
}
catch (FacebookOAuthException foe){
Session["accessToken"] = "";
return RedirectToAction("Index", "Login");
}
catch (Exception ex){
Session["accessToken"] = "";
return RedirectToAction("Index", "Login");
}
List<Recipe> recipeList = new List<Recipe>();
using (Entities entitie = new Entities()) {
String recipeSearched = recipe.Replace("é", "e").Replace("è", "e").Replace("ê", "e").Replace("à", "a").ToLower();
recipeList = entitie.Recipes
.Include("Votings")
.Include("SocialNetworkClient")
.Where(a =>
a.title.Replace("é", "e").Replace("è", "e").Replace("ê", "e").Replace("à", "a").ToLower()
.Contains(recipeSearched))
.ToList();
ViewBag.previousPage = "/Home";
return View("~/Views/Recipes/Index.cshtml", recipeList);
}
}
I've no problem with the controller. But when the controller returns the view 'Recipes', there is a problem. It executes well the lines with #Styles and #Scripts but it doesn't execute the different stylesheets(RecipeLandscape.css, RecipePortrait.css,...) and the javascript below. It executes just the following line and that's all :
#Html.Partial("_RecipeList", Model.ToList())
/Views/Recipes/Index.cshtml :
#model IEnumerable<ICookApp.Models.Recipe>
<html>
<head>
#Styles.Render("~/Content/css")
#Scripts.Render("~/ScriptsJQuery")
#Styles.Render("~/ratingStarStyle")
#Scripts.Render("~/ratingStarScript")
<link href="#Url.Content("~/Content/css/RecipesLandscape.css")" media="screen and (orientation:landscape)" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/RecipesPortrait.css")" media="screen and (orientation:portrait)" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/HeaderPortrait.css")" media="screen and (orientation:portrait)" rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/css/HeaderLandscape.css")" media="screen and (orientation:landscape)" rel="stylesheet" type="text/css" />
<link rel="stylesheet" href="~/Content/css/All.css" />
<meta name="viewport" content="width=device-width" />
<script>
$(document).ready(function () {
$("div[title='recipe']").each(function () {
var val = parseInt($(this).find('input[type="hidden"]').val());
var t = $(this).children(".star").length;
});
$(".star").rating('readOnly', true);
});
</script>
<title>Index</title>
</head>
<body>
<div data-role="page" data-theme="b">
<div data-role="content">
#Html.Partial("_RecipeList", Model.ToList())
</div>
</div>
</body>
</html>
This is the strange print :
I would have to get this :
Do you have a solution ?
Thank you
Related
I want to ask for help from you guys, I have tried coding my javascript so that it doesn't display the results from the input but the results I get are actually messy, so I attach my code with the original version that I haven't edited and it's still tidy, but the input is still displayed in address bar in the web browser.
Next is my code version before revision: (JavaScript)
(function ($) {
"use strict";
/*==================================================================
[ Validate ]*/
var input = $('.validate-input .input100');
$('.validate-form').on('submit',function(){
var check = true;
for(var i=0; i<input.length; i++) {
if(validate(input[i]) == false){
showValidate(input[i]);
check=false;
}
}
return check;
});
$('.validate-form .input100').each(function(){
$(this).focus(function(){
hideValidate(this);
});
});
function validate (input) {
if($(input).attr('type') == 'email' || $(input).attr('name') == 'email') {
if($(input).val().trim().match(/^([a-zA-Z0-9_\-\.]+)#((\[[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.)|(([a-zA-Z0-9\-]+\.)+))([a-zA-Z]{1,5}|[0-9]{1,3})(\]?)$/) == null) {
return false;
}
}
else {
if($(input).val().trim() == ''){
return false;
}
}
}
function showValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).addClass('alert-validate');
}
function hideValidate(input) {
var thisAlert = $(input).parent();
$(thisAlert).removeClass('alert-validate');
}
/*==================================================================
[ Simple slide100 ]*/
$('.simpleslide100').each(function(){
var delay = 7000;
var speed = 1000;
var itemSlide = $(this).find('.simpleslide100-item');
var nowSlide = 0;
$(itemSlide).hide();
$(itemSlide[nowSlide]).show();
nowSlide++;
if(nowSlide >= itemSlide.length) {nowSlide = 0;}
setInterval(function(){
$(itemSlide).fadeOut(speed);
$(itemSlide[nowSlide]).fadeIn(speed);
nowSlide++;
if(nowSlide >= itemSlide.length) {nowSlide = 0;}
},delay);
});
})(jQuery);
please help me also to place it in the coding that I have made, apologize that I am still a beginner and I'm confused how to do it anymore, all the help will be appreciated :)
This is the HTML code:
<!DOCTYPE html>
<html lang="en">
<head>
<title>AN Newsletter | Subscribe</title>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!--===============================================================================================-->
<link rel="icon" type="image/png" href="images/icons/favicon.ico"/>
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/bootstrap/css/bootstrap.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/font-awesome-4.7.0/css/font-awesome.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="fonts/iconic/css/material-design-iconic-font.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/animate/animate.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="vendor/select2/select2.min.css">
<!--===============================================================================================-->
<link rel="stylesheet" type="text/css" href="css/util.css">
<link rel="stylesheet" type="text/css" href="css/main.css">
<!--===============================================================================================-->
</head>
<body>
<div class="flex-w flex-str size1 overlay1">
<div class="flex-w flex-col-sb wsize1 bg0 p-l-70 p-t-37 p-b-52 p-r-50 respon1">
<div class="wrappic1">
<a href="../main/index.html">
<img src="images/icons/logo.png" alt="IMG">
</a>
</div>
<div class="w-full p-t-100 p-b-90 p-l-48 p-l-0-md">
<h3 class="l1-txt1 p-b-34 respon3">
Post Box
</h3>
<p class="m2-txt1 p-b-46">
Follow me for update now!
</p>
<form class="contact100-form validate-form m-t-10 m-b-10" action="../success/success.html">
<div class="wrap-input100 validate-input m-lr-auto-lg" data-validate = "Email is required: ex#abc.xyz">
<input class="s2-txt1 placeholder0 input100 trans-04" type="text" name="email" placeholder="Email Address">
<button class="flex-c-m ab-t-r size2 hov1 respon5">
<i class="zmdi zmdi-long-arrow-right fs-30 cl1 trans-04"></i>
</button>
<div class="flex-c-m ab-t-l s2-txt1 size4 bor1 respon4">
<span>Subcribe Now:</span>
</div>
</div>
</form>
</div>
<div class="flex-w flex-m">
<span class="m2-txt2 p-r-40">
Follow me
</span>
<a href="https://www.facebook.com/stevenWilliamG" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-facebook"></i>
</a>
<a href="https://twitter.com/AdrikAleandra" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-twitter"></i>
</a>
<a href="https://www.instagram.com/audynaufal7/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-instagram"></i>
</a>
<a href="https://www.linkedin.com/in/audy-naufal-ghiffari-ceh-875072141/" class="size3 flex-c-m how-social trans-04 m-r-15 m-b-5 m-t-5">
<i class="fa fa-linkedin"></i>
</a>
</div>
</div>
<div class="wsize2 bg-img1 respon2" style="background-image: url('images/bg01.jpg');">
</div>
</div>
<!--===============================================================================================-->
<script src="vendor/jquery/jquery-3.2.1.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/bootstrap/js/popper.js"></script>
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/select2/select2.min.js"></script>
<!--===============================================================================================-->
<script src="vendor/tilt/tilt.jquery.min.js"></script>
<!--===============================================================================================-->
<script src="js/main.js"></script>
</body>
</html>
P.S:
please don't block me, I'm still new and I still have to learn this platform and I still have to work on my project, so I think this platform will be very useful for me to complete my project, thank you
If you are referring to browser address bar with result of your input email address that looks like this:
/success/success.html?email=xxxx
This is because you haven't specified the method of your form so form uses PHP GET, and this is normal to pass the values on other page.
If you do not want to display this data, you should specify your form submit method like this:
<form class="contact100-form validate-form m-t-10 m-b-10"
action="../success/success.html" method="POST">
Keep in mind you have to fetch data on other side as POST also.
Read more about this here.
Replace GET method with POST method.
Hi I am facing a very common issue in Javascript. The error is
Uncaught TypeError: $(...).dialog is not a function
But I am not able to understand why it is coming. I have already included all the files necessary. I will paste my code -
HTML File-
<head>
<meta charset="utf-8">
<!-- Always force latest IE rendering engine (even in intranet) & Chrome Frame
Remove this if you use the .htaccess -->
<meta http-equiv="X-UA-Compatible" content="IE=11">
<title>Landing Page</title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width; initial-scale=1.0">
<!--bootstrap-->
<link rel="stylesheet" href="styles/bootstrap.min.css" />
<!-- Replace favicon.ico & apple-touch-icon.png in the root of your domain and delete these references -->
<link rel="shortcut icon" href="/favicon.ico">
<link rel="apple-touch-icon" href="/apple-touch-icon.png">
<link rel="stylesheet" href="http://fonts.googleapis.com/css?family=Open+Sans:400italic,700italic,300,400,700">
<link rel="stylesheet" href="styles/checkhover.css" />
<link rel="stylesheet" href="styles/jquery-ui.css" />
<script type="text/javascript" src="scripts/jquery-3.1.0.min.js"></script>
<script type="text/javascript" src= "scripts/bootstrap.min.js"</script>
<script type="text/javascript" src="scripts/jquery-ui.js"></script>
<script type="text/javascript" src= "scripts/urlSpecifier.js"></script>
<script type="text/javascript" src= "scripts/landingPage.js"></script>
</head>
<body>
<div class="except_footer">
<img src="images/logo.png" class="logo"/>
<!--<div class="user_info">
<p class="uname" class="u_name">Username</p>
<p class="logout"> Out </p>
</div>-->
<!--test hover dropdown-->
<div class="row row1">
<div class="col-md-4 col-xs-2 col-md-offset-1 user_info">
<p id = "welcomeMsg" class="dropbtn">
</p>
<div id = "dropdown" class="dropdown-content">
Manage Reference Data
<br />
Help
<br />
<a href= "#" class="logoutLink" onclick=onLogout()>Log Out</a>
<br />
</div>
</div>
</div>
<!--test hover dropdown-->
<div class="row row2">
<div class="col-md-2 col-xs-4 col-md-offset-3 A_page">
<button type = "button" id = "a_button" class="a_button custom" onClick = a() >A</button>
</div>
<div class="col-md-2 col-xs-3 col-md-offset-1 B_page">
<button type = "button" id = "b_button" class="b_button custom" onClick = b() >b</button>
</div>
</div>
<!--modal box-->
<div id="modelView" title="Warning!">
</div>
<!--modal box-->
</div>
<div class="footer_div">
<div class="image">
<p style="position: relative; right:0px; bottom: 0px;" class="footer_text"></p><img src="images/footer_logo.png" class="footer_img" style="position: relative;
right: 0px;
bottom: 0px;" />
</div>
</div>
</body>
</html>
Here is my JS file where I am checking whether session is invalid or not. If Invalid then it should show a modal box and in that modal box there should be a message that you have logged out succesfully.
$.ajax({
url : fullAuthUrl,
dataType : 'text',
crossOrigin : true,
cache : false,
type : 'GET',
success : function(response) {
var responseBodyFull = response.replace(/^\s+|\s+$/g, '');
if (responseBodyFull == "Invalid Session Id passed") {
console.log("Invalid Session");
showModalBoxForInvalidSessionInfo();
}
console.log(responseBodyFull);
enableOrDisableLinks(responseBodyFull);
}
});
So if in response I am getting "Invalid Session Id passed" then I am calling a function which will give a modal box.
function showModalBoxForInvalidSessionInfo(){
$("#modelView").dialog({
autoOpen : false,
modal : true,
buttons : [ {
text : "OK",
icons : {
primary : "ui-icon-heart"
},
click : function() {
$(this).dialog("close");
window.close();
}
}]
});
$("#modelView" ).dialog("open");
$("#modelView").text("Logout Succesfully");
}
But here I am getting the error. I have looked in links where same problem was there but I have included JS file also I am init the dialouge box first, then also I am getting the error.
You need to add closing bracket for bootstrap js(bootstrap.min.js).
Lately I've been having terrible trouble trying to get audio to play on my android device via my phonegap build. I've seen many others have had several issues (mainly pertaining to the correct file path) but none of the solutions I've come across have led to a result. Here is my script for loading and playing the audio:
<html>
<head>
<meta charset="utf-8" />
<meta name="format-detection" content="telephone=no" />
<meta name="msapplication-tap-highlight" content="no" />
<!-- WARNING: for iOS 7, remove the width=device-width and height=device-height attributes. See https://issues.apache.org/jira/browse/CB-4323 -->
<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" />
<link rel="stylesheet" type="text/css" href="css/style.css">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.min.css">
<title>Audio</title>
</head>
<body>
<div class="container-fluid">
<div class="col-xs-12 col-md-12">
<div class="s-it">Tap Here</div>
</div>
<div class="row">
<div class="col-xs-4 col-md-4"></div>
<div class="col-xs-4 col-md-4">
<div class="container">
<span style="display:none;" id="vX"></span>
<span style="display:none;" id="vY"></span>
<span style="display:none;" id="vZ"></span>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div id="sbell">
<img src="img/bell.png">
</div>
</div>
</div>
<div class="row">
<div class="col-md-12 col-xs-12">
<div class="s-text">Test</div>
</div>
<div class="col-md-12 col-xs-12">
</div>
</div>
</div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><br><br></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12"><br><br></div>
</div>
<div class="row">
<div class="col-xs-12 col-md-12">
<div class="well">
<span class="sts">
<img src="img/shake-banner.png">
</span>
</div>
</div>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.9.1.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
<script type="text/javascript">
var myMedia1 = null;
var myMedia2 = null;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady () {
var src1 = '';
var src2 = '';
if (device.platform == 'Android') {
src1 = '/android_asset/www/audiomp3/audio1.mp3';
src2 = '/android_asset/www/audiomp3/audio2.mp3';
}
myMedia1 = new Media(src1, onSuccess, onError);
myMedia2 = new Media(sec2, onSuccess, onError);
myMedia1.addEventListener('ended', function () {
setTimeout(function () {
$('#sbell').removeClass('animate-bell');
}, 2000);
setTimeout(function () {
$('.s-text').fadeOut(200);
}, 500);
}, false);
}
function onSuccess () {
alert("Audio Loaded");
}
function onError (e) {
alert(e.message);
}
window.ondevicemotion = function (event) {
var accX = event.accelerationIncludingGravity.x;
var accY = event.accelerationIncludingGravity.y;
var accZ = event.accelerationIncludingGravity.z;
if (accX >= 8 || accX <= -8) {
myMedia2.play();
}
document.getElementById('vX').innerHTML = accX;
document.getElementById('vY').innerHTML = accY;
document.getElementById('vZ').innerHTML = accZ;
};
$(document).ready(function () {
$('#sbell').click(function(event){
$(this).addClass('animate-bell');
$('.s-text').css('color', 'red').fadeIn(300);
myMedia1.play();
});
});
</script>
</body>
#ZyOn (deleted previous comment)
You can use my Media Demo example to find your issue.
Phonegap Demo Apps (core)
The source is on github. It contains sound samples too. I have additional notes, if you need them.
Also, your app.initialize() should be called AFTER the deviceready event.
So basically, when I load my data from the server script (retrieve.php), it shows up the in the showlist.html using $('#result').html(data). But whenever I try to load my listview or selectbox with that data..nothing happens. PLEASE ADVICE what I might be doing wrong
//SERVER-SIDE SCRIPT - retrieve.php
<?php
$pdo = new PDO('mysql:host=localhost;dbname=sports_rush;charset=utf8', 'root', '');
$pdo->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
try {
$query = "SELECT eid,event_title FROM event_table";
$result = $pdo->prepare($query);
$result->execute();
while ($row = $result->fetch(PDO::FETCH_ASSOC)) {
echo json_encode($row);
}
$db_connection = null;
} catch (PDOException $e) {
echo $e->getMessage();
}
//I found this recursive function online to enable me force convert to UTF-8 all the strings contained in an array
function utf8ize($d) {
if (is_array($d)) {
foreach ($d as $k => $v) {
$d[$k] = utf8ize($v);
}
} else {
return utf8_encode($d);
}
return $d;
}
?>
//FILE THAT SHOWS MY DATA FROM SERVER-SIDE SCRIPT - Showlist.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0">
<title>SHOW LIST</title>
<link rel="shortcut icon" href="../favicon.ico">
<link rel="stylesheet" type="text/css" media="screen" href="css/style.css"/>
<link rel="stylesheet" href="jquery-mobile/jquery.mobile-1.4.2.min.css" />
<script src="jquery-mobile/jquery-1.9.1.min.js"></script>
<script src="jquery-mobile/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="home_page">
<div data-role="header" data-theme="a">
<h1>Header</h1>
</div>
<div data-role="content">
<select name="zip" id="zip" onChange="initializeRetrieve()"></select>
<div id="result"></div>
<ul data-role="listview" data-inset="true" id="postallist"></ul>
</div>
</div>
<script>
$(function(){
$.ajax({
url : 'retrieve.php',
type : "POST",
success : function(data){
var output = '';
$('#result').html(data); //This is just a test to see my data
$.each(data, function (index, value) {
output += '<li>' + value.eid + '</li>';
});
$('#postallist').html(output).listview("refresh");
}
});
});
function initializeRetrieve(){
var $select5 = $('#zip');
//request the JSON data and parse into the select element
$.getJSON("retrieve.php", function(data){
//iterate over the data and append a select option where eid is in the json file
$.each(data, function(key, value){
$select5.append('<option>' + value.eid + '</option>');
});
});
}
</script>
</body>
</html>
Have you tried using the GET method
Try putting your request to $(document).ready
$(document).ready(function(){
$.getJSON('retrieve.php', function(data) {
$('#result').html(data);
})
});
//FINALLY GOT IT WORKING. The problem was in my showlist.html. Needed to change up my initialization when my page opens
<html>
<meta charset="utf-8" />
<title>SHOW LIST</title>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
</head>
<body>
<div data-role="page" id="index">
<div data-role="header" data-position="fixed">
<h1>Sports Rush Events</h1>
</div>
<div data-role = "content">
<div class="content-primary">
<ul id="list" data-role="listview" data-filter="true"></ul>
</div>
<div id="result"></div>
</div>
<script type="text/javascript">
$(document).on('pagebeforeshow', '#index', function(){
$.ajax({
url : 'retrievelist.php',
type : "POST",
dataType: 'json',
success : function(data){
$.each(data,function(i,dat){
$("#list").append("<li><b>ID: </b>"+i+"</br><b> Name: </b>"+dat.event_title+"</li>");
});
$("#list").listview('refresh');
}
});
});
</script>
<div data-role="footer" data-position="fixed">
</div>
</div>
I am facing a strange behavior in my PhoneGap Application.I am new to this so your every help will be appreciable.
I've made an application in PhoneGap(Cordova) where I have designed two Index.html file.
Using Index.html file when I click on Icon(my_notification_new) I move to Notification.html.(In which data displayed in list view loaded from Server).
A) Index.html (Which works perfect)
<!DOCTYPE html>
<html>
<head>
<!-- /* Title */ -->
<title>Newa: HTML Template</title>
<!-- /* Meta Tags */ -->
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<!-- /* Stylesheets */ -->
<link rel="stylesheet" href="css/my-custom-theme.css">
<link rel="stylesheet" href="css/style.css">
</head>
<body>
<div data-role="page">
<div class="header">
<p>Smart Self-Service</p>
</div>
<div class="content">
<div class="bar">
/***********Move to Notification.html******************/
<div class="one_half">
<a href="Notification.html">
<img src="images/my_notification_new.png" align="center" /></a>
<p class="dashfont" align="center">Notifications</p>
</div>
/********************************************************/
<div class="one_half">
<a href="#">
<img src="images/new_request_new.png" align="center" /></a>
<p class="dashfont" >Self-Service request</p>
</div>
</div>
<div class="bar">
<div class="one_half">
<a href="#">
<img src="images/setting.png" align="center" /></a>
<p class="dashfont" align="center">Settings</p>
</div>
<div class="one_half">
<a href="#">
<img src="images/exit.png" align="center" /></a>
<p class="dashfont" align="center"ali>Exit</p>
</div>
</div>
</div>
<div class="footer">
</div>
</div>
</body>
</html>
Now after changes some design I've make this Index.html
B)Index.html(through this when I move to Notification.html I cant see data in list view JS is not execute)
<!DOCTYPE html>
<html>
<head>
<title>Worklist</title>
<meta charset="utf-8">
<meta name="description" content="">
<meta name="author" content="">
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<link rel="stylesheet" href="css/style.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<style type="text/css">
#center_content{
text-align:center;
min-height:400px;
}
#dashboard{
width:350px;
margin:0px auto;
display:block;
clear:both;
text-align:center;
}
.dashaboard_icon{
padding:block;
padding:35px;
float:center;
margin-bottom:10px;
}
</style>
</head>
<body>
<div data-role="page" data-theme="f">
<div data-role="header" data-position="fixed">
<h1 style="white-space:pre-wrap">Smart Self Service</h1>
</div><!-- /header -->
<div data-role="content" data-theme="f">
<div id="center_content">
<div id="dashboard">
/********* Move to Notification.html**********/
<img id="dIcon_notification" src="images/mdpi/my_notification_new.png" class="dashaboard_icon" alt="" >
/*******************/
<img id="dIcon_request" src="images/mdpi/new_request_new.png" class="dashaboard_icon" alt="" >
<img id="dIcon_setting" src="images/mdpi/setting.png" class="dashaboard_icon" alt="" >
<img id="dIcon_exit" src="images/mdpi/exit.png" class="dashaboard_icon" alt="" >
</div>
</div>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
and here is my Notification.html. which works perfect.
<!DOCTYPE html>
<html>
<head>
<title>My Page</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css"/>
<script src="moment.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script type="text/javascript" src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>
<script type="text/javascript">
function soap() {
Hr_Offer();
Hr_Vacancy();
function Hr_Offer() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","http://180.211.97.41:7777/orabpel/default/XXNotificationListRetrieval/1.0",true);
/*** Soap Envelop ***/
var sr= "<?xml version='1.0' encoding='UTF-8'?>";
sr+="<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:wsu=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd\">";
sr+="<soap:Header>";
sr+="<wsse:Security xmlns:wsse=\"http:\//docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns:env=\"http://schemas.xmlsoap.org/soap/envelope/\" soap:mustUnderstand=\"1\">";
sr+="<wsse:UsernameToken xmlns:wsse=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\">";
sr+="<wsse:Username>CBROWN<\/wsse:Username>";
sr+="<wsse:Password Type=\"http:\//docs.oasis-open.org\/wss\/2004\/01\/oasis-200401-wss-username-token-profile-1.0#PasswordText\">welcome<\/wsse:Password>";
sr+="<\/wsse:UsernameToken>";
sr+="<\/wsse:Security>";
sr+="<\/soap:Header>";
sr+="<soap:Body xmlns:ns1=\"http://xmlns.oracle.com/bpel/mobile/Notificationlist\">";
sr+="<ns1:NotificationlistRetrievalREQ>";
sr+="<ns1:NotificationlistType>HR_OFFER<\/ns1:NotificationlistType>";
sr+="<ns1:Status>TODO<\/ns1:Status>";
sr+="<\/ns1:NotificationlistRetrievalREQ>";
sr+="<\/soap:Body>";
sr+="<\/soap:Envelope>";
/*** Send the POST request ***/
xmlhttp.setRequestHeader("Accept", "application/xml", "text/xml", "\*/\*");
xmlhttp.setRequestHeader("SOAPAction", "process");
xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
xmlhttp.send(sr);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//alert('Response'+xmlhttp.responseXML);
var xmlResult=xmlhttp.responseXML;
/*** Pull out the quote and author elements ***/
var notificationId = xmlResult.getElementsByTagName('NotificationId');
var notificationContext = xmlResult.getElementsByTagName('NotificationContext');
var subject = xmlResult.getElementsByTagName('Subject');
var startDate = xmlResult.getElementsByTagName('BeginDate');
var dueDate = xmlResult.getElementsByTagName('DueDate');
/*** Create arrays***/
var arrNotificationId=new Array();
var arrNotificationContext=new Array();
var arrSubject=new Array();
var arrStartDate=new Array();
var arrDueDate=new Array();
/*** Loop through each quote elements yanking out the values and pushing them into the array ***/
for (i=0; i<notificationId.length; i++)
{
arrNotificationId.push(notificationId[i].childNodes[0].nodeValue);
arrNotificationContext.push(notificationContext[i].childNodes[0].nodeValue);
arrSubject.push(subject[i].childNodes[0].nodeValue);
//alert(startDate[i].childNodes[0].nodeValue);
var tempStart=startDate[i].childNodes[0].nodeValue;
var date_start = moment(tempStart).format("DD-MM-YYYY");
arrStartDate.push(date_start);
var tempDue=startDate[i].childNodes[0].nodeValue;
var date_due= moment(tempDue).format("DD-MM-YYYY");
arrDueDate.push(date_due);
}
/*** Display in Listview ***/
for (var s in arrNotificationId) {
//alert(arrSubject[s]);
$("#list_workList").append($("<li><a style=\"white-space:pre-wrap;\" href='" + arrSubject[s].link + "'>"+ arrSubject[s].toString() +"\n"+"Start Date :"+arrStartDate[s]+" "+"Due Date :"+arrDueDate[s]+ "</a></li>"));
}
$('#list_workList').listview('refresh');
}
else
{
alert('Error '+xmlhttp.status);
}
}
}
}
function Hr_Vacancy() {
var xmlhttp = new XMLHttpRequest();
xmlhttp.open("POST","http://ip:port/orabpel/default/XXNotificationListRetrieval/1.0",true);
/*** Soap Envelop ***/
var sr= "<?xml version='1.0' encoding='UTF-8'?>";
sr+="<soap:Envelope xmlns:soap=\"http://schemas.xmlsoap.org/soap/envelope/\" xmlns:wsu=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-utility-1.0.xsd\">";
sr+="<soap:Header>";
sr+="<wsse:Security xmlns:wsse=\"http:\//docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns:env=\"http://schemas.xmlsoap.org/soap/envelope/\" soap:mustUnderstand=\"1\">";
sr+="<wsse:UsernameToken xmlns:wsse=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\" xmlns=\"http://docs.oasis-open.org/wss/2004/01/oasis-200401-wss-wssecurity-secext-1.0.xsd\">";
sr+="<wsse:Username>Hello<\/wsse:Username>";
sr+="<wsse:Password Type=\"http:\//docs.oasis-open.org\/wss\/2004\/01\/oasis-200401-wss-username-token-profile-1.0#PasswordText\">world<\/wsse:Password>";
sr+="<\/wsse:UsernameToken>";
sr+="<\/wsse:Security>";
sr+="<\/soap:Header>";
sr+="<soap:Body xmlns:ns1=\"http://xmlns.oracle.com/bpel/mobile/Notificationlist\">";
sr+="<ns1:NotificationlistRetrievalREQ>";
sr+="<ns1:NotificationlistType>HR_VACANCY<\/ns1:NotificationlistType>";
sr+="<ns1:Status>TODO<\/ns1:Status>";
sr+="<\/ns1:NotificationlistRetrievalREQ>";
sr+="<\/soap:Body>";
sr+="<\/soap:Envelope>";
/*** Send the POST request ***/
xmlhttp.setRequestHeader("Accept", "application/xml", "text/xml", "\*/\*");
xmlhttp.setRequestHeader("SOAPAction", "action_name");
xmlhttp.setRequestHeader("Content-Type", "text/xml; charset=utf-8");
xmlhttp.send(sr);
xmlhttp.onreadystatechange = function () {
if (xmlhttp.readyState == 4) {
if (xmlhttp.status == 200) {
//alert('Response'+xmlhttp.responseXML);
var xmlResult=xmlhttp.responseXML;
/*** Pull out the quote and author elements ***/
var notificationId = xmlResult.getElementsByTagName('NotificationId');
var notificationContext = xmlResult.getElementsByTagName('NotificationContext');
var subject = xmlResult.getElementsByTagName('Subject');
var startDate = xmlResult.getElementsByTagName('BeginDate');
var dueDate = xmlResult.getElementsByTagName('DueDate');
/*** Create arrays***/
var arrNotificationId=new Array();
var arrNotificationContext=new Array();
var arrSubject=new Array();
var arrStartDate=new Array();
var arrDueDate=new Array();
/*** Loop through each quote elements yanking out the values and pushing them into the array ***/
for (i=0; i<notificationId.length; i++)
{
arrNotificationId.push(notificationId[i].childNodes[0].nodeValue);
arrNotificationContext.push(notificationContext[i].childNodes[0].nodeValue);
arrSubject.push(subject[i].childNodes[0].nodeValue);
var tempStart=startDate[i].childNodes[0].nodeValue;
var date_start = moment(tempStart).format("DD-MM-YYYY");
arrStartDate.push(date_start);
var tempDue=startDate[i].childNodes[0].nodeValue;
var date_due= moment(tempDue).format("DD-MM-YYYY");
arrDueDate.push(date_due);
}
/*** Display in Listview ***/
for (var s in arrNotificationId) {
//alert(arrSubject[s]);
$("#list_workList").append($("<li><a style=\"white-space:pre-wrap;\" href='" + arrSubject[s].link + "'>"+ arrSubject[s].toString() +"\n"+"Start Date :"+arrStartDate[s]+" "+"Due Date :"+arrDueDate[s]+ "</a></li>"));
}
$('#list_workList').listview('refresh');
}
else
{
alert('Error '+xmlhttp.status);
}
}
}
}
}
</script>
</head>
<body onload="soap()">
<div data-role="page" data-theme="f">
<form name="Worklist" action="" method="post">
<div>
<div id="response" />
</div>
</form>
<div data-role="header" data-position="fixed">
<h1>Worklist</h1>
</div><!-- /header -->
<div data-role="content">
<ul data-role="listview" data-theme="c" id="list_workList">
</ul>
</div><!-- /content -->
</div><!-- /page -->
</body>
</html>
And strange thing is that It works in eclipce browser and in preview.
if you want to redirect page on Notification.html then add data-ajax="false" in your anchor tag
<a href="Notification.html" data-ajax="false">