Using Icecuim but hangs to load json file - json

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>

Related

Dropzone.js unable to map to viewmodel

I have the following drop zone js and have a file input hidden with an asp-for tag which should map to my viewmodel. However there is nothing being mapped. The controller accepts a parameter List FormFiles.
<form method="post" asp-action="Index" asp-controller="Customer" class="js-step-form js-validate" enctype="multipart/form-data"
data-hs-step-form-options='{
"progressSelector": "#validationFormProgress",
"stepsSelector": "#validationFormContent",
"endSelector": "#validationFormFinishBtn",
"isValidate": true
}'>
<!-- Step -->
<!-- End Step -->
<!-- Content Step Form -->
<div id="validationFormContent">
<div id="validationFormAccount" class="active">
<div class="row">
<div class="col-sm-6">
<!-- Form Group -->
<div class="form-group js-form-message mb-3">
<label class="input-label">Loyality Spend</label>
<input id="LoyalitySpendTextBox" type="text" class="form-control stringValidation" required
data-msg="Please enter Loyality Spend." placeholder="Loyality Spend" aria-label="Current Value" value="#Model.Customer.LoyaltySpend" asp-for="#Model.Customer.LoyaltySpend">
</div>
<!-- End Form Group -->
</div>
<div class="col-sm-6">
<!-- Form Group -->
<div class="form-group mb-3">
<label class="input-label">Documents</label>
<!-- Dropzone -->
<div id="attachFilesLabel" class="js-dropzone dropzone-custom custom-file-boxed">
<div class="dz-message dz-filename">
<img class="avatar avatar-xl avatar-4by3 mb-3" src="~/front-dashboard-v1.1/src/assets/svg/illustrations/browse.svg" alt="Image Description">
<h5>Drag and drop your file here</h5>
<p class="mb-2">or</p>
<span class="btn btn-sm btn-white" id="chose_files_btn" onclick="doOpen(event)">
Browse File
<input type="file" asp-for="#Model.FormFiles" id="File" name="File" size="1" style="display: none" />
</span>
</div>
</div>
<!-- End Dropzone -->
</div>
<!-- End Form Group -->
</div>
</div>
</div>
</form>

If you want to bind data with name FormFiles,you can use paramName of Dropzone.And if you want to upload files when button click,try to use autoProcessQueue: false,,and in button click event add e.preventDefault();wrapperThis.processQueue();.If you want to delete files,you need to add addRemoveLinks: true, and use removedfile. Here is a demo.
View:
<form asp-action="Upload" asp-antiforgery="false"
class="dropzone" id="myAwesomeDropzone" enctype="multipart/form-data">
<div class="fallback">
<input asp-for="FormFiles" type="file" multiple />
</div>
js:
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/5.9.2/dropzone.css"/>
<script>
function myParamName() {
return "FormFiles";
}
Dropzone.options.myAwesomeDropzone = {
autoProcessQueue: false,
paramName: myParamName, // The name that will be used to transfer the file
uploadMultiple: true,
parallelUploads: 100,
addRemoveLinks: true,
removedfile: function (file) {
file.previewElement.remove();
},
init: function () {
console.log("active");
var wrapperThis = this;
$("#submit").click(function (e) {
e.preventDefault();
wrapperThis.processQueue();
});
},
accept: function (file, done) {
done();
}
};
</script>
action:
[HttpPost]
public IActionResult Upload(List<IFormFile> FormFiles)
{
return Ok();
}
result:

ajax is not working even though I pressed the button which is allocated for the function

