Hide an element and show another element on submit a form - javascript

In a web page, I would like to hide the form on submit (either by clicking or pressing enter) and shows the results. It does not work when the Go web server is run.
When I check the HTML file (without running the Go file), it works. But, when I run the Go code, it shows it quickly and goes to the initial state.
The HTML (Bootstrap) code is here:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta name="description" content="" />
<meta name="google" value="notranslate">
<title>TEST</title>
<!-- favicon -->
<link rel="icon" type="image/png" href="../static/images/favicon.png">
<!-- CSS -->
<link rel="stylesheet" type="text/css" href="../static/css/style.css" />
<!-- scripts -->
<script src="https://cdnjs.cloudflare.com/ajax/libs/particlesjs/2.2.3/particles.min.js"></script>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" />
<style>
body {
background-color: #2f3b5a
}
.table thead th,
.table td,
.table th {
border: 0px;
text-align: center;
background-color: #c83660;
border-radius: 10px;
}
</style>
</head>
<body>
<!-- background particles -->
<canvas class="background" style="position: absolute; top: 0; bottom: 0; left: 0; right: 0; z-index: -1;"></canvas>
<div class="d-flex align-items-center flex-column justify-content-center text-white" style="width:100%;">
<h1 class="display-4">TOOL</h1>
<div class="container">
<div class="row">
<div class="col">
</div>
<div class="col-6">
<form class="forms">
<div class="input-group">
<div class="input-group-prepend">
<select class="selectpicker forms" name="query">
<option selected>Query Type</option>
<option value="any">Any</option>
<option value="aaaa">A Record</option>
</select>
</div>
<input type="text" class="form-control forms" name="host" placeholder="Type here...">
<div class="input-group-append">
<button type="button forms" class="btn"><i class="fas fa-search"
aria-hidden="true"></i></button>
</div>
</div>
</form>
<div id="result" style="display:none;">
<table class="table table-borderless">
<thead>
<tr>
<th scope="col">Record</th>
<th scope="col">Value</th>
</tr>
</thead>
<tbody>
<tr>
<td>A</td>
{{range .Arecord}}
<td>{{.}}</td>
{{end}}
</tr>
</tbody>
</table>
</div>
</div>
<div class="col">
</div>
</div>
</div>
</div>
<!--scripts loaded here-->
<script src="https://kit.fontawesome.com/80c543b9b1.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.13.0/umd/popper.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js"></script>
<script src="https://rawgit.com/bassjobsen/affix/master/assets/js/affix.js"></script>
<script>
window.onload = function () {
Particles.init({
selector: '.background',
// red, blue, yellow
color: ['#f76262', '#216583', '#f6d365'],
maxParticles: 130,
connectParticles: true,
responsive: [
{
breakpoint: 768,
options: {
maxParticles: 80
}
}, {
breakpoint: 375,
options: {
maxParticles: 50
}
}
]
});
};
$("form").on("submit", function (e) {
//e.preventDefault();
$("form").remove();
$("#result").show("slow");
});
</script>
</body>
</html>
I expect removing the form on submit and shows the results table but as long as I run the code in Go, it just restarts the page (quickly shows the results but) the form value is empty.
url := r.FormValue("host")

I may be totally off here, because I don't think I understand your problem completely, however it looks like you're trying to submit this form, and then display the results section without the form. I'm guessing your Go server is somehow preparing these results based on the form values.
If that is really the case, then what's happening is that you submit the form, your javascript hides the form and shows the empty results section, then your server prepares the results, and you display the form again. This time though, it is a completely new page and, it has no knowledge of the Javascript executed before form submission. It is a fresh new page, so it'll show the empty form, and not the results section.
If what I understand is correct, then what you should do is to change your template so that it knows it is displaying the results, so it builds the result section without display: none.

Sounds like you should use ajax call to send the request instead of form submit and based upon the response, display the result show/hide.

Related

How to use Thymeleaf ID in Javascript?

