using jquery in Joomla

I'm developing a joomla component for joomla and involve jquery. It will hit error and need to take special care because joomla ship with javascript framework "MooTools" which will have conflict with jquery.

Here is the code that i pun into my view.html.php

$document =& JFactory::getDocument();

$document->addScript(JURI::base(true).'/components/com_xin/js/jquery-1.3.1.min.js');

$document->addScriptDeclaration ( 'jQuery.noConflict();');

$document->addScript(JURI::base(true).'/components/com_xin/js/validation.js');

in the validation.js

I change all the $ to jQuery.

For example i change

$(document) to jQuery(document)

$('#login') to jQuery('#login')

and all others.

Test again and it works. Hope this help.

AJAX PHP CAPTCHA

Thanks for http://www.phpcaptcha.org/documentation/quickstart/ provide a cool php captcha code. One of my colleague supporting a php site which need CAPTCHA to prevent spamming but most of the example given needed page post back which is not so practical. I have implement an AJAX CAPTCHA for ASP in my previous post on AJAX ASP CAPTCHA.

Now, we are using the same method to implement in PHP. By reuse the same javascript code with jquery, there is only a small changes in PHP part. Within 20 minutes, the code done and tested working. The files available for download here.

Happy programming. Please let me know if you have any problem.

Classic ASP CAPTCHA with JQuery Cross domain AJAX

It come to the point that i need to maintain my old application which written in ASP. I was asked to add a new feature in form submission to prevent from spamming. CAPTCHA is the thing that i could thought of. Thanks Emir Tüzül who willing to share his ASP CAPTCHA. You can download it from http://www.tipstricks.org/ .

I downloaded the code and modify the code so that the security checking is before the asp postback. The solution i could thought of is AJAX. When i thought of javascript, the coolest javascript framework will be JQuery.

The decision is go for JQuery in order to perform Ajax with ASP.

There is one concern, the application will need to perform cross domain ajax. If use normal jquery ajax (code below), it will work if all the file reside in the same domain but not when cross domain. Error : Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "" data: no] will be displayed.

var html = $.ajax({
url: "/captcha.asp?validateCaptchaCode=" + $("#captchacode").val(),
async: false
}).responseText;

In our case, the file put in different domain. The technics will be use is Cross-Domain getJSON (using JSONP). Sample code below

$.getJSON("captcha.asp?validateCaptchaCode=" + $("#captchacode").val() + "&format=json&jsoncallback=?", function(data)
{
if (data.status == "1")
{ alert("verified and submit.");
$("#form").submit();
result = true;
}
else
{
if (data.session == "0")
RefreshImage("imgCaptcha");
alert("Please key in the security key correctly!");
$("#captchacode").focus();
result = false;
}
});


The Cross-Domain getJSON will espect the data return in Json format. So, my ajax handler file (in my case is captcha.asp) will need to return Json format data for processing.

After develop and tested. It's work. You can download my sample file here and test on it. Please let me know if it's help.

JQuery document ready

