We Keep Coding

Why is my webpage freezing when a filter button is clicked?

Tasked with creating a pinterest like webpage using the data from a JSON response. Each JSON object has a service_name key, which can be either manual, twitter, or instagram. I attempted to create three filter buttons so that the webpage would only display the respective data by using the on click method in jquery to pass an array to the loadData function. However, each of these buttons freeze the webpage when they are clicked.
Here is a link to the codepen: https://codepen.io/KevinM818/pen/OjMYYO
$(document).ready(function() {
var service = "";
var datePublished = "";
var manualImage = "";
var manualText = "";
var manualLinkText = "";
var manualLink = "";
var twitterUsername = "";
var twitterTweet = "";
var instaImage = "";
var instaUsername = "";
var instaCaption = "";
var manualItems = [];
var twitterItems = [];
var instagramItems = [];
function loadItems(array) {
//Loop through the response array to load the data into the webpage
for (var i = 0; i < array.length; i++) {
service = array[i].service_name;
manualImage = array[i].item_data.image_url;
manualText = array[i].item_data.text;
manualLinkText = array[i].item_data.link_text;
manualLink = array[i].item_data.link;
twitterTweet = array[i].item_data.tweet;
instaCaption = array[i].item_data.caption;
if (service === "Twitter" || service === "Instagram") {
username = array[i].item_data.user.username;
}
switch (service) {
case "Manual":
$("#main").append(
"<div class='item'><div class='manual-item'><img src='https://image.ibb.co/g66jfQ/aff.png' alt='AFF' id='manual-icon'><img src=" +
manualImage +
" id='manual-thumbnail'><p>" +
manualText +
"</p><h4><a href=" +
manualLink +
" target='_blank'>" +
manualLinkText +
"</a></h4></div></div>"
);
manualItems.push(array[i]);
break;
case "Twitter":
$("#main").append(
"<div class='item'><div class='twitter-item'><img src='https://image.ibb.co/mGHqLQ/twitter.png' alt='twitter' id='twitter-icon'><h4>" +
username +
"</h4><p>" +
linkifyTweet(twitterTweet) +
"</p></div></div>"
);
twitterItems.push(array[i]);
break;
case "Instagram":
instaImage = array[i].item_data.image.medium;
$("#main").append(
"<div class='item'><div class='insta-item'><img src='https://image.ibb.co/hXkc0Q/instagram.png' alt='instagram' id='insta-icon'><img src=" +
instaImage +
" alt='instagram image' id='insta-thumbnail'><h4>" +
username +
"</h4><p>" +
linkifyInstagram(instaCaption) +
"</p></div></div>"
);
instagramItems.push(array[i]);
break;
}
}
}
function getItems() {
$.ajax({
type: "GET",
url: "https://api.myjson.com/bins/warm5",
dataType: "json",
success: function(response) {
//Sort the JSON response by the date the item was published from most recent to oldest
for (var i = 0; i < response.items.length; i++) {
datePublished = response.items[i].item_published;
datePublished = new Date(datePublished.substring(0, 10));
}
response.items.sort(function(a, b) {
return a.item_published > b.item_published
? -1
: a.item_published < b.item_published ? 1 : 0;
});
loadItems(response.items);
}
});
}
function linkifyTweet(text) {
var base_url = "http://twitter.com/";
var hashtag_part = "hashtag/";
// convert URLs into links
text = text.replace(
/(>|<a[^<>]+href=['"])?(https?:\/\/([-a-z0-9]+\.)+[a-z]{2,5}(\/[-a-z0-9!#()\/?&.,]*[^ !#?().,])?)/gi,
function($0, $1, $2) {
return $1 ? $0 : '' + $2 + "";
}
);
// convert #mentions into links
text = text.replace(/(:\/\/|>)?(#([_a-z0-9-]+))/gi, function(
$0,
$1,
$2,
$3
) {
return $1
? $0
: '<a href="' +
base_url +
$3 +
'" title="Follow ' +
$3 +
'" target="_blank">#' +
$3 +
"</a>";
});
// convert #hashtags into tag search links
text = text.replace(/(:\/\/[^ <]*|>)?(\#([_a-z0-9-]+))/gi, function(
$0,
$1,
$2,
$3
) {
return $1
? $0
: '<a href="' +
base_url +
hashtag_part +
$3 +
'" title="Search tag: ' +
$3 +
'" target="_blank">#' +
$3 +
"</a>";
});
return text;
}
function linkifyInstagram(text) {
var base_url = "http://instagram.com/";
var hashtag_part = "explore/tags/";
// convert #mentions into links
text = text.replace(/(:\/\/|>)?(#([_a-z0-9-]+))/gi, function(
$0,
$1,
$2,
$3
) {
return $1
? $0
: '<a href="' +
base_url +
$3 +
'" title="Follow ' +
$3 +
'" target="_blank">#' +
$3 +
"</a>";
});
// convert #hashtags into tag search links
text = text.replace(/(:\/\/[^ <]*|>)?(\#([_a-z0-9-]+))/gi, function(
$0,
$1,
$2,
$3
) {
return $1
? $0
: '<a href="' +
base_url +
hashtag_part +
$3 +
'" title="Search tag: ' +
$3 +
'" target="_blank">#' +
$3 +
"</a>";
});
return text;
}
getItems();
console.log(manualItems);
console.log(twitterItems);
console.log(instagramItems);
$("#manualBtn").on("click", function() {
$("#main").html("");
loadItems(manualItems);
manualItems = [];
});
$("#twitterBtn").on("click", function() {
$("#main").html("");
loadItems(twitterItems);
twitterItems = [];
});
$("#instagramBtn").on("click", function() {
$("#main").html("");
loadItems(instagramItems);
instagramItems = [];
});
$("#loadMore").on("click", getItems);
});

I forked your codepen with the working fiddle. The problem was actually quite simple to find.
While your for-loop runs you populate the source Array in your switch statements over and over again. So I created a second argument for your loadItems function called "is_filter". When you click on one of your filter buttons we pass true as value. If the value is set we just ignore populating the source Array in the for-loop. Hope this helps you get going in the right direction:
https://codepen.io/anon/pen/zdrgpp
This is an excerpt from one of the filters:
loadItems(manualItems, true);
And the function declaration:
function loadItems(array, is_filter = false) { ...
And here you have the inline fiddle:
$(document).ready(function() {
var service = "";
var datePublished = "";
var manualImage = "";
var manualText = "";
var manualLinkText = "";
var manualLink = "";
var twitterUsername = "";
var twitterTweet = "";
var instaImage = "";
var instaUsername = "";
var instaCaption = "";
var manualItems = [];
var twitterItems = [];
var instagramItems = [];
function loadItems(array, is_filter = false) {
for (var i = 0; i < array.length; i++) {
service = array[i].service_name;
manualImage = array[i].item_data.image_url;
manualText = array[i].item_data.text;
manualLinkText = array[i].item_data.link_text;
manualLink = array[i].item_data.link;
twitterTweet = array[i].item_data.tweet;
instaCaption = array[i].item_data.caption;
if (service === "Twitter" || service === "Instagram") {
username = array[i].item_data.user.username;
}
switch (service) {
case "Manual":
$("#main").append("<div class='item'><div class='manual-item'><img src='https://image.ibb.co/g66jfQ/aff.png' alt='AFF' id='manual-icon'><img src=" + manualImage + " id='manual-thumbnail'><p>" + manualText + "</p><h4><a href=" + manualLink + " target='_blank'>" + manualLinkText + "</a></h4></div></div>");
if(!is_filter){
manualItems.push(array[i]);
}
break;
case "Twitter":
$("#main").append("<div class='item'><div class='twitter-item'><img src='https://image.ibb.co/mGHqLQ/twitter.png' alt='twitter' id='twitter-icon'><h4>" + username + "</h4><p>" + linkifyTweet(twitterTweet) + "</p></div></div>");
if(!is_filter){
twitterItems.push(array[i]);
}
break;
case "Instagram":
instaImage = array[i].item_data.image.medium;
$("#main").append("<div class='item'><div class='insta-item'><img src='https://image.ibb.co/hXkc0Q/instagram.png' alt='instagram' id='insta-icon'><img src=" + instaImage + " alt='instagram image' id='insta-thumbnail'><h4>" + username + "</h4><p>" + linkifyInstagram(instaCaption) + "</p></div></div>");
if(!is_filter){
instagramItems.push(array[i]);
}
break;
}
}
}
function getItems() {
$.ajax({
type: "GET",
url: "https://api.myjson.com/bins/warm5",
dataType: "json",
success: function(response) {
//Sort the JSON response by the date the item was published from most recent to oldest
for (var i = 0; i < response.items.length; i++) {
datePublished = response.items[i].item_published;
datePublished = new Date(datePublished.substring(0, 10));
}
response.items.sort(function(a, b) {
return (a.item_published > b.item_published) ? -1 : ((a.item_published < b.item_published) ? 1 : 0);
});
loadItems(response.items);
}
});
}
function linkifyTweet(text) {
var base_url = 'http://twitter.com/';
var hashtag_part = 'hashtag/';
// convert URLs into links
text = text.replace(
/(>|<a[^<>]+href=['"])?(https?:\/\/([-a-z0-9]+\.)+[a-z]{2,5}(\/[-a-z0-9!#()\/?&.,]*[^ !#?().,])?)/gi,
function($0, $1, $2) {
return ($1 ? $0 : '<a href="' + $2 + '" target="_blank">' + $2 +
'</a>');
});
// convert #mentions into links
text = text.replace(
/(:\/\/|>)?(#([_a-z0-9-]+))/gi,
function($0, $1, $2, $3) {
return ($1 ? $0 : '<a href="' + base_url + $3 +
'" title="Follow ' + $3 + '" target="_blank">#' + $3 +
'</a>');
});
// convert #hashtags into tag search links
text = text.replace(
/(:\/\/[^ <]*|>)?(\#([_a-z0-9-]+))/gi,
function($0, $1, $2, $3) {
return ($1 ? $0 : '<a href="' + base_url + hashtag_part + $3 +
'" title="Search tag: ' + $3 + '" target="_blank">#' + $3 +
'</a>');
});
return text;
}
function linkifyInstagram(text) {
var base_url = 'http://instagram.com/';
var hashtag_part = 'explore/tags/';
// convert #mentions into links
text = text.replace(
/(:\/\/|>)?(#([_a-z0-9-]+))/gi,
function($0, $1, $2, $3) {
return ($1 ? $0 : '<a href="' + base_url + $3 +
'" title="Follow ' + $3 + '" target="_blank">#' + $3 +
'</a>');
});
// convert #hashtags into tag search links
text = text.replace(
/(:\/\/[^ <]*|>)?(\#([_a-z0-9-]+))/gi,
function($0, $1, $2, $3) {
return ($1 ? $0 : '<a href="' + base_url + hashtag_part + $3 +
'" title="Search tag: ' + $3 + '" target="_blank">#' + $3 +
'</a>');
});
return text;
}
getItems();
$("#manualBtn").on('click', function(){
$("#main").html("");
loadItems(manualItems, true);
manualItems = [];
});
$("#twitterBtn").on('click', function(){
$("#main").html("");
loadItems(twitterItems, true);
twitterItems = [];
});
$("#instagramBtn").on('click',function(){
$("#main").html("");
loadItems(instagramItems, true);
instagramItems = [];
});
$("#loadMore").on("click", getItems);
});
.buttonGroup {
width: 90%;
margin: 30px auto; }
.wrapper {
width: 90%;
margin: 50px auto;
-moz-column-width: 330px;
-webkit-column-width: 330px;
column-width: 330px;
-moz-column-count: 5;
-webkit-column-count: 5;
column-count: 5;
-moz-column-gap: 5px;
-webkit-column-gap: 5px;
column-gap: 5px; }
.item {
position: center;
display: inline-block;
margin: 20px 0; }
.item:hover {
transition: 0.5s;
background-color: rgba(222, 234, 237, 0.5);
box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
-moz-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6);
-webkit-box-shadow: 0 0 10px rgba(0, 0, 0, 0.6); }
.manual-item {
width: 330px;
border: 1px solid #dae3e5;
border-radius: 5px;
padding: 27px; }
.manual-item #manual-icon {
display: block;
border-radius: 5px;
position: relative;
bottom: 40px;
margin-bottom: -66px;
z-index: 1; }
.manual-item #manual-thumbnail {
width: 100%;
height: auto;
padding-bottom: 10px; }
.manual-item p {
font-size: 1em; }
.manual-item h4 a {
color: red; }
.twitter-item {
width: 330px;
border: 1px solid #dae3e5;
border-radius: 5px;
padding: 27px; }
.twitter-item #twitter-icon {
border-radius: 5px;
position: relative;
bottom: 42px;
margin-bottom: -35px;
z-index: 1; }
.twitter-item h4 {
font-weight: bold;
font-size: 1.75em;
text-align: center; }
.twitter-item p {
font-size: 1.25em;
text-align: center;
padding: 15px 0; }
.twitter-item p a {
color: red; }
.insta-item {
width: 330px;
border: 1px solid #dae3e5;
border-radius: 5px;
padding: 27px; }
.insta-item #insta-icon {
display: block;
border-radius: 5px;
position: relative;
bottom: 40px;
margin-bottom: -66px;
z-index: 1; }
.insta-item #insta-thumbnail {
width: 100%;
height: auto;
padding-bottom: 10px; }
.insta-item h4 {
font-weight: bold; }
.insta-item p {
font-size: 1.25em; }
.insta-item p a {
color: red; }
.buttonWrapper {
text-align: center;
padding-bottom: 50px; }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<div class="buttonGroup">
<div class="btn-group btn-group-justified">
<div class="btn-group" role="group">
<button id="manualBtn" type="button" class="btn btn-default">Manual</button>
</div>
<div class="btn-group" role="group">
<button id="twitterBtn" type="button" class="btn btn-default">Twitter</button>
</div>
<div class="btn-group" role="group">
<button id="instagramBtn" type="button" class="btn btn-default">Instagram</button>
</div>
</div>
</div>
<div class="wrapper">
<div id="main">
</div>
</div>
<div class="buttonWrapper">
<button id="loadMore" type="button" class="btn btn-primary btn-lg">Load More</button>
</div>
</body>

Make the parent div as big as its child

I got some div in a parent div. The parent div should only be as big as its child divs.
So this is the current view
function record(id, title, description, content, dateOfCreation) { // the object
this.id = id;
this.title = title;
this.description = description;
this.content = content;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}
function init(){
var elements = []; // all records get stored here
for (var i = 0; i < 3; i++) { // create some objects
elements.push(new record(
i,
"title " + i,
"description " + i,
"content " + i,
"date " + i));
}
$(elements).each(function (index, currentRecord) { // create the div containers
var recordContainer = $("<div></div>");
recordContainer.addClass("recordContainer");
$(document.body).append(recordContainer);
recordContainer.append($("<div>" + currentRecord.title + "</div>"));
recordContainer.append($("<div>" + currentRecord.description + "</div>"));
recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>"));
recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>"));
});
}
init(); // call the routine
.recordContainer{
margin: 10px;
border: solid;
border-width: 1px;
border-radius: 2px;
border-color: #e8e9e9;
box-shadow: 1px 1px 1px #999999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
So I want recordContainer having a relative size. When looking for some information, I tried out adding display: inline; to "recordContainer". But then doing this, the container gets weird (?). You need to try it out, then you will see what I mean.
How can I achieve my desired div?

If you need them to be narrow but remain stacked vertically, use display: table, see the snippet below.
If you need them to be narrow and go onto the same line (and possibly wrap if that no longer fits), use display: inline-block.
function record(id, title, description, content, dateOfCreation) {
this.id = id;
this.title = title;
this.description = description;
this.content = content;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}
function init() {
var elements = []; // all records get stored here
for (var i = 0; i < 3; i++) { // create some objects
elements.push(new record(i, "title " + i, "description " + i, "content " + i, "date " + i));
}
$(elements).each(function(index, currentRecord) {
var recordContainer = $("<div></div>");
recordContainer.addClass("recordContainer");
$(document.body).append(recordContainer);
recordContainer.append($("<div>" + currentRecord.title + "</div>"));
recordContainer.append($("<div>" + currentRecord.description + "</div>"));
recordContainer.append($("<div>" + currentRecord.dateOfCreation + "</div>"));
recordContainer.append($("<div>" + currentRecord.lastEdited + "</div>"));
});
}
init(); // call the routine
.recordContainer {
margin: 10px;
border: solid;
border-width: 1px;
border-radius: 2px;
border-color: #e8e9e9;
box-shadow: 1px 1px 1px #999999;
display: table;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

I made some changes to improve semantics and performance as well. The problem is that the element "DIV" is by default a block element and therefore occupy the entire horizontal space.
I hope this solution helps you.
function record(id, title, description, content, dateOfCreation) { // the object
this.id = id;
this.title = title;
this.description = description;
this.content = content;
this.dateOfCreation = dateOfCreation;
this.lastEdited = dateOfCreation;
}
function init(){
var elements = []; // all records get stored here
for (var i = 0; i < 3; i++) { // create some objects
elements.push(new record(
i,
"title " + i,
"description " + i,
"content " + i,
"date " + i));
}
$(elements).each(function (index, currentRecord) { // create the div containers
var recordContainer = $("<div class='recordContainer'><div class='container container-" + index + "'></div></div>");
$(document.body).append(recordContainer);
$(".container-" + index).append("<div>" +
"<p>" + currentRecord.title + "</p>" +
"<p>" + currentRecord.description + "</p>" +
"<p>" + currentRecord.dateOfCreation + "</p>" +
"<p>" + currentRecord.lastEdited + "</p></div>");
});
}
init(); // call the routine
.recordContainer{
display: inline-block;
margin: 0;
}
.container{
margin: 0 .5em;
padding: .5em;
border: 1px solid #cccccc;
-webkit-border-radius: 2px;
-moz-border-radius: 2px;
border-radius: 2px;
-webkit-box-shadow: 1px 1px 10px #ccc;
-moz-box-shadow: 1px 1px 10px #ccc;
box-shadow: 1px 1px 10px #ccc;
}
.container p {
text-align: center;
}
.container p:nth-child(odd){
background: #eee;
margin: 0;
padding: .3em .5em;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

how to create slideshow for string 64 type image in MVC

I'm having trouble to create image slideshow. An image fetched from data base and binded into view model. it working fine. now i want to create slideshow with available images. i had tried like this.
$(function () {
function loop() {
$('.slider .inner-wrap').fadeIn("slow").css('marginLeft', 0).delay(2000)
.animate({ "marginLeft": "-200px" }, 700).delay(2000)
.animate({ "marginLeft": "-400px" }, 700).delay(2000)
.fadeOut("slow", loop);
}
loop();
});
.slider {
width: 200px;
height: 200px;
overflow: hidden;
margin: 30px auto;
background-image: url('http://www.thatssotrue.com/images/ajax_loader.gif');
background-size: 50px 50px;
background-position: center center;
background-repeat: no-repeat;
}
.slider img {
width: 200px;
height: 200px;
}
.inner-wrap {
width: 600px;
}
.item-1, .item-2, .item-3 {
display: inline-block;
vertical-align: top;
}
<tr>
<td>
<div class="slider">
<div class="inner-wrap">
<img class=" item-1" id="slides" />
</div>
</div>
</td>
</tr>
this is how i had bind my images
for (var i = 0; i < images.length; i++) {
var imgid = i;
var imagetemp = "<img id='" + imgid + "'style='margin:5px;cursor:zoom-in;width:200px;height: 150px;' onclick='getid(this)' src='" + clubimage[i] + "'>";// onclick='getid(this)'
var slider = "<img id='" + imgid + "'src='" + clubimage[i] + "'>";
$("#image").append(imagetemp);
$("#slides").append(slider);
}
My images unable to shows here. please help me. thankyou

Finally i had achieved my slideshow in knockout js. complete solutions is here.
my ajax response. I had call swapImage() method in it.
success: function (data) {
image = JSON.parse(data.imageResult);
self.bindimage(image);
for (var i = 0; i < image.length; i++) {
var imgid = i;
var imagetemp = "<img id='" + imgid + "'style='margin:5px;cursor:zoom-in;width:200px;height: 150px;' onclick='getid(this)' src='" + image[i] + "'>";
var imgslide = "<li><img class='slides' style='margin:5px' src='" +image[i] + "'/></li>";
$("#image").append(imagetemp);
}
swapImage();
if (data.imageResult == '"Invalid Connection"') {
alert("Invalid Connection");
}
i had created javascript method like this.
var i = 0;
function swapImage() {
var im = image[i];
$("#imgslide").empty();
var imgid = 'galimg' + i;
var imagesilde = "<img id='" + imgid + "'style=width:500px;height:450px;'rel='alternate' src='" + image[i] + "'/>";
$("#imgslide").fadeIn("slow", "swing");
$("#imgslide").append(imagesilde);
if (i < image.length - 1) i++; else i = 0;
setTimeout('swapImage()', 3000);
}
And bind into HTML tag like this.using selector
<div id="imgslide" />
Finally i got my requirement.

uncaught typeerror undefined is not a function

I am new to JQuery and doesn't know how to handle errors like uncaught TypeError: undefined is not a function. I don't know how to put the jQuery code below in order. Can someone please arrange it in order....
#model Mvc4_WebGrid_CRUD.Models.PagedCustomerModel
#{
ViewBag.Title = "WebGrid CRUD Operations";
WebGrid grid = new WebGrid(rowsPerPage: Model.PageSize);
grid.Bind(Model.Customer,
autoSortAndPage: false,
rowCount: Model.TotalRows
);
}
<style type="text/css">
#grid {
clear: both;
width: 80%;
margin: 0px;
border: 1px solid #c7c5c7;
}
#grid thead, #grid tfoot td {
text-align: left;
font-weight: bold;
height: 35px;
color: #000;
background-color: #d2d0d2;
border-bottom: 1px solid #e2e2e2;
}
#grid td {
padding: 4px 6px 0px 4px;
vertical-align: top;
background-color: #f5f5f5;
border-bottom: 1px solid #e2e2e2;
}
input {
border: 1px solid #e2e2e2;
background: #fff;
color: #333;
font-size: 1.2em;
margin: 2px 0 2px 0px;
padding: 2px;
width: 170px;
}
</style>
<script src="~/Scripts/jquery-1.8.2.js"></script>
<script src="~/Scripts/jquery-ui-1.8.24.min.js"></script>
<script type="text/javascript">
$(document).ready(function () {
//Here is where I get the error
$("#results").dialog({
autoOpen: false,
title: 'Title',
draggable: false,
width: 500,
height: 400,
model: true,
success: function () {
alert('working fine');
}
});
});
function openPopup() {
$("#results").dialog("open");
}
</script>
The below code works fine
<script type="text/javascript">
$(".add").live("click", function () {
var existrow = $('.save').length;
if (existrow == 0) {
var index = $("#grid tbody tr").length + 1;
var Name = "Name_" + index;
var Address = "Address_" + index;
var ContactNo = "ContactNo_" + index;
var Save = "Save_" + index;
var Cancel = "Cancel_" + index;
var tr = '<tr class="alternate-row"><td></td><td><span> <input id="' + Name + '" type="text" /></span></td>' +
'<td><span> <input id="' + Address + '" type="text" /></span></td>' +
'<td><span> <input id="' + ContactNo + '" type="text" /></span></td>' +
'<td> SaveCancel</td>' +
'</tr>';
$("#grid tbody").append(tr);
}
else {
alert('First Save your previous record !!');
}
});
$(".icancel").live("click", function () {
var flag = confirm('Are you sure to cancel');
if (flag) {
$(this).parents("tr").remove();
}
});
$(".save").live("click", function () {
var id = $("#grid tbody tr").length;
var Name = $("#Name_" + id).val();
var Address = $("#Address_" + id).val();
var ContactNo = $("#ContactNo_" + id).val();
if (id != "") {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: '#Url.Action("SaveRecord", "Home")',
data: { "name": Name, "address": Address, "contactno": ContactNo },
dataType: "json",
beforeSend: function () { },
success: function (data) {
if (data.result == true) {
$("#divmsg").html("Record has been saved successfully !!");
setTimeout(function () { window.location.replace("WebGridCRUD"); }, 2000);
}
else {
alert('There is some error');
}
}
});
}
});
$(".edit").live("click", function () {
var str = $(this).attr("id").split("_");
id = str[1];
var Name = "#Name_" + id;
var spanName = "#spanName_" + id;
var Address = "#Address_" + id;
var spanAddress = "#spanAddress_" + id;
var ContactNo = "#ContactNo_" + id;
var spanContactNo = "#spanContactNo_" + id;
$(Name).show();
$(spanName).hide();
$(Address).show();
$(spanAddress).hide();
$(ContactNo).show();
$(spanContactNo).hide();
$(this).hide();
$("#Update_" + id).show();
$("#Cancel_" + id).show();
});
$(".cancel").live("click", function () {
var str = $(this).attr("id").split("_");
id = str[1];
var Name = "#Name_" + id;
var spanName = "#spanName_" + id;
var Address = "#Address_" + id;
var spanAddress = "#spanAddress_" + id;
var ContactNo = "#ContactNo_" + id;
var spanContactNo = "#spanContactNo_" + id;
$(Name).hide();
$(spanName).show();
$(Address).hide();
$(spanAddress).show();
$(ContactNo).hide();
$(spanContactNo).show();
$(this).hide();
$("#Update_" + id).hide();
$("#Edit_" + id).show();
});
$(".update").live("click", function () {
var str = $(this).attr("id").split("_");
id = str[1];
var Name = $("#Name_" + id).val();
var spanName = $("#spanName_" + id).val();
var Address = $("#Address_" + id).val();
var spanAddress = $("#spanAddress_" + id).val();
var ContactNo = $("#ContactNo_" + id).val();
var spanContactNo = $("#spanContactNo_" + id).val();
if (id != "") {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: '#Url.Action("UpdateRecord", "Home")',
data: { "id": id, "name": Name, "address": Address, "contactno": ContactNo },
dataType: "json",
beforeSend: function () {//alert(id);
},
success: function (data) {
if (data.result == true) {
$("#Update_" + id).hide();
$("#Cancel_" + id).hide();
$("#Edit_" + id).show();
var Name = "#Name_" + id;
var spanName = "#spanName_" + id;
var Address = "#Address_" + id;
var spanAddress = "#spanAddress_" + id;
var ContactNo = "#ContactNo_" + id;
var spanContactNo = "#spanContactNo_" + id;
$(Name).hide();
$(spanName).show();
$(Address).hide();
$(spanAddress).show();
$(ContactNo).hide();
$(spanContactNo).show();
$(spanName).text($(Name).val());
$(spanAddress).text($(Address).val());
$(spanContactNo).text($(ContactNo).val());
}
else {
alert('There is some error');
}
}
});
}
});
$(".delete").live("click", function () {
var str = $(this).attr("id").split("_");
id = str[1];
var flag = confirm('Are you sure to delete ??');
if (id != "" && flag) {
$.ajax({
type: "GET",
contentType: "application/json; charset=utf-8",
url: '#Url.Action("DeleteRecord", "Home")',
data: { "id": id },
dataType: "json",
beforeSend: function () { },
success: function (data) {
if (data.result == true) {
$("#Update_" + id).parents("tr").remove();
}
else {
alert('There is some error');
}
}
});
}
});
</script>
<div id="divmsg" style="color: green; font-weight: bold"></div>
Add New
<br />
<br />
#grid.GetHtml(
htmlAttributes: new { id = "grid" },
fillEmptyRows: false,
mode: WebGridPagerModes.All,
firstText: "<< First",
previousText: "< Prev",
nextText: "Next >",
lastText: "Last >>",
columns: new[] {
grid.Column("CustID",
header: "ID", canSort: false),
grid.Column(header: "Name",format: #<span> <span id="spanName_#item.CustID">#item.Name</span> #Html.TextBox("Name_"+(int)item.CustID,(string)item.Name,new{#style="display:none"})</span>),
grid.Column(header: "Address",format: #<span> <span id="spanAddress_#item.CustID">#item.Address</span> #Html.TextBox("Address_"+(int)item.CustID,(string)item.Address,new{#style="display:none"})</span>),
grid.Column(header: "Contact No",format: #<span> <span id="spanContactNo_#item.CustID">#item.ContactNo</span> #Html.TextBox("ContactNo_"+(int)item.CustID,(string)item.ContactNo,new{#style="display:none"})</span>),
grid.Column(header: "Action",format:#<text>
Edit
Update
Cancel
Delete
Details
#Ajax.ActionLink("Ajax Link","AjaxView",new{Id=#item.CustID},new AjaxOptions { HttpMethod="GET",UpdateTargetId="results",
InsertionMode= InsertionMode.Replace, OnSuccess="openPopup"})
<div id="dialog-detail" style="display: none">
</div>
</text>)
})
<div class="dialog"></div>
<div class="results" style="display:none;"></div>
I just get the error when I try to open the dialog box in above code. I can find Uncaught error. Might be because of the jQuery is not in order rest all it is fine. Can anyone put the above in order. Many thanks

