Bit of a problem with the following error message using jquery 1.6.4 and jquerymobile version 1.2.0:

Uncaught TypeError: Cannot call method 'format' of null

The above error does not occur when navigating to a specific page on first load. It only seems to happen once I navigate from my main menu to another page then back to my main menu and then on to a different page.

I open a popup via jquery by hijacking a button click event (I needed to run some code prior to the popup opening which refreshes a list within it).

The issue I have is my popup seems to open up shifted to the right hand side of the screen. If I click away from this so the popup closes and then re-open it the popup opens as expected in the center of the window.

Has anyone seen this happen before and can suggest why this may be happening? I am simply calling:

I was wondering if someone can help me with some changes to a popup in jquerymobile. I am looking to extend the default width of the popup so I can use CSS3 column count.

How would I go about setting for instance a rule of 80% width for the popup. I have a list which is currently quite long and extends down the page. I would like to add the extra width to fit the options all on screen within the popup.

I have been messing around with tolerance option but this has not given me the desired result.

I am using a razor template so I can reduce the amount of clutter in my mvc views when working on code. I have created "section" which will render as the seperate pages required for my mobile pages as follows:

<div data-role="page" id="page2">

<div data-role="header">

@if (IsSectionDefined("Header2"))

{

@RenderSection("Header2")

}

else

{

}

</div>

<div data-role="content">

@if (IsSectionDefined("Content2"))

{

@RenderSection("Content2")

}

else

{

}

</div>

<div data-role="footer">

@if (IsSectionDefined("Footer2"))

{

@RenderSection("Footer2")

}

else

{

}

</div>

I use the same template as above for up to 3 pages.

My issue at the moment is I have assigned some code to my page 2 using:

When I click the link "TEST" the page loads however there is no content displayed.

If I go back to my initial page and refresh the page then click the "TEST" button my listview is displayed.

I have tried to hook in to the "TEST" button click event and run the following:

$("#testbutton").click(function(){

$('#page2').trigger('pagecreate');

$("#machinelist").listview('refresh');

alert("test");

});

But this does not seem to make any difference.

Any ideas?

I can see the data is all loaded in correctly when I view the html source of my first page which also contains the html for the second page. It seems to be because razor is injecting the data in to page 2 after the page 1 is loaded.

I am currently in my first week of trying out jquery and I have hit a stumbling block with form validation.

Whenever I submit my page for the first time using the jquery.validation plugin the correct labels appear but the focus of the page does not change to the first error. If I submit the form again it works correctly and continues to do so.

Any ideas why this is not working correctly first time? My full code is below: