Skip to main content

Mobilesite: Thomas H. Heist Insurance Agency

Let me share my experience of creating a mobile-site using using jQuery Mobile for one of my client heistinsurance.com.

They already have the website for desktops. It is based on WordPress. Now they want a mobile-site for the same. And they choose to use the same database for the form submission, so that there will be a single point of reference.

Though it was a bit tricky but somehow I had successfully completed the project. Here is the snapshot.

Link: http://heistinsurance.com/m/

Since I was using jquery-mobile for mobilesite development but the main website was based on WordPress  So it became very difficult to merge these technologies & platforms. The jquery-mobile is a JavaScript based client-side framework while WordPress is php based server-side framework.

So the major challenge I had faced was to merge these technologies.

One way is to write a script that can insert the submitted form-data directly into the database. But it is not that easy in WordPress because the forms were made dynamically, so if there is 5 fields in a form then after submission you will see the 5 entry in the database that will contain 1 field entry per row. Since it is sharing a common id as a key to extract it back. It seems too complicated to make that plugin which can bypass the flow. As I was not in a mood to change the server-side scripts, so I chose to hack around it.

Then, I thought if there is a form on jquery-mobile then it can submit the data to the database via the main website form. So I had extracted the link where the main website form is submitting data, and modified that relative link into absolute one and put it in my jquery-mobile form. Then tested it ... voila ... it worked! The only hitch was that after submission it re-directs the mobile-site to the website. Now I need to stop this redirection. Then, AJAX came to me as life-saver. Though finding a way to use it perfectly was too tricky. But after banging my head for few days or may be a week got me through it. I swear, this was the biggest challenge in this project. But as I got through the form submission, the validation was also happening for free. It is happening because the serve-side script was handling that. So now I have to just catch those messages and put them at there respective places. That's it!

Now this mobile-site is running successfully at http://heistinsurance.com/m/.

Comments

Post a Comment

Popular posts from this blog

Unlock protected blocks in Siemens SIMATIC Step 7

Recently I'd been called by Hindalco's Fabrication Plant division to unlock the protected blocks in Siemens SIMATIC Step 7. They were in need to unlock those blocks since an year because of 1 million Rupees of loss per month. They want to re-program those blocks but it was locked by the man who'd done the setup. From the people working in that department, I came to know that they were trying to call that man (someone from Italy) right here but he's not coming. Actually, what he'd done was that he'd locked some of the blocks and deleted the source file. And Siemens didn't provide any feature to unlock. Department people also told me that even the people working in Siemens don't know how to do it. Being a software engineer I know that any thing can be reverse engineered. So I took up the challenge. How did I unlocked the blocks? The first thing I'd done was searched about this software at Google and read about what is this software all about. Aft...
50 comments
Read more

JS: The complete code example of Crypto.js (DES)

For one of the project I was trying to use crypto.js but I found that the Quick-start Guide have some deficiency in terms of library usage. So I am writing it here as a useful note for memory recap. <script src="http://crypto-js.googlecode.com/svn/tags/3.1.2/build/rollups/tripledes.js"></script> <script> var encrypted = CryptoJS.DES.encrypt("The secret message", "secret_key"); var e_msg = encrypted.toString(); console.log(e_msg); var decrypted = CryptoJS.DES.decrypt(e_msg, "secret_key"); var d_msg = decrypted.toString(CryptoJS.enc.Utf8); console.log(d_msg); </script>
4 comments
Read more

Encode or decode date in 3 characters

I have developed a new way to encode/decode dates within 3 characters by using base-36 format. What is a base 36 format? Base 36 or hexatridecimal is a positional numeral system using 36 as the radix. The choice of 36 is convenient in that the digits can be represented using the Arabic numerals 0-9 and the Latin letters A-Z. In simple language, base-36 format refers to series of 0-9 followed by A-Z characters, i.e., 0123456789ABCDEFGHIJKLMNOPQRSTUVWXYZ; where each character refers to the position index in series. The concept can also be represents as shown in the below table Series Character Series Character Series Character Series Character 0 0 10 A 20 K 30 U 1 1 11 B 21 L 31 V 2 2 12 C 22 M 32 W 3 3 13 D 23 N 33 X 4 4 14 E 24 O 34 Y 5 5 15 F 25 P ...
Post a Comment
Read more