jQuery Forum

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

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 have also tried adding in data-position-to:

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.

Thanks for any help,

Chris

For some reason all of my list views whether rendered programatically or just through adding the elements in straight HTML seem to have a double border. 

It seems as though there is a slight gap which is causing the border bottom and border top to appear as a 2px width border instead of 1px.

Any ideas on how to resolve this?

Thanks

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:

2.    <div data-role="page" id="page2">
3.             <div data-role="header">
4.               @if (IsSectionDefined("Header2"))
5.                 {
6.                     @RenderSection("Header2")
7.                 }
8.                 else
9.                 {
10.                 }
11.             </div>
12.           
13.             <div data-role="content">
14.                 @if (IsSectionDefined("Content2"))
15.                 {
16.                     @RenderSection("Content2")
17.                 }
18.                 else
19.                 {
20.                 }
21.             </div>
22.            
23.             <div data-role="footer">
24.               @if (IsSectionDefined("Footer2"))
25.                 {
26.                     @RenderSection("Footer2")
27.                 }
28.                 else
29.                 {
30.                 }
31.             </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:

2. @section Content2{
3.             <div id="machinesearch" class="ui-content">
4.                 <ul id="machinelist" data-autodividers="true" data-theme="d" data-divider-theme="a" data-filter="true" data-role="listview">
5.                     @foreach (var item in Model.Plants)
6.                     {
7.                         <li><a href="#page1" onclick="javscript:MachineSet($(this).find('input').val(),$(this).text());">@item.Asset_Descriptor<input id="Sap_ID" type="hidden" value="@item.Asset_SAP_ID"/></a></li>      
8.                     }
9.                 </ul>
10.             </div>
11.     }

And my link to show this page is:

1.     <a id="testbutton" href="#page2" data-role="button">TEST</a>

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:

2.     $("#testbutton").click(function(){
3. 
   
4.     $('#page2').trigger('pagecreate');
5.     $("#machinelist").listview('refresh');
6.     alert("test");
7. 
   
8.     });

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 trying to select todays date from multiple option boxes which are split as "day" "month" "year". I have tried to do this using the following code:

2. var date = new Date(); 
3.      var d = date.getDate(); 
4.      var today_date = (d < 10) ? '0' + d : d; 
5.      var m = date.getMonth() + 1; 
6.      var today_month = (m < 10) ? '0' + m : m;
7.      var yy = date.getYear(); 
8.      var today_year = (yy < 1000) ? yy + 1900 : yy;
9.      
10.    $("select-choice-day").val(today_date);

This is within document.ready but does not select the date the option remains on the non-valued option "Day". My select code is below:

2.  <fieldset data-role="controlgroup" data-type="horizontal" data-inline="true">
3.                 <select name="select-choice-day" id="select-choice-day" class="required">
4.                   <option value="">Day</option>
5.                   <option value="01">1</option>
6.                   <option value="02">2</option>
7.                   <option value="03">3</option>
8.                   <option value="04">4</option>
9.                   <option value="05">5</option>
10.                   <option value="06">6</option>
11.                   <option value="07">7</option>
12.                   <option value="08">8</option>
13.                   <option value="09">9</option>
14.                   <option value="10">10</option>
15.                   <option value="11">11</option>
16.                   <option value="12">12</option>
17.                   <option value="13">13</option>
18.                   <option value="14">14</option>
19.                   <option value="15">15</option>
20.                   <option value="16">16</option>
21.                   <option value="17">17</option>
22.                   <option value="18">18</option>
23.                   <option value="19">19</option>
24.                   <option value="20">20</option>
25.                   <option value="21">21</option>
26.                   <option value="22">22</option>
27.                   <option value="23">23</option>
28.                   <option value="24">24</option>
29.                   <option value="25">25</option>
30.                   <option value="26">26</option>
31.                   <option value="27">27</option>
32.                   <option value="28">28</option>
33.                   <option value="29">29</option>
34.                   <option value="30">30</option>
35.                   <option value="31">31</option>
36.                 </select>
37.                 <select name="select-choice-month" id="select-choice-month" class="required">
38.                   <option value="">Month</option>
39.                   <option value="01">January</option>
40.                   <option value="02">February</option>
41.                   <option value="03">March</option>
42.                   <option value="04">April</option>
43.                   <option value="05">May</option>
44.                   <option value="06">June</option>
45.                   <option value="07">July</option>
46.                   <option value="08">August</option>
47.                   <option value="09">September</option>
48.                   <option value="10">October</option>
49.                   <option value="11">November</option>
50.                   <option value="12">December</option>
51.                 </select>
52.                 <select name="select-choice-year" id="select-choice-year" class="required">
53.                   <option value="">Year</option>
54.                   <option value="2012">2012</option>
55.                   <option value="2013">2013</option>
56.                   <option value="2014">2014</option>
57.                   <option value="2015">2015</option>
58.                   <option value="2016">2016</option>
59.                   <option value="2017">2017</option>
60.                   <option value="2018">2018</option>
61.                   <option value="2019">2019</option>
62.                   <option value="2020">2020</option>
63.                 </select>
64.               </fieldset>

Any idea on why this might not be working correctly?

I use the following validation:

2. $("#form1").validate({
3.       debug: true,
4.       rules: {
5.         
6.         email1: {
7.           required: true,
8.           email: true,
9.           depends: function() {
10.             return $("#slider").val == '1'}
11.       
12.       }
13.       },
14.       
15.     submitHandler: function() { alert("Submitted!") }
16.     });

This simply checks whether the slider is set to on and if so then an email address is required and must be valid.

The validation works perfectly fine for the required element however when I type my valid email address I get the following errors:

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: