Category Archives: javascript

jQuery Mobile experience report

I am currently working on a mobile-optimised web app and have been doing so for the last month and a half. In order to get widgets like sliding panels, searchable drop-downs etc for free, we started looking for a JavaScript framework that would make our development go faster.

I evaluated, rather hastily might I add, jQM (jQuery Mobile), YUI and Sencha Touch and found that jQM seemed to hit the sweet spot of giving us a lot of functionality for free but without being very invasive. Other people reported that for e.g. Sencha you need to accept a different way of writing your markup, whereas working with jQM should feel more like your are just enriching your HTML.

Enriching your DOM

What I didn’t understand until later was just how must extra stuff jQM added, it dynamically inserts a lot of classes and divs in your HTML (n.b. I intuitively FEEL like this is what happens after using it for a few weeks, but when I inspected my HTML to find good examples of this I didn’t find anything horrendous).

There are advantages to this approach; sites work without JavaScript and you write standard HTML. But the major disadvantage is that it takes a lot of mental effort to reconcile what HTML you had written and what HTML you see in the browser inspector when trying to understand why the heck something looks the way it does. And you need to fix it, which brings be on to my next point.

So much cascading

We have constantly felt the need to write ugly CSS hacks, like very chatty/aggressive selectors to get around the jQM selectors on the elements that it adds to the DOM. I didn’t want us to start modifying the jQM stylesheets themselves, since that would make upgrading to a newer version much harder. But after spending too much time on writing said hacks, we gave up and are now making changes directly in jquery.mobile.css.

To conclude

I would absolutely use jQM on a project where the mobile website’s design deviate very little from the examples you can see on demos.jquerymobile.com. When speaking to our designer, he mentioned that other teams he had worked with echoed this statement.

If I was to work on a project with a more customised look and feel, I’d probably settle on using small plugins and/or write my own instead. I believe that this would have made us move faster on this particular project, which used a bunch of fancy solutions for how to fill out forms etc.

Allowing web editors to add javascript in EPiServer

I haven’t got much to do right now, except for some really small and easy EPiServer thingees. This is one of them:

The customer wanted to allow the web editors to add javascript in the Edit Mode that was then included in the <head> of the page. Easy to do.

1. Add the following code to the header.ascx file:
<%=GetJavaScript()%>

2. Then put the following method in the code-behind file:
protected string GetJavaScript()
{
if(CurrentPage.Property.Exists("Javascript"))
{
return CurrentPage.Property["Javascript"].ToString();
}
else
{
return String.Empty;
}
}

3. Add an XHTML property called “Javascript” to any pages where you wish to have javascript.

4. Write/paste the javascript in the text box for this property. However, make sure that you paste it in the HTML edit mode, not ordinary text mode. Otherwise EPiServer will just reformat your javascript to html, which isn’t pretty.

Submitting the same InfoPath form multiple times to the same document library in SharePoint

Long title, eh?

My problem was to do just the above, i.e. I had to name the filled out forms with a date and time marker. Because of that, when someone changed the contents of the form, a new one was created with the same name except for the date and time, where as I wanted it to amend the existing file but keep the original name.

I noticed on Google Groups that someone had a similar problem, but the solution wasn’t explained in detail (and since I’m a newbie on InfoPath 2003, it was a little challenge).

Anyway, here’s how I did it:

1. First I needed to do this in javascript, since the default submitting options didn’t allow this behaviour. On the Tools menu, I chose Submitting Forms and then in the Submitting Forms dialog box, clicked Enable Submit. In the Submit box, I clicked Submit Using Custom Script. Also enabled Open Microsoft Script Editor, and then I clicked OK. The Microsoft Script Editor unveiled to me for the first time, with a new function called function XDocument::OnSubmitRequest(eventObj) in place.

2. I went back to the (Design) template in InfoPath and added a textbox controller at the bottom. I named it filename, set the default value to “0” (or whatever), and then went back to the script editor.

3. In the OnSubmitRequest function I added the following code to read the field value from the filename textbox, and if it is zero (which it will be the first time the form is used) a conditional statement that creates a new filename (plus it writes to the new/old file in the sharepoint forms library):


var blnSubmitSuccess = false;
var strPath = "http://servername/sites/sitename/projectname/formslibraryname/"; var strFilename = XDocument.DOM.selectSingleNode("//my:filename").text;if (strFilename == "0")
 {
  strFilename = ...  // Insert code here to generate a filename of your liking
  XDocument.DOM.selectSingleNode("//my:filename").text = strFilename;
 }
var strUrl = strPath + strFilename;

// Submit the form to the form library.

var objXmlHttp = new ActiveXObject("MSXML2.XMLHTTP.5.0");

try
{
  objXmlHttp.Open("PUT", strUrl, false);
  objXmlHttp.Send(XDocument.DOM.xml);
}
catch (e)
{
  XDocument.UI.Alert("Couldn't create file in SharePoint library due to the following error.nn"
  + e.number + " - " + e.description);
}

// Status codes of 200 or 201 indicate that the form
// has been submitted successfully.

if (objXmlHttp.Status == 200 || objXmlHttp.Status == 201)
{
  blnSubmitSuccess = true;
}

return blnSubmitSuccess;

That’s it! Now you can change the form all you like, but it will be saved properly and keep it’s original name.