Archive for the ‘JavaScript’ Category

jQuery .hover change div background-position example

Wednesday, November 16th, 2011

example for reference:

$(“#formButtonSubmit“).hover(function(){
$(this).css({
backgroundPosition: ’0px 0px’
});
}, function(){
$(this).css({
backgroundPosition: ’0px 30px’
});
});

Secure HTML form example using PHP htmlentities, passing a token PHP, AJAX submission via jQuery

Wednesday, September 21st, 2011

<? php
// form page (index.php): initialize a session so that we can set a unique, random, encrypted value to a user session
session_start();
$token = md5(uniqid(rand(), true));
$_SESSION['token'] = $token;
? >
<!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=”js/jquery.js” type=”text/javascript”></script>
<script src=”js/jquery.validation.js” type=”text/javascript”></script>
<script src=”js/registerSubmit.js” type=”text/javascript”></script>
</head>
<body>
<!– The Form –>
<form id=”topForm” name=”topForm” method=”post”>
<input type=”hidden” name=”token” id=”token” value=”<? php echo $token; ? >” />
<input name=”emailAddress” id=”emailAddress” value=”Email address” onclick=”if( this.value == ‘Email address’ ){ $(this).val(”); }” onblur=”if( this.value == ”){ $(this).val(‘Email address’); }” />
</form>
</body>
</html>

// The jquery.validation.js class uses a regular expression to stop the process if the email entered isn’t acceptable

;(function($) {
$.validation = {};
$.extend( $.validation, {
email:function(email) {
var filter = /^([a-zA-Z0-9_.-])+@(([a-zA-Z0-9-])+.)+([a-zA-Z0-9]{2,4})+$/;
if ( filter.test(email) ) {
return true;
}
return false;
}
});
})(jQuery);

// The registerSubmit.js submits the entered email via AJAX, returning a success or failure message, to our contactSubmit.php script, which handles the submission of the new email to a database