You have one obvious issue that may cause problems. Your HTML has a div with class="results", but your selector says #results (i.e. find an element with id="results")
You could change the selector to .results (as #VeldMuijz suggested in comment), but you also have an Ajax ActionLink which requires an id as it specifies UpdateTargetId="results"
Instead add the id to your results div.
e.g. change this:
<div class="results" style="display:none;"></div>
to this:
<div id="results" style="display:none;"></div>
I also recommend with MVC projects that you put your JS code in separate JS files. Visual Studio can't debug both Razor and Javascript in the same view, but it can if the script is in its own file.

Drag/drop & delete dynamic text on HTML canvas

I've found a number of tutorials online for dragging and dropping images and shapes within an HTML canvas. But they all seem to be aimed at moving objects that are generated within the canvas when the page loads. I'm building an app that lets the user click a button on a virtual keyboard, then click on the canvas to have the corresponding number or character appear. This is my code:
<script type="text/javascript">
var mathCanvas = document.getElementById("matharea");
var ctx = mathCanvas.getContext("2d");
ctx.font="20px Arial";
var placementCallback = function(){}
mathCanvas.onselectstart = function(){return false;}
function insertOne(){placementCallback = function(x, y){ctx.fillText('1', x-6,y+6);}};
function insertTwo(){placementCallback = function(x, y){ctx.fillText('2', x-6,y+6);}};
function insertThree(){placementCallback = function(x, y){ctx.fillText('3', x-6,y+6);}};
mathCanvas.onclick = function(event){
placementCallback(event.offsetX, event.offsetY);
}
</script>
I cut out some of the insert functions to keep this shorter (the buttons in my HTML have an onclick attribute that calls these functions). I need to be able to select the characters that are placed on the screen and implement drag/drop and delete functionality, but I can't think of a way to do this for text that gets placed on the screen after the page loads (I'm fairly new to Javascript). How would I do this? I'm not expecting anyone to give me the code to do this, but if I could get a push in the right direction, that'd be great.

