Against All Odds : Ajax

Onclick event for facebox jQuery

Sep 14

posted by Pyae Phyoe Shein in jQuery, Ajax, Javascript | 0 Comments

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

view plain print about

1$(document).ready(function() {
2$('#faceboxlink').facebox();
3});
4function show_facebox(getlink)
5{
6jQuery.facebox({ajax: getlink});
7}

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.

This entry was posted on September 14, 2010 at 5:24 PM and has received 1862 views. There are currently 0 comments. Print this entry. Download attachment.

Upload files with jQuery, Ajax and PHP.

Aug 27

posted by Pyae Phyoe Shein in PHP, jQuery, Ajax, Javascript | 0 Comments

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

view plain print about

1<div id="upload_button">Upload</div>

Write following simple coding in your upload form

view plain print about

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

Configure at Ajax Upload

view plain print about

1new AjaxUpload('#upload_button_id', {
2 // Location of the server-side upload script
3 action: 'upload.php',
4 // File upload name
5 name: 'userfile',
6 // Additional data to send
7 data: {
8 example_key1 : 'example_value',
9 example_key2 : 'example_value2'
10 },
11 // Submit file after selection
12 autoSubmit: true,
13 // The type of data that you're expecting back from the server.
14 // Html (text) and xml are detected automatically.
15 // Only useful when you are using json data as a response.
16 // Set to "json" in that case.
17 responseType: false,
18 // Fired after the file is selected
19 // Useful when autoSubmit is disabled
20 // You can return false to cancel upload
21 // @param file basename of uploaded file
22 // @param extension of that file
23 onChange: function(file, extension){},
24 // Fired before the file is uploaded
25 // You can return false to cancel upload
26 // @param file basename of uploaded file
27 // @param extension of that file
28 onSubmit: function(file, extension) {},
29 // Fired when file upload is completed
30 // WARNING! DO NOT USE "FALSE" STRING AS A RESPONSE!
31 // @param file basename of uploaded file
32 // @param response server response
33 onComplete: function(file, response) {}
34});

Add following coding in your upload form

view plain print about

1//You can use these methods, to configure AJAX Upload later.
2var upload = new AjaxUpload('#div_id', 1, {action: 'upload.php'});
3//For example when user selects something, set some data
4upload.setData({'example_key': 'value'});
5
6//Or you can use these methods directly inside event function
7new AjaxUpload('div_id', 1, {
8action: 'upload.php', 1,
9onSubmit: function() {
10// allow only 1 upload
11this.disable();
12}
13});
14});

Here is server-side script, upload.php

view plain print about

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

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

This entry was posted on August 27, 2010 at 6:32 AM and has received 1187 views. There are currently 0 comments. Print this entry.

Ajax submitForm

Jun 13

posted by Pyae Phyoe Shein in Ajax, CF Function, Coldfusion, CF Tag | 0 Comments

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

view plain print about

1<html>
2 <head>
3 <cfajaximport>
4 <invalidTag type="text/javascript">
5            function submitForm() {
6            ColdFusion.Ajax.submitForm('myform', 'formAction.cfm', callback, errorHandler);
7            }
8            function callback(text) {
9            document.getElementById("divShowMsg").innerHTML = text;
10            }
11            function errorHandler(code, msg) { alert("Error " + code + ": " + msg); }
12        </script>
13 </head>
14 <body>
15 <div id="divShowMsg"></div>
16 <cfform name="myform">
17 Enter your email:
18 <br>
19 <cfinput name="txtEmail" />
20 <cfinput name="btnSubmit" value="Submit" type="button" onclick="submitForm()" />
21 </cfform>
22 </body>
23</html>

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

view plain print about