I have been using HTML to assign my ID in Thymeleaf (data is from PostgreSQL, framework SpringBoot on Eclipse. PHP and JQuery not included in syllabus).
I want to check if the user has not selected any radio buttons, and want to try it on Javascript.
The HTML:
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8" name="viewport"
content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0" />
<!-- CSSの読み込み -->
<link type="text/css" rel="stylesheet" href="./css/examMain.css">
<title>模擬試験オンラインー英単語試験</title>
</head>
<body>
<form method="post" action="/result" data-th-object="${form}">
<!-- ヘッダータイトル -->
<div class="headerbackground">
<h6>模擬試験オンライン</h6>
</div>
<br>
<!-- 試験指示 -->
<div class="examinstruction">
<p>表示された言葉の英単語を以下から1つを選び、</p>
<p>OKボタンをクリックしてください。</p>
</div>
<br>
<!-- 質問 -->
<div data-th-each="list, st : ${form.list}">
<p style="text-align: center; font-size: 12px;">
<span data-th-text="${list.questionCount}">n</span> <span>/</span> <span
data-th-text="${list.questionTotal}">/n</span>
</p>
<div class="questionborder">
<p style="font-size: 22px; font-weight: bold"
data-th-text="${list.content}">question</p>
</div>
<!-- 解答選択肢 -->
<fieldset style="border: 0">
<div class="choiceradiobox"
data-th-each="choice, stat : ${list.choice}">
<input data-th-id="|choice_id${st.index}${stat.index}|"
data-th-name="|choice${st.count}|" type="radio"
data-th-value="${choice}"
data-th-field="*{list[__${st.index}__].choiceAnswer}" /> <br>
<label data-th-for="|choice_id${st.index}${stat.index}|"
data-th-text="${choice}"></label>
</div>
</fieldset>
</div>
<!-- 解答完了ボタン -->
<div class="submitsection">
<input class="btn btn-secondary" style="font-size: 25px"
type="submit" value="OK!">
</div>
</form>
</body>
</html>
Have been stuck on the Id part- Is there any way to change this bit
data-th-id="|choice_id${st.index}${stat.index}|"
to Javascript code as something that starts with document.getElementById like this?
var choiceselect = document.getElementById("|choice_id${st.index}${stat.index}|".checked);
I read the official Thymeleaf document but still could not understand the Js part :( (the code above creates an error that says java.lang.IndexOutOfBoundsException: Index 1 out of bounds for length 1)
Thank you in advance!
i think i figured it out- for radio buttons instead of the id it's best to use the name.
like this:
for (var j = 0; j < 8; j++) {
var radio_choice = document.getElementsByName("list[" + j +"].choiceAnswer");

off FUNCTION jquery

I am trying to make a validation form in a .php file , so it works in a way that once the field validation is done the form gets submitted . My form although is getting submitted but for that I need to press the submit button twice . Below is the code , the problem is mainly in the script section.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/css/bootstrap.min.css" integrity="sha384-rwoIResjU2yc3z8GV/NPeZWAv56rSmLldC3R/AZzGRnGxQQKnKkoFVhFQhNUwEyJ" crossorigin="anonymous">
<title></title>
<style type="text/css">
.container{
margin-top: 20px;
width: 500px;
}
#content{
resize: none;
}
#success{
display: none;
}
#failure{
display: none;
}
</style>
<body>
<div class="container">
<h1 class="display-3">Get in Touch</h1>
<div class="alert alert-danger" role="alert" id="failure">
</div>
<div class="alert alert-success" role="alert" id="success">
<strong>Well done!</strong> We will get back to you ASAP.
</div>
<form>
<div class="form-group">
<label for="email">Email address</label>
<input type="email" class="form-control" id="email" aria-describedby="emailHelp" placeholder="Enter email">
<small id="emailHelp" class="form-text text-muted">We'll never share your email with anyone else.</small>
</div>
<div class="form-group">
<label for="subject">Subject</label>
<input type="text" class="form-control" id="subject">
</div>
<div class="form-group">
<label for="content">Content</label>
<textarea class="form-control" id="content" rows="3"></textarea>
</div>
<button type="submit" class="btn btn-primary" id="submit">Submit</button>
</form>
</div>
</body>
<script src="https://code.jquery.com/jquery-3.1.1.slim.min.js" integrity="sha384-A7FZj7v+d/sdmMqp/nOQwliLvUsJfDHW+k9Omg/a/EheAdgtzNs3hpfag6Ed950n" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/tether/1.4.0/js/tether.min.js" integrity="sha384-DztdAPBWPRXSA/3eYEEUWrWCy7G5KFbe8fFjk5JAIxUYHKkDx6Qin1DkWx51bBrb" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0-alpha.6/js/bootstrap.min.js" integrity="sha384-vBWWzlZJ8ea9aCX4pEW3rVHjgjt7zpkNpZk+02D9phzyeVkE+jo0ieGizqPLForn" crossorigin="anonymous"></script>
</body>
<script type="text/javascript">
$( "form" ).submit(function( event ) {
event.preventDefault();
var missing="";
if($("#email").val()=="")
{
missing=missing+"<p>Email is Missing</p><br>"
}
if($("#content").val()=="")
{
missing=missing+"<p>Content is Missing</p><br>"
}
if($("#subject").val()=="")
{
missing=missing+"<p>Subject is Missing</p><br>"
}
if(missing!="")
{
$("#failure").html(" <strong>Oh snap!</strong><br>."+missing);
$("#failure").show();
}
else{
$("#failure").hide();
$("form").off("submit").submit(); <- Problematic line
}
});
</script>
</body>
</html>
The issue is here:
$("form").off("submit").submit()
Instead of this, use preventDefault to hold the form submit to check the validation, and when validation succeed submit the form using:
$("form").submit();
.off only removes events that were added using .on. It doesn't remove native events or anything like that.
You're already using event.preventDefault() to stop the native form submission, which is correct.
Therefore simply $("form").submit(); should be sufficient to submit the form programmatically, once your validation is complete.
P.S. I assume you are validating your form on the server (PHP) side as well? JavaScript validation is nice for enhanced user experience but you cannot rely on it, as a malicious user (or bot) can easily change by manipulating the page source, or just ignore it entirely and post to your URL. If you value the integrity of your server and your data you must always validate forms on the server side as well.
Instead of $("form").off("submit").submit(); you can use this.submit();
Try to switch the order of the 2 functions:
$("form").submit().off("submit");