<%# page language="java" contentType="text/html; charset=UTF-8"
pageEncoding="UTF-8"%>
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<link rel="stylesheet" href="<%=request.getContextPath()%>/css/style.css">
<meta name="viewport" content="width=device-width, initial-scale=1">
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.0.0-beta1/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-giJF6kkoqNQ00vy+HMDP7azOuL0xtbfIcaT9wjKHr8RbDVddVHyTfAAsrekwKmP1" crossorigin="anonymous">
<title>회원가입</title>
<style type="text/css">
div{
background-image: "../img/space.jpeg"
}
</style>
<script type="text/JavaScript" src="https://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
$("#ajax_idDuplicate").click(function(){
// userID 변수에 id의 입력된 값을 가져오게 함
var id = $("#id").val();
$.ajax({
type: "POST", // GET or POST 전송방법
url: "../UserIdCheckServlet", // 이쪽으로 보낸다(호출URL)
data: {"id": id}, // userID 이름에 userID 데이터 값을 넣어서 보낸다
success: function(result){ // 만약 성공적으로 수행되었다면 result로 값반환
if(result == 1){ // id가 checkMessage인 것에 아래 텍스트 출력
$('#checkMessage').html('사용할 수 있는 아이디입니다.');
} else {
$('#checkMessage').html('사용할 수 없는 아이디입니다.');
}
// id 가 exampleModal인 모달함수 실행시켜서 모달 실행시키기 위해
$('#checkModal').modal("show");
},
error: function(xhr,status,error){
alert(error);
}
});
});
</script>
</head>
<body>
<div id="join-box">
<div>
<a href="<%=request.getContextPath()%>/MainServlet"><img src="
<%=request.getContextPath()%>/img/joinForm/x_button.jpg" border="0" width="15" height="15"
align="right"></a>
<br>
<h2>회원가입</h2><br/>
<span style="color: red;">${msg }</span>
<form action="<%=request.getContextPath()%>/JoinServlet" method="post">
<input type="text" name="name" class="name" placeholder="이름" /><br>
<input type="text" name="id" id="id" class="id" placeholder="아이디 입력" />
&nbsp
<!-- <button class="duplicate_check">중복확인</button> -->
<!-- 부트스트랩 테스트 -->
<!-- Button trigger modal -->
<button type="button" value="중복확인" id="ajax_idDuplicate" class="social-signin" data-bs-toggle="modal"data-bs-target="#checkModal">
중복확인
</button>
<!-- Modal -->
<div class="modal fade" id="checkModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">아이디 중복 확인</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body" id="checkMessage">
<!-- 적을 내용 (알람창) -->
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">닫기</button>
</div>
</div>
</div>
</div>
<!-- 부트스트랩 테스트 -->
<input type="password" name="pw" placeholder="비밀번호 입력" /><br>
연락처 : <br/><select name="phone1">
<option value="010">010</option>
<option value="011">011</option>
<option value="016">016</option>
<option value="018">018</option>
<option value="019">019</option>
</select>
-<input type="text" class="phone" name="phone2">
-<input type="text" class="phone" name="phone3"><br>
성별 :
남자 <input type="radio" name="gender" value="man">
여자 <input type="radio" name="gender" value="woman"><br>
</div>
<div>
<input type="submit" name="signup_submit" value="회원가입" />
</form>
<br>
<br>
<img src=" <%=request.getContextPath()%>/img/home.png" border="0" width="30" height="30" align="center">
</body>
</html>
I am trying to use AJAX, and I am struggling with a problem which I can't find anymore.
Even though I press the button which has id of ajax_idDuplicate, the function which I decided to activate through the button is not working.
and there is no error in a console window and on my web browser. Could you guys help me for a while?

