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.
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/.
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