1<cfif form.txtEmail NEQ "">
2 <cfoutput>
3 Your email(#form.txtEmail#) has been successfully subscribed.
4 </cfoutput>
5<cfelse>
6 Please enter email address.
7</cfif>

This entry was posted on June 13, 2010 at 6:32 AM and has received 1519 views. There are currently 0 comments. Print this entry.

Trade Data Reporting Systems

Jun 12

posted by Pyae Phyoe Shein in Project, Ajax, Coldfusion | 0 Comments

Trade Data

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.

This entry was posted on June 12, 2010 at 6:32 AM and has received 563 views. There are currently 0 comments. Print this entry.

CFDiv and CFLayout

Dec 23

posted by Pyae Phyoe Shein in jQuery, Ajax, CF Function, Coldfusion, Javascript, CF Tag | 2 Comments

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

view plain print about

1<cfform>
2    <cflayout name="outerlayout" type="vbox">
3    <cflayoutarea style="height:100%;">
4        <cflayout name="thelayout" type="border">
5            <cflayoutarea title="Left Panel" position="left" closable="true" collapsible="true" name="left" splitter="true" style="height:100%">
6                <cfinput name="tinput1" type="text">
7                <input type="button" value="Search">
8            </cflayoutarea>
9            <cflayoutarea position="center" style="height:100%">
10                <cfdiv bind="url:divsource.cfm?InputText={tinput1}" ID="theDiv" style="height:350"/>
11            </cflayoutarea>
12        </cflayout>
13        </cflayoutarea>
14    </cflayout>
15</cfform>

divsource.cfm

view plain print about

1<cfoutput>
2<cfif isdefined("url.InputText") AND url.InputText NEQ "">
3 #url.InputText#
4<cfelse>
5 No input
6</cfif>
7</cfoutput>

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

This entry was posted on December 23, 2009 at 6:32 AM and has received 1678 views. There are currently 2 comments. Print this entry.

Coldfusion Webservices and JSON

Nov 26

posted by Pyae Phyoe Shein in Ajax, CF Function, Coldfusion, jSON, WebServices, CF Tag | 2 Comments

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

view plain print about

1<cfcomponent output="false">
2<cffunction name="jsonData" access="remote" returntype="array" returnformat="json" output="false" hint="Return JSON Format Data">
3<cfargument name="Text" type="string" required="true">
4<cfset getJ = ArrayNew(1)>
5<cfloop from="1" to="#ListLen(Text, " ")#" index="i">
6<cfset getJ[i] = ListGetAt(Text, i, " ")>
7</cfloop>
8<cfreturn getJ>
9</cffunction>
10</cfcomponent>

get.cfm

view plain print about

1<html>
2<head>
3<cfajaximport>
4<invalidTag>
5function submitForm() {
6ColdFusion.Ajax.submitForm('myform', 1, 'formAction.cfm', 1, callback,
7errorHandler);
8}
9function callback(text)
10{
11document.getElementById("divShowMsg").innerHTML = text;
12}
13function errorHandler(code, msg)
14{
15alert("Error!!! " + code + ": " + msg);
16}
17</script>
18</head>
19<body>
20<div id="divShowMsg"></div>
21<cfform name="myform">
22<cfinput name="mytext1" size="50">
23<input type="Button" onclick="submitForm()" value="WebServices JSON ">
24</cfform>
25</body>
26</html>

formAction.cfm

view plain print about

1<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
2<html>
3<head>
4<title>Untitled</title>
5</head>
6<body>
7<cfinvoke webservice="http://localhost/webservices/getJSON.cfc?wsdl" method="jsonData" returnvariable="strg">
8<cfinvokeargument name="Text" value="#form.mytext1#" />
9</cfinvoke>
10<cfdump var="#strg#">
11</body>
12</html>

This entry was posted on November 26, 2009 at 6:32 AM and has received 2501 views. There are currently 2 comments. Print this entry.

JSON (JavaScript Object Notation)

Oct 9

posted by Pyae Phyoe Shein in jQuery, Ajax, Coldfusion, jSON, Javascript, CF Tag | 2 Comments

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.

view plain print about

1
2<cfhttp url='http://api.search.yahoo.com/WebSearchService/V1/webSearch?appid=YahooDemo&query="ColdFusion Ajax"&output=json'>
3
5<cfset myJSON=DeserializeJSON(#cfhttp.FileContent#)>
6
7<cfoutput>
8
9Results of search for "ColdFusion 8"
10
11There were #myJSON.ResultSet.totalResultsAvailable# Entries.
12
13Here are the first #myJSON.ResultSet.totalResultsReturned#.
14
15<cfloop index="i" from="1" to="#myJSON.ResultSet.totalResultsReturned#">
16    <a href="#myJSON.ResultSet.Result[i].URL#">
17        #myJSON.ResultSet.Result[i].Title#
18    </a>
19    #myJSON.ResultSet.Result[i].Summary#
20</cfloop>
21</cfoutput>

Ajax upload with ColdFusion

Apr 26

posted by Pyae Phyoe Shein in Ajax, CF Function, Coldfusion, CF Tag | 0 Comments

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

view plain print about

1<html>
2<head>
3<title>AJAX File Uploader</title>
4<invalidTag language="javascript" type="text/javascript">
5
26</script>
27</head>
28
29<body>
30<form action="upload.cfm" method="post" enctype="multipart/form-data" target="upload_target" onsubmit="startUpload();" >
31<p id="f1_upload_process">Loading...<br/><img src="loader.gif" /><br/></p>
32<p id="f1_upload_form" align="center"><br/>
33<label>File:
34<input name="myfile" type="file" size="30" />
35</label>
36<label>
37<input type="submit" name="submitBtn" value="Upload" />
38</label>
39</p>
40
41<invalidTag id="upload_target" name="upload_target" src="#" style="width:0;height:0;border:0px solid #fff;"></iframe>
42</form>
43</body>

Upload.cfm

view plain print about

1<cffile action="UPLOAD" filefield="myfile" destination="D:/test/ajaxupload/files/" nameconflict="MAKEUNIQUE">
2<cfset myfile = file.serverfile>
3
4<invalidTag language="javascript" type="text/javascript">window.top.window.stopUpload('1');</script>

How? It's easy thought, isn't it?

Best Credit to : http://www.ajaxf1.com/download.html?item=12

This entry was posted on April 26, 2009 at 6:32 AM and has received 1098 views. There are currently 0 comments. Print this entry.

File upload with ColdFusion Flash Form

Mar 11

posted by Pyae Phyoe Shein in Ajax, CF Function, Coldfusion, CF Tag | 0 Comments

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

This entry was posted on March 11, 2009 at 6:32 AM and has received 1100 views. There are currently 0 comments. Print this entry. Download attachment.

Onclick event for facebox jQuery

Upload files with jQuery, Ajax and PHP.

Ajax submitForm

Trade Data Reporting Systems

CFDiv and CFLayout

Coldfusion Webservices and JSON

JSON (JavaScript Object Notation)

Ajax upload with ColdFusion

File upload with ColdFusion Flash Form

Follow @ppshein

Archives by Month

Recent Comments

Recent Entries

Archives by Subject