I'm trying to create a Lift chat server. I've taken everything straight from the Lift book that is linked to from Lift's main website. Upon running it, I cannot submit my messages because liftAjax is undefined and causes an error that appears in my chrome console.
Correct me if I'm wrong, but shouldn't Lift generate the liftAjax stuff upon starting up the website? I have a feeling I could import liftAjax myself from some source and it would work, but I don't feel I should have to do this.
This is my index.html file.
<!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><title>Home</title></head>
<body class="lift:content_id=main">
<div id="main" class="lift:surround?with=default;at=content">
<!-- the behavior of the div -->
<div class="lift:comet?type=Chat">Some chat messages
<ul>
<li>A message</li>
<li class="clearable">Another message</li>
<li class="clearable">A third message</li>
</ul>
</div>
<div>
<form class="lift:form.ajax">
<input class="lift:ChatIn" id="chat_in" />
<input type="submit" value="Say Something" />
</form>
</div>
</div>
</body>
</html>
This is what is generated:
<?xml version="1.0" encoding="UTF-8"?>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<div id="main" xmlns="http://www.w3.org/1999/xhtml">
<!-- the behavior of the div -->
<div id="F156429460218VSI1GX_outer" style="display: inline">
<div id="F156429460218VSI1GX" style="display: inline">
<div xmlns="http://www.w3.org/1999/xhtml">Some chat messages
<ul>
<li></li>
</ul>
</div><script type="text/javascript">
// <![CDATA[
/* JSON Func comet $$ F156429460221QEXVXK */function F156429460221QEXVXK(obj) {liftAjax.lift_ajaxHandler('F156429460221QEXVXK='+ encodeURIComponent(JSON.stringify(obj)), null,null);}
// ]]>
</script></div><script type="text/javascript">
// <![CDATA[
var destroy_F156429460218VSI1GX = function() {}
// ]]>
</script></div>
<div>
<form id="F156429460223BHVYIM" action="javascript://" onsubmit="liftAjax.lift_ajaxHandler(jQuery('#'+"F156429460223BHVYIM").serialize(), null, null, "javascript");return false;">
Note: the error happens on the above line
<input name="F1564294602245ECYAU" id="chat_in" xmlns="http://www.w3.org/1999/xhtml" />
<input value="Say Something" type="submit" xmlns="http://www.w3.org/1999/xhtml" />
</form>
</div>
</div>
I'm just not really sure what could be causing this. I'm just starting to learn Lift so I do not know much. Am I missing something?
If you need more information, such as build.sbt or other files just let me know and I can post them as well.
In my case, I was missing following body part that automatically seems to source liftAjax.
<body class="lift:content_id=main">
<div id="main" class="lift:surround?with=default;at=content">
......
</div>
</body>
But, in another case, sourcing jquery manually would work with JQuery module injected in Boot.scala.
<script id="jquery" src="/classpath/jquery.js" type="text/javascript"></script>
You don't need to manually include the liftAjax function, but you do need to include jquery manually. Lift will not automatically inject a reference to it since it doesn't know what version, minification level, or location you want to use. Try adding:
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
To the head section of your template.
Related
I am pretty new to AEM. I am following this tutorial from the official documentation. I already did it from top to bottom, but now I am trying to do it again but using Eclipse, Maven and Sightly instead of JSP.
I've been following until the step "Using your own scripts". As I am trying to use Sightly instead of JSP I've ended up with the following files:
contentpage.html
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html>
<div data-sly-include="head.jsp" data-sly-unwrap></div>
<div data-sly-include="body.jsp" data-sly-unwrap></div>
</html>
body.jsp
<%#include file="/libs/foundation/global.jsp"%>
<%
%><body>
<div id="CQ">
<div class="topnav">topnav</div>
<div class="content">
<cq:include script="left.html" />
<cq:include script="center.html" />
<cq:include script="right.html" />
</div>
<div class="footer">
<div class="toolbar">toolbar</div>
</div>
</div>
</body>
left.html
<div class="left">
<div>logo</div>
<div>newslist</div>
<div>search</div>
</div>
center.html
<div class="center">
<div>trail</div>
<div>title</div>
<div>parsys</div>
</div>
right.html
<div class="right">
<div>iparsys</div>
</div>
In addition, the node apps/myproject/components/contentpage has an attribute sling:resourceSuperType="foundation/components/page" so it is inheriting from the page component provided.
Everything works as expected, but as I said before, I am trying to use only Sightly, but at the moment I've got the file body.jsp, which I think I need it to be JSP so it has the same name as /libs/foundation/components/page/body.jsp.
Is there a way to get rid of the body.jsp and use a sightly script instead? I suspect that maybe there is a components/page/body.html somewhere, but no idea where to look for it (in case it really exists).
Thanks.
As commented by rakhi4110, and as I suspected, there is a sightly version of the page component. It is located in wcm/foundation/components/page so the only thing to do is inherit from it instead of foundation/components/page.
This is a link to an article that put me on track, in case is useful for somebody else: http://scottwestover.blogspot.co.uk/2015/04/aem-tutorial-on-building-sightly-page.html
I am implementing amcharts in CQ. I get the data by calling a servlet which I temporarily hosted in a local glassfish server. Following is the code snippet of my amchart component jsp.
<%#include file="/libs/foundation/global.jsp"%><%
%><%#page session="false" %><%
%><html xmlns="http://www.w3.org/1999/xhtml" lang="en" xml:lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>Test amcharts generation</title>
</head>
<body leftmargin="0" topmargin="0" marginwidth="0" marginheight="0">
<div id="container">
<div id="singlesection" class="norm" >
<div class="norm">
<script type="text/javascript" src="/apps/geometrixx/components/amchart/am/swfobject.js"></script>
<div id="flashcontent"><strong>You need to upgrade your Flash Player</strong></div>
<div id="result"></div>
<script type="text/javascript">
// <![CDATA[
var so = new SWFObject("/apps/geometrixx/components/amchart/am/amstock.swf", "amstock", "600", "400", "8", "#FFFFFF");
var uri = "http://localhost:8080/Charts/apps/CreateXMLFileServlet?r="+Math.random()+"&fc=03";
so.addVariable("settings_file", encodeURIComponent(uri));
so.addVariable("chart_id", "amstock");
so.addVariable("key", "106-d0564444fe0a5ce6839d84f70655375c");
so.write("flashcontent");
// ]]>
</script>
</div>
</div>
</div>
</body>
The issue is, the servlet is not getting called. If I try the servlet url directly from the browser, I get the response. Please suggest what I am doing wrong here. Thank you.
It sounds like you may be running into a cross-domain security restriction. If you are loading the page the has the SWF code from one domain, but then calling a different domain to get the data, you are likely running into security restrictions. Can you list the full domains for both pieces?
Check out http://www.adobe.com/devnet/articles/crossdomain_policy_file_spec.html for info on how to get around this.
After Im using jquery mobile to submit a form,
but after submition, and going back to form, all fields are not in default value any more. they showing data previously submitted.
(if I press f5, form will reset and works fine for another round only)
Im guessing something remain in browser cache.
Any Idea?
<!DOCTYPE html>
<html>
<head>
<script src="scripts/jquery-1.9.1.min.js"></script>
<script src="./scripts/jquery.mobile-1.3.0.js"></script>
<link rel="stylesheet" href="./style/jquery.mobile-1.3.0.min.css" />
</head>
<body>
<?php if(!(isset($_GET["submit"]))){ ?>
<form action="thisPage.PHP?submit=yes" method="get" >
<input type="text" value="0" />
<input type="submit" value="Submit" />
</form>
<?php }else{ ?>
<a href="thisPage.PHP" > FINISHED</a>
<?php } ?>
</body>
</html>
Finally I found the simple and easy answer:
add following line into form tag:
data-ajax="false"
so it should be like this:
<form action="thisPage.PHP?submit=yes" method="get" data-ajax="false" >
I am trying to create a playlist in phonegap application for iPhone. I don't have any idea regarding this, I am totally new to this issue, I am not getting any thing, can any one help me out to solve this issue?
This may help you
Use PhoneGap Media API & jQuery Mobile UI Framework
Here is the code:
<!DOCTYPE HTML>
<html>
<head>
<meta name="viewport" content="width=screen.width; user-scalable=no" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Audio Player</title>
<!-- NOTE: The following 4 lines are inserted by the project wizard -->
<link rel="stylesheet" href="jquery.mobile/jquery.mobile-1.0.css" type="text/css">
<script type="text/javascript" src="jquery.mobile/jquery-1.6.4.min"></script>
<script type="text/javascript" src="jquery.mobile/jquery.mobile-1.0.js"></script>
<script type="text/javascript" charset="utf-8" src="phonegap-1.3.0.js"></script>
</head>
<body>
<div data-role="page" data-theme="a" id="page-home">
<div data-role="header" data-nobackbtn="true" data-theme="e">
<h1>Audio Player</h1>
</div> <!-- /header -->
<div data-role="content" id="content-manual" data-theme="a">
<div data-role="button" id="playaudio" data-theme="e">Play</div>
<div data-role="button" id="pauseaudio" data-theme="e">Pause</div>
<div data-role="button" id="stopaudio" data-theme="e">Stop</div>
<div class="ui-grid-a">
<div class="ui-block-a"> Current: <span id="audio_position">0 sec</span></div>
<div class="ui-block-b">Total: <span id=media_dur>0</span> sec</div>
</div><!-- /grid-a -->
</div> <!-- /content-manual -->
</div> <!-- /page -->
</body>
</html>
I found a lost of posts to solve this error: "Validation of viewstate MAC failed". I read that it is a ASP.NET 2.0 error which is also a bug. But I am using VS 2008 with ASP.NET 3.5 SP1. Why this error is coming in this version also?
I am using ASP TextBox controls. Some posts have mentioned that ASP TextBoxes generate this error, so I have set AutoPostBack of each TextBox to False.
How to get rid of this mess?
Code Added Below **
* Default.aspx *
<%# Page Language="C#" AutoEventWireup="true" CodeBehind="Default.aspx.cs" Inherits="FlexStock._Default" %>
<!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 runat="server">
<!--<%# Register Assembly="MSCaptcha" Namespace="MSCaptcha" TagPrefix="cc1" %>-->
<link rel="Stylesheet" type="text/css" href="~/Styles/main.css" />
<title>FlexStock#.NET - Gamma Edition</title>
</head>
<body id="LoginPageBody" class="loginPageBodyClass">
<img id="imgProductLogo" src="Styles/stockist_gamma.png" style="text-align:center;text-shadow:black;margin-left:500px" alt="Product Logo"/>
<form id="loginForm" runat="server" class="loginForm" action="./Forms/selectCompany.aspx" >
<div id="divMainLoginPage" runat="server">
<div class="label">
<asp:Label ID="lblUserName" runat="server" CssClass="LabelControls" AssociatedControlID="txtUserName">User Name: </asp:Label>
</div>
<div class="value">
<asp:TextBox ID="txtUserName" runat="server" CssClass="TxtStyle" Width="199px" AutoPostBack="false"></asp:TextBox>
</div>
<div class="label">
<asp:Label ID="lblPassword" runat="server" CssClass="LabelControls" AssociatedControlID="txtPassword">Password: </asp:Label>
</div>
<div class="value">
<asp:TextBox ID="txtPassword" runat="server" CssClass="TxtStyle" TextMode="Password" Width="199px" AutoPostBack="false"></asp:TextBox>
</div>
<div class="label">
<asp:Label ID="lblCaptcha" runat="server" Text="Security Check"></asp:Label>
</div>
<div class="value">
<!-- <cc1:CaptchaControl ID="ccJoin" runat="server" CaptchaBackgroundNoise="none" CaptchaLength="5" CaptchaHeight="60" CaptchaWidth="200" CaptchaLineNoise="None" CaptchaMinTimeout="5" CaptchaMaxTimeout="240" /> -->
</div>
<div class="label">
<asp:Label ID="lblEnterCaptcha" runat="server" Text="Enter Value"></asp:Label>
</div>
<div class="value">
<asp:TextBox ID="txtCaptcha" runat="server" CssClass="TxtStyle" Width="199px" AutoPostBack="false"></asp:TextBox><br /><br />
<asp:Button ID="btnLogin" runat="server" Width="60" Text="Login" CssClass="BtnStyle"/>
</div>
</div>
</form>
<img id="img1" src="Styles/impact_logo.png" style="text-align:right;text-shadow:black;margin-left:800px" />
</body>
</html>
selectCompany.aspx **
<%# Page Title="" Language="C#" MasterPageFile="~/master1.Master" AutoEventWireup="true" CodeBehind="~/Forms/selectCompany.aspx.cs" Inherits="FlexStock.Forms.selectCompany" EnableViewStateMac="false" %>
<asp:Content ID="Content1" ContentPlaceHolderID="head" runat="server">
<link rel="Stylesheet" type="text/css" href="../Styles/selectCompany.css" />
<link rel="Stylesheet" type="text/css" href="../Styles/main.css" />
</asp:Content>
<asp:Content ID="Content2" ContentPlaceHolderID="ContentPlaceHolder1" runat="server">
<form id="frmSelectCompany" enableviewstate="false">
<div id="label" class="label" style="width:300px">
<asp:Label ID="lblSelectCompany" runat="server" Text="Select Company or Create New"></asp:Label>
</div>
<div id="btnCreate" style="text-align:right">
<asp:Button ID="btnCreateNew" runat="server" Text="Create New" CssClass="BtnStyle" />
</div><br />
<div id="divGrid">
</div>
</form>
</asp:Content>
This is a pretty common error to see. It's a security feature in ASP.NET that prevents someone from injecting additional controls onto the page after it has rendered, and posting those controls back to the server. It makes your website harder to hack.
Are you creating any input controls through javascript? If so, don't. Create the controls normally inside the web form and wrap them in a <div style='display:none;'> and display them when you need them.
Are you creating any controls dynamically within C#? - If you are, you must create them inside Page_Init, not Page_Load, otherwise ASP.NET won't recognise them as valid.
You can disable this security measure by setting EnableViewStateMac=False at the top of the aspx page, but I strongly advise against it.