GWT custom widget taking too long to create - gwt

I've a view which displays a list of custom tweeter feed like widgets. Following is the template for the widget:
<!DOCTYPE ui:UiBinder SYSTEM "http://dl.google.com/gwt/DTD/xhtml.ent">
<ui:UiBinder xmlns:ui="urn:ui:com.google.gwt.uibinder"
xmlns:b="urn:import:com.github.gwtbootstrap.client.ui" xmlns:g="urn:import:com.google.gwt.user.client.ui">
<ui:style type="com.ziplly.app.client.widget.TweetWidget.Style"
src="tweetwidget.css">
</ui:style>
<ui:with type="com.ziplly.app.client.resource.ZResources" field="resources"/>
<g:HTMLPanel ui:field="tweetPanel" addStyleNames="{style.tweetPanel}">
<div class='{style.tweet_block}'>
<div class='{style.tweet_image}'>
<b:Image ui:field="authorImage" />
</div>
<div class='{style.tweet_content_section}'>
<div class="{style.tweetActionDropdown}">
<b:Dropdown text="edit">
<b:NavLink ui:field="editTweetLink">Edit</b:NavLink>
<b:NavLink ui:field="deleteTweetLink">Delete</b:NavLink>
<b:NavLink ui:field="reportSpamLink">Report Spam</b:NavLink>
</b:Dropdown>
</div>
<div class="{style.tweet_content}">
<span class='{style.tweet_text}' ui:field="tweetContentSpan" />
<b:TextArea ui:field="tweetContentTextArea"
addStyleNames="{style.tweetContentTextArea}" />
<g:HTMLPanel ui:field="tweetEditButtonPanel">
<b:Button type="PRIMARY" size="SMALL" ui:field="saveBtn">save</b:Button>
<b:Button size="SMALL" ui:field="cancelBtn">cancel</b:Button>
</g:HTMLPanel>
</div>
<div class='tweet_actions'>
<div>
<div class='{style.tweet_action_link}'>
<g:Anchor ui:field="likeTweetLink" addStyleNames="{style.smalltext}">Like</g:Anchor>
</div>
<div class='{style.tweet_action_link}'>
<g:Anchor ui:field="commentLink" addStyleNames="{style.smalltext}">Comment</g:Anchor>
</div>
<div class='{style.tweet_sender_link}'>
posted by
<g:Anchor ui:field="authorProfileLink">
<span class="smalltext" ui:field="authorName" />
</g:Anchor>
on
<span ui:field="timeCreated" />
</div>
</div>
</div>
</div>
</div>
<g:HTMLPanel addStyleNames="{style.people_liked_section}" ui:field="tweetLikePanel">
</g:HTMLPanel>
<div class="{style.commentSectionDiv}">
<g:HTMLPanel addStyleNames="{style.tweetCommentSection}" ui:field="tweetCommentSection">
</g:HTMLPanel>
<g:HTMLPanel>
<b:TextArea ui:field="commentInputTextBox" addStyleNames="{style.commentInputTextBox}" />
<div class="{style.commentInputActionSection}">
<b:Button type="PRIMARY" size="SMALL" ui:field="commentBtn">comment</b:Button>
<b:Button size="SMALL" ui:field="cancelCommentBtn">cancel</b:Button>
</div>
</g:HTMLPanel>
</div>
</g:HTMLPanel>
</ui:UiBinder>
I'm using something like following to populate the view:
final long time1 = System.currentTimeMillis();
for (final TweetDTO tweet : tweets) {
final long time11 = System.currentTimeMillis();
final TweetWidget tw = new TweetWidget();
tw.setWidth(tweetWidth);
final long time12 = System.currentTimeMillis();
tw.setPresenter(presenter);
tw.displayTweet(tweet);
final long time13 = System.currentTimeMillis();
communityWallPanel.add(tw);
final long time14 = System.currentTimeMillis();
System.out.println("Time to create tweet widget: " + (time12 - time11) + " to render: " + (time13 - time12) + " to addToPanel: " + (time14 - time13));
tweetWidgetMap.put(tweet.getTweetId(), tw);
}
final long time2 = System.currentTimeMillis();
System.out.println("Time to render wall: " + (time2 - time1));
On an average I'm seeing about 300+ milli seconds to render each widget on the page. Out of the 300 ms, 280+ is taken to create that template. It seems unreasonably long time for creating a widget from template. Any help will be appreciated.

