How to load individual HTML file into div content - javascript

i am using this animation on my website.
https://codepen.io/alvarotrigo/pen/YzYbdxV
I'm trying to figure out how to load a individual file into the content of each box.
So every box doesn't have the same content.
I've already written a method in my JS file:
function loadHTML (id, filename) {
console.log(`div id: ${id}, filename: ${filename}`);
let xhttp;
let element = document.getElementById(id);
let file = "/electronic_projects/" + (filename.replace(/\s/g, '_') + ".html").toLowerCase();
if (file) {
xhttp = new XMLHttpRequest();
xhttp.onreadystatechange = function() {
if (this.readyState == 4) {
console.log(this.responseText);
if (this.status == 200) {element.innerHTML = this.responseText;}
if (this.status == 404) {element.innerHTML = "<h1>Page not found.</h1>";}
}
}
xhttp.open("GET", file, true);
xhttp.send();
return;
}
}
It takes the ID of my div and the HTML file, which i want to load.
It does work if i give it the exact name of the file.
What i can't get to work is, that it loads a html file, which is the same as the boxes name (declared on top of the JS file).
Does anybody have an idea for that?
Thanks very much!
This is my modified html approach:
<!doctype html>
<html>
<style>
#ep {
text-decoration: underline #0088a9;
text-underline-offset: 5px;
}
</style>
<head>
<link href="https://fonts.googleapis.com/icon?family=Material+Icons" rel="stylesheet">
<link href="https://fonts.googleapis.com/css?family=Raleway:200" rel="stylesheet">
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/angular.js/1.5.5/angular-animate.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="style.css" type="text/css"/>
<link href='https://fonts.googleapis.com/css?family=Poppins' rel='stylesheet'>
<link rel="stylesheet" href="projects_style.css" type="text/css">
<script src="electronic_projects_script.js"></script>
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Electronic Projects</title>
</head>
<body>
<header>
<a class="logo" href="index.html">COPPER CREW</a>
<nav>
<ul class="nav_links">
<li><a id="ep" href="electronic_projects.html">Electronic Projects</a></li>
<li><a id="sp" href="software_projects.html">Software Projects</a></li>
<li><a id="a" href="">About</a></li>
</ul>
</nav>
</header>
<div class="container" ng-class="{'no-scroll': selected.length}" ng-app="app" ng-controller="mainCtrl">
<div class="page">
<div class="grid">
<div class="grid-item" ng-repeat="item in boxes">
<box class="box" id="box" item="item" on-select="selectBox" ng-class="{'selected': selected[0].item.name == item.name}" onclick="loadHTML('content', filename=selected)"></box>
</div>
</div>
</div>
<div class="fullscreen-background top-up" ng-show="selected.length" ng-style="{'background-image': 'url(' + selected[0].item.image + ')'}"></div>
<div class="scroller" ng-show="selected.length">
<a class="close-button" ng-click="clearSelection()">
<i class="material-icons">close</i>
</a>
<h1 id="name">{{selected[0].item.name}}</h1>
<div big-box ng-repeat="item in selected" class="box on-top" position="item.position" selected="item.item">
<img ng-src="{{item.item.image}}" alt="" />
<div class="content" id="content">
</div>
</div>
</div>
</div>
</body>
</html>

Related

Is there a way to change the href of an a tag with javascript

I need to change the href of the a tag with id="cont".
The code I've got so far.(I was told to post the whole code here)
HTML:
<html>
<head>
<title>Adventure Game</title>
<link rel="stylesheet" href="../../styles/main.css">
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.7.0/css/font-awesome.min.css">
<script src="../../js/main.js"></script>
<script src="../../js/knightClass.js"></script>
<script src="../../js/choices.js"></script>
</head>
<body>
<div id="mySidenav" class="sidenav">
×
<i class="fa fa-fw fa-home"></i>Home
How 2 Play
<div>
<button onclick="goBack()">Back</button>
</div>
</div>
<!-- Use any element to open the sidenav -->
<span onclick="openNav()"><div class="menu">
<div></div>
<div></div>
<div></div>
</div>
</span>
<div id="main">
<h1 class="header"><b>Stage 2 - Knight1</b></h1>
<div id="options" class="option hide">
<a id="cont" href="#">Continue</a>
<!--Hero
Paladin
Holy Knight
Assassin-->
</div>
</div>
</body>
</html>
JavaScript
window.onload=function(){
setTimeout(knight,1);
}
function knight(){
let rand=Math.floor(Math.random() * 10) + 1;
var cont=document.getElementById("cont");
if (rand==10){
cont.href("hero/hero1.html");
} else if (rand>=7){
cont.href("paladin/paladin1.html");
} else if (rand>=3){
cont.href("holyKnight/holyKnight1.html");
} else if (rand<3){
cont.href("assassin/assassin.html");
}
}
1.Change 2.Go
<script>
function ChangeHref(){
document.getElementById("a").setAttribute("onclick", "location.href='http://religiasatanista.ro'");
}
</script>
Ref Link

Using tag key to insert text and change the size of text in Web application

I am making a basic online editing interface for coursework and i want to use keyboard events. The tab key should insert text, this works, but it should also reduce the size of the text on that line. When I use the getElementById, an error displays saying: Cannot read property 'style' of null. How do I go about this?
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
<!DOCTYPE html>
<html>
<head>
<title>Editor</title>
<link rel="stylesheet" href="stylesheet.css">
<link rel="shortcut icon" href="">
</head>
<body>
<aside class="bar">
<div id="heading-container"></div>
</aside>
<div id="inputArea">
<div id="bulletPoints" contenteditable="true">
<div id="divList" contenteditable="true">
<ul class="inputList" id="inputList">
<li id="outlineList"></li>
</ul>
</div>
</div>
</div>
<script>
window.onload = () => {
window.addEventListener("keydown", checkKeyPress);
function checkKeyPress(key){
if (key.keyCode === 9){
key.preventDefault();
document.execCommand("insertText", true, " ");
document.getElementById("inputList").style.fontSize = "smaller";
}
}
};
</script>
</body>
</html>
You are missing you id as an attribute to your ul.

