I am facing a weird problem on some of the pages on my website. I get this screen for sometime and the issue gets resolved by itself after sometimes. Any idea what might be causing the issue.
Screenshot as seen on Chrome:
Here is the response header for the request:
Request URL:http://www.badmintonbuddy.com/Create
Request Method:GET
Status Code:500 Internal Server Error
Request Headers
Accept:application/xml,application/xhtml+xml,text/html;q=0.9,text/plain;q=0.8,image/png,*/*;q=0.5
Accept-Charset:ISO-8859-1,utf-8;q=0.7,*;q=0.3
Accept-Encoding:gzip,deflate,sdch
Accept-Language:en-US,en;q=0.8
Cache-Control:max-age=0
Connection:keep-alive
Cookie:__utmz=14266660.1293156873.1.1.utmcsr=google|utmccn=(organic)|utmcmd=organic|utmctr=badmintonbuddy; __utma=14266660.1914068399.1293156873.1296024615.1296061789.13; __utmc=14266660; __utmb=14266660.7.10.1296061789
Host:www.badmintonbuddy.com
Referer:http://www.badmintonbuddy.com/Create
User-Agent:Mozilla/5.0 (Windows; U; Windows NT 6.0; en-US) AppleWebKit/534.10 (KHTML, like Gecko) Chrome/8.0.552.237 Safari/534.10
Response Headers
Cache-Control:private
Content-Length:1194
Content-Type:text/html; charset=utf-8
Date:Wed, 26 Jan 2011 17:30:52 GMT
Server:Microsoft-IIS/7.0
X-AspNet-Version:4.0.30319
X-Powered-By:ASP.NET
and here is the HTML of the page
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head><title>
Submit a Club
</title>
<meta name="description" content="Badminton, Badminton Clubs, Play Badminton, Badminton courts " />
<meta name="keywords" content="Badminton, Badminton Clubs, Play Badminton, Badminton courts" />
<link href="Content/Site.css" rel="stylesheet" type="text/css" />
<!-- For LOCAL>
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAATcytSR8mvGpZGALaUc8OOhT2yXp_ZAY8_ufC3CFXhHIE1NvwkxQElXY6qUXmKmYpeVwhVtW50LGAQQ"></script-->
<!--For PROD-->
<script type="text/javascript" src="http://www.google.com/jsapi?key=ABQIAAAATcytSR8mvGpZGALaUc8OOhSZOUWVEB7juxYWb997FACJmh8mbhSnemR4drJ-L8ZQftUNHVhtn9Ph4g"></script>
<!-- jQuery UI Components-->
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.1/themes/humanity/jquery-ui.css" rel="stylesheet" type="text/css" />
<!-- jQuery UI Components-->
</head>
<body>
<div class="wrapper">
<div class="page">
<div id="header">
<div id="menucontainer">
<a href="/">
<img class="logo" src="../../Content/logo.jpg" alt="BadmintonBuddy"/>
</a>
<ul id="menu">
<li>Home</li>
<li>Submit a Club</li>
<li>Feedback</li>
<li>About</li>
</ul>
</div>
</div>
<div id="main">
<script src="../../Scripts/Map.js" type="text/javascript"></script>
<script src="http://ajax.microsoft.com/ajax/4.0/1/MicrosoftAjax.js" type="text/javascript"></script>
<script src="../../Scripts/MicrosoftMvcValidation.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
addWatermark();
$('input:submit, input:button').button();
$('a #locate').click(function() {
loadLocation();
});
$('#Country').autocomplete({
source: "GetCountry",
minLength: 0
});
$('#State').autocomplete({
source: function(request, response) {
$.ajax({
url: "GetState",
dataType: "json",
data: {
term: request.term,
country: $('#Country').val()
},
success: function(data) {
response(data);
}
});
},
minLength: 2
});
$('#City').autocomplete({
source: function(request, response) {
$.ajax({
url: "GetCity",
dataType: "json",
data: {
term: request.term,
state: $('#State').val()
},
success: function(data) {
response(data);
}
});
},
minLength: 2
});
$('#optional').accordion({
collapsible: true,
animated: 'bounceslide',
active: false
});
$('.mapoptions').dialog({
autoOpen: false,
show: 'blind',
width: 600,
height: 500,
resizable: false,
title: "Preview Club Location",
buttons: { "Cancel": function() { $(this).dialog("close"); }, "Add": function(event, ui) { fillAddress(); $(this).dialog("close"); } }
});
$('#preview').click(function() {
loadLocation();
return false;
});
$('#submit').click(function() {
//watermark puts all the fields with some text
//hence MVC validation would not work,
//check mandatory fields and then submit if everything is good.
if (rgbToHex($('#ClubName').css('color')) == '#aaaaaa') {
$('#ClubName_validationMessage').html("Please enter Club Name").css('color', 'red'); ;
$('#ClubName_validationMessage').show();
return false;
}
else if (rgbToHex($('#Address').css('color')) == '#aaaaaa') {
$('#Address_validationMessage').html("Please enter Address for the Club").css('color', 'red'); ;
$('#Address_validationMessage').show();
return false;
}
$('input:text').each(function() {
if (rgbToHex($(this).css('color')) == '#aaaaaa') {
$(this).val("");
}
});
$('textarea').each(function() {
if (rgbToHex($(this).css('color')) == '#aaaaaa') {
$(this).val("");
}
});
$('#ClubName_validationMessage').hide();
$('#Address_validationMessage').hide();
return true;
});
});
</script>
<div id="submitdiv">
<div id="clubform">
<form action="/create" id="form0" method="post">
<div class="editor-label">
<b class="req">*</b><label for="Club Name">Club Name</label>
</div>
<div class="editor-field">
<input class="padding5" id="ClubName" name="ClubName" size="50" type="text" value="" />
<span class="field-validation-valid" id="ClubName_validationMessage"></span>
</div>
<div class="editor-label">
<label for="Country">Country</label>
</div>
<div class="editor-field">
<input class="padding5" id="Country" name="City.State.Country.CountryName" size="50" type="text" value="" />
<span class="field-validation-valid" id="City_State_Country_CountryName_validationMessage"></span>
</div>
<div class="editor-label">
<label for="State">State</label>
</div>
<div class="editor-field">
<input class="padding5" id="State" name="City.State.StateName" size="50" type="text" value="" />
<span class="field-validation-valid" id="City_State_StateName_validationMessage"></span>
</div>
<div class="editor-label">
<label for="City">City</label>
</div>
<div class="editor-field">
<input class="padding5" id="City" name="City.CityName" size="50" type="text" value="" />
<span class="field-validation-valid" id="City_CityName_validationMessage"></span>
</div>
<div class="editor-label">
<b class="req">*</b><label for="Address">Address</label>
</div>
<div class="editor-field">
<input class="padding5" id="Address" name="Address" size="50" type="text" value="" />
<span class="field-validation-valid" id="Address_validationMessage"></span>
<div id="locatemap">
<a href="javascript:loadLocation();"><img src="../../Content/map_icon.jpg" alt="Locate on map" height="40px" width="40px"/>
<p>Locate on Map</p></a>
</div>
</div>
<div class="editor-label">
<label for="Number of Courts">Number of Courts</label>
</div>
<div class="editor-field">
<input class="padding5" id="City" name="Courts" size="50" type="text" value="" />
<span class="field-validation-valid" id="Courts_validationMessage"></span>
</div>
<div class="editor-label">
<label for="CourtSurface">CourtSurface</label>
</div>
<div class="editor-field">
<select name="Surface">
<option value="1">Wooden</option>
<option value="2">Syntetic</option>
<option value="3">Cement</option>
<option value="4">Cement with Mat</option>
<option value="5">Others</option>
</select>
<label id="lblSurface">Please Specify</label>
<input display="none" id="Others" name="Others" type="text" value="" />
</div>
<div class="editor-label">
<label for="Website">Website</label>
</div>
<div class="editor-field">
<input class="padding5" id="Website" name="Website" size="50" type="text" value="" />
<span class="field-validation-valid" id="Website_validationMessage"></span>
</div>
<div class="editor-label">
<label for="Email">Email</label><label for="(">(</label> Why?<label for=")">)</label>
</div>
<div class="editor-field">
<input class="padding5" id="Email" name="Email" size="50" type="text" value="" />
<span class="field-validation-valid" id="Email_validationMessage"></span>
</div>
<input id="Owner" name="Owner" type="checkbox" value="true" /><input name="Owner" type="hidden" value="false" />I am the owner of the club.
<!--All optional would go in this collapsable UI-->
<div id="optional">
<h3>Add more details</h3>
<div id="optionalfields">
<div class="editor-label">
<label for="PhoneNumber">PhoneNumber</label>
</div>
<div class="editor-field">
<input class="padding5" id="PhoneNumber" name="PhoneNumber" size="50" type="text" value="" />
<span class="field-validation-valid" id="PhoneNumber_validationMessage"></span>
</div>
<div class="editor-label">
<label for="Fees">Fees</label>
</div>
<div class="editor-field">
<input class="padding5" id="Fees" name="Fees" size="50" type="text" value="" />
<span class="field-validation-valid" id="Fees_validationMessage"></span>
</div>
<div class="editor-label">
<label for="Timings">Timings</label>
</div>
<div class="editor-field">
<input class="padding5" id="Timings" name="Timings" size="50" type="text" value="" />
<span class="field-validation-valid" id="Timings_validationMessage"></span>
</div>
<div class="editor-label">
<label for="Description">Description</label>
</div>
<div class="editor-field">
<textarea cols="40" id="Description" name="Description" rows="5">
</textarea>
<span class="field-validation-valid" id="Description_validationMessage"></span>
</div>
</div>
</div>
<!--End of optional collapsable fields-->
<div id="captcha">
<div class="editor-label padding5 detailshead">
<label>Security Check:</label>
<label>Type both words seperated by space below</label>
</div>
<script type="text/javascript">
var RecaptchaOptions = {
theme : 'red',
tabindex : 0
};
</script><script type="text/javascript" src="http://www.google.com/recaptcha/api/challenge?k=6LfDnr8SAAAAAAj6KZ0E99d_-vtwgUiOxByyzV1x">
</script><noscript>
<iframe src="http://www.google.com/recaptcha/api/noscript?k=6LfDnr8SAAAAAAj6KZ0E99d_-vtwgUiOxByyzV1x" width="500" height="300" frameborder="0">
</iframe><br /><textarea name="recaptcha_challenge_field" rows="3" cols="40"></textarea><input name="recaptcha_response_field" value="manual_challenge" type="hidden" />
</noscript>
<div id="captchaerror" class="error">Sorry! Those aren't the correct words. Please verify again.</div>
</div>
<p>
<input type="button" id="preview" value="Preview it on Map"/>
<input type="button" id="create" value="Submit" onclick="javascript:validateCaptcha('form0');"/>
<input type="button" value="Clear" onclick="this.form.reset()" />
</p>
</form><script type="text/javascript">
//<![CDATA[
if (!window.mvcClientValidationMetadata) { window.mvcClientValidationMetadata = []; }
window.mvcClientValidationMetadata.push({"Fields":[{"FieldName":"ClubName","ReplaceValidationMessageContents":true,"ValidationMessageId":"ClubName_validationMessage","ValidationRules":[]},{"FieldName":"City.State.Country.CountryName","ReplaceValidationMessageContents":true,"ValidationMessageId":"City_State_Country_CountryName_validationMessage","ValidationRules":[]},{"FieldName":"City.State.StateName","ReplaceValidationMessageContents":true,"ValidationMessageId":"City_State_StateName_validationMessage","ValidationRules":[]},{"FieldName":"City.CityName","ReplaceValidationMessageContents":true,"ValidationMessageId":"City_CityName_validationMessage","ValidationRules":[]},{"FieldName":"Address","ReplaceValidationMessageContents":true,"ValidationMessageId":"Address_validationMessage","ValidationRules":[]},{"FieldName":"Courts","ReplaceValidationMessageContents":true,"ValidationMessageId":"Courts_validationMessage","ValidationRules":[{"ErrorMessage":"The field Courts must be a number.","ValidationParameters":{},"ValidationType":"number"}]},{"FieldName":"Website","ReplaceValidationMessageContents":true,"ValidationMessageId":"Website_validationMessage","ValidationRules":[]},{"FieldName":"Email","ReplaceValidationMessageContents":true,"ValidationMessageId":"Email_validationMessage","ValidationRules":[]},{"FieldName":"PhoneNumber","ReplaceValidationMessageContents":true,"ValidationMessageId":"PhoneNumber_validationMessage","ValidationRules":[]},{"FieldName":"Fees","ReplaceValidationMessageContents":true,"ValidationMessageId":"Fees_validationMessage","ValidationRules":[]},{"FieldName":"Timings","ReplaceValidationMessageContents":true,"ValidationMessageId":"Timings_validationMessage","ValidationRules":[]},{"FieldName":"Description","ReplaceValidationMessageContents":true,"ValidationMessageId":"Description_validationMessage","ValidationRules":[]}],"FormId":"form0","ReplaceValidationSummary":false});
//]]>
</script>
</div>
<div class="mapoptions">
<p><b>Move marker(<img alt="marker" src="http://www.google.com/mapfiles/marker.png" height="15" width="15" />)on the map to change the location.Click Add once done.</b></p>
<div id="mapDiv" style="height:350px">
</div>
</div>
</div>
</div>
<div id="footer">
<!-- Custom for Project -->
<script src="../../Scripts/Map.js" type="text/javascript"></script>
<script type="text/javascript" src="http://www.google.com/recaptcha/api/js/recaptcha_ajax.js"></script>
<script type="text/javascript" src="../../Scripts/Captcha.js"></script>
<script src="../../Scripts/Main.js" type="text/javascript"></script>
<!-- Custom for Project -->
</div>
</div>
</div>
</body>
</html>
Hey, this is my output in Net tab of Firebug:-
HTTP/1.1 500 Internal Server Error
Cache-Control: private
Content-Type: text/html; charset=utf-8
Server: Microsoft-IIS/7.0
X-AspNet-Version: 4.0.30319
X-Powered-By: ASP.NET
Date: Thu, 27 Jan 2011 03:58:42 GMT
Content-Length: 1194
It's pointing to a 500 Internal server error, can you check it.
Related
I am taking a Vue.js course and I just learned about forms and managing them(the code is down below). I don't understand how does the tag work. It's value is determined by the option value and the selected text is the text of that specific option? Also, I am confused when it comes to checkboxes and Vue. Why do the checkboxes need different "value"s when you use v-model on that checkbox? Why would I want to create a checkbox group (inputs with the same value for the name attribute)? I don't really understand how v-model works with forms and I would love to. Thanks in advance for the person that's taking time to help me.
The Code
<template>
<form #submit.prevent="submitForm">
<div class="form-control">
<label for="user-name">Your Name</label>
<input id="user-name" name="user-name" type="text" v-model="userName" />
</div>
<div class="form-control">
<label for="age">Your Age (Years)</label>
<input id="age" name="age" type="number" v-model.number="userAge" />
</div>
<div class="form-control">
<label for="referrer">How did you hear about us?</label>
<select id="referrer" name="referrer" v-model="referrer">
<option value="google">Google</option>
<option value="wom">Word of mouth</option>
<option value="newspaper">Newspaper</option>
</select>
{{ referrer }}
</div>
<div class="form-control">
<h2>What are you interested in?</h2>
<div>
<input id="interest-news" name="interest" value="news" type="checkbox" v-model="interests"/>
<label for="interest-news">News</label>
</div>
<div>
<input id="interest-tutorials" name="interest" value="tutorials" type="checkbox" v-model="interests"/>
<label for="interest-tutorials">Tutorials</label>
</div>
<div>
<input id="interest-nothing" name="interest" value="nothing" type="checkbox" v-model="interests"/>
<label for="interest-nothing">Nothing</label>
</div>
</div>
<div class="form-control">
<h2>How do you learn?</h2>
<div>
<input id="how-video" name="how" value="video" type="radio" v-model="how"/>
<label for="how-video">Video Courses</label>
</div>
<div>
<input id="how-blogs" name="how" value="blogs" type="radio" v-model="how"/>
<label for="how-blogs">Blogs</label>
</div>
<div>
<input id="how-other" name="how" value="other" type="radio" v-model="how"/>
<label for="how-other">Other</label>
</div>
</div>
<div class="form-control">
<input type="checkbox" id="confirm-terms" name="confirm-terms" v-model="confirm">
<label for="confirm-terms">Agree to terms of use?</label>
</div>
<div>
<button>Save Data</button>
</div>
<div class="form-control">
<select></select>
</div>
</form>
</template>
<script>
export default {
data() {
return {
userName: "",
userAge: null,
referrer: "newspaper",
interests: [],
how: null,
confirm: false
};
},
methods: {
submitForm() {
// console.log("Username: " + this.userName);
// this.userName = "";
// console.log("User age: ");
// console.log(this.userAge);
// console.log(31);
// this.userAge = null;
// console.log("Referrer: " + this.referrer);
// this.referrer = "wom";
// console.log("Checkboxes: ");
// console.log(this.interests);
console.log("Radio Buttons");
console.log(this.how);
this.interests = [];
this.how = null;
// console.log('Confirm? ');
// console.log(this.confirm);
// this.confirm = false;
},
},
};
</script>
v-model is syntactical sugar for :value and #change
Instead of <input v-model="name">, you could use
<input :value="name" #update:model-value="v => name=v"> which would have the same result.
Here is an example that perhaps belabors it a bit.
const app = Vue.createApp({
data() {
return {
name: ""
}
}
})
app.component('custom-input', {
props: ['modelValue'],
emits: ['update:modelValue'],
template: `
<input
:value="modelValue"
#input="$emit('update:modelValue', $event.target.value)"
>
`
})
app.mount("#app")
<script src="https://unpkg.com/vue#next/dist/vue.global.prod.js"></script>
<div id="app">
<custom-input :value="name" #update:model-value="v => name=v"></custom-input><br />
<custom-input v-model="name"></custom-input><br />
<input :value="name" #update:model-value="v => name=v"><br />
<input v-model="name"><br />
Name: {{name}}
</div>
More info in v3 docs here
I want to be all in one line (has-error and has-success)
Now, situation is like this:
I am using BootstrapValidator and Bootstrap.
Here is my HTML:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>BootStrap Datepicker Re-validation</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrapvalidator/bootstrapValidator.css" rel="stylesheet">
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- This is my custom css, it's not relevant for this post
<link href="css/glyphicon.css" rel="stylesheet">
<link href="css/glass.css" rel="stylesheet">
<link href="css/test0.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" /> -->
</head>
<body>
<form class="form-inline" role="form" id="form-div" method="post" action="">
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkIn" type="text" class="form-control datepickstart" placeholder="Check-in" name="dobfrom" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkOut" type="text" class="form-control datepickstart" placeholder="Check-out" name="dobto" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<select class="form-control" name="aptList">
<option value="">Select Apartment</option>
<option value="apt1">Apartment 1</option>
<option value="apt2">Apartment 2</option>
</select>
<label for="apt" class="glyphicon glyphicon-home" rel="tooltip" title="Choose apartment"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" data-validation="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter mail address"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputGuests" placeholder="Adults" name="adult">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputChildren" placeholder="Children" name="child">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</form>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric#4.0.1"></script>
<script>
$(document).ready(function() {
$('#checkIn').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobfrom');
});
$('#checkOut').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobto');
});
$('#form-div').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: '',
invalid: '',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
aptList: {
validators: {
notEmpty: {
message: 'The Apartment is required and can\'t be empty'
}
}
},
child: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
adult: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
dobfrom: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
}, //dobfrom
dobto: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
} //dobto
} //fields
});
});
</script>
</body>
Basically, I want to be all aligned, just on has-success to disappear error div below?
I was looking in bootstrap.min.css but it seems it is all OK.
Also in a bootstrapValidator.css I have some classes that not influence on this matter.
i think you should separate to two divs the form, in the first div all the form divs , Apart from the last div
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
and in the second form you need to put this-
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
this way the message will appear in different div
search divA, divB:
<head>
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<meta charset="utf-8">
<title>BootStrap Datepicker Re-validation</title>
<link href="css/bootstrap.min.css" rel="stylesheet" type="text/css">
<link href="css/bootstrapvalidator/bootstrapValidator.css" rel="stylesheet">
<link href="css/bootstrap-datepicker.min.css" rel="stylesheet">
<!-- This is my custom css, it's not relevant for this post
<link href="css/glyphicon.css" rel="stylesheet">
<link href="css/glass.css" rel="stylesheet">
<link href="css/test0.css" rel="stylesheet">
<link href="css/style.css" rel="stylesheet" /> -->
</head>
<body>
<form class="form-inline" role="form" id="form-div" method="post" action="">
<div class="divA">
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkIn" type="text" class="form-control datepickstart" placeholder="Check-in" name="dobfrom" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" id="checkOut" type="text" class="form-control datepickstart" placeholder="Check-out" name="dobto" />
<label for="calendar" class="glyphicon glyphicon-calendar" rel="tooltip" title="Choose check-in date"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<select class="form-control" name="aptList">
<option value="">Select Apartment</option>
<option value="apt1">Apartment 1</option>
<option value="apt2">Apartment 2</option>
</select>
<label for="apt" class="glyphicon glyphicon-home" rel="tooltip" title="Choose apartment"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" data-validation="email" class="form-control" id="inputEmail" placeholder="Email" name="email">
<label for="email" class="glyphicon glyphicon-envelope" rel="tooltip" title="Enter mail address"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputGuests" placeholder="Adults" name="adult">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
<div class="form-group required">
<div class="icon-addon addon-md">
<input type="text" class="form-control person" data-validation="required" id="inputChildren" placeholder="Children" name="child">
<label for="adults" class="glyphicon glyphicon-user" rel="tooltip" title="Choose number of adults"></label>
</div>
</div>
</div>
<div class="divB">
<div class="form-group">
<div class="col-md-6">
<button type="submit" class="btn btn-success">Save</button>
</div>
</div>
</div>
</form>
<script src="js/jquery-1.10.2.js"></script>
<script src="js/bootstrap.min.js"></script>
<script src="js/bootstrap-datepicker.js"></script>
<script type="text/javascript" src="js/bootstrapvalidator/bootstrapValidator.js"></script>
<script type="text/javascript" src="js/moment.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/autonumeric#4.0.1"></script>
<script>
$(document).ready(function() {
$('#checkIn').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobfrom');
});
$('#checkOut').datepicker({
format: 'dd/mm/yyyy'
})
.on('changeDate', function(e) {
// Revalidate the date field
$('#form-div').bootstrapValidator('revalidateField', 'dobto');
});
$('#form-div').bootstrapValidator({
message: 'This value is not valid',
feedbackIcons: {
valid: '',
invalid: '',
validating: 'glyphicon glyphicon-refresh'
},
fields: {
aptList: {
validators: {
notEmpty: {
message: 'The Apartment is required and can\'t be empty'
}
}
},
child: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
adult: {
message: 'The username is not valid',
validators: {
notEmpty: {
message: 'The username is required and can\'t be empty'
},
regexp: {
regexp: /^[0-9]+$/,
message: 'The username can only consist of alphabetical, number, dot and underscore'
}
}
},
email: {
validators: {
notEmpty: {
message: 'The email address is required and can\'t be empty'
},
emailAddress: {
message: 'The input is not a valid email address'
}
}
},
dobfrom: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
}, //dobfrom
dobto: {
validators: {
notEmpty: {
message: 'DOB is required and cannot be empty'
},
date: {
message: 'The value is not a valid date',
format: 'DD/MM/YYYY'
}
}
} //dobto
} //fields
});
});
</script>
</body>
I am using the icenium weather example from telerik platorm icenium.com to load a data file json for an test app I am doing
my json is as follows
[
{
"screen_id": "course_outline",
"screen_title": "NICMA Child Minding App - Course Outline",
"screen_display_type": "/json_schema/P14_navigation.schema.json",
"updated": "1371030938",
"author": [
{
"author_name": "Andrew Moran",
"author_url": "http://people.learningpool.com/user/id"
}
],
"comments": "authoring tool metadata, not used in app",
"authoring_tool": {
"version": "x.x",
"href": ""
},
"copyright": "2013 - Learning Pool",
"screen_content": {
"screen_title": "Child Minding Navigation",
"start_text": "Text at the start of the screen",
"navigation_items": [
{
"screen_id": "food_hygiene_legislation_doc",
"screen_display_type": "/json_schema/P03_content_screen.schema.json",
"display_text": "Home"
}
],
"end_text": ""
}
]
I just made a copy of the weather funciton and named it course-outline.js
and added it into my scripts
(function (global) {
var WeatherViewModel,
app = global.app = global.app || {};
WeatherViewModel = kendo.data.ObservableObject.extend({
weatherDataSource: null,
init: function () {
var that = this,
dataSource;
kendo.data.ObservableObject.fn.init.apply(that, []);
dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "data/course_outline.json",
dataType: "json"
}
}
});
that.set("weatherDataSource", dataSource);
}
});
app.weatherService = {
viewModel: new WeatherViewModel()
};
})(window);
But for some reason when i click the weather button now it hangs even though ive told the template to find screen_title any ideas
<!DOCTYPE html>
<html>
<head>
<title></title>
<meta charset="utf-8" />
<link href="kendo/styles/kendo.mobile.all.min.css" rel="stylesheet" />
<link href="styles/main.css" rel="stylesheet" />
<script src="cordova.js"></script>
<script src="kendo/js/jquery.min.js"></script>
<script src="kendo/js/kendo.mobile.min.js"></script>
<script src="https://maps.googleapis.com/maps/api/js?v=3.exp&sensor=true"></script>
<script src="scripts/course-outline.js"></script>
<script src="scripts/login.js"></script>
<script src="scripts/location.js"></script>
<script src="scripts/app.js"></script>
</head>
<body>
<!--Home-->
<div id="tabstrip-home"
data-role="view"
data-title="Home">
<div class="view-content">
<h1>Welcome!</h1>
<a id="skin-change" data-role="button" data-click="app.changeSkin">Flat</a>
<p>
Icenium™ enables you to build cross-platform device applications regardless of your
development platform by combining the convenience of a local development toolset with the
power and flexibility of the cloud.
</p>
<div class="img"></div>
</div>
</div>
<!--Login-->
<div id="tabstrip-login"
data-role="view"
data-title="Login"
data-model="app.loginService.viewModel">
<div class="view-content">
<div class="logo"></div>
<h3 data-bind="invisible: isLoggedIn">Enter your credentials:</h3>
<h1 class="welcome" data-bind="visible: isLoggedIn">Welcome, <span data-bind="text: username"></span>!
</h1>
<div class="buttonArea">
<input type="submit" id="logout" data-role="button" data-bind="click: onLogout, visible: isLoggedIn" class="login-button" value="Logout" />
</div>
<form data-bind="events: { keyup: checkEnter }">
<ul data-role="listview" data-style="inset" data-bind="invisible: isLoggedIn">
<li>
<label>
Username
<input type="text" data-bind="value: username" />
</label>
</li>
<li>
<label>
Password
<input type="password" data-bind="value: password" />
</label>
</li>
</ul>
<div class="buttonArea">
<input type="submit" id="login" data-role="button" data-bind="click: onLogin, invisible: isLoggedIn" class="login-button" value="Login" />
</div>
</form>
</div>
</div>
<!--Location-->
<div id="tabstrip-location"
data-role="view"
data-title="Location"
data-init="app.locationService.initLocation"
data-show="app.locationService.show"
data-hide="app.locationService.hide"
data-model="app.locationService.viewModel"
data-stretch="true">
<div id="no-map" data-bind="invisible: isGoogleMapsInitialized">
Location requires internet connection to display the map.
</div>
<div id="map-search-wrap" data-bind="visible: isGoogleMapsInitialized">
<button id="map-navigate-home" data-bind="click: onNavigateHome"></button>
<form onsubmit="return false;">
<input id="map-address" type="search" data-bind="value: address" placeholder="Address" />
<input id="map-search" type="submit" value="" data-bind="click: onSearchAddress" />
</form>
</div>
<div id="map-canvas" data-bind="visible: isGoogleMapsInitialized"></div>
</div>
<!--Weather-->
<div id="tabstrip-weather"
data-role="view"
data-title="Weather"
data-model="app.weatherService.viewModel">
<div class="weather">
<p class="weather-title">Course Title</p>
<div class="separator">
<div class="dark"></div>
<div class="light"></div>
</div>
<ul class="forecast-list"
data-role="listview"
data-bind="source: weatherDataSource"
data-template="weather-forecast-template">
</ul>
</div>
</div>
<!--Weather forecast template-->
<script type="text/x-kendo-tmpl" id="weather-forecast-template">
<div>
<div class="position-left">
<span class="weather-info date">${screen_title}</span>
</div>
<div class="position-right">
<span class="weather-info temperature high">${screen_title}<sup>°</sup></span>
<span class="weather-info temperature low">${screen_title}<sup>°</sup></span>
</div>
</div>
</script>
<!--Layout-->
<div data-role="layout" data-id="tabstrip-layout">
<!--Header-->
<div data-role="header">
<div data-role="navbar">
<span data-role="view-title"></span>
</div>
</div>
<!--Footer-->
<div data-role="footer">
<div data-role="tabstrip">
Home
Login
Location
Weather
</div>
</div>
</div>
</body>
</html>
Please help me i implemented this js but I have problem when I call an event body click the tab content will also hide...
I used this code but problem is when i click on tab button its already hide..
$('body').click(function(e){
$('.resp-tabs-container').hide();
});
My HTML FILE
<div id="verticalTab">
<ul class="resp-tabs-list">
<li class="first flights"><em class="sprite"> </em>Book a Flight</li>
<li class="rooms"><em class="sprite"> </em>Book Hotel Rooms</li>
<li class="tickets"><em class="sprite"> </em>Book Movie Tickets</li>
<li class="vouchers"><em class="sprite"> </em>Book Vouchers</li>
<li class="new"><em class="sprite"> </em>What's New</li>
</ul>
<div class="resp-tabs-container">
<!--Book A Flight-->
<div>
<div class="tabForm">
<form action="">
<fieldset>
<div class="rowG select-opt flatui">
<p>
<input type="radio" name="tripOpt" checked="checked" />
<label>One Way</label>
<input type="radio" name="tripOpt" />
<label>Round Trip</label>
<input type="radio" name="tripOpt" />
<label>Multiple Destinations</label>
</p>
</div>
<div class="rowG clearfix">
<div class="col">
<label>Leaving From</label>
<input type="text" class="field" value="Location">
</div>
<div class="col">
<label>Departure Date</label>
<input type="text" class="field date-field" value="DD/MM/YY">
</div>
<div class="col selectdd">
<label>Time</label>
<select>
<option>Any</option>
</select>
</div>
</div>
<div class="rowG clearfix">
<div class="col">
<label>Going To</label>
<input type="text" class="field" value="Location">
</div>
</div>
<div class="rowG clearfix">
<div class="col selectdd">
<label>Adult (18-64)</label>
<select>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col selectdd">
<label>Seniors (65+)</label>
<select>
<option>1</option>
<option>2</option>
</select>
</div>
<div class="col selectdd">
<label>Children</label>
<select>
<option>1</option>
<option>2</option>
</select>
</div>
</div>
<div class="rowG clearfix"> <a data-toggle="collapse" data-target="#showAdditionalData" id="showAdditional" class="i-arrowup" href="#">Show Additional Options<span id="toggler" class="icon-chevron-left" ></span></a>
<div class="contents addpaddingT10">
<div id="showAdditionalData" class="collapse">
<div class="col">
<label>Preferred Airline</label>
<select>
<option>No Preference</option>
</select>
<p class="addpaddingT10">
<div class="flatui">
<input type="checkbox"/><label>Nonstop Flights Only</label>
</div>
</p>
</div>
<div class="col">
<label>Class</label>
<select>
<option>First Class</option>
</select>
<p class="addpaddingT10">
<div class="flatui">
<input type="checkbox"/><label>Refundable Flights Only</label>
</div>
</p>
</div>
</div>
</div>
</div>
<div class="rowG last clearfix">
<p class="floatL">
<div class="flatui">
<input type="checkbox"/><label>Redeem PR Points for this booking</label>
</div>
<input type="button" class="btn btn-primary search-icon floatR" value="Search">
</div>
</fieldset>
</form>
</div>
</div>
<!--End Flight book-->
<!--Hotel booking-->
<div>
<div class="tabFormHotel">
<form action="">
<fieldset>
<div class="rowG">
<label>Destination, hotel, landmark or address</label>
<input type="text" class="large" value="A city, airport or attraction">
</div>
<div class="rowG clearfix">
<div class="col">
<label>Check In</label>
<input type="text" class="field date-field" value="DD/MM/YYYY">
</div>
<div class="col">
<label>Check Out</label>
<input type="text" class="field date-field" value="DD/MM/YYYY">
</div>
<div class="col">
<label>Rooms</label>
<select class="selectpicker">
<option>Any</option>
</select>
</div>
</div>
<div class="rowG clearfix selectdd">
<legend>Room 1</legend>
<div class="c1">
<label>Adult <span>(12+ years)</span></label>
<select>
<option>1</option>
</select>
</div>
<div class="c1 selectdd">
<label>Child <span>(2-11 years)</label>
<select>
<option>3</option>
</select>
</div>
<div class="c2 selectdd">
<label>Child 1 Age</label>
<select>
<option>2</option>
</select>
</div>
<div class="c2 selectdd">
<label>Child 2 Age</label>
<select>
<option>6</option>
</select>
</div>
<div class="c2 selectdd">
<label>Child 3 Age</label>
<select>
<option>8</option>
</select>
</div>
</div>
<div class="rowG last clearfix">
<p class="floatL">
<input type="checkbox" />
<label>Redeem PR Points for this booking</label>
<br/>
<input type="button" class="btn btn-primary search-icon floatR" value="Search">
</p>
</div>
</fieldset>
</form>
</div>
</div>
<!--End Hotel-->
<div>
<p>Book Movie Tickets</p>
</div>
<div>
<p>Book Vouchers</p>
</div>
<div>
<p>What's New</p>
</div>
</div>
</div>
Here is the JS which i used
(function ($) {
$.fn.extend({
easyResponsiveTabs: function (options) {
//Set the default values, use comma to separate the settings, example:
var defaults = {
type: 'default', //default, vertical, accordion;
width: 'auto',
fit: true
}
//Variables
var options = $.extend(defaults, options);
var opt = options, jtype = opt.type, jfit = opt.fit, jwidth = opt.width, vtabs = 'vertical', accord = 'accordion';
//Main function
this.each(function () {
var $respTabs = $(this);
$respTabs.find('ul.resp-tabs-list li').addClass('resp-tab-item');
$respTabs.css({
'display': 'block',
'width': jwidth
});
$respTabs.find('.resp-tabs-container > div').addClass('resp-tab-content');
jtab_options();
//Properties Function
function jtab_options() {
if (jtype == vtabs) {
$respTabs.addClass('resp-vtabs');
}
if (jfit == true) {
$respTabs.css({ width: '100%', margin: '0px' });
}
if (jtype == accord) {
$respTabs.addClass('resp-easy-accordion');
$respTabs.find('.resp-tabs-list').css('display', 'none');
}
}
//Assigning the h2 markup to accordion title
var $tabItemh2;
$respTabs.find('.resp-tab-content').before("<h2 class='resp-accordion' role='tab'><span class='resp-arrow'></span></h2>");
var itemCount = 0;
$respTabs.find('.resp-accordion').each(function () {
$tabItemh2 = $(this);
var innertext = $respTabs.find('.resp-tab-item:eq(' + itemCount + ')').html();
$respTabs.find('.resp-accordion:eq(' + itemCount + ')').append(innertext);
$tabItemh2.attr('aria-controls', 'tab_item-' + (itemCount));
itemCount++;
});
//Assigning the 'aria-controls' to Tab items
var count = 0,
$tabContent;
$respTabs.find('.resp-tab-item').each(function () {
$tabItem = $(this);
$tabItem.attr('aria-controls', 'tab_item-' + (count));
$tabItem.attr('role', 'tab');
//First active tab
// $respTabs.find('.resp-tab-item').first().addClass('resp-tab-active');
//$respTabs.find('.resp-accordion').first().addClass('resp-tab-active');
//$respTabs.find('.resp-tab-content').first().addClass('resp-tab-content-active').attr('style', 'display:block');
//Assigning the 'aria-labelledby' attr to tab-content
var tabcount = 0;
$respTabs.find('.resp-tab-content').each(function () {
$tabContent = $(this);
$tabContent.attr('aria-labelledby', 'tab_item-' + (tabcount));
tabcount++;
});
count++;
});
//Tab Click action function
$respTabs.find("[role=tab]").each(function () {
var $currentTab = $(this);
$currentTab.click(function () {
var $tabAria = $currentTab.attr('aria-controls');
if ($currentTab.hasClass('resp-accordion') && $currentTab.hasClass('resp-tab-active')) {
$respTabs.find('.resp-tab-content-active').slideUp('', function () { $(this).addClass('resp-accordion-closed'); });
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
return false;
}
if (!$currentTab.hasClass('resp-tab-active') && $currentTab.hasClass('resp-accordion')) {
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
$respTabs.find('.resp-tab-content-active').slideUp().removeClass('resp-tab-content-active resp-accordion-closed');
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').slideDown().addClass('resp-tab-content-active');
} else {
$respTabs.find('.resp-tab-active').removeClass('resp-tab-active');
$respTabs.find('.resp-tab-content-active').removeAttr('style').removeClass('resp-tab-content-active').removeClass('resp-accordion-closed');
$respTabs.find("[aria-controls=" + $tabAria + "]").addClass('resp-tab-active');
$respTabs.find('.resp-tab-content[aria-labelledby = ' + $tabAria + ']').addClass('resp-tab-content-active').attr('style', 'display:block');
}
});
//Window resize function
$(window).resize(function () {
$respTabs.find('.resp-accordion-closed').removeAttr('style');
});
});
});
}
});
just use the follwing javascript to prevent the clicks
<script type="text/javascript">
$(document).ready(function() {
$("body").click(function(e){
if (!$(e.target).is('.ui-datepicker,.ui-datepicker *,.ui-icon,.ui-autocomplete,.ui-autocomplete *,.resp-tab-active, .resp-tab-active *, #verticalTab, #verticalTab *')) {
//$(".resp-tabs-container").hide();
$(".resp-vtabs li").removeClass('resp-tab-active');
$(".resp-vtabs .resp-tabs-container .resp-tab-content-active").removeClass('resp-tab-content-active').hide();
}});
});
</script>
I am working on the Android hybrid application using phonegap and JQuery Mobile. My application involves user registration, sign in and payment. The problem I am facing is that when I try to navigate from one page to another I get message error loading page.
I am creating data-role pages and using changepage method to navigate to different page.
Here are the data-role pages and js file where I am getting this error.
First js File bookingSearchResult.js:
var jsonData=new Array();
$(document).ready(function(e) {
$(".radioCheck").live("change",(function(event, ui){
var value=$(this).val();
value=value.split("_");
var str=value[0]+ "(INR"+value[1]+"/-)";
var tempid=this.id;
tempid=tempid.split("_");
$("#spRoomType_"+tempid[2]).html(str);
}));
$("#bookingform").live("pagebeforeshow",function(e){
loadpagedata();
});
$("#btnFormSubmit").live("click",function(){
$.blockUI({ message: '<div class="loading-text">Please wait...</div>' });
var roomsData=$('#selectmenu2').val();
var aduldetails=$('#selectmenu3').val();
for(var i=1;i<=roomsData;i++){
for(var j=1;j<=aduldetails;j++){
var fname=$('#Fname_'+i+'_'+j+'').val();
var lname=$('#Lname_'+i+'_'+j+'').val();
var email=$('#Email_'+i+'_'+j+'').val();
var mobile=$('#Monumber_'+i+'_'+j+'').val();
if(fname=="")
{
$.unblockUI();
jAlert('Please enter First Name','Alert',function(){
$(".valFname").focus();
});
return false;
}
else if(!fname.match(/^[A-Za-z]+$/))
{
$.unblockUI();
jAlert('First Name can have alphabets only','Alert',function(){
$(".valFname").focus();
});
return false;
}
else if(fname.length>15)
{
$.unblockUI();
jAlert('First Name cannot be greater than 15 alphabets','Alert',function(){
$(".valFname").focus();
});
return false;
}
if(lname=="")
{
$.unblockUI();
jAlert('Please enter Last Name','Alert',function(){
$(".valLname").focus();
});
return false;
}
else if(!lname.match(/^[A-Za-z]+$/))
{
$.unblockUI();
jAlert('Last Name can have alphabets only','Alert',function(){
$(".valLname").focus();
});
return false;
}
else if(lname.length>15)
{
$.unblockUI();
jAlert('Last Name cannot be greater than 15 alphabets','Alert',function(){
$(".valLname").focus();
});
return false;
}
if(email=="")
{
$.unblockUI();
jAlert('Please enter Email Address','Alert',function(){
$(".valEmail").focus();
});
return false;
}
else if(!email.match(/^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/))
{
$.unblockUI();
jAlert('Enter valid Email Address','Alert',function(){
$(".valEmail").focus();
});
return false;
}
if(mobile=="")
{
$.unblockUI();
jAlert('Please enter Mobile Number','Alert',function(){
$('.valMobile').focus();
});
return false;
}
else if(!mobile.match(/([0-9]{10})$/))
{
$.unblockUI();
jAlert('Enter valid 10-digit Mobile Number','Alert',function(){
$('.Monumber').focus();
});
return false;
}
}
}
$.unblockUI();
$.mobile.changePage("#bookingConf");
});
});
$('#bookingSearchResult').live('pagebeforeshow',function(event){
$('#hotelListDiv').empty();
$('#hotelList').empty();
$('#detailsDiv').empty();
$('#hDisplay').text("Hotels Available in "+$('#Cityname option:selected').text());
var dayWise='';
var priceBreakup='';
var dataRetrieved=new Array();
var dynHotels="";
dataRetrieved=JSON.parse(localStorage['search']);
$.each(dataRetrieved, function (index, status) {
var cinDate=JSON.parse(localStorage['search'])[index].checkInDate;
var checkinDate=displayDate2(cinDate);
$('#topDate').text(checkinDate[0]);
var nights=$('#nights').val();
var rooms=new Array();
var pax=new Array();
var roomDetails='';
var numAdults=new Array();
numAdults[0]=$('#selectmenu3').val();
if($('#selectmenu2').val()>1){
for(var i=1;i<$('#selectmenu2').val();i++){
numAdults[i]=$("#"+"selectmenu3"+i).val();
}
}
for(var i=0;i<$('#selectmenu2').val();i++)
{
roomDetails="<br>"+roomDetails+"Room "+(i+1)+": "+numAdults[i]+" Adult</br>";
}
$.each(this.availabilityList, function (index, status) {
var dynRates='';
var hotel=this.hotelName;
var hotelId=this.hotelId;
var priceString="";
$.each(this.rate, function (index, status) {
var offerPrice=this.price;
var rateId=this.rateId;
var rateDesc=this.rateIdTypeDesc;
var roomVisited=0;
var daySplit='';
var dayWisePrice='';
$.each(this.roomGrid.room, function (index, status) {
if(roomVisited !=this.roomNumber ){
var roomNo=this.roomNumber;
var roomType=this.roomType;
var numOfPax=this.numOfPax;
$.each(this.daywiseRates, function (index, status) {
var dateVisited=0;
$.each(this.forday, function (index, status) {
if(dateVisited !=this.date ){
var day=this.date;
var dayWiseTotal=this.price;
dayWisePrice=dayWisePrice+roomNo+"%"+numOfPax+"_"+day+":"+dayWiseTotal+"#";
dateVisited=this.date;
}
});
});
}
roomVisited=this.roomNumber;
});
var buttonId="btnBooknow_"+hotelId+"_"+rateId;
var priceBreakupId="priceBreakupText$"+hotelId+"$"+rateId+"$"+dayWisePrice;
dynRates=dynRates+'<li class="pricebreakup"><div class="pricebreakup-strip">'+rateDesc+' ₹ '+offerPrice+'/-<br><span>(Lux. Tax Excl.)</span></div> <span class="priceBreak" id='+priceBreakupId+'>Price Breakup</span> <div class="submit-btn-wrap"><input name="Booknow" type="button" class="button-bg" id='+buttonId+' value="BOOK NOW"/></div></li>';
});//end of rate
dynHotels=dynHotels+'<div class="booking_search_result_hotel_item_wrap"><a id="info_popup" href="#info_popup" data-rel="dialog" class="info_btn"><img src="images/i_ico.png" width="18" height="18" alt="Info"></a><div data-role="collapsible" id="hotelList" data-collapsed="true"><h3 id="hName">'+hotel+'</h3><ul class="form-list-item booking_search_result"><li class="booking_terms">Service tax # 7.42% will be charged (As per new notification).</li><li class="check-in-details"><a id="policy_popup" href="#policy_popup" data-rel="dialog" class="info_btn"><img src="images/p_ico.png" width="27" height="26" alt="i_ico" class="i_ico"></a> Check in: '+checkinDate[1]+', '+nights+' Nights</span><br>'+roomDetails+'</li>'+dynRates+'</ul></div></div> ';
});//end of availabilityList
});
$(dynHotels).appendTo('#hotelListDiv');
$('div[data-role=collapsible]').collapsible({refresh:true});
$('input[type=button]').button({refresh:true});
$('input[name="Booknow"]').click(function(){
var btnId=this.id.split('_');
hotelIdSelected=btnId[1];
rateIdSelected=btnId[2];
$.mobile.changePage('#bookingform');
});
$('.priceBreak').click(function(){
var id=this.id;
if(typeof(Storage)!=="undefined")
{
localStorage.priceBreakId=id;
}
$.mobile.changePage('#priceBreakup');
});
});
Second js File : bookingGuestDetails.js
$(document).ready(function(){
$("#bookingConf").live("pagebeforeshow",function(e){
loadBookingConfData();
});
$(".edit-btn1").live("click",function(){
var imgId=this.id;
imgId=imgId.split('_');
var str=imgId[1];
$("#ulBookingConf li").empty();
loadBookingConfDataForEdit();
});
$("#btnSubmitConf").live("click",function(){
$.blockUI({ message: '<div class="loading-text">Please wait...</div>' });
var conFname=$(".clsConName").val();
var conEmail=$(".clsConEmail").val();
var conMobile=$(".clsConMobile").val();
if(conFname=="")
{
$.unblockUI();
jAlert('Please enter First Name','Alert',function(){
$(".clsConName").focus();
});
return false;
}
else if(!conFname.match(/^[a-zA-Z ]*$/))
{
$.unblockUI();
jAlert('First Name can have alphabets only','Alert',function(){
$(".clsConName").focus();
});
return false;
}
else if(conFname.length>15)
{
$.unblockUI();
jAlert('First Name cannot be greater than 15 alphabets','Alert',function(){
$(".clsConName").focus();
});
return false;
}
if(conEmail=="")
{
$.unblockUI();
jAlert('Please enter Email Address','Alert',function(){
$(".clsConEmail").focus();
});
return false;
}
else if(!conEmail.match(/^(([^<>()[\]\\.,;:\s#\"]+(\.[^<>()[\]\\.,;:\s#\"]+)*)|(\".+\"))#((\[(2([0-4]\d|5[0-5])|1?\d{1,2})(\.(2([0-4]\d|5[0-5])|1?\d{1,2})){3} \])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/))
{
$.unblockUI();
jAlert('Enter valid Email Address','Alert',function(){
$(".clsConEmail").focus();
});
return false;
}
if(conMobile=="")
{
$.unblockUI();
jAlert('Please enter Mobile Number','Alert',function(){
$('.clsConMobile').focus();
});
return false;
}
else if(!conMobile.match(/([0-9]{10})$/))
{
$.unblockUI();
jAlert('Enter valid 10-digit Mobile Number','Alert',function(){
$('.clsConMobile').focus();
});
return false;
}
$.unblockUI();
createProvisional();
});
});
function loadBookingConfData(){
var noOfRoom=$('#selectmenu2').val();
var nights=$('#nights').val();
var noOfAdults=0;
var cinDate=JSON.parse(localStorage['search'])[0].checkInDate;
var displayDate=displayDate2(cinDate)[1];
var roomDetails='<li class="booking_full_guest_head"><ul id="booking_full_guest_head_ul"><li>Hotel <span id="hotelConf">'+localStorage.hotelNameGuestDetails+'</span></li><li>Check-in <span id="CheckinConf">'+displayDate+'</span></li><li>Nights <span id="NightsConf">'+nights+'</span></li></ul></li>';
for(var i=1;i<=noOfRoom;i++)
{
roomDetails+='<li><div class="booking_full_guest_head_edit">Room-'+i+'<br>'+$("#spRoomType_"+i).html()+'<img class="edit-btn1" id="imgEdit_'+i+'" src="images/edit-ico.jpg" width="19" height="18" alt="Edit"></div></li> ';
if(i!=1){
noOfAdults=$('#selectmenu3'+(i-1)).val();
}
else
{
noOfAdults=$('#selectmenu3').val();
}
for(var j=1;j<=noOfAdults;j++){
if(document.getElementById('Gender_'+i+'_'+j+'_0').checked)
{
roomDetails+='<li class="bookinsg_full_guest_adult_seprator"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain"> <label for="textinput">Name </label> <input class="enFields_'+ i +'" disabled="disabled" name="textinput" type="text" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input class="enFields_'+ i +'" disabled="disabled" name="Gender1_'+i+'_'+j+'" type="radio" id="Gender1_'+i+'_'+j+'_0" value="" checked /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input class="enFields_'+ i +'" disabled="disabled" type="radio" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" /> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input class="enFields_'+ i +'" name="textinput" disabled="disabled" type="email" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" /></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input class="enFields_'+ i +'" name="textinput" type="number" id="Monumber1_'+i+'_'+j+'" disabled="disabled" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>';
}
else if(document.getElementById('Gender_'+i+'_'+j+'_1').checked)
{
roomDetails+='<li class="bookinsg_full_guest_adult_seprator"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain"> <label for="textinput">Name </label> <input class="enFields_'+ i +'" disabled="disabled" name="textinput" type="text" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input class="enFields_'+ i +'" disabled="disabled" name="Gender1_'+i+'_'+j+'" type="radio" id="Gender1_'+i+'_'+j+'_0" value="" /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input class="enFields_'+ i +'" disabled="disabled" type="radio" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" checked/> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input class="enFields_'+ i +'" name="textinput" type="email" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" disabled="disabled"/></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input class="enFields_'+ i +'" name="textinput" type="number" id="Monumber1_'+i+'_'+j+'" disabled="disabled" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>';
}
}
}
var netCost="";
netCost=calcTotalResevationCost();
roomDetails+='<li class="booking_full_guest_adult_seprator booking_full_guest_adult_total">Total Cost INR '+ netCost +' /-</li><li class="submit-btn-wrap"><input name="Submit" type="submit" class="button-bg" id="btnCreateProv" value="Save"/><br><input name="Reset" type="reset" value="Cancel" class="button-bg"/></li>';
$("#ulBookingConf").empty();
$(roomDetails).appendTo("#ulBookingConf").trigger("create");
}
function loadBookingConfDataForEdit(){
var cinDate=JSON.parse(localStorage['search'])[0].checkInDate;
var displayDate=displayDate2(cinDate)[1];
var nights=$('#nights').val();
var noOfRoom=$('#selectmenu2').val();
var noOfAdults=0;
var roomDetails='<li class="booking_full_guest_head"><ul id="booking_full_guest_head_ul"><li>Hotel <span id="hotelConf">'+localStorage.hotelNameGuestDetails+'</span></li><li>Check-in <span id="CheckinConf">'+displayDate+'</span></li><li>Nights <span id="NightsConf">'+nights+'</span></li></ul></li>';
for(var i=1;i<=noOfRoom;i++)
{
roomDetails+='<li id="liConfPage"><div class="booking_full_guest_head_edit">Room-'+i+'<br>'+$("#spRoomType_"+i).html()+'<img class="edit-btn1" id="imgEdit_'+i+'" src="images/edit-ico.jpg" width="19" height="18" alt="Edit"></div></li> ';
if(i!=1){
noOfAdults=$('#selectmenu3'+(i-1)).val();
}
else
{
noOfAdults=$('#selectmenu3').val();
}
for(var j=1;j<=noOfAdults;j++){
if(document.getElementById('Gender_'+i+'_'+j+'_0').checked)
{
roomDetails+='<li id="liConfPageGender" class="bookinsg_full_guest_adult_seprator"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain" id="guestDetails"> <label for="textinput">Name </label> <input class="clsConName" name="textinput" type="text" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input type="radio" class="clsConRadio" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_0" value="" checked /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input type="radio" class="enFields_'+ i +'" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" /> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input class="clsConEmail" name="textinput" type="text" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" /></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input type="text" class="clsConMobile" name="textinput" id="Monumber1_'+i+'_'+j+'" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>';
}
else if(document.getElementById('Gender_'+i+'_'+j+'_1').checked)
{
roomDetails+='<li class="bookinsg_full_guest_adult_seprator" id="liConfpagefulldetails"><div class="booking_full_guest_type_head"> Adult '+j+'</div><div data-role="fieldcontain"> <label for="textinput">Name </label> <input type="text" class="clsConName" name="textinput" id="Fname1_'+i+'_'+j+'" value="'+$("#Fname_"+i+"_"+j).val()+' '+$("#Lname_"+i+"_"+j).val()+'" /></div><div data-role="fieldcontain" class="radio-input-wrap"><fieldset data-role="controlgroup" data-type="horizontal"><label class="gender-label">Gender<span class="mandatory-gender-sign">*</span></label><input type="radio" class="enFields_'+ i +'" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_0" value="" /><label for="Gender1_'+i+'_'+j+'_0">Male</label><input type="radio" class="enFields_'+ i +'" name="Gender1_'+i+'_'+j+'" id="Gender1_'+i+'_'+j+'_1" value="" checked/> <label for="Gender1_'+i+'_'+j+'_1">Female</label></fieldset></div><div data-role="fieldcontain"><label for="textinput">Email </label><input type="text" class="clsConEmail" name="textinput" id="Email1_'+i+'_'+j+'" value="'+$("#Email_"+i+"_"+j).val()+'" /></div> <div data-role="fieldcontain"><label for="textinput">Number </label><input type="text" class="clsConMobile" name="textinput" id="Monumber1_'+i+'_'+j+'" value="'+$("#Monumber_"+i+"_"+j).val()+'" /> </div></li>';
}
}
}
var netCost="";
netCost=calcTotalResevationCost();
roomDetails+='<li class="booking_full_guest_adult_seprator booking_full_guest_adult_total">Total Cost INR '+ netCost +' /- </li><li class="submit-btn-wrap"><input name="Submit" type="submit" class="button-bg" id="btnSubmitConf" value="Save"/><br><input name="Reset" type="reset" value="Cancel" class="button-bg"/></li>';
$("#ulBookingConf").empty();
$(roomDetails).appendTo("#ulBookingConf").trigger("create");
}
Follows is our data-role pages for booking, one is bookingform and other is bookingConfirmationPage
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1" />
<title>Ginger</title>
<link href="css/dark-theme.min.css" rel="stylesheet" type="text/css"/>
<!--<link href="css/jquery-ui.css" rel="stylesheet" type="text/css"/> -->
<link href="css/mystyle.css" rel="stylesheet" type="text/css"/>
<link href="css/jquery.mobile.structure-1.2.0.css" rel="stylesheet" type="text/css" />
<link href="css/jalerts.css" rel="stylesheet" type="text/css"/>
<!-- Includes Mobiscroll -->
<link href="css/mobiscroll-2.3.1.custom.min.css" rel="stylesheet" type="text/css" />
</head>
<body class="booking-bg" id="gingerAppBody">
<div data-role="page" id="booking" data-theme="a" class="form-content-wrap home-bg">
<div data-role="header" data-id="ginger_header" data-position="fixed">
<h1>BOOKING</h1>
<!------------- booking form page --------------------->
<div data-role="page" id="bookingform" data-theme="a" class="form-content-wrap">
<div data-role="header" data-id="ginger_header" data-position="fixed">
<h1>BOOKING</h1>
Back
Call
Menu
</div>
<form method="get">
<div data-role="content" class="form-content-wrap" >
<div data-role="collapsible-set" class="booking_form_wrap" id="roomListDiv"></div>
<ul class="form-list-item">
<li class="booked-by-head">
Booked By...
</li>
<li>
<div data-role="fieldcontain">
<select name="flipswitch3" id="flipswitch3" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="flipswitch3">Booker is same as guest 1</label>
</div>
</li>
<li>
<div data-role="fieldcontain">
<input type="text" name="Fname" id="BookerFname" value="" placeholder="First Name" />
</div>
<span class="mandatory-sign">*</span>
</li>
<li>
<div data-role="fieldcontain">
<input type="text" name="Lname" id="BookerLname" value="" placeholder="Last Name" />
</div>
<span class="mandatory-sign">*</span>
</li>
<li class="radio-input-li">
<div data-role="fieldcontain" class="radio-input-wrap">
<fieldset data-role="controlgroup" data-type="horizontal">
<label class="gender-label">Gender
<span class="mandatory-gender-sign">*</span></label>
<input name="BookerGender" type="radio" id="BookerGender_0" value=""/>
<label for="BookerGender_0">Male</label>
<input type="radio" name="BookerGender" id="BookerGender_1" value="" />
<label for="BookerGender_1">Female</label>
</fieldset>
</div>
</li>
<li>
<div data-role="fieldcontain">
<input type="email" name="Email" id="BookerEmail" value="" placeholder="Email" />
</div>
<span class="mandatory-sign">*</span>
</li>
<li>
<div data-role="fieldcontain">
<input type="tel" name="Monumber" id="BookerMonumber" value="" placeholder="Mobile Number" />
</div>
<span class="mandatory-sign">*</span>
</li>
<li>
<div data-role="fieldcontain">
<select name="flipswitch2" id="flipswitch2" data-role="slider">
<option value="off">Off</option>
<option value="on">On</option>
</select>
<label for="flipswitch2">Subscribe to the 'Ginger' newsletter</label>
</div>
</li>
<li class="submit-btn-wrap">
<input name="Submit" type="submit" value="Submit" id="btnFormSubmit" class="button-bg"/>
<br>
<input name="Reset" type="reset" value="Reset" class="button-bg"/>
</li>
</ul>
</div>
</form>
</div>
<!------------- booking confirmation page --------------------->
<div data-role="page" id="bookingConf" data-theme="a" class="form-content-wrap">
<div data-role="header" data-id="ginger_header">
<h1>BOOKING</h1>
Back
Call
Menu
</div>
<form method="get">
<div data-role="content" class="form-content-wrap" >
<ul id="ulBookingConf" class="form-list-item booking_payment">
</ul>
</div>
</form>
</div>
</div>
<script src="js/head.min.js"></script>
<script>
head.js("js/jquery-1.8.2.min.js", "cordova-2.1.0.js", "js/jquery-ui.min.js", "js/jquery.blockUI-min.js","js/jquery.alerts.min.js","jquery.mobile/jquery.mobile-1.2.0.min.js","js/mobiscroll-2.3.1.custom.js","js/registration.js","js/booking.js","js/bookingSearch.js","js/bookingSearchResult.js","js/bookingGuestDetails.js","js/paymentSuccess.js","js/priceBreakup.js","js/common.js",function(){
//head.js("js/jquery-1.8.2.min.js", "cordova-2.1.0.js", "js/jquery-ui.min.js", "js/jquery.blockUI-min.js","js/jquery.alerts.min.js","jquery.mobile/jquery.mobile-1.2.0.min.js","js/mobiscroll-2.3.1.custom.js","js/default.js","js/registration1.js","js/booking1.js","js/paymentSuccess.js",function(){
localStorage.clear();
$.mobile.selectmenu.prototype.options.nativeMenu = false;
$.mobile.phonegapNavigationEnabled = true ;
document.addEventListener("deviceready", onDeviceReady, false);
function onDeviceReady(){
document.addEventListener("backbutton", function(e){
if($.mobile.activePage.is('#booking')){
e.preventDefault();
navigator.app.exitApp();
}
else {
navigator.app.backHistory();
}
}, false);
}
});
</script>
</body>
</html>
With jquery mobile this
$(document).ready(function(){
is not needed (actually is wrong to use it like this. See here.)
When you navigate to a page, a series of events is being fired.
pagebeforecreate, pagecreate, pagebeforeshow, pageshow etc are some of
them. You bind to those events not document ready. Since you use
phonegap you should see the deviceready event and mobileinit.