(Solved my issue-this will stay up as a reference to how an Ajax call works)
I am just learning javascript and how to implement Ajax requests. I am creating a webpage and I want to use Ajax to grab data from a JSON file and display it on the page. I have a div element with the id of jsonpetdata and the JSON file is petinformation.json. I am not getting any syntax errors nor errors with javascript in the console so I have no idea why it isn't displaying data. I have a li in an ul with the id of "dog" and I set up a click event handler in jquery to grab data when clicked using ajax. I just want it to display the data in the empty div with the id of "jsonpetdata". Any help is appreciated.
$("#dog").click(function() {
$.ajax({
type: "GET",
url: "petinformation.json",
dataType: "json",
success: function(data) {
$("#jsonpetdata").html("");
$.each(data, function() {
$.each(this, function(key, value) {
$("#jsonpetdata").append (
value.name + "<br>" +
value.title + "<br>" +
value.paragraph + "<br><br>"
);
});
});
}
});
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="jquery-ui-1.12.1.custom/jquery-ui.min.css">
<link rel="stylesheet" href="dropkick.css">
<link href="jquery.bxslider.css" rel="stylesheet">
<link rel="stylesheet" href="styles.css">
<title>Little Walker</title>
<script src="jquery-3.4.1.min.js"></script>
<script src="jquery-ui-1.12.1.custom/jquery-ui.min.js"></script>
<script src="dropkick.js"></script>
<script src="js12/jquery.bxSlider.js"></script>
<script src="index.js"></script> <!--links the javascript file-->
</head>
<body>
<header>
<div class ="topnav" id="myTab">
<nav>
<ul> <!--Creates navigation bar, sets the information page to the active tab-->
<li>Home</li>
<li> <a class ="active" href = "Information.html" >Information</a></li>
<li><a href = "Appointment.html" >Appointment</a></li>
<li>About</li>
</ul>
</nav>
</div>
</header>
<main>
<h1>Helpful Hints</h1>
<p>This page is dedicated to offer you helpful information depending on what type of animal you have.</p>
<label for="animal" id = "animal_label">Choose an animal to get information(you will be redirected to a webpage)</label>
<br>
<br>
<div class="custom-select" id="custom-select"> <!--creates a drop down menu to select which animal you want more information on-->
<select id="animal" name="animal" class="animal" required size="1" onchange="this.options[this.selectedIndex].value && (window.location = this.options[this.selectedIndex].value);"> <!--redirects user to specified webpage on click-->
<option value="">Select</option>
<option value="https://iditarod.com/ten-tips-for-taking-care-of-your-dog/">Dog</option> <!--depending on the selected animal, clicking on the item will re-direct you to a specific web page-->
<option value="https://www.petsafe.net/learn/cats-101-basic-health-care-tips-to-keep-your-cat-healthy">Cat</option>
<option value="https://www.petco.com/content/petco/PetcoStore/en_US/pet-services/resource-center/new-pet/eight-tips-to-keep-your-freshwater-fish-happy-and-healthy.html">Fish</option>
</select>
</div>
<div id = "jsoninformation">
<p>If you would rather not be directed to a website, you can get quick tips on your pets by selecting here.</p>
<ul>
<li id = "dog"><a title="dog">Dog</a></li>
</ul>
</div>
<div id="jsonpetdata"></div>
<div id ="bxslider">
<ul id="slider">
<li><img src = "images/dog.jpg" alt = "dog" ></li>
<li><img src = "images/cat.jpeg" alt = "cat" ></li>
<li><img src = "images/fish.jpg" alt = "fish" height = "300" ></li>
</ul>
<p id="pager"></p>
</div>
<!--<img src="householdpets.jpg" alt = "Household Pets" width = "800" height = "500"/>adds an image to the page-->
</main>
<footer> <p>©littlewalkerco</p></footer>
</body>
JSON: {"pets":[
{
"name": "Dog",
"title": "Caring tips",
"paragraph": "1. Provide a protected and clean living environment for your dog 2. Always keep fresh water available. 3. Feed a quality diet and prevent obesity. 4. Have your pet examined by a veterinarian on a regular basis. 5. Let your dog exercise."
}
]}
Related
I have a Flask setup serving a template. The data for this can be nicely split across a few different "sets" which can all be rendered with the same template. I have inserted Bootstrap tabs which I would like to handle displaying the data for each separate set. The data my be non-existent or incomplete initially, but will be filled in over time. The hope is that when the user clicks a new Bootstrap tab, it triggers a request for Flask to return the most recent data pertaining to whichever tab was selected.
I have boiled it down to the small example below. I can successfully generate the Flask request when the tab is changed, but the result isn't triggering a new rendering of the template.
Flask route:
#app.route('/test_route', methods=['GET'])
def get_simple():
set_number_str = request.args.get('set', "mydata-1", type=str)
set_number = int(set_number_str.split('-')[-1])
ready = bool(random.getrandbits(1))
if ready:
# get_data_for_set(set_number)
return render_template('simple_template.html',valid=1, data_set=set_number, data_points=[1,2,3])
else:
return render_template('simple_template.html', valid=0, data_set=set_number, data_points=[0, 0, 0])
Html:
<html>
<head>
<link href="{{url_for('static', filename='js/bootstrap-3.3.7-dist/css/bootstrap.min.css')}}" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="{{url_for('static', filename='js/jquery-3.3.1.min.js')}}"></script>
<script type="text/javascript" src="{{url_for('static', filename='js/bootstrap-3.3.7-dist/js/bootstrap.min.js')}}"></script>
</head>
<body>
<div class="my-tabs">
<ul class="nav nav-tabs" id="set-tabs">
<li class="active" id="data-1">
Set 1
</li>
<li class="" id="data-2">
Set 2
</li>
</ul>
<div id="my-tab-content" class="tab-content">
<div class="tab-pane" id="mydata-1">
<p>Placeholder 1</p>
</div>
<div class="tab-pane" id="mydata-2">
<p>Placeholder 2</p>
</div>
</div>
</div>
<script type="text/javascript">
if ({{valid}} == 0) {
$('#mydata'+'{{data_set}}').html("Waiting on scenario to start...");
} else {
$('#mydata'+'{{data_set}}').html("Have some data: " + "{{data_points}}");
}
</script>
<script type="text/javascript">
$('a[data-toggle="tab"]').on('shown.bs.tab', function (e) {
var set_id = $(e.target).attr("href");
$.ajax({
url: "/test_route",
type: "get",
data: {set: set_id},
success: function(response) {
$('#mydata-'+set_id).replaceWith(response);
},
error: function(xhr) {
console.log(xhr)
}
});
return false;
});
</script>
When I run, the only thing I see is the "Placeholder _" text.
Is this a limitation of Flask/Jinja2 templating or something I'm doing wrong? If it's the former, do you have any alternative approaches you would recommend? My key constraint is needing to re-retrieve the data from the server each time as it will change.
I am building an e-commerce site. Right now it's basically one HTML page that filters in based on page loads and clicks. I did it this because the entire site needed to be dynamic, as I'll be tying in a show shortly.
Everything seems to work fine now that I have placed the script on the actual pages instead of in a main .js file. I get a few hiccups here and there, and I'm hoping this issue will help fix some of them.
Sometimes when I click on the view cart button it throws back a type error saying that $a.mobile.document.on is not a function. This doesn't happen all the time. I can just click the button with the shopping cart open and the cart just refreshes. As I am clicking the button, nothing in the code should be changing, everything should be flowing the exact same. Why do I get the error sometimes? There is no pattern as to how often the error occurs (i.e. every 3rd click, etc...)
My code:
<head>
<meta charset="UTF-8"/>
<title>DATique</title>
<link rel="stylesheet" href="styles.css"/>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="lib/jqm-icon-pack-fa.css">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
</head>
<body>
<div id="container" data-role="page" data-theme="b">
<div id="header" data-role="header">
<div id="headerGraphic"><img class="menu" src="img/products/DATique.png" alt="" align=center></div>
<!-- todo add tagline back in -->
<div data-role="footer" id="headerTagLine">an adult novelty company</div>
</div>
<div id="mainNavBar">
<div id="mainNav" data-role="navbar">
<ul>
<li class="home ui-icon-home">Home</li>
<li class="about ui-icon-question-circle">About</li>
<li class="contact ui-icon-envelope">Contact</li>
<li class="request ui-icon-lightbulb-o">Requests</li>
<li class="find ui-icon-location-arrow">Find</li>
</ul>
</div>
</div>
<div id="content" data-role="main">
<!-- todo add facebook plugin -->
<div id="sideBar">
<div id="sideNav">
<script>
</script>
</div>
</div>
<div id="productWindow">
<script>
</script>
</div>
</div>
<div data-role="footer" id="footer">
<ul>
<li id="addingItem"></li>
<li id="cartHolder">
<div class="view">View Cart</div>
<div class="cartImg"><img src="lib/png/shopping-cart.png"></div>
<div class="badge ui-corner-all"></div>
</li>
</ul>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script>
$(document).ready(function () {
var initialLoad = $.post('lib/aboutUs.php');
initialLoad.done(function (data) {
$('#productWindow').html(data);
});
var sideBar = $.post('lib/sideNav.php');
sideBar.done(function (data) {
$('#sideNav').html(data);
});
$('#cartHolder').unbind().click(function (data) {
var url = 'lib/cart.php';
var getCart = $.post(url);
console.log(data);
getCart.done(function (data) {
$('#content').html(data);
});
getCart.fail(function (data) {
console.log(data);
});
});
})
</script>
</body>
Here's my cart.php. The only file affected by the click event is the show cart button.
<link rel="stylesheet"
href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<?php
session_start();
#$_SESSION = array();
$items = $_SESSION;
echo "<div id='showCart' class='ui-corner-all' style='max-width:400px;'>
<div data-role='header' data-theme='a' class='ui-corner-all' style='margin-top:20px;'>
<h1>Your Cart</h1>
</div>
<div role='main' class='ui-content ui-corner-all'>
<ul data-role='listview' data-split-icon='delete' data-split-theme='d'>";
foreach ($items['cart'] as $list) {
echo "<li ><a href='#'>
<img src = 'img/products/" . $list['itemNum'] . ".png'>
<h3 > " . $list['itemName'] . " </h3 >
<h1 style='text-align:right'> " . $list['price'] . "
</h1 ></a>
<a href='#' class='removeItem' name='" . $list['itemNum'] . "'>Remove Item</a>
</li >";
}
echo "</ul>
</div>
</div>"
?>
<script>
$(document).ready(function() {
console.log ("error ready");
function showCart() {
console.log("showCart Function");
var url = 'lib/cart.php';
var getCart = $.post(url);
getCart.done(function (data) {
console.log("cart received");
$('#content').html(data);
});
}
$('.removeItem').unbind().click(function () {
console.log("remove clicked");
var itemNum = {'itemNum': ($(this).attr('name'))};
var sent = $.post("lib/removeFromCart.php", itemNum);
sent.done(function () {
console.log("item removed from cart");
showCart();
});
});
});
</script>
I also have 2 other pages that have script on them that are loaded onto the home page by $.post.
Sorry if this question is easy, I just hope it isn't a period or brace somewhere. It's almost always a period or a brace. Again, looking to see if someone can tell me why this sometimes throws an error when I hit the view cart button. It seems to be doing it right after the console.log call in the cart.php.
Just a note not an answer
i had all my javascript in a myScript.js file that loaded at the bottom of the html of the main page. but none of the other pages with scipts would read the javascript on the main page for some reason until i loaded the .js file into each page.
$(document).ready(function() {
code 1
....});
$(document).ready(function() {
code 2
....});
code 1 is not able to access code 2 and vice versa, in php this is akin to this
function one(){
code 1
}
function too(){
code 2
}
One way around that is to globalize stuff, by using window. although it's not usually recommended.
var one;
var window.one;
for example( scope resolution ). Other ways involve using the DOM, by attaching to a object on the page, such as how a plugin works. for example using $(element).data('mydata', {foo:'bar'});
not sure if this was what you were saying but the explanation is way to long for a comment.
Unfortunately, I am not sure to understand anything to java, jquery and all this kind of thing. Nevertheless, I am trying to get some inspiration on forums in order to make a personal website that contains a vertical navbar and a div container in which external html pages will be loaded. Each html file uses an html5 applet called JSmol, which plots 3D molecules that can be manipulated interactively. The main page looks like this:
<!DOCTYPE html>
<html>
<head>
<title> 3D Chemistry </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<link href='http://fonts.googleapis.com/css?family=Archivo+Narrow' rel='stylesheet' type='text/css'>
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript">
$(document).ready(function() {
// select all the links with class="lnk", when one of them is clicked, get its "href" value
// load the content from that URL and check the "status" of the request
// place the response or an error message into the tag with id="content"
$('a.lnk').click(function() {
var url = $(this).attr('href');
$('#content').load(url, function(response, status, xhr) {
// check the status, if "success", place the response into #content
// else, if "error", define an error message and insert it into #content
// else, display an Alert with the status
if(status=='success') {
$('#content').html(response);
}
else if(status=='error') {
var ermsg = '<i>There was an error: '+ xhr.status+ ' '+ xhr.statusText+ '</i>';
$('#content').html(ermsg);
}
else { alert(status); }
});
return false;
})
});
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div id="header"> <a id="UPS-link" href="http://www.univ-tlse3.fr/" title="Paul Sabatier University - Toulouse III">
<img src="Chem3D-IMAGES/UT3_PRES_logoQ.png" alt="Paul Sabatier University" id="logoUPS" width=300px />
</a>
</div>
<div id="vmenu">
<ul>
<li>Home</li>
<li>3D Molecules
<ul>
<li>Mol1</li>
<li>Mol2</li>
</ul>
</li>
<li>Symmetry
<ul>
<li>Symmetry Elements
<ul>
<li>C<sub>2</sub>H<sub>6</sub></li>
<li>Ru<sub>4</sub>H<sub>4</sub>(CO)<sub>12</sub></li>
</ul>
</li>
<li>Point Groups
</li>
</ul>
</li>
<li>Solids
<ul>
<li>fcc</li>
<li>hcp</li>
</ul>
</li>
</ul>
</div>
<div id="content">
</div>
<div class="s_author" id="footer">
author: romuald.poteau_at_univ-tlse3.fr
<br/>last modification: 2013/12/16
</div>
</body>
</html>
Up to now, I have worked on the PG.html file (Point Group entry in the vertical menu), which works perfectly fine when it is loaded separately. But is not the case when it is loaded inside the main page as an external html page. The title is the only thing that appears, it seems that the jsmol application is not properly initialized. May be this is specific to the invocation of jsmol ; or is this a general issue when one wants to load hmtl files with embedded scripts ?
<!DOCTYPE html>
<html>
<head>
<title> POINT GROUPS </title>
<link rel="shortcut icon" type="image/x-icon" href="favicon.ico" />
<link rel="stylesheet" type="text/css" href="Chem3D-CSS/MolChem.css" />
<!-- META TAGS start -->
<meta name="Title" content="Molecular Chemistry" />
<meta name="Format" content="text/html" />
<meta name="Language" content="en" />
<meta charset="UTF-8">
<!-- META TAGS end -->
<script type="text/javascript" src="jquery/jquery.min.js"></script>
<script type="text/javascript" src="./JSmol.min.js"></script>
<script type="text/javascript">
// ---------------------------------------------------------------------------------
////// every page will need one variable and one Info object for each applet object
var Info = {
width: 500,
height: 500,
color: "0xC0C0C0",
use: "HTML5",
jarPath: "java",
j2sPath: "j2s",
jarFile: "JmolApplet.jar",
isSigned: false,
addSelectionOptions: false,
serverURL: "php/jsmol.php",
readyFunction: jmol_isReady,
console: "jmol_infodiv",
disableInitialConsole: true,
debug: false,
}
</script>
</head>
<body class="s_page" alink="#ee0000" link="#0000ee" vlink="#551a8b">
<div class="s_title" id="titlePG">
Point Groups
</div>
<div class="s_normal" id="mainPG">
<table border="0">
<tbody>
<tr valign="top">
<td nowrap="nowrap">
<script type="text/javascript">
Jmol.getApplet("Jmol1", Info);
Jmol.script(Jmol1,'load Chem3D-data/nh2cl.xyz;');
Jmol.resizeApplet(Jmol1, 500);
</script>
<br>
</td>
<td>
<script>
Jmol.setButtonCss(null,"style='width:300px'")
Jmol.jmolButton(Jmol1,"load Chem3D-data/nh2cl.xyz;", "NH2Cl (Cs)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/cis-dichloroethylene.xyz;", "cis-dichloroethylene (C2v)");
Jmol.jmolBr();
Jmol.jmolButton(Jmol1,"load Chem3D-data/trans-dichloroethylene.xyz;", "trans-dichloroethylene (C2h)");
</script>
<br>
</td>
</tr>
</tbody>
</table>
</div>
</body>
</html>
I have tried to find an answer to this question by checking previous posts, but my poor skills do not allow me to identify relevant suggestions for such issue.
Thanks for any help.
// Create a DOM object from a URL
$html = file_get_html('http://www.google.com/');
// Create a DOM object from a HTML file
$html = file_get_html('test.htm');
i'm doing some tests, to do that i took a template on the kendo ui' page.
i clean it a bit to get what i want and right now, i have two div header in my html page.
i remove one at the load of the page and when i click on a button, i just want to remove the current header et set another one instead.
i've tried plenty of things but nothing seems to work correctly using jquery
here is my code:
<!DOCTYPE html>
<html>
<head>
<title>Demo</title>
<link href="styles/kendo.common.min.css" rel="stylesheet" />
<link href="styles/kendo.default.min.css" rel="stylesheet" />
<link href="styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/index.css" rel="stylesheet" />
<script src="js/jquery.min.js"></script>
<script src="js/kendo.all.min.js"></script>
</head>
<!--
Contenu des pages chargées par le paneau left
-->
<body>
<div data-role="view" id="drawer-home" data-layout="drawer-layout" data-title="Inbox"
<p>recherche </p>
</div>
<div data-role="view" id="drawer-starred" data-layout="drawer-layout" data-title="Starred Items">
<p>recherche </p>
</div>
<div data-role="view" id="drawer-drafts" data-layout="drawer-layout" data-title="Drafts">
<p>recherche </p>
</div>
<div data-role="drawer" id="my-drawer" style="width: 270px" data-views="['/', 'drawer-home', 'drawer-starred', 'drawer-drafts']">
<ul data-role="listview" data-type="group"
<li>Menu
<ul>
<li>m1</li>
<li>m2</li>
<li>m3</li>
</ul>
</li>
</ul>
</div>
<div class="Head" data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div class="" data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<span id="compagnyName">Demo</span>
<a data-role="button" onClick="changeHead()" data-icon="drawer-button" data-align="right"></a>
</div>
</header>
</div>
<div class="HeadSearching" data-role="layout" data-id="drawer-layout">
<header data-role="header">
<div data-role="navbar">
<a data-role="button" data-rel="drawer" href="#my-drawer" data-icon="drawer-button" data-align="left"></a>
<input type="text" id="city" name="city" class="k-textbox" placeholder="Ville" data-align="center" />
<select name="country" id="country" data-align="right">
<option>France</option>
<option>Angleterre</option>
<option>Luxembourg</option>
<option>Espagne</option>
</select>
</div>
</header>
</div>
<script>
var app = new kendo.mobile.Application(document.body);
$('.HeadSearching').remove();
</script>
<script>
function changeHead()
{
alert('header replace');
$('.head').replaceWith('.HeadSearching');
}
</script>
</body>
</html>
if someone could help me doing this correctly ..
thanks by advance ;)
Function replaceWith(newContent) as argument use HTML string. replaceWith
You can try something like:
$('.head').replaceWith($('.HeadSearching'));
For this situation maybe is better to use show/hide different div.
This works for me without the '.'
$('Head').replaceWith("HeadSearching");
For class selectors, you need to respect case. You're trying to select the element with $('.head'), but the class name is Head.
I'd suggest you always use lower-case ids and classes for simplicity.
In your case,
$('.Head').replaceWith($('.HeadSearching'));
should work, however you're removing the
element you're trying to replace $('.Head') with:
var app = new kendo.mobile.Application(document.body);
$('.HeadSearching').remove();
So if you want to replace the .Head element with the .HeadSearching element, you need to remove the second line that removes all .HeadSearching elements.
If you want to hide .HeadSearching initially, then you should use $(".HeadSearching").hide() instead, and when you want to replace it, you could simply do
$(".Head").hide()
$(".HeadSearching").show()
and vice versa.
I'm creating a web application which loads tabs using AJAX. My problem is that if I have multiple tabs, jQuery reloads a tab every time I click it again (after visiting another tab).
Here is my code:
index.html:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>Air Office - New file</title>
<!-- jQuery -->
<script type="text/javascript" src="jqueryui/js/jquery-1.3.2.min.js"></script>
<script type="text/javascript" src="jqueryui/js/jquery-ui-1.7.2.custom.min.js"></script>
<link rel="stylesheet" href="jqueryui/css/custom-theme/jquery-ui-1.7.2.custom.css" />
<!-- Scripts -->
<script type="text/javascript" src="JS/main.js"></script>
</head>
<body>
<input type="button" onclick="newDoc();" value="New document" />
<div id="mainTabs">
<ul>
</ul>
</div>
</body>
</html>
main.js:
$(document).ready(function()
{
//Create tabs
$("#mainTabs").tabs({load: function()
{
//Make accordion from template selector
$(".selectTemplate").accordion();
}}).find(".ui-tabs-nav").sortable({axis:'x'});
//Create new document tab
newDoc();
});
function newDoc()
{
//Create new tab
$("#mainTabs").tabs('add', 'newdocument.html', 'New Document');
}
newdocument.html:
<div>
<h1>Please select a template</h1>
<div class="selectTemplate">
<h3>Document</h3>
<div>
<ul class="selectTemplateTable">
<li>Blank</li>
<li>Letter</li>
<li>Envelope</li>
<li>Business card</li>
</ul>
</div>
<h3>Spreadsheets</h3>
<div>
<ul class="selectTemplateTable">
<li>Blank</li>
<li>Check list</li>
<li>Budget</li>
</ul>
</div>
<h3>Presentations</h3>
<div>
<ul class="selectTemplateTable">
<li>White</li>
<li>Black</li>
<li>Nature</li>
<li>Space</li>
</ul>
</div>
<h3>Form</h3>
<div>
<ul class="selectTemplateTable">
<li>Survey</li>
<li>Exam</li>
</ul>
</div>
</div>
</div>
How can I fix this?
Thanks,
I found out that I must use cache. I'll answer my own q to help others.
Add cache: true to the tabs() flags:
//Create tabs
$("#mainTabs").tabs({load: function()
{
//Make accordion from template selector
$(".selectTemplate").accordion();
}, cache: true})