Against All Odds - Ajax

Onclick event for facebox jQuery

Tue, 14 Sep 2010 17:24:00 -0700

Generally, facebox jQuery support for hyperlink attribute only. Using hyperlink for pop-up facebox dialog box isn't cool enough. That's why I'm about to edit facebox jQuery javascript file for button onclick event. Follows are my change-log for facebox javascript file. index.html

$(document).ready(function() { $('#faceboxlink').facebox(); }); function show_facebox(getlink) { jQuery.facebox({ajax: getlink}); }

Download : facebox.js You might see it's very good for all project which you want in to show facebox pop-up dialog for onclick event.

Upload files with jQuery, Ajax and PHP.

Fri, 27 Aug 2010 06:32:00 -0700

In these days jQuery and Ajax are so popular in web development. One of my clients told me that, they want to upload multiple files without clicking button. That's why I have had an idea to integrate jQuery, Ajax and PHP. Download jQuery Here Download ajax jQuery plugin Create Upload Button like


	Upload

Write following simple coding in your upload form


// You must create it only after the DOM is ready for manipulations
// Use $(document).ready for jquery
// document.observe("dom:loaded" for prototype
new AjaxUpload('upload_button_id', {action: 'upload.php'});

Configure at Ajax Upload


new AjaxUpload('#upload_button_id', {
  // Location of the server-side upload script
  action: 'upload.php',
  // File upload name
  name: 'userfile',
  // Additional data to send
  data: {
    example_key1 : 'example_value',
    example_key2 : 'example_value2'
  },
  // Submit file after selection
  autoSubmit: true,
  // The type of data that you're expecting back from the server.
  // Html (text) and xml are detected automatically.
  // Only useful when you are using json data as a response.
  // Set to "json" in that case.
  responseType: false,
  // Fired after the file is selected
  // Useful when autoSubmit is disabled
  // You can return false to cancel upload
  // @param file basename of uploaded file
  // @param extension of that file
  onChange: function(file, extension){},
  // Fired before the file is uploaded
  // You can return false to cancel upload
  // @param file basename of uploaded file
  // @param extension of that file
  onSubmit: function(file, extension) {},
  // Fired when file upload is completed
  // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
  // @param file basename of uploaded file
  // @param response server response
  onComplete: function(file, response) {}
});

Add following coding in your upload form

//You can use these methods, to configure AJAX Upload later.
var upload = new AjaxUpload('#div_id', 1, {action: 'upload.php'});
//For example when user selects something, set some data
upload.setData({'example_key': 'value'});

//Or you can use these methods directly inside event function
new AjaxUpload('div_id', 1,  {
action: 'upload.php', 1, 
onSubmit: function() {
// allow only 1 upload
this.disable();
}
});
});

Here is server-side script, upload.php

move_uploaded_file($_FILES["file"]["tmp_name"],
"upload/" . $_FILES["file"]["name"]);

Best Credit To : http://valums.com/ajax-upload

Ajax submitForm

Sun, 13 Jun 2010 06:32:00 -0700

As you know, there are a lot of Ajax UI in CF8. Among them, I love to use Coldfusion.Ajax.submitForm function. When I was on cfmx7, I need to use classic ajax coding or jQuery coding for submitting form. Once I'm on cf8, adobe support me to develop ajax form submit function in just 5 mins. That's why I love CFML. Ok, let's go how to use : If you want to develop with Ajax function, you need to put cfajaximport tag at the top of your page. index.cfm



    
        
         
			function submitForm() { 
			ColdFusion.Ajax.submitForm('myform', 'formAction.cfm', callback, errorHandler); 
			} 
			function callback(text) { 
			document.getElementById("divShowMsg").innerHTML = text; 
			} 
			function errorHandler(code, msg) { alert("Error " + code + ": " + msg); } 
		 
    
    
        
        
            Enter your email:

for callback function It's built-in function of ajaxformsubmit and which check whether your data has been successfully reach or not. If reach, you can show any message within this scope. It always return string value. formAction.cfm



    
            Your email(#form.txtEmail#) has been successfully subscribed.
    

    Please enter email address.

Trade Data Reporting Systems

Sat, 12 Jun 2010 06:32:00 -0700

Trade data, one of my reporting systems project make me proud. Because I could do what I want to use cool tools in this project. I've added Graph features and temp tables of CFMX7. Our client can view monthly reports, yearly report, comparison reports, by commodity reports, badget year reports, by country reports of Export and Import product. It's very good project for our client who is runing as Stock control Systems. Systems : CFMX7, SQL 2005, Ajax and javascript.

CFDiv and CFLayout

Wed, 23 Dec 2009 06:32:00 -0700

Today, I have some free spare time to learn Coldfusion Tags in my office. That's why I decided to learn CFDiv and CFLayout. CFDiv is useful for Ajax manipulation and CFLayout is for content display. That's I'll integrate these two tags.

index.cfm

divsource.cfm

#url.InputText# No input

It stands for every messages will be displayed in the right layout whenever type in the left layout.

Coldfusion Webservices and JSON

Thu, 26 Nov 2009 06:32:00 -0700

I've recently tested CF web services and JSON. The outcome is incredible. Because, I'm very new to JSON and CF web services. That's why I'm very proud of myself what I did. That's what I want to do in Myanmar about synchronization two web applications over the internet for sharing data. In these testing, I've also used Coldfusion ajax submitForm. In briefly, when user type, then will be displayed JSON format. I've got some JSON knowledge from Ben Nadel blog. getJSON.cfc get.cfm function submitForm() { ColdFusion.Ajax.submitForm('myform', 1, 'formAction.cfm', 1, callback, errorHandler); } function callback(text) { document.getElementById("divShowMsg").innerHTML = text; } function errorHandler(code, msg) { alert("Error!!! " + code + ": " + msg); }

formAction.cfm




Untitled

JSON (JavaScript Object Notation)

Fri, 09 Oct 2009 06:32:00 -0700

JSON, called Javascript Object Notation is being used for integrating computer systems based on XML and WDDX. If using JSON with CFM, you don't need to do much because CFC can output json data.









Results of search for "ColdFusion 8"

There were #myJSON.ResultSet.totalResultsAvailable# Entries.

Here are the first #myJSON.ResultSet.totalResultsReturned#.


	
		#myJSON.ResultSet.Result[i].Title#
	
	#myJSON.ResultSet.Result[i].Summary#

Ajax upload with ColdFusion

Sun, 26 Apr 2009 06:32:00 -0700

I've once wrote file upload with flash. But I'm thinking of the weak point of this program would be alright if users don't have flash player as well as using with GuestAccount. That's I need to consider how to solve this problem and want to do file upload with Ajax. Eventually, I can do it. Here is coding. index.cfm




AJAX File Uploader







Loading...




File:

Upload.cfm





window.top.window.stopUpload('1');

How? It's easy thought, isn't it? Best Credit to : http://www.ajaxf1.com/download.html?item=12

File upload with ColdFusion Flash Form

Wed, 11 Mar 2009 06:32:00 -0700

I was thinking about the benefit of uploading files with flash form can reduce bandwidth than using HTML file upload tag. Because upload files with flash form may have risk about the users which don't have flash player. Anyhow, I can say that uploading flash form is more faster than others like ajaxupload, java applet and so on. In this function, we can dynamically check the size of uploaded file and file type as soon as users browse. And, we can show dynamically uploading progress to user how much his/her file is being uploaded on our server. I can say uploading file with flash form have less risk than using html form upload tag. Big Credit to : http://www.asfusion.com/blog/entry/file-upload-with-coldfusion-flash-forms