$(document).ready(function() {

$(“#reg-button”).click(function(){
$(“#topForm”).submit();
});

$(“#topForm”).submit(function(event) {
event.preventDefault();
var $form = $( this ),
emailAddress = $form.find( ‘input[name="emailAddress"]‘ ).val(),
token = $form.find( ‘input[name="token"]‘ ).val(),
formaction = $form.attr( ‘action’ );

if($.validation.email(emailAddress)){
$( “#reg-description” ).html (“submitting…”);
$.ajax({
type: “POST”,
url: “contactSubmit.php”,
data: “firstName=” + firstName + “&lastName=” + lastName + “&emailAddress=” + emailAddress + “&token=” + token,
success: function(){
$( “#reg-description” ).html( “Thank you. You have been registered.” );
},
});
}
else{
$( “#emailAddress” ).val (“Please enter a valid email address”);
}
});
});

// contactSubmit.php:  receive the email, check the token, clean the data, pass to a database layer API

<? php
session_start();

set_include_path(‘DBlayerClass’);
require_once(‘EmailContact.php’);

if (isset($_SESSION['token']) && $_POST['token'] == $_SESSION['token']){
if(isset($_POST['emailAddress'])){
$emailAddress = htmlentities($_POST['emailAddress']);
} else { $emailAddress = ”; }

$contact = new EmailContact($emailAddress)

try {
$contact->save();
} catch (Exception $e) {
; // do something
}
//$retrieve = new EmailContact($emailAddress);
//$retrieve->load();
//print_r($retrieve);
//}
? >

Post via jQuery across domains (in this case to a Zend Controller and subsequent view) and display the results

Thursday, August 25th, 2011

the jQuery posting page, in brief:

<document…>
<head>
<script src=”http://code.jquery.com/jquery-1.5.js”></script>
</head>
<body>
<form id=”enewsform” name=”enewsform” action=”http://componentserver/controllername/post” method=”post”>
<input type=”text” name=”email” id=”email” value=”<?php echo $_REQUEST['email']; ?>” />
<a id=”submitsubscribe” title=”Subscribe” href=”javascript:{}” onclick=”return false;”>sign up</a>
</form>
<script src=”http://components.someserver.com/js/jquery.validation.js” type=”text/javascript”></script>
<script>
$(‘#submitsubscribe’).click(function(){
$(“#enewsform”).submit();
});

$(“#enewsform”).submit(function(event) {
event.preventDefault();
$( “#result” ).html (“submitting…”);
var $form = $( this ),
term = $form.find( ‘input[name="email"]‘ ).val(),
url = $form.attr( ‘action’ );

if($.validation.email(term)){
$.getJSON(url + “?email=” + term + “&jsoncallback=?”, function(data){
$( “#result” ).html( data['error'] );
if(data['error']== “errormatchingstring”){
$( “#result” ).html( “Seems like it worked” );
}else{ $( “#result” ).html(data['error']); }
});
}
else{ $( “#result” ).html (“Please enter your email address”); }

});
</script>

<div id=”result”></div>

// the component Zend controller in question receives the post, does whatever it does, renders its view, and we access the results from the view (don’t forget to pass data to the view with something like this:
$this-> view-> viewresult = $this-> viewData;)

<? php
echo $_REQUEST['jsoncallback'] . ‘(‘ . json_encode($this-> viewresult) . ‘)’;
? >

Persistence of GET URL parameters passed to WordPress site with Permalink clean pretty URLs turned on

Friday, April 15th, 2011

Here’s the scenario:
We have a store site.
The store site has a link on its homepage that leads to a wordpress site.
When a visitor clicks the link,
we want a url parameter that is passed with the visitor to the wordpress site
to remain in the url
so that when/if they click a link in the wordpress site that leads back to the store,
the parameter comes back with them.

Normally, you’d simply add a $_GET in your theme somewhere,
assign it to a variable,
and then append that onto any links that are headed back to the store site.

The trouble, though, is that when WordPress’
clean and pretty Permalinks URL function is active,
it takes over, and forwards (via htaccess, wordpress base code functions, or otherwise),
at which point in time data passed over is lost.

Solution:
In WordPress’ index.php (the very first root directory index),
include another file.

include(‘passback.php’);

In that file, instantiate SERVER SESSIONS, and save received parameters.
Something like this (of course looping through the REQUEST parameters dynamically would be smarter, but for simplicities sake, let’s just target a particular parameter):

session_start();
if($_GET['persistme'] != ”){ $passit = $_GET['persistme']; }
if(!isset($_SESSION['passback'])){ $_SESSION['passback'] = $passit; }

Now you can include your passback retrieval class in your theme, grab the parameter, and use your JavaScript library of choice to loop through all the links in the page and append it onto them.
Something like this (Prototype, and only appending links that already have a ? and thus other parameters they’re sending back…):

document.observe(‘dom:loaded’, function() {
$$(“a”).each(function(a) {
newhref = a.href;
if(newhref.include(‘?’){
newhref = a.href + “?rememberme=<?php echo $passit; ?>”;
a.writeAttribute(‘href’, newhref);
}
});
});

jQuery json crossdomain example

Tuesday, March 22nd, 2011

<script src=”http://code.jquery.com/jquery-1.5.js”></script>

<script>

$(“#enews_signup_form”).submit(function(event) {

// stop form from submitting normally
event.preventDefault();

$( “#result” ).html (“submitting…”);

var $form = $( this ),
term = $form.find( ‘input[name="enews_email"]‘ ).val(),
url = $form.attr( ‘action’ );

$.getJSON(url + “?email=” + term + “&jsoncallback=?”, function(data){
$( “#result” ).html( data['error'] );
});

});

</script>

<? php

echo $_REQUEST['jsoncallback'] . ‘(‘ . json_encode($this-> viewresult) . ‘)’;

?>