If you want to fire an event after the document ready using jquery, you can call function inside $(document).ready(function()){// put all jQuery function here}); or $(function() {// put all jQuery function here.});

You can use

1. $(document).ready(function() {
2. // put all jQuery code in here.
3. });

or

1. $(function() {
2. // put all jQuery code in here.
3. });

textContent not working in IE, use innerHTML

My javascript is working fine in FireFox and Safari but when use IE (mine is IE7), it's give me problem [Undefined].

.........................
..........................
this.post[i].head = this.posts[i].getElementsByTagName('a')[0];
this.post[i].title = this.post[i].head.textContent;
.......................
......................

Spend hours to check on the issue and finally found a very simple way to solve it, use innerHTML instead of using textContent.

.........................
..........................
this.post[i].head = this.posts[i].getElementsByTagName('a')[0];
this.post[i].title = this.post[i].head.innerHTML;
.......................
......................

problem solve.

[Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e

facing problem [Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "" data: no] .

This is cause by calling AJAX file different domain from my current site.Check my previous post

http://dotnetfish.blogspot.com/2007/11/jquery-exception-permission-denied-to.html

technorati like - News Scroller with jQuery

I have create a real time viewer for blogarate.com in ASP.NET using jQuery. If you not familiar with jquery, you can read more here jquery.com. It's a very powerful javascript library.

Let me explain how the real time viewer/scroller/ticker/ works:

When web user access to realtime.aspx. The page will bind 5 latest rated blog and show on screen. once the user/visitor rate on the blog, the newly rated blog will show on top, the rest will scroll down and the last one will be deleted. To see real example, please check on http://202.75.40.204/blogarate/Realtime_.aspx

There are few things that we need to take care of in my case:

• HTML/ASPX
• CSS
• Javascript
• AJAX

HTML/ASPX

I'm using in the scroller <ol> because we have more than one (5) message want to display.

<div id="content">
<ol class="wrapper">
<li class="headline">
Message 1
</li>
<li class="headline">
Message 2
</li>
<li class="headline">
Message 3
</li>
<li class="headline">
Message 4
</li>
<li class="headline">
Message 5
</li>
</ol>
</div>




CSS
Create CSS for #content and .wrapper with height: 395px; width: 500px; overflow: hidden; The height: 395px; is the trick here. You will get what i mean when go along.
Each headline will have height: 78px; 5 headline will give total of 390px.

#content {
position: relative;
overflow: hidden;
float:left;
height: 395px;
width: 500px;
clear: both;
}
.wrapper
{
position:relative;
float: left;
margin:0;
overflow:hidden;
width: 500px;
padding-left: 0;
list-style-type: none;
}
.headline {
position: relative;
height: 78px;
width: 500px;
left:5px;
overflow: hidden;
border-bottom: 1px solid #CCC;
float: left;
list-style-type: none;
z-index : 1;
}
.next
{
margin-top: -100px;
/* for IE */
filter: alpha(opacity=40);
/* CSS3 standard */
opacity: 0.4;
/* for Mozilla */
-moz-opacity: 0.4;
}
active
{
background-color:#EEE;
border-bottom: none;
}





Javascript

// JScript File
var BlogarateRealtime = {
timer : 10, // second
display : 5, // how many item displayed
interval: null,
animation: 500, //milisecond


init: function() {
if (!BlogarateRealtime.interval) {

// stop scrolling when mouseover the message
// start scroll again when mouseout
$("#content .wrapper").mouseover(function(){
BlogarateRealtime.stopScroll();
}).mouseout(function(){
BlogarateRealtime.startScroll();
})
BlogarateRealtime.RatingUpdate();
BlogarateRealtime.startScroll();
}
},

RatingUpdate: function(){
var i;

// add class active when mouseover
// remove class active when mouse out
var cpostItem = $(".wrapper .headline");
$(cpostItem).mouseover(function() {
$(this).addClass("active");
}).mouseout(function() {
$(this).removeClass("active");
});


// xxx.shx return realtime message (rewly post)
var html = $.ajax({
url: http://xxx.ashx/ ,
async: false
}).responseText;
// return 3 value:
//1. PostUpdating[0] - any blog rated
//2. PostUpdating[1] - new blog ID
//3. PostUpdating[2] - new blog information
var PostUpdating = html.split("");

// check if any new blog rated (1 = yes, 0 = no)
if (PostUpdating[0] == "1")
{

// assign currentItem with new blog infomation
var currentItem = PostUpdating[2];
// add class next to currentItem
// pre append currentItem to #content .wrapper
$(currentItem).addClass("next").prependTo("#content .wrapper");
// scrolling (animate) the new blog to marginTop -1
$(".wrapper .next").animate( { marginTop: -1 }, BlogarateRealtime.animation, function() {
// remove marginTop -1, class next and fadeIn new blog
$(".wrapper .next").css("marginTop", -1);
$(".wrapper .next").removeClass("next");
$(".wrapper .next").fadeIn(BlogarateRealtime.animation);
});

var postItem = $(".wrapper .headline");
// fade out and remove the last post
$(postItem[BlogarateRealtime.display]).animate( { opacity: .50 }, BlogarateRealtime.animation, function(){
$(postItem[BlogarateRealtime.display]).remove();
} );
// add class active when mouse over
// remove class active when mouseout
$(postItem).mouseover(function() {
$(this).addClass("active");
}).mouseout(function() {
$(this).removeClass("active");
});
}

},
startScroll: function() {
if (!this.interval) {
this.interval = setInterval("BlogarateRealtime.RatingUpdate()", this.timer * 1000);
}
},
stopScroll: function() {
if (this.interval) {
clearInterval(this.interval);
this.interval = false;
}
}
};
// initial once ducument finish loaded
$(BlogarateRealtime.init);

AJAX
The call of http://xxx.ashx/ will return newly added post if there is any.

You can see the effect in http://202.75.40.204/blogarate/Realtime_.aspx . You will only see the scroll effect if only new post rated. Done.
Leave me a message or a comment if you have any. Thanks

jQuery: Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: ...

I received below error message in firebug when i try to use jQuery Ajax call

var html = $.ajax({
url: "http://www.xxx.com",
async: false
}).responseText;

Where http://www.xxx.com is different domain from my current site.

Exception... "'Permission denied to call method XMLHttpRequest.open' when calling method: [nsIDOMEventListener::handleEvent]" nsresult: "0x8057001e (NS_ERROR_XPC_JS_THREW_STRING)" location: "" data: no]

As far as my understanding, this is not allowed. In order to have the similar result, use Cross Domain getJSON or you can check on my sample in other post which work on cross domain ajax.



Ajax treat http://www.xxx.com and http://xxx.com as two different entry. There are different between url with www and without www. To solve this problem, use location.host to get the url that use by visitors.

example:
var html = $.ajax({
url: "http://"+location.host+ "/Realtime.ashx" + "?PostID=" + PostID,
async: false
}).responseText;