Javascript Uncaught TypeError: $(...).dialog is not a function

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).

ng-repeat elements are not showing up

In my application I'm making a get request through Angular's http service and in the view looping over the returned data to show an unordered list. But the problem is even though data is available after the get request , its not getting dispplyed on the page. Seems to be a CSS style problem, but don't know how to fix it. I want to show the unorder list within a bootstrap panel as a body.
Below is the angular piece of code inside the controlller for setting up the data
$http.get('/messages').success(function(data) {
console.log("Messages are "+data);
$scope.records=data;
});
Here is the html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>jQuery Bootstrap News plugin</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<link rel="stylesheet" href="/libs/css/bootstrap.min.css"/>
<link rel="stylesheet" href="/libs/css/font-awesome.min.css"/>
<link rel="stylesheet" href="/libs/css/custom.css"/>
<script src="/libs/js/jquery-3.0.0.min.js" type="text/javascript"></script>
<script src="/libs/js/newsbox.min.js" type="text/javascript"></script>
<script src="/libs/js/angular.min.js" type="text/javascript"></script>
<script src="/libs/js/main.js" type="text/javascript"></script>
</head>
<body ng-app="mean" ng-controller="MainCtrl">
<br/>
<div class="container">
<div class="row">
<div class="col-md-6">
<div class="panel panel-default">
<div class="panel-heading">
<span class="glyphicon glyphicon-list-alt"></span><b> What you wanna do before you die ...</b>
</div>
<div ng-cloak class="panel-body">
<div class="row">
<div class="col-xs-12">
<ul class="demo1">
<li class="news-item" ng-repeat="item in records">
<table cellpadding="4">
<tr>
<td >
<img class="img-circle" width="60"
ng-src="/images/{{($index+11) % 10}}.png"/>
</td>
<td ng-cloak>
{{$index+1}}. {{item.username}}
</td>
</tr>
</table>
</li>
</ul>
</div>
</div>
</div>
<div class="panel-footer"></div>
</div>
</div>
</div>
<div class="row">
<div class="col-md-2 col-md-offset-1 ">
<form name="messageForm" novalidate="novalidate" ng-submit="onSubmit()" id="message-box">
<div class="form-group">
<textarea required ng-model="formModel.message"
style="background-color:#ffffe6;border:double 4px orange;border-radius: 0.5em;" rows="3" cols="50" id="message" placeholder="Write your message and press enter.."> </textarea>
<button class="btn btn-primary" type="submit">Shoot it</button>
</div>
<p ng-cloak class="help-block" ng-show="formModel.nameError">Looks like you forgot to mention your name !!!</p>
<p ng-cloak class="help-block" ng-show="formModel.messageEmpty">Really you don't wanna do anything before you die !!! </p>
<p ng-cloak class="help-block" ng-show="formModel.messageTooLong">You are trying to do too many things buddy, just 150 characters !!! </p>
</form>
</div>
</div>
</div>
<script type="text/javascript">
$(function () {
$(".demo1").bootstrapNews({
newsPerPage: 12,
autoplay: true,
pauseOnHover:true,
direction: 'up',
newsTickerInterval: 4000,
onToDo: function () {
//console.log(this);
}
});
});
</script>
</body>
</html>
When I check through chrome dev tool, data is present in that unordered list, data is present but somehow not getting displayed properly within bootstrap panel.
See this image
I noticed there is one undefined element at the bottom of unordered list while checking through dev tools. Any idea whats going wrong?
The panel body is empty
Why is the [ul] tag style set to "height:0px; overflow-y:hidden"? -- this would hide your content
you could also move the ng-cloak to the div.panel-body to the div.row and remove it from the child td
--
Delay bootstrapNews binding
$(function(){
if ($('.panel-body[ng-cloak]').length > 0)
return window.setTimeout(arguments.callee, 10);
$(".demo1").bootstrapNews({...});
});
I think you should write a directive for getting a callback when ng-repeat is done and that is a better solution instead of any 'delay' tactics.
Might help you to go through how I have done in my code- used a directive to emit a render finished event:
dashboard.directive('onFinishRender', function ($timeout) {
return {
restrict: 'A',
link: function (scope, element, attr) {
if (scope.$last === true) {
$timeout(function () {
scope.$emit(attr.onFinishRender);
});
}
}
}
});
In the controller I keep the event listener:
$scope.$on('dataLoaded', function(ngRepeatFinishedEvent) {
// your code to add bootstrapNews binding
});
and in the html side, I call them like this:
<div class="add_tenant_name" ng-repeat="tenant in tenants" on-finish-render="dataLoaded">
// more divs
</div>