Related

Title tag not showing in nextjs

I have created single page in nextjs, And I taken build file <title> and <meta> working fine. see the title tag in this image
but I uploaded build file this server https://blog.simple.in/ title tag not showing. what I am missing. Could you please let me know server issue or code issue please let me know. Thanks
loyaltycards.js
import React, { Component } from "react";
import { Grid } from "semantic-ui-react";
import $ from "jquery";
import Layout from "../components/layout";
import 'semantic-ui-css/semantic.min.css';
import Head from 'next/head';
class Loyaltycard extends Component {
componentDidMount() {
$(".v2, .v3, .v4").hide();
$(".m1").click(function () {
$(".v1").show();
$(".v2,.v3,.v4").hide();
$(".li-1").addClass("btn-active-1");
$(".btn-active-2").removeClass("btn-active-2");
$(".btn-active-3").removeClass("btn-active-3");
$(".btn-active-4").removeClass("btn-active-4");
});
$(".m2").click(function () {
$(".v2").show();
$(".v1,.v3,.v4").hide();
$(".li-2").addClass("btn-active-2");
$(".btn-active-1").removeClass("btn-active-1");
$(".btn-active-3").removeClass("btn-active-3");
$(".btn-active-4").removeClass("btn-active-4");
});
$(".m3").click(function () {
$(".v3").show();
$(".v1,.v2,.v4").hide();
$(".li-3").addClass("btn-active-3");
$(".btn-active-2").removeClass("btn-active-2");
$(".btn-active-1").removeClass("btn-active-1");
$(".btn-active-4").removeClass("btn-active-4");
});
$(".m4").click(function () {
$(".v4").show();
$(".v1,.v2,.v3").hide();
$(".li-4").addClass("btn-active-4");
$(".btn-active-2").removeClass("btn-active-2");
$(".btn-active-1").removeClass("btn-active-1");
$(".btn-active-3").removeClass("btn-active-3");
});
}
render() {
return (
<Layout>
<Head>
<meta charSet="utf-8" />
<title>Store all your rewards cards on your phone</title>
<meta name="description" content="The smart, easy way to carry all Loyalty, Reward and Club cards on your mobile- link them all in the simple app, checkout as usual and earn points at stores." />
<meta name="google-site-verification" content="rtIRrUNRpgZ_lFtlfS8LJ0-8j_d569BXS9NOGa_nM6Y" />
<link rel="canonical" href="https://simple .cash/loyaltycards"/>
</Head>
<Grid className="static-sections">
<Grid.Column width={1}></Grid.Column>
<Grid.Column width={14} className="promotions">
<h1>Loyalty Cards</h1>
<p>
Got a wallet full of store loyalty cards? Link them all in the
simple app and start earning points at stores you visit all the
time. simple app allows you to store all of your rewards cards on
your phone. Shop and use your loyalty account at checkout as usual
to collect points. Turn your phone into your wallet and redefine
your everyday shopping experience! It is the smart and easy way to
carry all Loyalty cards, Reward cards and Club cards on your
smartphone with simple .
</p>
</Grid.Column>
<Grid.Column width={1}></Grid.Column>
</Grid>
<Grid>
<Grid.Column width={1}></Grid.Column>
<Grid.Column width={14} className="loyalty">
<Grid>
<Grid.Column width={8} className="left-eight">
<div className="m1" onClick={this.m1}>
<div class="media-left">
<p class="li-circle-second-1 li-1">1</p>
</div>
<div class="media-body">
<h4 class="media-heading">Select Card</h4>
<p>
Select a card from the available list. If not available,
add your card by selecting Add New
</p>
</div>
</div>
<div className="m2" onClick={this.m2}>
<div class="media-left">
<p class="li-circle-second-2 li-2">2</p>
</div>
<div class="media-body">
<h4 class="media-heading">Scan barcode</h4>
<p>Scan the barcode from the actual card you carry</p>
</div>
</div>
<div className="m3" onClick={this.m3}>
<div class="media-left">
<p class="li-circle-second-3 li-3">3</p>
</div>
<div class="media-body">
<h4 class="media-heading">Card Photo</h4>
<p>
Click a photo of the front & back of the card. (Optional)
</p>
</div>
</div>
<div className="m4" onClick={this.m4}>
<div class="media-left">
<p class="li-circle-second-4 li-4">4</p>
</div>
<div class="media-body">
<h4 class="media-heading">Use the Card</h4>
<p>
During checkout at the store, select the appropriate card
from the app & show at the counter for scanning
</p>
</div>
</div>
</Grid.Column>
<Grid.Column width={8}>
<div className="v1">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/1-loyalty-card.mp4"
type="video/mp4"
></source>
</video>
</div>
<div className="v2">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/2-scan-barcode.mp4"
type="video/mp4"
></source>
</video>
</div>
<div className="v3">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/3-card-photo.mp4"
type="video/mp4"
></source>
</video>
</div>
<div className="v4">
<video
playsinline={"playsinline"}
autoplay={"autoplay"}
muted={"muted"}
loop={"loop"}
>
<source
class="embed-responsive-item"
src="/mp4/loyalty-card/4-cashback-added.mp4"
type="video/mp4"
></source>
</video>
</div>
</Grid.Column>
</Grid>
</Grid.Column>
<Grid.Column width={1}></Grid.Column>
</Grid>
</Layout>
);
}
}
export default Loyaltycard;