Dom needs to be loaded before you call your function
<script type="text/javascript">
$(document).ready(function() {
$("#ajax_idDuplicate").click(function(){

how to get textbox value in hyperlink as id?

hi i want to fetch value from text box and append to hyperlink as a id. here is my code but i am unable to get the value of textbox.
<li><a class="ajax-link" href="ajax/legal_notice.php?id=+ document.getElementById('cust_id').value">Hypelink name</a></li>
<div class="col-sm-6">
Customer Id
</div>
<div class="col-sm-6">
<input type="text" name="cust_id" id="cust_id" class="form-control" >
</div>
Kindly guide me how to get value from text box.

Try this
<html>
<head>
<script type="text/javascript" src="https://code.jquery.com/jquery-2.1.1.min.js"></script>
<script type="text/javascript">
alert("hello");
function resetLink(ele)
{
var href="ajax/legal_notice.php?id="+$(ele).val();
$(".ajax-link").attr("href",""+href);
}
</script>
</head>
<body>
<li><a class="ajax-link" href="ajax/legal_notice.php?id=+ document.getElementById('cust_id').value">Hypelink name</a></li>
<div class="col-sm-6">
Customer Id
</div>
<div class="col-sm-6">
<input type="text" name="cust_id" id="cust_id" onchange="resetLink(this);" class="form-control" >
</div>
</body>

See below:
<script>
function append() {
var link = document.getElementById('link');
var text = document.getElementById('cust_id');
link.href = "ajax/legal_notice.php?id=" + text.value;
link.text = text.value;
}
</script>
<a id="link" href="ajax/legal_notice.php?id=+ document.getElementById('cust_id').value">Hypelink name</a>
<div class="col-sm-6">
Customer Id
</div>
<div class="col-sm-6">
<input type="text" name="cust_id" id="cust_id" class="form-control" onchange="append();">
</div>

Pop up window automatically on page load

I'm trying to allow a pop up to display always when a user is basically unregistered and wishes to view the certain page. I saw an example of how to do it but I am completely stuck it's not appearing on my page. Any ideas?
Thanks!
Image: http://puu.sh/cr1Zz/1b5da28635.png
My code on that page(CSS is listed in the image above)
<?php
session_start();
include ('../includes/config.php');
include ('../includes/header.php');
?>
<!DOCTYPE HTML>
<html>
<head>
<title>Honda | </title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
<link href='http://fonts.googleapis.com/css?family=Julius+Sans+One' rel='stylesheet' type='text/css'>
<link href="../css/style.css" rel="stylesheet" type="text/css" media="all" />
<!--start lightbox -->
<link rel="stylesheet" type="text/css" href="../css/jquery.lightbox.css">
<script src="../js/jquery.min.js"></script>
<script src="../js/jquery.lightbox.js"></script>
<script>
// Initiate Lightbox
$(function() {
$('.gallery1 a').lightbox();
});
</script>
</head>
<body>
<div class='modalDialog'>You cannot view this page! Please register</div>
<!--start header-->
<div class="h_bg">
<div class="wrap">
<div class="wrapper">
<div class="header">
<div class="logo">
<img src="../images/logo.png">
</div>
<div class="cssmenu">
<ul>
<li><span>Home</span></li>
<li><span>About</span></li>
<li class="active" class="has-sub"><span>Gallery</span>
</li>
<li class="last"><span>Contact</span></li>
<div class="clear"></div>
<div class="search">
<h2>search</h2>
<form>
<input type="text" value="" placeholder="Enter Your search...">
<input type="submit" value="">
</form>
</div>
<?php
if(isset($_POST["submit"])){
if(!empty($_POST['user']) && !empty($_POST['pass'])) {
$user=$_POST['user'];
$pass=$_POST['pass'];
$pass = strip_tags($pass);
$pass = md5($pass); // md5 is used to encrypt your password to make it more secure.
$query=mysql_query("SELECT * FROM login WHERE username='".$user."' AND password='".$pass."'");
$numrows=mysql_num_rows($query);
if($numrows!=0)
{
while($row=mysql_fetch_assoc($query))
{
$dbusername=$row['username'];
$dbpassword=$row['password'];
}
if($user == $dbusername && $pass == $dbpassword)
{
session_start();
$_SESSION['sess_user']=$user;
/* Redirect browser */
header("Location: member.php");
}
} else {
echo "<div class='results'>Invalid username or password!</div>";
}
} else {
echo "All fields are required!";
}
}
?>
<div class="search1">
<h2>login/Register</h2>
<form action="" method="POST">
<label>Username:</label>
<input type="text" name="user" required />
<label>Password:</label>
<input type="password" name="pass" required />
<input type="submit" value="Login" name="submit" class="submit" />
<br><br>
<center>
<h2><p>Register</p></h2>
</center>
</form>
</div>
</div>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
<!-- start content -->
<div class="footer_bg">
<div class="wrap">
<div class="wrapper">
<div class="footer2">
<div class="copy">
<p class="w3-link">© </p>
</div>
<div class="f_nav">
<ul>
<li>Skype</li>
<li>Linked in</li>
<li>Twitter</li>
<li>Facebook</li>
</ul>
</div>
<div class="clear"></div>
</div>
</div>
</div>
</div>
</body>
</html>

Although you include jQuery, the modal dialog is part of the jQueryUI. But that on its own won't solve your problem. You have declared a div with the class modalDialog, so I suppose this is the line to be shown in the dialog. I would suggest you to use id's instead of classes because a class covers multiple document objects, and you really want to show one dialog here. From the jQueryUI docs:
<div id="dialog" title="Please register">
<p>You cannot view this page! Please register</p>
</div>
Add the jQuery call:
$(function() {
$( "#dialog" ).dialog();
});
And that should work just fine
If you decide to go with the lightbox modal dialog your code should look like:
<div id="test-modal" class="white-popup-block mfp-hide">
<h1>lease register</h1>
<p>You cannot view this page! Please register</p>
<p><a class="popup-modal-dismiss" href="#">Dismiss</a></p>
</div>
To call the code use:
$(function () {
$('.popup-modal').magnificPopup({
type: 'inline',
preloader: false,
focus: '#username',
modal: true
});
$(document).on('click', '.popup-modal-dismiss', function (e) {
e.preventDefault();
$.magnificPopup.close();
});
});

Weird rendering issue

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.