jQuery Mobile styling: delayed initialization?

I'm new to this jQM stuff, as well as AJAX.
I have a site that keeps a static header and footer, and replaces #mainContent div with external .html/.php pages.
What I am finding is that when I click one of the nav-bar tabs (included in the header), and the #mainContent is replaced with another page, the jQuery Mobile-styling (of buttons, drop-down menus, etc) does not load right away.
Initially the default-style of buttons appears, then (if AJAX loads) a second later the page does a 'refresh-type blink', and the buttons are replaced with the jQM styled-versions.
Occasionally I get stuck with the AJAX 'loading circle', and the buttons retain their original style until the 'nav-bar link' is pressed again.
I know there's a perfectly good reason for this.
Research indicated that using "$(document).ready(function() { .... });" is not ideal for jQM. I replaced this in my navigation-script with "$(document).bind('pageinit', function() { .... });", which didn't really make a difference (though the navbuttons still work).
Here is my basic script initialization for my index.php
<!DOCTYPE html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="page" id="noteVote">
<!-- HEADER -->
<div data-role="header" align="middle" class="header">
<img src="images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
<!-- NAVBAR -->
<div data-role="navbar" data-grid="c" id="navBar">
<ul>
<li><a class="ui-btn" id="coursesButton">Courses</a></li>
<li><a class="ui-btn" id="searchButton">Search</a></li>
<li><a class="ui-btn" id="submitButton">Submit</a></li>
<li><a class="ui-btn" id="accountButton">Account</a></li>
</ul>
</div>
<!-- /NAVBAR -->
</div>
<!-- /HEADER -->
<!--
This is the MAIN This is where the contents will be replaced
-->
<div data-role="content" class="ui-content" id="mainContent">
<div class="main">
<p/>
content here.\
</div>
</div>
<!-- /MAIN -->
<!-- FOOTER -->
<div data-role="footer" class="footer" id="footer">
<?php
require_once('../account.php');
if ($account == "_")
{
echo "Not logged in";
} else {
echo "Logged in as " . $account;
}
?>
</div>
<!-- /FOOTER -->
</div>
<!-- /INDEX -->
<script src="./scripts/navScript.js"></script>
</body>
</html>
My navScript.js:
$(document).bind('pageinit', function() {
$("#coursesButton").on("click", function(e) {
//e.preventDefault();
//alert('courses');
$("#mainContent").load("./pages/courses.html");
});
$("#searchButton").on("click", function(e) {
//e.preventDefault();
//alert('search');
$("#mainContent").load("./pages/search.html");
});
$("#submitButton").on("click", function(e) {
//e.preventDefault();
//alert('submit');
$("#mainContent").load("./pages/submit.html");
});
$("#accountButton").on("click", function(e) {
//e.preventDefault();
//alert('account');
$("#mainContent").load("./pages/accountPage.php");
});
});
And then here is one of my external pages loaded. This is where the button-styling doesn't load properly... (search.html):
<!DOCTYPE html>
<html>
<head>
<title>NoteVote</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
<link rel="stylesheet" href="./NV_home.css">
<script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
</head>
<body>
<div data-role="content" class="ui-content" id="mainContent">
<div class="wrap">
<div class="main">
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<form method="POST" action="./search_result.php">
<legend><h3>Course:</h3></legend>
<select name="course" id="customSelect">
<option value="*">All</option>
<option value="COMM2216">COMM-2216</option>
<option value="COMP2121">COMP-2121</option>
<option value="COMP2510">COMP-2510</option>
<option value="COMP2526">COMP-2526</option>
<option value="COMP2714">COMP-2714</option>
<option value="COMP2721">COMP-2721</option>
</select>
</fieldset>
<p/>
<fieldset data-role="controlgroup" data-type="horizontal" data-role="fieldcontain">
<legend><h4>Type:</h4></legend>
<input type="radio" name="type" value="lec" id="lec"/>
<label for="lec">Lecture</label>
<input type="radio" name="type" value="lab" id="lab">
<label for="lab">Lab</label>
<input type="radio" name="type" value="*" id="both" checked="checked">
<label for="both">Both</label>
<p/>
<input type="submit" value="Go">
</fieldset>
</form>
</div>
</div>
</div>
<script src="./scripts/searchGo.js"></script>
</body>
</html>
If you could give me a pointer as to why it takes a second to 'refresh' before the jQuery-Mobile style over-rides that of the standard HTML5, I'd greatly appreciate it.
I have a feeling it is due to the scripts/styles being loaded twice (ie in the index.php and the search.html ), but if I do not load them in each page, then the buttons do not get stylized...
Though not really affecting basic functionality, it does give the web-app the appearance of really lagging.
Cheers.
The problem is you are not initializing the content you are loading via Ajax. When you load external data dynamically, you need to manually initialize any jQuery Mobile's "widget".
All you need is to call .enhanceWithin() on $("#mainContent") after data is successfully loaded. Hence, you need to use .load()'s callback function to initialize those elements.
$(document).on('pagecreate', "#noteVote", function () {
$("#coursesButton").on("click", function (e) {
e.preventDefault();
$("#mainContent").load("URL", function () {
$(this).enhanceWithin();
});
});
});
Demo (1) - Code
(1) Click "Courses" or "Search" buttons

Categories