XPages Date picker in a modal

If I use the standard date picker control, on a normal xpage, everything works perfectly, however, if I have it within a modal, when I call the modal, and the field displays fine, but if I then click on the picker icon, the calendar only flashes up and just disappears so that I can't actually select a date.
Has anyone had any issues / resolutions to this? Modal code below:
<!-- Modal ONE -->
<div class="modal fade" data-keyboard="false" data-backdrop="static"
tabindex="-1" role="dialog" id="modalDueDate">
<div class="modal-dialog modal-sm" role="document">
<div class="modal-content">
<div class="modal-header modal-header-default">
<h4 class="modal-title">Change Due Date</h4>
</div>
<div class="modal-body">
<xp:inputText id="dtChangeDueDate">
<xp:dateTimeHelper id="dateTimeHelper1" />
<xp:this.converter>
<xp:convertDateTime type="date" />
</xp:this.converter>
</xp:inputText>
</div>
<div class="modal-footer">
<xp:button type="button" styleClass="btn btn-danger" id="button4">
<xp:this.attrs>
<xp:attr name="data-toggle" value="modal" />
<xp:attr name="data-target" value="#modalDueDate" />
</xp:this.attrs>
Cancel
</xp:button>
<xp:button type="button" styleClass="btn btn-success" id="button5">
<xp:this.attrs>
<xp:attr name="data-toggle" value="modal" />
<xp:attr name="data-target" value="#modalDueDate" />
</xp:this.attrs>
Update
<xp:eventHandler event="onclick" submit="true"
refreshMode="complete">
<xp:this.action><![CDATA[#{javascript:try{
var noteID:string = compositeData.noteID;
print ("Parent NoteID: " + noteID)
var doc:NotesDocument = database.getDocumentByID(noteID);
var dueDate = getComponent("dtChangeDueDate").getValue();
//var oldDueDate = doc.getItemValueString("DueDate");
var docWrap = wrapDocument(doc);
var dt = new Date();
var arrHistory:array = AddObjectivesHistoryItem(docWrap, dt, "Due Date Changed To "+dueDate, userBean.displayName);
docWrap.replaceItemValue("DueDate",dueDate);
docWrap.save();
var o = {}
o.title = "Due Date Updated";
o.body = "The due date has been succesfully updated to " + dueDate;
o.alertIcon = "fa-thumbs-up fa-lg";
o.autoClose = true;
o.alertType = "success";
//o.growl = true;
requestScope.put("alertServer",o)
}catch(e){
openLogBean.addError(e,this.getParent());
}}]]></xp:this.action>
</xp:eventHandler>
</xp:button>
</div>
</div>
</div>
</div><!-- Modal ONE End-->
Check the relative z-index css settings for the modal and the date-time helper. I don't know if the z-index of the modal is putting it in front of the picker. I'd also look at the Network tab in whatever browser developer tools you're using to see if there's anything unusual there.

