We Keep Coding

R Shiny App access variables from embedded Jotform HTML code with javascript

I have created a form with Jotform that I would like to embed in my R Shiny App.
Using shinyjs (?), I would like to access the information filled in the form by the user for using it somewhere else in my Shiny App.
For example, in the minimal example here below, there is a textbox to fill with phone number : can a javascript piece of code allow me to print the phone number in the server shiny function ?
library(shiny)
library(shinyjs)
ui <- fluidPage(
myform
)
server <- function(input, output, session) {
### how can I access the phone number stored in the form ?
# runjs('var phone_number = ???????;')
# print(input$phone_number)
}
shinyApp(ui = ui, server = server)
where myform is the HTML code of the form built with Jotform :
myform <- HTML('<script src="https://cdn01.jotfor.ms/static/prototype.forms.js?3.3.39102" type="text/javascript"></script>
<script src="https://cdn02.jotfor.ms/static/jotform.forms.js?3.3.39102" type="text/javascript"></script>
<script defer src="https://cdnjs.cloudflare.com/ajax/libs/punycode/1.4.1/punycode.js"></script>
<script type="text/javascript"> JotForm.newDefaultTheme = true;
JotForm.extendsNewTheme = false;
JotForm.singleProduct = false;
JotForm.newPaymentUIForNewCreatedForms = false;
JotForm.newPaymentUI = true;
JotForm.init(function(){
/*INIT-START*/
setTimeout(function() {
$(\'input_11\').hint(\'ex: myname#example.com\');
}, 20);
if (window.JotForm && JotForm.accessible) $(\'input_6\').setAttribute(\'tabindex\',0);
/*INIT-END*/
});
JotForm.prepareCalculationsOnTheFly([null,null,null,null,null,null,{"name":"requestingInformation","qid":"6","text":"Requesting Information Regarding","type":"control_textarea"},{"name":"7","qid":"7","text":"Submit Form","type":"control_button"},null,null,{"name":"name","qid":"10","text":"Name","type":"control_fullname"},{"name":"email11","qid":"11","subLabel":"example#example.com","text":"E-mail","type":"control_email"},{"name":"phoneNumber12","qid":"12","text":"Phone Number","type":"control_phone"},{"name":"clickTo","qid":"13","text":"Information Request","type":"control_head"}]);
setTimeout(function() {
JotForm.paymentExtrasOnTheFly([null,null,null,null,null,null,{"name":"requestingInformation","qid":"6","text":"Requesting Information Regarding","type":"control_textarea"},{"name":"7","qid":"7","text":"Submit Form","type":"control_button"},null,null,{"name":"name","qid":"10","text":"Name","type":"control_fullname"},{"name":"email11","qid":"11","subLabel":"example#example.com","text":"E-mail","type":"control_email"},{"name":"phoneNumber12","qid":"12","text":"Phone Number","type":"control_phone"},{"name":"clickTo","qid":"13","text":"Information Request","type":"control_head"}]);}, 20);
</script>
<style type="text/css">#media print{.form-section{display:inline!important}.form-pagebreak{display:none!important}.form-section-closed{height:auto!important}.page-section{position:initial!important}}</style>
<link type="text/css" rel="stylesheet" href="https://cdn01.jotfor.ms/themes/CSS/5e6b428acc8c4e222d1beb91.css?themeRevisionID=5f30e2a790832f3e96009402"/>
<link type="text/css" rel="stylesheet" href="https://cdn02.jotfor.ms/css/styles/payment/payment_styles.css?3.3.39102" />
<link type="text/css" rel="stylesheet" href="https://cdn03.jotfor.ms/css/styles/payment/payment_feature.css?3.3.39102" />
<style type="text/css" id="form-designer-style">
/* Injected CSS Code */
.form-label.form-label-auto {
display: inline-block;
float: left;
text-align: left;
}
/* Injected CSS Code */
</style>
<form class="jotform-form" action="https://submit.jotformeu.com/submit/230374328498363/" method="post" name="form_230374328498363" id="230374328498363" accept-charset="utf-8" autocomplete="on"><input type="hidden" name="formID" value="230374328498363" /><input type="hidden" id="JWTContainer" value="" /><input type="hidden" id="cardinalOrderNumber" value="" />
<div role="main" class="form-all">
<style>
.form-all:before
{
background: none;
}
</style>
<ul class="form-section page-section">
<li id="cid_13" class="form-input-wide" data-type="control_head">
<div class="form-header-group header-large">
<div class="header-text httal htvam">
<h1 id="header_13" class="form-header" data-component="header">Information Request</h1>
</div>
</div>
</li>
<li class="form-line" data-type="control_phone" id="id_12"><label class="form-label form-label-left form-label-auto" id="label_12" for="input_12_area"> Phone Number </label>
<div id="cid_12" class="form-input" data-layout="half">
<div data-wrapper-react="true"><span class="form-sub-label-container" style="vertical-align:top" data-input-type="areaCode"><input type="tel" id="input_12_area" name="q12_phoneNumber12[area]" class="form-textbox" data-defaultvalue="" autoComplete="section-input_12 tel-area-code" value="" data-component="areaCode" aria-labelledby="label_12 sublabel_12_area" /><span class="phone-separate" aria-hidden="true"> -</span><label class="form-sub-label" for="input_12_area" id="sublabel_12_area" style="min-height:13px" aria-hidden="false">Area Code</label></span><span class="form-sub-label-container" style="vertical-align:top" data-input-type="phone"><input type="tel" id="input_12_phone" name="q12_phoneNumber12[phone]" class="form-textbox" data-defaultvalue="" autoComplete="section-input_12 tel-local" value="" data-component="phone" aria-labelledby="label_12 sublabel_12_phone" /><label class="form-sub-label" for="input_12_phone" id="sublabel_12_phone" style="min-height:13px" aria-hidden="false">Phone Number</label></span></div>
</div>
</li>
<li class="form-line" data-type="control_button" id="id_7">
<div id="cid_7" class="form-input-wide" data-layout="full">
<div data-align="auto" class="form-buttons-wrapper form-buttons-auto jsTest-button-wrapperField"><button id="input_7" type="submit" class="form-submit-button submit-button jf-form-buttons jsTest-submitField" data-component="button" data-content="">Submit Form</button></div>
</div>
</li>
<li style="display:none">Should be Empty: <input type="text" name="website" value="" /></li>
</ul>
</div>
<script>
JotForm.showJotFormPowered = "new_footer";
</script>
<script>
JotForm.poweredByText = "Powered by Jotform";
</script><input type="hidden" class="simple_spc" id="simple_spc" name="simple_spc" value="230374328498363" />
<script type="text/javascript">
var all_spc = document.querySelectorAll("form[id=\'230374328498363\'] .si" + "mple" + "_spc");
for (var i = 0; i < all_spc.length; i++)
{
all_spc[i].value = "230374328498363-230374328498363";
}
</script>
<div class="formFooter-heightMask"></div>
<div class="formFooter f6 branding21">
<div class="formFooter-wrapper formFooter-leftSide"><img class="formFooter-logo" src="https://cdn.jotfor.ms/assets/img/logo2021/jotform-logo-white.svg" alt="Jotform Logo" style="height: 44px;"></div>
<div class="formFooter-wrapper formFooter-rightSide"><span class="formFooter-text">Now create your own Jotform - It\'s free!</span><a class="formFooter-button" href="https://www.jotform.com/?utm_source=formfooter&utm_medium=banner&utm_term=230374328498363&utm_content=jotform_button&utm_campaign=powered_by_jotform_le" target="_blank">Create your own Jotform</a></div>
</div>
</form><script type="text/javascript">JotForm.ownerView=true;</script><script type="text/javascript">JotForm.forwardToEu=true;</script><script src="https://cdn.jotfor.ms//js/vendor/smoothscroll.min.js?v=3.3.39102"></script>
<script src="https://cdn.jotfor.ms//js/errorNavigation.js?v=3.3.39102"></script>')
If anyone can help, I would be very grateful !
Thanks in advance

Kendo UI for jquery drawer side not forwarding to href

<html>
<head>
<title></title>
<link rel="stylesheet" href="styles/kendo.common.min.css" />
<link rel="stylesheet" href="styles/kendo.default.min.css" />
<link rel="stylesheet" href="styles/kendo.default.mobile.min.css" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<body>
<div id="example">
<div class="demo-section wide">
<div id="toolbar"></div>
<div id="drawer">
<div id="drawer-content">
<div id="Inbox">
</div>
<div id="Notifications" class="hidden">
<ul>
<li>Monday meeting</li>
<li>Regarding org chart changes</li>
<li>Meeting with Cliff</li>
<li>Global Marketing Meeting</li>
<li>Out tonight with collegues?</li>
</ul>
</div>
<div id="Calendar" class="hidden">
<ul>
<li>
<h6>11/5 Monday</h6>
<p>Martha Birthday</p>
</li>
<li>
<h6>15/6 Sunday</h6>
<p>Job interview for internal position</p>
</li>
</ul>
</div>
<div id="Attachments" class="hidden">
<ul>
<li>Build enterprise apps</li>
<li>Fw: Regarding Multiline textbox</li>
<li>Away next week</li>
<li>Fw: Your Costume is ready</li>
<li>Update completed</li>
</ul>
</div>
<div id="Favourites" class="hidden">
<ul>
<li>90% Discount!</li>
<li>90% Discount!</li>
<li>One time offer!</li>
</ul>
</div>
</div>
</div>
</div>
<script>
$(document).ready(function () {
$("#drawer").kendoDrawer({
template: "<ul> \
<li data-role='drawer-item' class='k-selected'><span class='k-icon k-i-inbox'></span><span class='k-item-text' data-id='Inbox'>Inbox</span></li> \
<li data-role='drawer-separator'></li> \
<li data-role='drawer-item'><span class='k-icon k-i-notification k-i-bell'></span><span class='k-item-text' data-id='Notifications'>Notifications</span></li> \
<li data-role='drawer-item'><span class='k-icon k-i-calendar'></span><span class='k-item-text' data-id='Calendar'>Calendar</span></li> \
<li data-role='drawer-separator'></li> \
<li data-role='drawer-item'><span class='k-icon k-i-hyperlink-email'></span><span class='k-item-text' data-id='Attachments'>Attachments</span></li> \
<li data-role='drawer-item'><span class='k-icon k-i-star-outline k-i-bookmark-outline'></span><span class='k-item-text' data-id='Favourites'>Favourites</span></li> \
</ul>",
mode: "push",
mini: true,
itemClick: function (e) {
if(!e.item.hasClass("k-drawer-separator")){
e.sender.drawerContainer.find("#drawer-content > div").addClass("hidden");
e.sender.drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-item-text").attr("data-id")).removeClass("hidden");
}
},
position: 'left',
minHeight: 330,
swipeToOpen: true
});
});
function toggleDrawer() {
var drawerInstance = $("#drawer").data().kendoDrawer;
var drawerContainer = drawerInstance.drawerContainer;
if(drawerContainer.hasClass("k-drawer-expanded")) {
drawerInstance.hide();
} else {
drawerInstance.show();
}
}
$("#toolbar").kendoToolBar({
items: [
{ type: "button", icon: "menu", attributes: { "class": "k-flat" }, click: toggleDrawer},
{ template: "<h3 style='margin-left: 20px;'>Mail Box</h3>" }
]
});
</script>
<style>
#drawer-content li {
font-size: 1.2em;
padding-left: .89em;
background: 0 0;
border-radius: 0;
border-width: 0 0 1px;
border-color: rgba(33, 37, 41, 0.125);
border-style: solid;
line-height: 1.5em;
padding: 1.09em .84em 1.23em .84em;
}
#drawer-content li:last-child {
border: 0;
}
.hidden {
display: none;
}
#example .demo-section {
max-width: 640px;
}
.k-toolbar .k-icon {
font-size: 18px;
}
</style>
</div>
</body>
</html>
<div id="Inbox">
</div>
This block here ^^
I'm trying to forward the menu item onclick to a link
Why does this href not forward the page to google.com on click of the menu item?
Seems like this should be a simple fix, we are not using router. I also tried adding onclick="location.href='requisitions'"
It looks like your post is mostly code; please add some more details. Not sure how many more details I can add.

