Created a simple search component in AEM and added following code in its JSP.
Also added autocomplete plugin and jquery plyugin file in clientlib node. But getting error "autocomplete is not a function" every time I try to run the page with this component. Is it not compatible to be used with AEM?
Using AEM 6.0 SP2
<% #include file="/libs/foundation/global.jsp"%>
<cq:includeClientLib categories="jquerysamples" />
<html>
<head>
<script>
$(function() {
var availableTutorials = [
"ActionScript",
"Boostrap",
"C",
"C++",
];
$( "#searchInput" ).autocomplete({
source: availableTutorials
});
});
</script>
</head>
<body>
<div class="formDiv">
<form id="form" >
<input type="text" id="searchInput" name="searchbox">
<div id="searchResults"/>
</form>
</div>
</body>
</html>
I recommend understanding how browsers parse HTML documents. http://www.html5rocks.com/en/tutorials/internals/howbrowserswork/#HTML_Parser is an introductory resource.
You have a JS script tag inside the head of your document. (this is immediate parse & execute)
there is a cq:includeClientLib outside of the document. I don't believe HTML5 behavior defines how this should behave.
no jQuery document onLoad is defined, so the browser attempts to run JavaScript before any DOM has been built.
I recommend:
Try moving the cq:includeClientLib inside the head.
Use the HTML5 doctype <!doctype html>. This should "kick" browsers into a consistent parsing mode (especially avoiding IE's myriad of quirks modes).
Move your script block to just inside the end of by body. Even better, wrap the JS with an onload handler to cause the JS to run AFTER the HTML has been parsed & the DOM has been built.
I got the solution. It was not binding the jquery-ui plugin. I added dependency of "cq:includeClientLib" for plugin folder to the js file I was using for autocomplete. It is working like a charm now.
Related
I have to create something similar to a Facebook 'Like' button. My client would link to some custom javascript and they would put a custom dom element on their page for whatever functionality.
<head>
<script src="www.domain.com/client1.js"></script>
</head>
<body>
<my-element></my-element>
</body>
I think aot would be perfect for this scenario. Would that be a good assessment?
client1.js would be my bundled ng2 files. But what about compatibility? Will this work in all evergreen browsers? What if client1 also has ng2 files linked to their webpage?
I am using jQuery 1.6.4 with jQuery Mobile 1.0.1. I am running into an issue anytime you link to a page that then tries to do a 301 redirect.
I've setup a sample page at: http://www.widgetsandburritos.com/jquery-mobile-test/
The only thing on this page is the jQuery Mobile includes and a link to another page that has a 301 redirect somewhere else.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
301 test
</body>
</html>
301test.php has the following content:
<?php
header( "HTTP/1.1 301 Moved Permanently" );
header( "Location: 301success.html" );
?>
This should just simply pass the browser to 301success.html. It works if you directly go to that URL
http://www.widgetsandburritos.com/jquery-mobile-test/301test.php
But when you click on the link from the page using jQuery Mobile, it shows "undefined" instead. Is jQuery Mobile currently incapable of handling redirects?
Any possible work arounds?
Thanks for your help.
EDIT [3/23/12 12:41AM CST]
I also posted this problem on the jQuery Mobile forums. Somebody there recommended adding rel="external" to the anchor tag. This technically works if all you are doing is making a link, but won't fix the issue if you get to the redirect via some other mechanism, such as a POST request.
To illustrate, I've setup a secondary test at http://www.widgetsandburritos.com/jquery-mobile-test/test2.html
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.css" />
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script src="http://code.jquery.com/mobile/1.0.1/jquery.mobile-1.0.1.min.js"></script>
</head>
<body>
<form method="post" action="301test.php">
<input type="submit" value="test" />
</form>
</body>
</html>
Instead of arriving at the 301test.php redirect page from a link, it's now the location of a form we're submitting to. The context this would be used, would be such that if you submit a form with errors, it would stay on the same page allowing you to correct the errors. If there were no errors, it redirects you to a success page. This is done to avoid submitting the form again if a user refreshes their browser. It works brilliantly in normal web applications. But in combo with jQuery Mobile it doesn't seem to work.
Just thought I'd give some additional context to anyone else following this issue.
Figured out the answer to my own problem. In the above, I mentioned that this was causing problems using the <form> tag. After browsing through the jQuery Mobile documentation I found this page: http://jquerymobile.com/test/docs/forms/forms-sample.html
The trick here is if you're doing a form, to force it to not use AJAX. You do this by adding
data-ajax="false" to the FORM tag.
So this changes
<form method="post" action="301test.php">
to
<form method="post" action="301test.php" data-ajax="false">
And just to reiterate what was said above. If you need to do something with an anchor link, just add rel="external" to it.
So this changes
301 test
to
301 test
The issue is deeper. Take a look here or here.
It seems that XMLHttpRequest object (the one used for doing AJAX requests) handles redirects on its own and returns the final response. Which means that jQuery Mobile can't know that it should update the URL.
The solution is to use the data-url attribute on the final page. It forces jQuery Mobile to update the URL in the browser. Kind of a workaround but far from being a hack.
By the way there are more issues with jQuery Mobile, AJAX and redirects - for instance if you click the browser's back button after an AJAX-redirect, jQuery Mobile (up till 1.1) might produce a final page under the URL of the redirecting page. Therefore using data-ajax="false" is a wise choice.
EDIT:
But even data-ajax="false" is not a bullet-proof solution. Using it splits your mobile app into multiple browser pages, which brings all sorts of browser differences to the party. For instance Firefox has so called bf cache whereas Chrome doesn't. This is an unholy mess and I'm starting to think that something like Sencha Touch is much better suited for developing pages that pretend to be mobile apps.
EDIT 2:
Alternatively, one could avoid regular form submissions and use own AJAX code for that and then switch pages based on the result, but I cannot resist thinking that it's 2012 and such things should automated and work flawlessly without sweating.
I'm currently building an application but even though I am logged in, I stay on the login page, and I do not get redirected. I used the data-ajax="false"
this is the code of the form:
<section id="login">
<h2>Want to take a ride? <span>Login</span></h2>
<form action="<?php echo $_SERVER['PHP_SELF'];?>" method="post" data-ajax="false">
<?php if(!empty($feedback_error)): ?>
<div id="feedback_error">
<p><h1><?php echo $feedback_error ?></h1></p>
</div>
<?php endif; ?>
<input id="username" type="text" name="username" placeholder="username" />
<input id="password" type="password" name="password" placeholder="password" />
<p>Not yet signed up? <a href="register.php" >Register</a></p>
<input type="submit" name="btnLogin" data-theme="b" value="Sign in">
</form>
</section>
I guess I have an easy question, I have not found the right answer yet though.
I have an iframe in my page that comes from an external domain. After submitting the form which is inside this iframe, I would like to redirect the whole page, not just the content inside the iframe - I guess the right way to achieve might be via "target" attribute.
The sample html:
<html>
<body>
<h1>main page</h1>
<iframe src="http://example.com">
<form url="http://example.com/action">
...
</form>
</iframe>
</body>
</html>
Submitting the form should show me the result of submitting the POST request as a new page (not in the iframe)
I have put target='_parent' in the iframe but I haven't done this initially in the form element. After adding target='_parent' attribute to form it started to work as expected.
Add a target attribute to the form within the iframe:
<form action="foobar" method="post" target="_parent">
...
</form>
Is there any way to use CoffeeScript in client side?
There are two ways:
Compile the CoffeeScript to JavaScript and deploy it as you would any JavaScript file, or
Use coffee-script.js, which allows you to put <script type="text/coffeescript> tags in your page.
The latter isn't recommended for production use, but it's nice for development. Or for usage in online editors like these:
<script crossorigin src="https://coffeescript.org/v2/browser-compiler-legacy/coffeescript.js"></script>
<script type="text/coffeescript">
console.log 'Hello World!'
</script>
See the related question: Is there a way to send CoffeeScript to the client's browser and have it compiled to JavaScript *there*?
See also Webmake plugin for CoffeeScript -> https://github.com/medikoo/webmake-coffee
It allows you to organize coffee modules in Node.js style and bundle it for browser. It provides source maps support, so you can debug CoffeeScript files as they are, directly in a browser.
To not compile everytime you can use -w param and coffee will compile the file everytime file change
coffee -wco src/ public/js
Yes, it can be done by adding a CoffeeScript src tag to the head section of your html page.
Download the CoffeeScript source from this path: http://coffeescript.org/extras/coffee-script.js
Copy and paste the below code and try to run in a browser:
<html>
<head>
<script type="text/javascript">
function printHelloJava(){
alert("Hello Javascript");
}
</script>
<script src="coffee-script.js"></script>
<script type="text/coffeescript">
#printHello = ->
alert "Hello Coffee Script"
</script>
</head>
<body>
<h1>Coffee Script on client side</h1>
<input type="button" onclick="printHelloJava();" value="Hello Java">
<br>
<input type="button" onclick="printHello()" value="Hello Coffee">
</body>
</html>
You can also use CDN coffeescript for better and faster performance.
<script src="http://cdnjs.cloudflare.com/ajax/libs/coffee-script/1.7.1/coffee-script.min.js"></script>
or
<script src="https://cdn.rawgit.com/jashkenas/coffeescript/1.11.1/extras/coffee-script.js"></script>
Then use type="text/coffeescript" for compile Coffee Script.
<script type="text/coffeescript">
// add code here
</script>
I want to use the Tinymce Editor in my web application. I have a text area on it and I want to submit the data of that text area to the next page. That page should display the data it received. Can you give any suggestions how I can do this.
The best way to think of TinyMCE is as a special textarea. Just like you can submit data from a textarea and retrieve the content via request variables, you can do the same for a TinyMCE editor instance.
In your front-end code, you would have something like this:
...
<script type="text/javascript">
tinyMCE.init({
mode : "textareas"
});
</script>
</head>
<body>
<form method="post" action="show.php">
<p>
<textarea name="content" cols="50" rows="15">Content in TinyMCE</textarea>
<input type="submit" value="Save" />
</p>
</form>
...
Then, in your show.php page, you would retrieve the content like you would retrieve a textarea value:
<?php
...
echo $_POST['content'];
...
It's about as simple as that to retrieve the data and display it in your page. Of course, you would need to take security precautions in displaying data that is entered by an end user. Also, this is assuming you are using PHP as the back-end technology; but, the principles carry over to any technology.
And, consult the TinyMCE documentation for detailed instructions and information on advanced use cases.
You should start with this instructions.
Displaying html content is very simple. You need to place the written text one of yor pages receives on that page - that is all.