jQuery getJSON not working on Internet Explorer 11

I have a site that uses jQuery within the Codeigniter framework. It works perfectly in both Firefox and Chrome. However in IE the getJSON does not work, jQuery load() works but not getJSON. Ive tried the $.ajaxSetup{{cache:false}} among others but no joy.
var url="../../index.php/cslcontrol/";
$(document).ready(function(){
//hide divs with the class '.views' except the one with id of 'home'
$(".views:not('#home')").hide();
//function that ensures only the div related to the selected menubar icon is dislayed
$("li a[href]").click(function(){
//storing the value of the clicked list a href
var tabVal=$(this).attr('value');
//showing a div whose div name is the same as the value of the selected list ahref
$("#"+tabVal).show();
//keeping the other divs hidden
$(".views[id!="+tabVal+"]").hide();
});
$("#home_text").load("css/history.html #home_txt");
$("#eighties_text").load("images/Eighties_seasons.html h1, p");
$("#nineties_text").load("images/Nineties_seasons.html h1, p");
//making a ajax call to fill the champions table
$.getJSON(url+"titleWin", function(data){
$.each(data, function(){
$("#senior_champions").append("<tr><td>"+ this["Season"] + "</td><td>"+ this["Winner"] + "</td><td>" + this["Runner up"] + "</td><td>"+ this["Play off"] + "</td></tr>");
});
});
//making a ajax call to fill the senior cup table
$.getJSON(url+"senCup", function(data){
$.each(data, function(){
$("#senior_cup_finals").append("<tr><td>"+ this["Season"] + "</td><td>"+ this["Winner"] + "</td><td>" + this["Score"] + "</td><td>"+ this["Runner-up"] + "</td></tr>");
});
});
$.getJSON(url+"getClub", function(data){
$.each(data, function(){
$("#club_info").append("<a class=\"name\" role=\"button\" data-toggle=\"modal\" data-target=\"#modalCSL\">"+this["Club"]+"</a>");
});
var crests = [];
$.each(data, function(){
if(this["Image"]!=""){
crests.push("<img src=\"images/"+this["Image"]+"\" alt=\""+this["Image"]+"\" title=\""+this["Club"]+"\"/>");
}
});
$("#pix1").html(crests.slice(0, 5));
$("#pix2").html(crests.slice(5, 10));
$("#pix3").html(crests.slice(10, 15));
});
});
$(document).ajaxSuccess(function(event,xhr,settings){
//if(settings.url=="history.txt"){
// $("#home_text").append("<div class=\"home-images\">do</div>");
//}
if(settings.url==url+"senCup"){
$("#senior_cup_finals td:eq(26), #senior_cup_finals td:eq(30)").append("<sup> R</sup>");
$("#senior_cup_finals td:eq(34)").append("<sup> R-p</sup>");
}
if(settings.url==url+"titleWin"){
$("#champions td:eq(11)").append("<sup> R</sup>");
$("#champions td:eq(52)").append("<sup> Gr</sup>");
$("#champions td:eq(56)").append("<sup> Pr</sup>");
}
if(settings.url==url+"getClub"){
$(".name").click(function(){
var aref= $(this).text();
$(".modal-body").load("css/history.html h1:contains('"+aref+"'), h1:contains('"+aref+"')+p");
$(".modal-footer").html("<button id=\"butt\" name=\""+aref+"\" value=\""+aref+"\">"+aref+" honours</button><div id=\"dead\"></div>");
});
$("#club_info .name:last-of-type").css({"margin-right":"50%"});
}
if(settings.url=="css/history.html"){
$("#butt").click(function(){
var testing=$(this).attr('value');
var testclean=encodeURIComponent(testing);
$.getJSON(url+"getHonours?name="+testclean, function(data){
var honours=[];
$.each(data, function(){
honours.push("<table class=\"table\" id=\"honstab\"><tr><th>"+data[0]["Source"]+"</th><th>"+data[1]["Source"]+"</th><th>"+data[2]["Source"]+"</th><th>"+data[3]["Source"]+"</th><th>"+data[4]["Source"]+"</th><th>"+data[5]["Source"]+"</th><th>"+data[6]["Source"]+"</th><th>"+data[7]["Source"]+"</th><th>"+data[8]["Source"]+"</th></tr><tr><td>"+data[0]["COUNT(*)"]+"</td><td>"+data[1]["COUNT(*)"]+"</td><td>"+data[2]["COUNT(*)"]+"</td><td>"+data[3]["COUNT(*)"]+"</td><td>"+data[4]["COUNT(*)"]+"</td><td>"+data[5]["COUNT(*)"]+"</td><td>"+data[6]["COUNT(*)"]+"</td><td>"+data[7]["COUNT(*)"]+"</td><td>"+data[8]["COUNT(*)"]+"</td></tr></table>");
$("#dead").html(honours.slice(0,1));
$("#honstab td").each(function(){
if ($(this).html()=="0"){
trial=$(this).index();
$("#honstab th:eq("+trial+"), #honstab td:eq("+trial+")").remove();
if($("#honstab tr").html()==0){
$("#honstab").html("<tr><th>No Honours</th></tr></table>");
}
}
});
});
});
});
}
});
<!--Heres the view file-->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="shortcut icon" href="../../docs-assets/ico/favicon.png">
<link href='http://fonts.googleapis.com/css?family=Anton' rel='stylesheet' type='text/css'>
<title>Connacht Senior League</title>
<!-- Bootstrap core CSS -->
<link href="css/bootstrap.min.css" rel="stylesheet" type='text/css'>
<link href="css/main-style.css" rel="stylesheet" type='text/css'>
</head>
<body>
<div class="container">
<div class="row">
<div class="col-md-12">
<div class="heading">
<h1>Connacht Senior League</h1>
</div>
<nav class="navbar navbar-default" id="csl-navbar" role="navigation">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1">
<!--creates the toggle button that displays the menu in small screen formats-->
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
<a class="navbar-brand" href="#"></a>
</div>
<div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
<ul class="nav navbar-nav" id="accordion" role="tablist" aria-multiselectable="false">
<li>Home</li>
<li class="dropdown">
<a class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">History<span class="caret"></span></a>
<ul class="dropdown-menu" role="menu">
<li>Eighties Seasons</li>
<li>Nineties Seasons</li>
</ul>
</li>
<li>Clubs</li>
<li>Champions</li>
<li>Senior-Cup</li>
</ul>
<!-- for the search and go form on the right of navbar-->
<form class="navbar-form navbar-right" role="search">
<div class="form-group">
<input type="text" class="form-control" placeholder="Search">
</div>
<button type="submit" class="btn btn-default">Go</button>
</form>
</div>
</nav>
<div id="home" class="views">
<div class="row">
<div class="col-xs-12" id="home_text">
</div>
<div class="col-xs-12" id="home_image">
<img src="images/home_page.png"/>
</div>
<div class="col-xs-12" id="ina_logo">
<img src="images/ina.PNG" width="30%"/>
</div>
</div>
</div>
<div id="eighties" class="views">
<div class="row">
<div class="col-xs-12" id="eighties_text">
</div>
</div>
</div>
<div id="nineties" class="views">
<div class="row">
<div class="col-xs-12" id="nineties_text">
</div>
</div>
</div>
<div id="clubs" class="views">
<div class="row">
<div class="col-xs-12">
<div id="club_info">
<div class="modal fade bs-example-modal-lg" id="modalCSL" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-body">
...
</div>
<div class="modal-footer">
</div>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="champions" class="views">
<div class="row">
<div class="col-xs-12">
<h1>Champions</h1>
<p>The following table lists the League Champions and sides who finished Second. Goal differnece did not count so occassionally Play-offs were needed. An exception is the case of the 94-95 season where the League was split into two groups so a Play-off was mandatory. In 96-97 the season had Two divisions, the table only shows details of the Premier Division with First Division details in the footnotes</p>
<table class="table table-striped" id="senior_champions">
<tr>
<th>Season</th>
<th>Winner</th>
<th>Runner-up</th>
<th>Play off</th>
</tr>
</table>
<div class="notes"><p><a name="merv_salt" id="merv_salt"></a>R: 2nd Replay after two 2-2 draws</p>
<p><a name="straide" id="straide"></a>Gr: League split into 2 groups with group winners meeting in a play-off final. Top 3 teams in each group would go into a Premiership and the rest into a first division</p>
<p><a name="prem" id="prem"></a>Pr: This season had a Premiership and a First Division. Ballinasloe Town were First Division Champs.</p>
</div>
</div>
</div>
</div>
<div id="senior_cup" class="views">
<div class="row">
<div class="col-xs-12">
<h1>Senior Cup</h1>
<p>The following table lists details of the Senior Cup Finals. This was the main knockout competition involving the Connacht Senior clubs. However champions from the four junior leagues were also included and they are highlighted with a (J)</p>
<table class="table table-striped" id="senior_cup_finals">
<tr>
<th>Season</th>
<th>Winner</th>
<th>Score</th>
<th>Runner-up</th>
</tr>
</table>
<div class="notes"><p><a name="calry_merv" id="calry_merv"></a>R: Replay after 1-1 draw</p>
<p><a name="salt_calry" id="salt_calry"></a>R-p: Replay won on penalties after 1-1 draw</p>
</div>
</div>
</div>
</div>
</div>
</div>
<div id="carousel-example-generic" class="carousel slide" data-ride="carousel" pause="onload">
<!-- Wrapper for slides-->
<div class="carousel-inner" role="listbox">
<div class="item active" id="pix1">
</div>
<div class="item" id="pix2">
</div>
<div class="item" id="pix3">
</div>
</div>
</div>
</div>
<!--[if lt IE 9]>
<script src="http://code.jquery.com/jquery-1.10.2.js"></script>
<![endif]-->
<!--[if gte IE 9]><!-->
<script src="http://code.jquery.com/jquery-2.0.3.js"></script>
<!--<![endif]-->
<script src="js/bootstrap.js"></script>
<script src="js/csl.js" type="text/javascript">
</script>
</body>
</html>
Right then, it seems that IE had a problem with the js file. It does not like the fact I have the global 'url' variable outside of all functions. So I had to name this variable within the (document).ready(function{}). Also I had the ajaxSuccess and ajaxError functions operating on their own, they also needed to be brought within the (document).ready function, merely naming the url variable inside them individually did not work. Basically everything needs to be wrapped in one main function. this link here inspired the solution http://patrickgibson.com/news/andsuch/000202.php
$(document).ready(function(){
var url="../../index.php/cslcontrol/";
//$.ajaxSetup({ global: true });
//hide divs with the class '.views' except the one with id of 'home'
$(".views:not('#home')").hide();
//function that ensures only the div related to the selected menubar icon is dislayed
$("li a[href]").click(function(){
//storing the value of the clicked list a href
var tabVal=$(this).attr('value');
//showing a div whose div name is the same as the value of the selected list ahref
$("#"+tabVal).show();
//keeping the other divs hidden
$(".views[id!="+tabVal+"]").hide();
});
$("#home_text").load("css/history.html #home_txt");
$("#eighties_text").load("images/Eighties_seasons.html h1, p");
$("#nineties_text").load("images/Nineties_seasons.html h1, p");
//making a ajax call to fill the champions table
$.getJSON(url+"titleWin", function(data){
$.each(data, function(){
$("#senior_champions").append("<tr><td>"+ this["Season"] + "</td><td>"+ this["Winner"] + "</td><td>" + this["Runner up"] + "</td><td>"+ this["Play off"] + "</td></tr>");
});
});
//making a ajax call to fill the senior cup table
$.getJSON(url+"senCup", function(data){
$.each(data, function(){
$("#senior_cup_finals").append("<tr><td>"+ this["Season"] + "</td><td>"+ this["Winner"] + "</td><td>" + this["Score"] + "</td><td>"+ this["Runner-up"] + "</td></tr>");
});
});
$.getJSON(url+"getClub", function(data){
$.each(data, function(){
$("#club_info").append("<a class=\"name\" role=\"button\" data-toggle=\"modal\" data-target=\"#modalCSL\">"+this["Club"]+"</a>");
});
var crests = [];
$.each(data, function(){
if(this["Image"]!=""){
crests.push("<img src=\"images/"+this["Image"]+"\" alt=\""+this["Image"]+"\" title=\""+this["Club"]+"\"/>");
}
});
$("#pix1").html(crests.slice(0, 5));
$("#pix2").html(crests.slice(5, 10));
$("#pix3").html(crests.slice(10, 15));
});
$(document).ajaxSuccess(function(event,xhr,settings){
//var json="http://davestest.webuda.com/index.php/cslcontrol/";
//if(settings.url=="history.txt"){
// $("#home_text").append("<div class=\"home-images\">do</div>");
//}
if(settings.url==url+"senCup"){
$("#senior_cup_finals td:eq(26), #senior_cup_finals td:eq(30)").append("<sup> R</sup>");
$("#senior_cup_finals td:eq(34)").append("<sup> R-p</sup>");
}
if(settings.url==url+"titleWin"){
$("#champions td:eq(11)").append("<sup> R</sup>");
$("#champions td:eq(52)").append("<sup> Gr</sup>");
$("#champions td:eq(56)").append("<sup> Pr</sup>");
}
if(settings.url==url+"getClub"){
$(".name").click(function(){
var aref= $(this).text();
$(".modal-body").load("css/history.html h1:contains('"+aref+"'), h1:contains('"+aref+"')+p");
$(".modal-footer").html("<button id=\"butt\" name=\""+aref+"\" value=\""+aref+"\">"+aref+" honours</button><div id=\"dead\"></div>");
});
$("#club_info .name:last-of-type").css({"margin-right":"50%"});
}
if(settings.url=="css/history.html"){
$("#butt").click(function(){
var testing=$(this).attr('value');
var testclean=encodeURIComponent(testing);
$.getJSON(url+"getHonours?name="+testclean, function(data){
var honours=[];
$.each(data, function(){
honours.push("<table class=\"table\" id=\"honstab\"><tr><th>"+data[0]["Source"]+"</th><th>"+data[1]["Source"]+"</th><th>"+data[2]["Source"]+"</th><th>"+data[3]["Source"]+"</th><th>"+data[4]["Source"]+"</th><th>"+data[5]["Source"]+"</th><th>"+data[6]["Source"]+"</th><th>"+data[7]["Source"]+"</th><th>"+data[8]["Source"]+"</th></tr><tr><td>"+data[0]["COUNT(*)"]+"</td><td>"+data[1]["COUNT(*)"]+"</td><td>"+data[2]["COUNT(*)"]+"</td><td>"+data[3]["COUNT(*)"]+"</td><td>"+data[4]["COUNT(*)"]+"</td><td>"+data[5]["COUNT(*)"]+"</td><td>"+data[6]["COUNT(*)"]+"</td><td>"+data[7]["COUNT(*)"]+"</td><td>"+data[8]["COUNT(*)"]+"</td></tr></table>");
$("#dead").html(honours.slice(0,1));
$("#honstab td").each(function(){
if ($(this).html()=="0"){
trial=$(this).index();
$("#honstab th:eq("+trial+"), #honstab td:eq("+trial+")").remove();
if($("#honstab tr").html()==0){
$("#honstab").html("<tr><th>No Honours</th></tr></table>");
}
}
});
});
});
});
}
});
$(document).ajaxError(function(event, jqxhr, settings){
if(settings.url==url+"senCup"){
alert("not loading");
}
});
});
Try to use Knockout binding and method ko.toJS in your view model js.