The problem is that canvas is immediate-mode. Whatever you tell it to put on the canvas it will put on the canvas, instantly. It will not give you the ability to modify that value in any way, shape or form.
Think of it like the difference between MS Paint (or your OS' equivalent) and Photoshop.
In PS, you can have layers which can be moved around and edited, and when you decide your image is done, you save it and it flattens all of that data.
When you make an image in MS Paint, as soon as you click or type, that thing that you put there is there, and it's not moving/being edited unless you erase it, draw over it, or draw a rectangle around a section and move that whole rectangle (including the pixels around what you're trying to edit).
Just calling fillText will paint the words on, that instant, but will not remember what it drew, where it is, what it is, how the text is different from the surrounding pixels, et cetera.
So your generalized solution is that you need to turn your text into objects, and then draw an aspect (the text-content) of those objects to the screen.
If your text changes, you can make a change in the object, and redraw it (because your object will have its X and Y coordinates stored, and will have its width value stored, using the context.measureText(textObj.text).width method/property), and when you click on the canvas, you can check the coordinates of the click, and if those coordinates intersect with your text-object's stored coordinates, then you can modify its position on the screen.
In that regard, you should look into those examples which deal with dragging objects on the canvas.
The button click should be treated as a way to CREATE one of those objects.

I know this is a lot of code ... But I didn't want to go through it .. It's PART of something I built a long time ago ... Just copy and paste into a html file ... I hope it helps with what you need:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/external/jquery.bgiframe-2.1.2.js" type="text/javascript"></script>
<script src="http://jquery-ui.googlecode.com/svn/tags/latest/ui/minified/i18n/jquery-ui-i18n.min.js" type="text/javascript"></script>
<script type="text/javascript" src="http://ajax.microsoft.com/ajax/jquery.validate/1.7/jquery.validate.min.js"></script>
<script>
;(function($) {
$.fn.insertAtCaret = function (myValue) {
return this.each(function() {
//IE support
if (document.selection) {
this.focus();
sel = document.selection.createRange();
sel.text = myValue;
this.focus();
} else if (this.selectionStart || this.selectionStart == '0') {
//MOZILLA / NETSCAPE support
var startPos = this.selectionStart;
var endPos = this.selectionEnd;
var scrollTop = this.scrollTop;
this.value = this.value.substring(0, startPos)+ myValue+ this.value.substring(endPos,this.value.length);
this.focus();
this.selectionStart = startPos + myValue.length;
this.selectionEnd = startPos + myValue.length;
this.scrollTop = scrollTop;
} else {
this.value += myValue;
this.focus();
}
});
};
})(jQuery);
$(function go_prev() {
//When you click on a link with class of poplight and the href starts with a #
$('a.poplight[href^=#]').click(function() {
var popID = $(this).attr('rel'); //Get Popup Name
var popURL = $(this).attr('href'); //Get Popup href to define size
//Pull Query & Variables from href URL
var query= popURL.split('?');
var dim= query[1].split('&');
var popWidth = dim[0].split('=')[1]; //Gets the first query string value
//Fade in the Popup and add close button
$('#' + popID).fadeIn().css({ 'width': Number( popWidth ) }).prepend('<img src="close_pop.png" class="btn_close" title="Close Window" alt="Close" />');
//Define margin for center alignment (vertical horizontal) - we add 80px to the height/width to accomodate for the padding and border width defined in the css
var popMargTop = ($('#' + popID).height() + 90) / 2;
var popMargLeft = ($('#' + popID).width() + 80) / 2;
//Apply Margin to Popup
$('#' + popID).css({
'top' : 10,
'margin-left' : -popMargLeft
});
//Fade in Background
$('body').append('<div id="fade"></div>'); //Add the fade layer to bottom of the body tag.
$('#fade').css({'filter' : 'alpha(opacity=80)'}).fadeIn(); //Fade in the fade layer - .css({'filter' : 'alpha(opacity=80)'}) is used to fix the IE Bug on fading transparencies
return false;
});
//Close Popups and Fade Layer
$('a.close, #fade').live('click', function() { //When clicking on the close or fade layer...
$('#fade , .popup_block').fadeOut(function() {
$('#fade, a.close').remove(); //fade them both out
});
return false;
});
});
</script>
<script>
var NumIms = 0;
var NumTxts = 0;
//IMAGE VARIABLES
var ImIds=[];
var ImNm=[];
var ImWdth=[];
var ImHght=[];
//TEXT VARIABLES
var TxtIds=[];
var Txt=[];
var TxtFnt=[];
var TxtCol=[];
var TxtSz=[];
var MyWidth;
var MyHeight;
var img;
function MoveOver(id,Rid) {
var img = new Image();
img.src = Rid;
MyWidth = img.width;
MyHeight = img.height;
$("#UpIm" + id).append("W=" + MyWidth + " H=" + MyHeight);
$("#containment-wrapper").append('<div id="AdIm' + id + '" class="draggable ui-widget-content" style="width:' + MyWidth + 'px; height:' + MyHeight + 'px; background-image: url(' + Rid + '); position:absolute; left:18px; top:18px;"></div>');
ImIds[id]="AdIm" + id;
ImNm[id]=Rid;
ImWdth[id]=MyWidth;
ImHght[id]=MyHeight;
$( "#AdIm" + id ).draggable();
var f = document.getElementById('UpIm' +id);
var Olddiv = document.getElementById('ul' + id);
f.removeChild(Olddiv);
}
</script>
<script>
function removeIm(id) {
var f = document.getElementById('files');
var Folddiv = document.getElementById('UpIm' + id);
f.removeChild(Folddiv);
var d = document.getElementById('containment-wrapper');
var Dolddiv = document.getElementById('AdIm' + id);
d.removeChild(Dolddiv);
ImIds.splice(id,1,"deleted");
}
</script>
<script type="text/javascript" >
var iid = -1;
var pic_real_width, pic_real_height, img;
function removeFormIm(Rid,id) {
var f = document.getElementById('files');
var Folddiv = document.getElementById('UpIm' + id);
f.removeChild(Folddiv);
var d = document.getElementById('containment-wrapper');
var Dolddiv = document.getElementById('AdIm' + id);
d.removeChild(Folddiv);
}
</script>
<style>
#containment-wrapper { width: 845px; height:150px; border:2px solid #ccc; }
#fade { /*--Transparent background layer--*/
display: none; /*--hidden by default--*/
background: #000;
position: fixed; left: 0; top: 0;
width: 100%; height: 100%;
opacity: .80;
z-index: 9999;
}
.popup_block{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
.t_t{
display: none; /*--hidden by default--*/
background: #fff;
padding: 20px;
border: 20px solid #ddd;
float: left;
font-size: 1.2em;
position: fixed;
top: 50%; left: 50%;
z-index: 99999;
/*--CSS3 Box Shadows--*/
-webkit-box-shadow: 0px 0px 20px #000;
-moz-box-shadow: 0px 0px 20px #000;
box-shadow: 0px 0px 20px #000;
/*--CSS3 Rounded Corners--*/
-webkit-border-radius: 10px;
-moz-border-radius: 10px;
border-radius: 10px;
}
img.btn_close {
float: right;
margin: -55px -55px 0 0;
}
/*--Making IE6 Understand Fixed Positioning--*/
*html #fade {
position: absolute;
}
*html .popup_block {
position: absolute;
}
</style>
<script>
function changeTxt(id){
var my_txt;
my_txt = document.getElementById('TxtIn' + id).value;
document.getElementById('AdText' + id).innerHTML = my_txt;
Txt[id] = my_txt;
}
</script>
<script>
function makebold(id){
$('#TxtIn' + id).insertAtCaret('<b></b>');
changeTxt(id);
}
function makeitalic(id){
$('#TxtIn' + id).insertAtCaret('<i></i>');
changeTxt(id);
}
function makecenter(id){
var my_txt;
my_txt = document.getElementById('TxtIn' + id).value;
$("textarea#TxtIn" + id).val('<center>' + my_txt + '</center>');
changeTxt(id)
}
function makebr(id){
$('#TxtIn' + id).insertAtCaret('<br>');
changeTxt(id);
}
function makelink(id){
get_color = document.getElementById('fcolor' + id).value;
$('#TxtIn' + id).insertAtCaret('');
changeTxt(id);
}
function makeh2(id){
$('#TxtIn' + id).insertAtCaret('<H2></H2>');
changeTxt(id);
}
function makeh3(id){
$('#TxtIn' + id).insertAtCaret('<H3></H3>');
changeTxt(id);
}
</script>
<script>
function callFontType(id){
var type;
type = document.getElementById('ftype' + id).value;
document.getElementById('AdText' + id).style.fontFamily=type;
TxtFnt[id] = type;
}
</script>
<script>
function CxColor(id){
var Clor;
Clor = document.getElementById('fcolor' + id).value;
Clor = '#' + Clor;
document.getElementById('AdText' + id).style.color=Clor;
TxtCol[id] = Clor;
}
</script>
<script>
function changeFSize(id){
var my_size;
my_size = document.getElementById('SizeIn' + id).value;
my_size = my_size + 'px';
document.getElementById('AdText' + id).style.fontSize = my_size;
TxtSz[id] = my_size;
}
</script>
<script>
var id = -1;
function addFormField() {
id = id + 1;
$("#divTxt").append("<span id='row" + id + "'><small>Add: to textbox:</small><input value=\"b\" onclick=\"makebold(" + id + ")\" title=\"bold: <b>text</b>\" type=\"button\"><input value=\"i\" onclick=\"makeitalic(" + id + ")\" title=\"italic: <i>text</i>\" type=\"button\"><input value=\"center\" onclick=\"makecenter(" + id + ")\" title=\"center: <center>text</center>\" type=\"button\"><input value=\"BR\" onclick=\"makebr(" + id + ")\" title=\"BR: <br>\" type=\"button\"><input value=\"link\" onclick=\"makelink(" + id + ")\" title=\"link: <a href= >URL</a>\" type=\"button\"><input value=\"H2\" onclick=\"makeh2(" + id + ")\" title=\"H2: <H2>text</H2>\" type=\"button\"><input value=\"H3\" onclick=\"makeh3(" + id + ")\" title=\"H3: <H3>text</H3>\" type=\"button\"><br><table><tr><td><a onClick='removeFormField(\"#row" + id + "\",\"" + id + "\"); return false;'>REMOVE</a></td><td> <textarea cols=50 rows=5 name='txt[]' id='TxtIn" + id + "' onKeyUp=\"changeTxt(" + id + ");\">Text " + id + "</textarea></td><td>Font:<select onChange=\"callFontType(" + id + ");\" id=\"ftype" + id + "\"><option value=\"Arial, Helvetica, sans-serif\">Arial</option><option value=\"Impact, Charcoal, sans-serif\">Impact</option><option value=\"Palatino Linotype, Book Antiqua, Palatino, serif\">Palatino</option><option value=\"Tahoma, Geneva, sans-serif\">Tahoma</option><option value=\"Century Gothic, sans-serif\">Century Gothic</option><option value=\"Lucida Sans Unicode, Lucida Grande, sans-serif\">Lucida Grande</option><option value=\"Arial Black, Gadget, sans-serif\">Arial Black</option><option value=\"Times New Roman, Times, serif\">Times New Roman</option><option value=\"Arial Narrow, sans-serif\">Arial Narrow</option><option value=\"Verdana, Geneva, sans-serif\">Verdana</option><option value=\"Copperplate, Copperplate Gothic Light, sans-serif\">Copperplate</option><option value=\"Lucida Console, Monaco, monospace\">Lucida Console</option><option value=\"Gill Sans, Gill Sans MT, sans-serif\">Gill Sans</option><option value=\"Trebuchet MS, Helvetica, sans-serif\">Trebuchet</option><option value=\"Courier New, Courier, monospace\">Courier New</option><option value=\"Georgia, Serif\">Georgia</option></select><br>Color: <input id=\"fcolor" + id + "\" class=\"color\" value=\"000000\"><img src=\"go.png\" style=\"vertical-align:middle;\" onClick='CxColor(" + id + ");'><br>Size: <input type='text' size='4' value=\"12\" name='txt[]' id='SizeIn" + id + "' onKeyUp=\"changeFSize(" + id + ");\"></td></tr></table><br><hr style=\"width:800px; float:left;\"><br></span>");
$("#containment-wrapper").append('<span id="AdText' + id + '" class="draggable ui-widget-content" style="position:absolute; left:18px; top:18px; font-size:16px; font-family:Arial, Helvetica, sans-serif;">Text ' + id + '</span>');
$( "#AdText" + id ).draggable();//{ containment: "#containment-wrapper", scroll: true }
$('#fcolor' + id).load(jscolor.init());
TxtIds[id] = "AdText" + id;
Txt[id] = "Ad Text";
TxtFnt[id] = "Arial";
TxtCol[id] = "#000000";
TxtSz[id] = "16";
$('#row' + id).highlightFade({
speed:1000
});
document.getElementById("id").value = id;
}
function removeFormField(Rid,id) {
$(Rid).remove();
var d = document.getElementById('containment-wrapper');
var olddiv = document.getElementById('AdText' + id);
d.removeChild(olddiv);
TxtIds.splice(id,1,"deleted");
}
function GetURL(id) {
var gurl;
var Ims = "";
var len=ImIds.length;
NumIms = 0;
NumTxts = 0;
//############ Start Get Images for URL ##############
for(var i=0; i<len; i++) {
NumIms++;
var value = ImIds[i];
Ims += '&ImName' + i + '=' + value;
if (value != "deleted"){
value = ImNm[i];
Ims += '&ImNm' + i + '=' + value;
value = ImWdth[i];
Ims += '&ImWidth' + i + '=' + value;
value = ImHght[i];
Ims += '&ImHeight' + i + '=' + value;
value = $('#AdIm' + i).position().left - $('#AdIm' + i).closest('#containment-wrapper').position().left;
Ims += '&ImLt' + i + '=' + value;
value = $('#AdIm' + i).position().top - $('#AdIm' + i).closest('#containment-wrapper').position().top;
Ims += '&ImTop' + i + '=' + value;
}
}
//########### End Get Images For URL #####################
len=TxtIds.length;
//############ Start Get Texts for URL ##############
for(var i=0; i<len; i++) {
NumTxts++;
var value = TxtIds[i];
Ims += '&TxtName' + i + '=' + escape(value);
if (value != "deleted"){
value = Txt[i];
Ims += '&Txt' + i + '=' + escape(value);
value = TxtFnt[i];
Ims += '&TxtFnt' + i + '=' + escape(value);
value = TxtCol[i];
value = value.substring(1);
Ims += '&TxtCol' + i + '=' + escape(value);
value = TxtSz[i];
Ims += '&TxtSz' + i + '=' + escape(value);
value = $('#AdText' + i).position().left - $('#AdText' + i).closest('#containment-wrapper').position().left;
Ims += '&TxtLt' + i + '=' + value;
value = $('#AdText' + i).position().top - $('#AdText' + i).closest('#containment-wrapper').position().top;
Ims += '&TxtTop' + i + '=' + value;
}
}
//########### End Get Texts For URL #####################
gurl = "ad.php?AdType=hero&ImNum=" + NumIms + "&TxtNum=" + NumTxts;
gurl = gurl + Ims;
//alert(gurl);gurl = escape( gurl );
$("#genurl" + id).html('<textarea id="fe_text" cols=50 rows=5 name="ad_url">' + gurl + '</textarea><br><br><table><tr><td><font style="font-family:Arial, Helvetica, sans-serif; font-size:16px; color:#009999">Preview Gernerated Ad:</font></td><td><img src="view.png"></td></tr></table><br>');
}
</script>
<script type="text/javascript">
$(document).ready(function(){
$("#myform1").validate({
debug: false,
submitHandler: function(form) {
// do other stuff for a valid form
$.post('process.php', $("#myform1").serialize(), function(data) {
$('#results').fadeIn('fast');
var mySplitResult = data.split("|||");
if(mySplitResult[1] !== "fail" && mySplitResult[1] !== "disable"){
$('#upd1').html('<textarea id="fe_text" cols=50 rows=5 readonly="readonly">' + mySplitResult[1] + '</textarea><br />');
}
$('#results').html(mySplitResult[0]);
$('#prev1').html(mySplitResult[1]);
setTimeout(function() {
$('#results').fadeOut('slow');
}, 2500);
});
}
});
});
</script>
<script type="text/javascript" src="jscolor.js"></script>
</head>
<body>
<div id="containment-wrapper">
<!--<span id="AdText0" class="draggable ui-widget-content">For Testing ... </span> -->
</div>
<div style="margin-left:50px;">
<center><p style="font-family:Arial, Helvetica, sans-serif; font-size:24px; color:#FF0099">Text Field Input</p>
<p>Add Text Field</p></center>
<form action="#" method="get" id="form1" style="font-family:Arial, Helvetica, sans-serif; font-size:16px;">
<input type="hidden" id="id" value="1">
<div id="divTxt"></div>
</form>
</div>
<!-- End Hidden Divs -->
</body>
</html>