Dynamic load Panel with PageContainer

I know this question has been asked several times, but i want to load a panel dynamic for all pages and it doesn't work.
Sometimes the css style is not loading or the panel does not open..
Any suggestions? ;(
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script type="text/javascript" src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var panelHtml = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
});
$(this).append(panelHtml);
$("#panel_" + this.id).panel();
$("#panel_" + this.id).panel().enhanceWithin();
$("#panel_" + this.id).enhanceWithin();
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
</div>
</div>
</body>
</html>
My panel.html
<ul data-role="listview" data-theme="g" data-divider-theme="g">
<li data-role="list-divider">Panel</li>
<li>Page1</li>
<li>Page2</li>
<li>Pag3</li>
</ul>
Thank you for your tips... .one('pagebeforecreate',
It is not easy to load the same header and / or footer in all pages.
Finding the right event is really difficult.
I modified your solution a bit, it's more concise and can be faster.
$(document).one('pagebeforecreate', function () {
$.get('header.html').success(function(htmlHeader){
$.get('footer.html').success(function(htmlFooter){
$(htmlHeader).prependTo($('[data-role="page"]'));
$(htmlFooter).appendTo($('[data-role="page"]'));
$('body').enhanceWithin(); // All pages in once
});
});
});
#thanks to ezanker
- i didnt know that a external panel exist, thanks
- i tested it on jsfiddle and it worked but i didnt worked local, i dont know why
thats my solution
its a bit silly when you know external panels exist, but here it is
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css"
href="css/jquery.mobile-1.4.5/jquery.mobile.black-sidebar-theme.css">
<link rel="stylesheet" type="text/css"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<link rel="stylesheet" type="text/css" href="css/own.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script type="text/javascript"
src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<script type="text/javascript">
$(document).one('pagebeforecreate', function () {
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="panel" data-display="overlay" data-theme="g" id="panel_' + this.id + '">').load("templates/panel/panel.html", function (data) {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="header">').load("templates/header/header.html", function () {
$("#" + id).prepend(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="footer" id="footer" data-position="fixed" data-tap-toggle="false">').load("templates/footer/footerUp.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
$.mobile.pageContainer.find("div[data-role=page]").each(function () {
var id = this.id;
var html = $('<div data-role="popup" id="popup_' + this.id + '" data-theme="a" class="ui-corner-all">').load("templates/popup/type_1/popup.html", function () {
$("#" + id).append(html);
$("#" + id).enhanceWithin();
});
});
});
</script>
</head>
<body>
<div data-role="page" id="page1">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page1").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page2">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page2").popup("open")'>Open PopUp</a>
</div>
</div>
<div data-role="page" id="page3">
<div data-role="content">
<h2>Content</h2>
Open Panel
<a href="#" onclick='$("#popup_page3").popup("open")'>Open PopUp</a>
</div>
</div>
</body>
</html>

Posting output from clickable tree element to iframe or region: center on jeasyui

Using jeasyui how could i post the result of the tree elements on the iframe inside the region:center?
Actual code based on Complex Layout demo from jeasyui.com:
<!DOCTYPE html>
<html>
<head>
<meta http-equiv="Content-Type" content="text/html;charset=ISO-8859-1">
<title>Test</title>
<link rel="stylesheet" type="text/css" href="/jeasyui/themes/default/easyui.css">
<link rel="stylesheet" type="text/css" href="/jeasyui/themes/icon.css">
<link rel="stylesheet" type="text/css" href="/jeasyui/demo.css">
<script type="text/javascript" src="/jeasyui/jquery.min.js"></script>
<script type="text/javascript" src="/jeasyui/jquery.easyui.min.js"></script>
</head>
<body>
<h2>Test</h2>
<div style="margin:20px 0;"></div>
<div class="easyui-layout" style="width:auto;height:565px">
<div data-options="region:'west',split:true", title='Menu' style="width:200%;">
<div class="easyui-accordion" data-options="fit:true,border:false">
<div title="Servers Index" style="padding:5px;">
<ul class="easyui-tree"
data-options="
url:'jj.json',
method:'get',
animate:true,
formatter:function(node){
s = node.text;
if (node.server){
s = '<a href=\'http://'+ node.server +'\'>'
+ node.server + '</a>';
}
return s;
}">
</ul>
</div>
</div>
</div>
<div data-options="region:'center',title:'Output',
iconCls:'icon-ok',href:''"
name="center" style="padding:10px">
<iframe name="iFrame" width="100%" height="90%"frameborder='0'>
</iframe>
</div>
<div data-options="region:'south',split:true" style="height:50px;">
</div>
</div>
</body>
</html>
json content:
[{
"id":1,
"text":"pick one",
"children":[{
"id":11,
"server":"www.google.com"
},{
"id":12,
"server":"www.altavista.com"
}]
}]
Thanks in advance.
I was able to solve it by simply adding target=\'iFrame\':
<ul class="easyui-tree"
data-options="
url:'jj.json',
method:'get',
animate:true,
formatter:function(node){
s = node.text;
if (node.server){
s = '<a href=\'http://'+ node.server +'\' target=\'iFrame\'>' + node.server + '</a>';
}
return s;
}
">
</ul>

JavaScript does not execute in emulator (PhoneGap in Android)

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">

Categories