jQuery mobile multipage submit

I'm writing a mobile app with PhoneGap and jQuery Mobile. To simplify navigation I want to spread a single form over multiple 'pages' using div data-role="page". The idea is to give the user a wizard like experience for filling in a large form. On completion I need to be able to save the form locally, or submit it, if the mobile is online.
I don't understand how to go about submitting or saving a form using jQuery Mobile if the form is split into multiple 'virtual' pages. I've search the web but can't find any tutorials or examples on solving this problem.
Any help will be appreciated.
UPDATE:
I recently changed the way I worked with multipage forms, and this solution worked nice for me. You basically use a naming convention where fields become part of sections by giving them id's starting with the section name and a dash, e.g: person-name, person-surname. See the answer below.
Ok, I posted my thoughts here: http://www.coldfusionjedi.com/index.cfm/2011/11/18/Demo-of-a-multistep-form-in-jQuery-Mobile
Essentially I ended up using a sever side language to simply include the right part of the form at a time. (I'm using ColdFusion, but any language would work really.) The form self posts and simply displays the right step based on where you are in the process.
A quick help to anyone stuck with the same problem. I did the 'form thing', but it gets sloppy. You basically just embed the page divs inside the form element, but that's not very elegant and has given me some navigation issues.
So I ended up with my own solution that works over huge multipage forms (+/- 1000 elements). Not the most elegant, but it works like a charm:
<!DOCTYPE html>
<head>
<meta name="viewport" content="width=device-width, initial-scale=1"/>
<meta charset="utf-8"/>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>
<script>
$(function () {
$('#submit_my_form').click(function (e) {
alert(JSON.stringify(readFormData('names')));
alert(JSON.stringify(readFormData('dates')));
});
});
function readFormData(section) {
var sectionData;
var els = $(':input[id|='+section+']');
var sectionData = {};
$.each(els, function() {
if (this.name && !this.disabled && (this.checked
|| /select|textarea/i.test(this.nodeName)
|| /text|hidden|password|date|email/i.test(this.type))) {
sectionData[this.name.substr(section.length+1)] = $(this).val();
console.log(this.name + " -> " + $(this).val());
}
});
return sectionData;
}
</script>
</head>
<body>
<div data-role="page" id="menu" data-theme="a">
<div data-role="header" data-position="fixed">
<h1>Menu Page</h1>
</div>
<div data-role="content">
<ul data-role="controlgroup">
<li><a target_id="page1" href="#page1" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right" class=".ui-icon-manditory">Page1</a></li>
<li><a target_id="page2" href="#page2" data-role="button"
style="text-align:left" data-icon="arrow-r"
data-iconpos="right">Page2</a></li>
</ul>
<input id="submit_my_form" type="button" name="send" value="Submit"/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
Menu page footer
</div>
</div>
<div data-role="page" id="page1" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 1</h1>
Next
</div>
<div data-role="content">
<label for="names-initials">Name:</label>
<input type="text" name="names-initials" id="names-initials" value=""/>
<label for="names-surname">Surname:</label>
<input type="text" name="names-surname" id="names-surname" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
</div>
</div>
<div data-role="page" id="page2" data-theme="a">
<div data-role="header" data-position="fixed">
Prev
<h1>Page 2</h1>
</div>
<div data-role="content">
<label for="dates-birthday">Birthday:</label>
<input type="date" name="dates-birthday" id="dates-birthday" value=""/>
</div>
<div data-role="footer" data-position="fixed" class="ui-btn-right" style="min-height:42px;">
<a href="#menu" data-icon="arrow-l" data-direction="reverse" data-iconpos="left"
style="margin-left: 10px; margin-top: 5px">Back to Main From</a>
</div>
</div>
</body>
</html>

afterAdd binding is not working

I tried to use the afterAdd binding to add some trivial animation to the elements being added to my observableArray but it does not trigger anything.
I tought I had a problem with my animation code so I coded a small alert on the function but still does not work.
Here's some sample code for the div being templated:
<div id="resultList"
data-bind='template: { name: "searchResultTemplate",
afterAdd: function(elem){alert(elem)} }'
runat="server">
</div>
This is the template:
<script type="text/html" id="searchResultTemplate">{{each(i, searchresult) resultCollection()}}
<div class="searchresultwrapper ui-corner-all ui-state-default">
<div class="searchresult">
<img src='${ ImageUrl }' alt='${ Title }' title='${ Title }' class="searchresultpicture" />
<div class="searchresultinformationcontainer">
<span class="searchresulttitle" data-bind="text: Title"></span>
<br />
<div class="searchresultdescription" data-bind="text: Description">
</div>
<span class="searchresultAuthor" data-bind="text: AuthorName"></span> at <span class="searchresultmodule" data-bind="text: ModuleName"></span> on <span class="searchresultdate" data-bind="text: PublicationDate"></span>
<br />
Take me there
</div>
</div>
</div>
<br />{{/each}}
</script>
Any ideas?
You need to qualify the template attributes with foreach like so,
<div id="resultList" data-bind='template: {
name: "searchResultTemplate",
foreach: searchresult,
beforeRemove: function(elem) { $(elem).slideUp() },
afterAdd: function(elem) { $(elem).hide().slideDown() }
}' runat="server">
</div>
and then, not use {{each in the template, just template it for each item stand alone.
Here, foreach attribute helps keep track of changes to the object array