Practical Web Applications for Daily Living…
Custom Search
javascript / jquery
Manipulating Radio Buttons in Jquery
Sep 9th
$(‘input[name=packingdetail]‘).change(function(){
alert($(‘input[name=packingdetail]:checked’).val());
});
alert($(‘input[name=packingdetail]:checked’).val());
});
Code Igniter Ajax Form
Sep 5th
var $j = jQuery.noConflict();
$j(document).ready(function(){
$j("form").submit(function(e) {
e.preventDefault();
$j.post("/index.php/home/submitmessage", { firstname: $j("#firstname").val(), lastname: $j("#lastname").val(), address: $j("#address").val(), email: $j("#email").val(), confirmemail: $j("#confirmemail").val() , telephone: $j("#telephone").val(), mobile: $j("#mobile").val(),message: $j("#message").val() }, function (data) {
alert(data);
});
});
$j(document).ready(function(){
$j("form").submit(function(e) {
e.preventDefault();
$j.post("/index.php/home/submitmessage", { firstname: $j("#firstname").val(), lastname: $j("#lastname").val(), address: $j("#address").val(), email: $j("#email").val(), confirmemail: $j("#confirmemail").val() , telephone: $j("#telephone").val(), mobile: $j("#mobile").val(),message: $j("#message").val() }, function (data) {
alert(data);
});
});
});
in application/config/constant
// Define Ajax Request
define(‘IS_AJAX’, isset($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’);
define(‘IS_AJAX’, isset($_SERVER[‘HTTP_X_REQUESTED_WITH’]) && strtolower($_SERVER[‘HTTP_X_REQUESTED_WITH’]) == ‘xmlhttprequest’);
in the controller
function submitmessage()
{
//load form validation
$this->load->library(‘form_validation’);
{
//load form validation
$this->load->library(‘form_validation’);
//set form rules
$this->form_validation->set_rules(‘firstname’, ‘Firstname’, ‘required’);
$this->form_validation->set_rules(‘lastname’, ‘Lastname’, ‘required’);
$this->form_validation->set_rules(‘email’, ‘Email’, ‘required|valid_email|matches[confirmemail]‘);
$this->form_validation->set_rules(‘confirmemail’, ‘Confirm Email’, ‘required|valid_email’);
$this->form_validation->set_rules(‘address’, ‘Address’, ‘required’);
$this->form_validation->set_rules(‘message’, ‘Message’, ‘required’);
//run form validation
$success = $this->form_validation->run();
//set username variable
$firstname = $this->input->post(‘firstname’);
$lastname = $this->input->post(‘lastname’);
$email = $this->input->post(‘email’);
$address = $this->input->post(‘address’);
$message = $firstname." ".$lastname."\n";
$message .= "Tel:".$this->input->post(‘telephone’)." | Mobile:".$this->input->post(‘mobile’)."\n";
$message .= $address."\n";
$message .= $this->input->post(‘message’);
$msg = $message;
//if the validation was a success
if ((IS_AJAX && $success) || (!IS_AJAX && $success)) {
$this->load->library(‘email’);
$this->email->from($email, $firstname." ".$lastname);
$this->email->to(‘juliusbacosa@gmail.com’);
$this->email->subject(‘Message from Weekee’);
$this->email->message($msg);
$this->email->send();
echo "Congradulations {$firstname}, your form was accepted!";
}
//if validation failed
else { echo strip_tags(validation_errors()); }
}
Copy and Paste Now!!!!
JQUERY JSON Codeigniter
Sep 3rd
Jquery snippet to call a method with a json p=output
jQuery("#getjson").click(function(){
jQuery.getJSON("index.php/welcome/jjson/", function(json){
jQuery(‘#json’).html("<a href=’http://www.google.com’ target=’_blank’>" + json.glossary.title + "</a>:"+ json.glossary.GlossDiv.title + ":" + json.glossary.GlossDiv.GlossList.GlossEntry.ID);
});
});
jQuery.getJSON("index.php/welcome/jjson/", function(json){
jQuery(‘#json’).html("<a href=’http://www.google.com’ target=’_blank’>" + json.glossary.title + "</a>:"+ json.glossary.GlossDiv.title + ":" + json.glossary.GlossDiv.GlossList.GlossEntry.ID);
});
});
where
json.glossary.GlossDiv.title
is the from json = the variable containing the data
glossary = is an array item from the json data
Glossdiv… etc…
here is the controller that writes this data.
function jjson()
{
{
$results[‘jsonx’] = ‘{
"glossary": {
"title": "example glossary",
"GlossDiv": {
"title": "S",
"GlossList": {
"GlossEntry": {
"ID": "SGML",
"SortAs": "SGML",
"GlossTerm": "Standard Generalized Markup Language",
"Acronym": "SGML",
"Abbrev": "ISO 8879:1986",
"GlossDef": {
"para": "A meta-markup language, used to create markup languages such as DocBook.",
"GlossSeeAlso": ["GML", "XML"]
},
"GlossSee": "markup"
}
}
}
}
}’;
$this->load->view(‘Json_record’,$results);
}
then the view to render the data.
<?php print $jsonx; ?>
Jquery Developers Singapore or simply Jquery Singapore
Sep 2nd
Having a stable ecommerce system like magento in my arsenal which we are selling like hot cakes to SME companies here in singapore, I am now equipping and wants to go deeper to user interface design not only in Ecommerce website but for all types of applications residing in browsers. I am so sleepy right now so maybe I have to sleep, zend framework and code igniter? … well these looks will only be called if there is a need for very customize web app, magento and wordpress is feeding me right now and also joomla, I never knew joomla could generate so much food… well for asp.net mvc… I still love its potentials… but right now I am going towards opensource technologies so all the experience and disciplines I have in the .net world are still very useful especially the MVC pattern… For server side frameworks.. spring mvc, zend framework and code igniter… for front end? if I code the project from scrath then I will definitely choose jquery, but for out of the box web apps… I can take prototype and primitive javascript… scriptalicious? mmm I haven’t digested it yet… so got to sleep…. hoping for a jquery developer singapore show down….
Javascript Cute Exam
Sep 2nd
javascript exam result
Somebody called me today asking how good I am in Javascript, well… javascript is a side dish for server side programmers and especially for mash up developers like myself, so that question make me think.. yeahh.. how good am I in JavaScript, so I tried to find some online exam to test myself how good really am I in javascripting even though its not my primary weapon in web development industry… , fortunately… I did the exam well… so now I am looking for more advanced exam… 
Jquery Ajax Codeigniter
Sep 1st
In your View
<script src="http://code.jquery.com/jquery-1.4.2.min.js" type="text/javascript"></script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
jQuery(‘#x’).click(function(){
jQuery("#content").empty().html(‘<img src="http://juliusbacosachronicles.com/wp-content/themes/mystique/images/workstation.jpg" />’);
var num = 8;
jQuery(‘#content’).load("index.php/welcome/jajax/"+num,function(str){});
});
});
// Code that uses other library’s $ can follow here.
</script>
<script type="text/javascript">
$.noConflict();
jQuery(document).ready(function($) {
jQuery(‘#x’).click(function(){
jQuery("#content").empty().html(‘<img src="http://juliusbacosachronicles.com/wp-content/themes/mystique/images/workstation.jpg" />’);
var num = 8;
jQuery(‘#content’).load("index.php/welcome/jajax/"+num,function(str){});
});
});
// Code that uses other library’s $ can follow here.
</script>
then the div to hold the content
In your Controller
function Welcome()
{
parent::Controller();
$this->load->helper(‘url’);
}
function index()
{
$this->load->view(‘welcome_message’);
}
function jajax($num)
{
$results[‘xxx’] = $num*111;
$this->load->view(‘Ajax_record’,$results);
//get the record from the database
}
{
parent::Controller();
$this->load->helper(‘url’);
}
function index()
{
$this->load->view(‘welcome_message’);
}
function jajax($num)
{
$results[‘xxx’] = $num*111;
$this->load->view(‘Ajax_record’,$results);
//get the record from the database
}
then for the view Ajax_record
<?php print $xxx; ?>
Retrieving data from Model and accessing the database is still the same.
Byeee….
Changing Style of Parent Element of an HTML form input with Javascript
Aug 29th
The html input is a checkbox, I want to let the li be in highlight mode if the checkbox is checked.
<li>
<input type="checkbox" name="dishs[]" value="<?php echo $listdish[‘dish_name’]; ?>" onclick="checktolimit(this);"> <?php echo $listdish[‘dish_name’]; ?>
</li>
<input type="checkbox" name="dishs[]" value="<?php echo $listdish[‘dish_name’]; ?>" onclick="checktolimit(this);"> <?php echo $listdish[‘dish_name’]; ?>
</li>
The javascript for this is.
function checktolimit(obj){
if(obj.checked){
obj.parentNode.className=’selectactive’;
}else{
obj.parentNode.className=’selectnotactive’;
}
}
if(obj.checked){
obj.parentNode.className=’selectactive’;
}else{
obj.parentNode.className=’selectnotactive’;
}
}
where selectnotactive and selectactive are class names in your style.css or whatever you call it.
Sleeping in 3,2,1…
Code Igniter instead of Magento
Aug 18th
There are some situations where you need to take a cab instead of taking MRT. The other day, I decided to code an online transaction from scratch and it took me 20 hours to do the backend and frontend using code igniter instead of magento, If I use magento to implement it, the complexity in tweaking magento will add me more stress. Thank God to understanding of MVC pattern I rapidly develop the Application in no time at all compared to the complexity and stress magento is giving me everytime a client what some fancy functionality.
I’ve finally appreciated the value of Rapid Application Development tools like Code Igniter.
Color Switcher for Configurable Products, Magento, Prototype Javascript , Php
Jul 24th
I have successfully Implemented the color switcher in Magento,
Although this is not an extension yet you can follow the steps that I did to achieve the functionality.
If you want the implementation to be fast. Feel free to drop me an email, if I am not busy the implementation is free, but if I am loaded with projects then ofcourse 500usd for this custom module
anyway here we go.
1. create color thumbnails for your products (e.g. green, red, blue, yellow)
2. upload this thumbnails to your skin template (e.g. images/swatch/ ..the thumbnails… )
3. add the colors to your color attribute in the configurable products attribute set.
4. The Coding Part. Oh my God this is quite long…
4.1 In your configurable.phtml,
create filter to display the color thumbnails
<table>
<tr>
<td>
<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
<option><?php echo $_attribute->getLabel() ?></option>
</select>
</td>
<td>
<?php if($_attribute->getLabel() == "Color"){?>
<script language="javascript">
function createSwatch() {
var selObjg = document.getElementById(’attribute<?php echo $_attribute->getAttributeId() ?>‘);
var jswatchDiv = document.getElementById(’jswatch’);
var textx;
var A= selObjg.options, L= A.length;
for(var ix=1;ix<L;ix++){
jswatchDiv.innerHTML += ‘<img style="padding-left:5px;" src="/store/skin/frontend/default/modern/jimages/swatches/’ + A[ix].text + ‘.jpg" onclick="selectOption(’ + A[ix].value + ‘);
switchPrimary(\” + A[ix].text + ‘\’);" />’;
}
}window.onload=createSwatch;
function switchPrimary(numx){
var primeImage = document.getElementById(’img’+numx);
var primeLink = document.getElementById(’link’+numx);
$(’image’).src = primeLink.href; $(’imagex’).src = primeLink.href; return false;
}
function selectOption(num)
{
var selObj = document.getElementById(’attribute<?php echo $_attribute->getAttributeId() ?>‘);
var A= selObj.options, L= A.length;
while(L){
if (A[--L].value== num){
selObj.selectedIndex= L;
spConfig.atik(selObj);
L= 0;
}
}
activateSizeDDL();
}
</script>
<div id="jswatch" style="padding:5px;"></div>
<?php } ?>
</td>
</tr>
</table>
<tr>
<td>
<select name="super_attribute[<?php echo $_attribute->getAttributeId() ?>]" id="attribute<?php echo $_attribute->getAttributeId() ?>" class="required-entry super-attribute-select">
<option><?php echo $_attribute->getLabel() ?></option>
</select>
</td>
<td>
<?php if($_attribute->getLabel() == "Color"){?>
<script language="javascript">
function createSwatch() {
var selObjg = document.getElementById(’attribute<?php echo $_attribute->getAttributeId() ?>‘);
var jswatchDiv = document.getElementById(’jswatch’);
var textx;
var A= selObjg.options, L= A.length;
for(var ix=1;ix<L;ix++){
jswatchDiv.innerHTML += ‘<img style="padding-left:5px;" src="/store/skin/frontend/default/modern/jimages/swatches/’ + A[ix].text + ‘.jpg" onclick="selectOption(’ + A[ix].value + ‘);
switchPrimary(\” + A[ix].text + ‘\’);" />’;
}
}window.onload=createSwatch;
function switchPrimary(numx){
var primeImage = document.getElementById(’img’+numx);
var primeLink = document.getElementById(’link’+numx);
$(’image’).src = primeLink.href; $(’imagex’).src = primeLink.href; return false;
}
function selectOption(num)
{
var selObj = document.getElementById(’attribute<?php echo $_attribute->getAttributeId() ?>‘);
var A= selObj.options, L= A.length;
while(L){
if (A[--L].value== num){
selObj.selectedIndex= L;
spConfig.atik(selObj);
L= 0;
}
}
activateSizeDDL();
}
</script>
<div id="jswatch" style="padding:5px;"></div>
<?php } ?>
</td>
</tr>
</table>
spConfig.atik(selObj); this will be in product.js in js/varien/
was already declared inside configurable.phtml
in Product.js put this function inside the Product.Config.prototype
atik: function(element){
this.reloadOptionLabels(element);
if(element.value){
this.state[element.config.id] = element.value;
if(element.nextSetting){
element.nextSetting.disabled = false;
this.fillSelect(element.nextSetting);
this.resetChildren(element.nextSetting);
}
}
else {
this.resetChildren(element);
}
this.reloadPrice();
}
The Image swatcher script is done by a jquery swatcher plugin but you can search it yourself in the internet. I only post this solution since I can’t find any solution to what I want to achieve..
Hope this helps somebody OUTTTTHEEEERREE!!!!