It is because the link is rendered to the right of the Inbox icon. The element has no content though so you can't see it. Change it to something like this and you'll see what I mean:
Go to mailbox
To do what you want, add more code to your itemClick() event handler to determine if the Inbox item was clicked and open a new tab or redirect the page from there.

#NigelK is correct on both counts. Perhaps you didn't understand his explanation. I'll supplement the "add more code to your itemClick() event bit. With this solution, you won't need inside the div Inbox.
On the event handler, you check if the Inbox was clicked by finding the CSS class and if it was open the URL. Like so:
itemClick: function (e) {
if(!e.item.hasClass("k-drawer-separator")){
e.sender.drawerContainer.find("#drawer-content > div").addClass("hidden");
e.sender.drawerContainer.find("#drawer-content").find("#" + e.item.find(".k-item-text").attr("data-id")).removeClass("hidden");
let $li = $(e.item[0]);
let $inbox = $li.find(".k-i-inbox");
if ($inbox.length > 0) {
window.open("https://google.com", "_self");
}
}
},

How do I randomize images and audio while making sure to keep divs attatched in Javascript?

This is the site in question: driglight.com/Learn5.html
The purpose of this site is to click the audio and then choose which image you believe to be the correct representation of the note that was played.
I want to randomize the audio and answers every time the page is refreshed.
When the audio is randomized I need to make sure that the audio that is chosen has it's matching correct answer of an image also chosen and placed randomly among the answers. Also,when any possible answer image is clicked, a div will appear that says 'Good Job!' or 'incorrect'. So when the correct answer is randomized it will need to have the 'Good Job' div to follow it.
Here is the code in html:
<!DOCTYPE html>
<head>
<title>Learn</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<title></title>
<meta name="description" content="">
<meta name="viewport" content="width=device-width">
<link rel="stylesheet" href="css/bootstrap.css">
<link rel="stylesheet" href="css/bootstrap-responsive.css">
<link rel="stylesheet" href="css/custom-styles.css">
<link rel="stylesheet" href="css/font-awesome.css">
<link rel="stylesheet" href="css/component.css">
<link rel="stylesheet" href="css/font-awesome-ie7.css">
<script src="js/stuff.js"></script>
<!-- <script src="js/Timhasnoinput.js"></script> -->
</head>
<body>
<!--[if lt IE 7]>
<p class="chromeframe">You are using an <strong>outdated</strong> browser. Please upgrade your browser or activate Google Chrome Frame to improve your experience.</p>
<![endif]-->
<!-- This code is taken from http://twitter.github.com/bootstrap/examples/hero.html -->
<div class="header-wrapper">
<div class="container">
<div class="row-fluid">
<div class="site-name">
<h1>Music Website</h1>
</div>
</div>
</div>
</div>
<div class="container">
<div class="menu">
<div class="navbar">
<a class="btn btn-navbar" data-toggle="collapse" data-target=".nav-collapse">
<i class="fw-icon-th-list"></i>
</a>
<div class="nav-collapse collapse">
<ul class="nav">
<li class="active">Home</li>
<li>Learn</li>
<li>Contact</li>
</ul>
</div><!--/.nav-collapse -->
</div>
<div class="mini-menu">
<label>
<select class="selectnav">
<option value="#" selected="">Home</option>
<option value="#">→ Hello</option>
<option value="#">→ Something else here</option>
<option value="#">→ Another action</option>
<option value="#">→ Something else here</option>
<option value="#">About</option>
<option value="#">Learn</option>
<option value="#">Contact</option>
</select>
</label>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12 ">
<div class="main-caption">
<h1>Music Website</h1>
<h6>Learning Music</h6>
</div>
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="container bg-white">
<div class="row-fluid">
<div class="span12">
<div class="banner">
<div class="audiobuttonholder">
<div class="audioholder" style="padding-bottom:24px;">
<audio controls id="audio1">
hello
</audio>
</div>
<div class="buttonholder"; style="position: absolute; left: 10px; top: 40px;">
</div>
<div class = "numberPage">
Pg. 3 Trebble Cleff
</div>
<div class = "control">
<ul>
<div id="div1" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div1image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage1" style="height:200px;width:200px;
onclick="showDivOne()" />
</ul>
<ul>
<div id="div2" style="display:none; float: right; margin-right: 120px;" >
<img id=div2image imageC="incorrect.png" src="incorrect.png" />
</div>
<input type="image" id="myimage2" style="height:200px;width:200px; padding-
top:24px;" onclick="showDivTwo()"/>
</ul>
<ul>
<div id="div3" style="display:none; float: right; margin-right: 120px;
padding-top: 40px;" >
<img id=div3image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage3" style="height:200px;width:200px;padding-
top:24px;" onclick="showDivThree()"/>
</ul>
<ul>
<div id="div4" style="display:none; float: right; margin-right: 120px;
margin-top: 40px;" >
<img id=div4image imageC="incorrect.png" src="incorrect.png"></img>
</div>
<input type="image" id="myimage4" style="height:200px;width:200px;"
onclick="showDivFour()" />
</ul>
</div>
</div>
</div>
</div>
</div>
<div class="featured-images">
<ul class="grid effect-8" id="grid">
<li>
<div class="block">
<div class="Timmy2">
<h4>< Lesson 2</h4>
<h6></h6>
</div>
</div>
</li>
</ul>
<div class="block-content">
<div class="user-info">
<h4>Home</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Learn</h4>
<h6> </h6>
</div>
<div class="user-info">
<h4>Contact</h4>
<h6> </h6>
</div>
</div>
</div>
</div>
</div>
<script src="js/jquery-1.9.1.js"></script>
<script src="js/bootstrap.js"></script>
<script src="js/masonry.pkgd.min.js"></script>
<script src="js/imagesloaded.js"></script>
<script src="js/classie.js"></script>
<script src="js/AnimOnScroll.js"></script>
<script>
new AnimOnScroll( document.getElementById( 'grid' ), {
minDuration : 0.4,
maxDuration : 0.7,
viewportFactor : 0.2
} );
</script>
<script>
$('#myCarousel').carousel({
interval: 1800
});
</script>
</body>
</html>
And here is the code in Javascript:
function showDivFour() {
document.getElementById('div4').style.display = "block";
}
function showDiv() {
document.getElementById('welcomeDiv').style.display = "block";
}
function showDivOne() {
document.getElementById('div1').style.display = "block";
}
function showDivTwo() {
document.getElementById('div2').style.display = "block";
}
function showDivThree() {
document.getElementById('div3').style.display = "block";
}
// THIS SHOULD BE THE BETTER ONE
var correctFileC = $('#div1image').attr("div_answer");
var correctFileC = $('#div2image').attr("div_answer");
var correctFileC = $('#div3image').attr("div_answer");
var correctFileC = $('#div4image').attr("div_answer");
var correctFile1 = $('#myimage1').attr("div_if");
var correctFile2 = $('#myimage2').attr("div_if");
var correctFile3 = $('#myimage3').attr("div_if");
var correctFile4 = $('#myimage4').attr("div_if");
var audio_1 = ["LowATrebbleCleffPianoVC.mp3","LowETrebbleCleffPianoVC.mp3",
"LowGTrebbleCleffPianoVC.mp3","MidBTrebbleCleffPianoVC.mp3",
"MidCTrebbleCleffPianoVC.mp3","MidDTrebbleCleffPianoVC.mp3"];
var rand_audio_1 =
audio_1[Math.floor(Math.random()*audio_1.length)].getElementByName.
(audioholder.innerHTML(rand_audio_1);
function div_if(){
if(audio_1[0]){
var R1 = ["myimage1","TrebbleCleffLowA.gif"],["myimage2","TrebbleCleffLowA.gif"],["myimage3","TrebbleCleffLowA.gif"],["myimage4","TrebbleCleffLowA.gif"];
if[R1(var i=0; i<R1.length;i++).length=4];
} else if(audio_1[1]){
var R2 = ["myimage1","LowE.gif"],["myimage2","LowE.gif"],["myimage3","LowE.gif"],["myimage4","LowE.gif"];
if[R2(var i=0; i<R2.length;i++).length=4];
do nothing
} else if(audio_1[2]){
var R3 = ["myimage1","LowG.gif"],["myimage2","LowG.gif"],["myimage3","LowG.gif"],["myimage4","LowG.gif"];
if[R3(var i=0; i<R3.length;i++).length=4];
do nothing
} else if(audio_1[3]){
var R4 = ["myimage1","MidB.gif"],["myimage2","MidB.gif"],["myimage3","MidB.gif"],["myimage4","MidB.gif"];
if[R4(var i=0; i<R4.length;i++).length=4];
do nothing
} else if(audio_1[4]){
var R5 = ["myimage1","MidC.gif"],["myimage2","MidC.gif"],["myimage3","MidC.gif"],["myimage4","MidC.gif"];
if[R5(var i=0; i<R5.length;i++).length=4];
do nothing
{ else if(audio_1[5]){
var R6 = ["myimage1","MidD.gif"],["myimage2","MidD.gif"],["myimage3","MidD.gif"],["myimage4","MidD.gif"];
if[R6(var i=0; i<R6.length;i++).length=4];
do nothing
} else if{
L1.Push(R);
} else if{
L1.Push(R1)
} else if{
L1.Push(R2)
} else if{
L1.Push(R3)
} else if{
L1.Push(R4)
}
function div_answer(){
if(R[0]){
document.getElementById(div1).innerHTML(divC);
divC.src='GoodJob.png'{
else if(R[1]){
document.getElementById(div2).innerHTML(divC);
divC.src='GoodJob.png'
}
else if(R[2]){
document.getElementById(div3).innerHTML(divC);
divC.src='GoodJob.png'
}
else {
document.getElementById(div4).innerHTML(divC);
divC.src='GoodJob.png'
}
}
}

I assume every audio fragment will have an image? So with that in mind, you create a random index to select an audio fragment (which you already do). Why don't you store that index in a variable and associate the image fragment with it?
Another option would be to create an object. So you make your array with audiofragments and then you initialize a new JS object, and assign the names of the images to 'properties' with your audiofragment as key. Like this:
var images = {};
images[audioname] = image-name;
***Do this for each audiofragment of course***
That way you can just ask the image from your images-object, using the property audioname.

When the page renders, place some value inside the attributes for the images or div:
<img id=myimage data-audio-file="xyz123.mp3" src="...." />
<div data-audio-file="xyz123.mp3" src="...." >My Content</div>
Read the attribute out when it's time to take some action:
var correctFile = $('#myimage').attr("data-audio-file");

setting and getting session variables using javascript ajax and php

I am trying to set and retrieve session variables. For each I have javascript code that runs ajax to call php functions. In my javascript code I want to use the returned session field. Nothing works. Can someone look at my code and tell me what I did wrong. Thanx
MY Ajax code to set the session variable is:
{$.ajax({
type: "POST",
url: "setsessionvar.php",
data: option,
success: function(){ alert("success")
}
});
Its PHP function is:
function setvar($option) {
session_start();
$_SESSION["temp"]=$option;
}
MY Ajax code to retrieve the session variable is:
{$.ajax({
type: "POST",
url: "getsessionvar.php",
data: option,
success: function(option){
}
});
It's PHP function is:
function getsessionvar()
{
return .$_SESSION['option'];
}
I made the changes to the php code, however nothing is still working. I have an alert in the success sections of the ajax. Neither alert executes. I am also not sure I am accessing the session variable value in the ajax code. I am including the entire code of my page this time. The set ajax is in the function called foo. The get ajax is in the routine called startup.
<!DOCTYPE HTML>
<html><!-- InstanceBegin template="/Templates/Ricks Universe.dwt" codeOutsideHTMLIsLocked="false" -->
<head>
<!-- InstanceBeginEditable name="doctitle" -->
<title>Fun and Games</title>
<!-- InstanceEndEditable -->
<meta charset="utf-8">
<meta name="viewport" content="width=device-width initial-scale 1.0 minimum-scale 1.0" />
<link rel="stylesheet" href="ricks.css" type="text/css" media="screen" title="Ricks Style Sheet"/>
<link rel="stylesheet" href="hh.css" type="text/css" media="handheld"/>
<link rel="stylesheet" media="print" type="text/css" href="print.css" />
<!-- InstanceBeginEditable name="head" -->
<style type="text/css">
#Games{display:inline;}
#Humor{display:none;}
</style>
<script type="text/javascript">
function foo(option)
{
var n = option.search(".HTM"); // Check for external file to link to;
if (n > -1) // If true...
{
window.location.href=option;
}
for (i in divs) //loop thru divs table
{
x=divs[i].substr(1) //Get value for option without #
z=document.getElementById(x) // Locate div
if (option == divs[i]) //On match to table...
{$.ajax({
type: "POST",
url: "setsessionvar.php",
data: option,
success: function(){ alert("success")
}
});
createCookie("fungame", option,1);
z.style.display= "inline";
}
else
{
z.style.display="none" //On no match hide div on page
}
}
}
function createCookie(name, value, days) {
var expires;
if (days) {
var date = new Date();
date.setTime(date.getTime() + (days * 24 * 60 * 60 * 1000));
expires = "; expires=" + date.toGMTString();
} else {
expires = "";
}
document.cookie = escape(name) + "=" + escape(value) + expires + "; path=/";
//document.cookie = escape(name) + "=" + escape(value) + "; path=/";
}
function readCookie(name) {
var nameEQ = escape(name) + "=";
var cookies = document.cookie.split(';');
for (var i = 0; i < cookies.length; i++) {
var cookie = cookies[i];
while (cookie.charAt(0) === ' ')
cookie = cookie.substring(1, cookie.length);
if (cookie.indexOf(nameEQ) === 0)
return unescape(cookie.substring(nameEQ.length, cookie.length));
}
return null;
}
</script>
<script type="text/javascript">
function startup()
{
//document.cookie = opt + '=; expires=Thu, 01 Jan 1970 00:00:01 GMT;';
if (option == divs[i]) //On match to table...
{$.ajax({
type: "POST",
url: "getsessionvar.php",
data: option,
success: function(option){
alert(option);
}
});
var
option = readCookie("fungame");
if (option != null) { foo(option);
document.getElementById("StoreDirectory").value = readCookie("fungame"); }
}
</script>
<!-- InstanceEndEditable -->
<!-- InstanceParam name="home" type="boolean" value="false" -->
<script type="text/javascript">
function displaymenu() {
document.getElementById("content").style.display="none";
document.getElementById("header").style.display="none";
document.getElementById("footer").style.display="none";
document.getElementById("menu").style.display ='inline';
document.getElementById("menu").style.width="100%";
document.getElementById("menu").style["text-align"]='center';
document.getElementById("menu").style.height="300%";
document.getElementById("menu").style.zoom="300%";
};
</script>
<style type="text/css">
<!--
-->#media only screen
and (max-device-width : 667px)
and (orientation : portrait)
and (-webkit-min-device-pixel-ratio : 2)
{
.sidebar1 {display:none;}
.header {display:none;}
.footer {display: none;}
.pagepics {display:none;}
.menulink {display:inline;}
.content {height:100%;
width:100%;}
.textSmall{
font-size:x-large;
font-weight:bold;
}
#titlex {display:inline;}
.bigpic {
width:400;
margin-left:0px;
}
</style><!--[if lte IE 7]>
<style>
.content { margin-right: -1px; } /* this 1px negative margin can be placed on any of the columns in this layout with the same corrective effect. */
ul.nav a { zoom: 1; } /* the zoom property gives IE the hasLayout trigger it needs to correct extra whiltespace between the links */
</style>
<![endif]--></head>
<!-- InstanceBeginEditable name="onload" -->
<body onload="startup()">
<script type="text/javascript">
var string ="#Games,#Humor"; //Load table for foo to match against
var divs = new Array();
divs = string.split(",");
</script>
<!-- InstanceEndEditable -->
<div class="container" id="wrapper">
<div class="header" id="header">
<p class="clock">
<iframe src="http://free.timeanddate.com/clock/i425m2zy/n179/tct/pct/ahl/avt/tt0/ta1" frameborder="0" width="378" height="19" allowTransparency="true"></iframe></p><br/><br/>
<!-- InstanceBeginEditable name="title" -->
<p class="title">Fun and Games</p>
<!-- InstanceEndEditable -->
<!-- end .header --></div>
<div class="sidebar1" id="menu">
<ul class="nav">
<li>Meet the dogs</li>
<li>Rick's Dog Page</li>
<li>Art</li>
<li>Automotive</li>
<li>Babies</li>
<li>The Boutique</li>
<li>Catalogs</li>
<li>Charities</li>
<li>Computing</li>
<li>Day Care</li>
<li>Deals and Coupons</li>
<li>Department Stores</li>
<li>Dogs In Competition</li>
<li>Drug Stores</li>
<li>Education</li>
<li>Electronics</li>
<li>Employment</li>
<li>Entertainment</li>
<li>Financial</li>
<li>Fitness</li>
<li>Flowers</li>
<li>Food</li>
<li>Fun and Games</li>
<li>Gardening</li>
<li>Government</li>
<li>Greeting Cards</li>
<li>Groceries</li>
<li>Health</li>
<li>Hobbies</li>
<li>Home Improvement</li>
<li>Information</li>
<li>Internet and More</li>
<li>Jewelry</li>
<li>Literature</li>
<li>Maps and Directions</li>
<li>Music and Video</li>
<li>Movies</li>
<li>News Stand</li>
<li>Office Supplies</li>
<li>People</li>
<li>Pets</li>
<li>Phones</li>
<li>Photography</li>
<li>Post Office</li>
<li>Price Comparison</li>
<li>Real Estate</li>
<li>Security</li>
<li>Searches</li>
<li>Senior Page</li>
<li>Shoe Store</li>
<li>Shopping Clubs</li>
<li>Sports</li>
<li>Toys and Games</li>
<li>Television</li>
<li>Travel</li>
</ul>
<!-- end .sidebar1 --></div>
<div class="content" id="content">
<p class="menulink" > <a onclick="displaymenu()" href="javascript:void(0);" >
<span>Menu</span></a></p>
<script type="text/javascript">
var head = '<br/><br/><h3 id = "titlex">';
var title=document.title;
var trail = '</h3>'
var heading = head + title + trail;
document.write(heading);
</script>
<!-- InstanceBeginEditable name="content" -->
<p><img class="pagepics" style="width:250px;"src="Pictures/weimball.jpg" alt="weimball.jpg" /></p>
<div id="form" class="form">
<form action="">
<h5>Page Directory</h5>
<select id="StoreDirectory" name="StoreDirectory" onchange="foo(this.value)">
<option value="#Games">Games</option>
<option value="#Humor">Humor</option>
</select>
</form>
</div>
<div class="d1">
<div <a id="Games" name="Games"></a>
<h2>Games</h2>
<ul>
<li>Addicting Games</li>
<li>BestCrosswords.com</li>
<li>The Bingo Zone</li>
<li>blufrA trivia game challenging you to identify statements as true or false</li>
<li>Free Flash Online Games</li>
<li>FreeArcade.com</li>
<li>Gamespot</li>
<li> It's Your TurnChess, Checkers, Backgammon and more</li>
<li>Ultimate Online Gaming</li>
<li>JigZoneJigsaw Puzzle Paradise</li>
<li>Play-Free-Online-Games.netMulti Player Games on the Internet</li>
<li>Puzzle Choice</li>
<li>The Puzzle Connection</li>
<li>Web Sudoku</li>
</ul>
</div>
<div <a id="Humor" name="Humor"></a>
<h2>Humor</h2>
<ul>
<li>BreakFunny Pics, Hot Chicks, and Cool Flicks</li>
<li>Dumb Criminal Acts!</li>
<li>The Darwin AwardsImprovement of the human genome by honoring those who accidentally kill themselves in really stupid ways</li>
<li>The Pay BackGet revenge with this collection of revenge ideas, pranks, and practical jokes</li>
<li>Practical Jokes</li>
</ul>
</div>
</div>
<!-- InstanceEndEditable -->
<!-- end .content --></div>
<div class="footer" id="footer">
<a class="sitemap" href="SiteMap.htm">Site map</a> ¦ <a href="index.html"> Home</a >
<!-- end .footer --></div>
<!-- end .container --></div>
<div id="sitelock_shield_logo" class="fixed_btm" style="bottom:0;position:fixed;_position:absolute;right:0;"><a href="https://www.sitelock.com/verify.php?site=www.rickzipser.com" onclick="window.open('https://www.sitelock.com/verify.php?site=www.rickzipser.com','SiteLock','width=600,height=600,left=160,top=170');return false;" ><img alt="PCI Compliance and Malware Removal" title="SiteLock" src="http://shield.sitelock.com/shield/www.rickzipser.com"/></a></div>
</body>
<!-- InstanceEnd --></html>

change this line
return .$_SESSION['option'];
to
return $_SESSION['option'];

on click generate anew tab using jquery

there is link on first tab and when i click on that link it should generate a new tab and focus should gone to that tab.there is a problem the tab is generated but the focus is not going to that tab can anybody help me plz.
<link rel="stylesheet" type="text/css" href="./compo.css"/>
<script type="text/javascript" src="./jquery-1.7.1.min.js" charset="utf-8"></script>
<script type="text/javascript" src="tabs-2.js" charset="utf-8"></script>
<title>"Tab sheet 2" demo — Component Library</title>
<script type="text/javascript">
function displaydetails() {
document.getElementById("tab2").style.display = "";
}
</script>
</head>
<body class="COMPO">
<!-- Wrapper -->
<div id="wrapper">
<!-- Container -->
<div id="container" class="resolution_800x600">
<!-- tabpanel_customer_data -->
<div id="tabpanel-demo" class="tab_panel_2 clear">
<ul id="tabpanel-liste" class="tab_menu clear">
<li id="tab1" class="tabpanel-tabbar-item tab_active">Tab 1</li>
<li id="tab2" class="tabpanel-tabbar-item" style="display:none"><a href="#content02" class="tabpanel-tabbar-link" >Tab 2</a></li>
</ul>
<!-- Tab_content 01 -->
<div id="content01" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-1">tab 1</h3>
<div class="texts">
<p>
click me
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 01 -->
<!-- Tab_content 02 -->
<div id="content02" class="tab_panel_content_2">
<h3 class="title_n2" id="tab-2">tab 2</h3>
<div class="texts">
<p>
Content of the 2nd tab
</p>
</div>
<!-- /bloc_consultation -->
</div>
<!-- /Tab_content 02 -->
</div>
<!-- /tabpanel_customer_data -->
</div>
<!-- /Container -->
</div>
<!-- /Wrapper -->
js
var hideClass = "hide";
var tabClass = "tab_panel_2";
var activeClass = "tab_active";
var itemClass = "tabpanel-tabbar-item";
var linkClass = "tabpanel-tabbar-link";
var panelClass = "tab_panel_content_2";
var spanClass = "span_tab";
$(document).ready(function() {
$("."+panelClass).addClass(hideClass);
$("div."+tabClass+" ul li."+itemClass).each(function() {
var link = $(this).children("a");
$(this).append("<span class=\""+spanClass+"\">"+link.html()+"</span>");
$(this).children("span."+spanClass).hide();
});
$("div."+tabClass+" ul li."+activeClass+" a."+linkClass).each(function() {
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
});
$("div."+tabClass+" ul li."+itemClass+" a."+linkClass).click(function() {
$(this).parents("div."+tabClass).children("."+panelClass).addClass(hideClass);
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("span."+spanClass).hide();
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show();
$("#"+$(this).attr("href").replace("#","")).removeClass(hideClass);
$(this).hide();
$(this).siblings("span."+spanClass).show();
return false;
});
});

If this is your new tab try this:
$(this).parents("li."+itemClass).siblings("li."+itemClass).children("a."+linkClass).show().focus();