I am developing a mobile application with jQuery mobile and backbone. I have backbone model change event function, if any changes in the model, I simply destroy the whole page and recreate with template binding. i use $('#pageId').page('destroy').page(); which works fine.
I want to do the samething for dialog (just destory the dialog and recreate the dialog and display it). Can you anyone tell me the right method to call.... I just tried with .dialog() but i didn't work.. thanks in advance.
my dialog code.
<div data-role="dialog" id="myDialog" data-close-btn="right">
<div data-role="header" class="ui-corner-top">
<h1>dialog</h1>
</div>
<div data-role="content">
<form id="myForm">
<fieldset>
<label for="fromDate">Date From</label>
<input id="fromDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<fieldset>
<label for="toDate">Date To</label>
<input id="toDate" type="date" required placeholder="mm/dd/yyyy">
</fieldset>
<input type="submit" value="submit" id="btnSubmit" data-inline="true" />
</form>
</div>
</div>
Related
I'm making a multi-page web app. I want it to have a left and right panel that are available no matter what page you're on. I managed to do that but the contents don't seem like they have the jQuery CSS rules applied to them. I did
$("[data-role=panel]").panel().enhanceWithin();
And that made my panel work... kinda of the labels for my check marks aren't formatted like they were when the panel wasn't external. I guess I'll just put the code up. I swear I've searched this site forever trying to find answers.
$(function () {
$("[data-role=panel]").panel().enhanceWithin();
});
<div data-role="panel" id="RoomInfoPanel" data-display="overlay" data-theme="b" data-position="right" data-dismissible=false>
<div data-role="main" class="ui-content">
<h2 id="roomNumberHeader">Panel Header..</h2>
<p class="main" id="CrewText">Crew Assigned:</p>
<select id="selectCrew" >
<option>Select Crew</option>
</select>
<div id="cblist" style="display:inline">
<label for="#compChk" class="ui-content">Completed</label>
<input type="checkbox" value="first checkbox" id="compChk" />
<input type="checkbox" value="first checkbox" id="paidChk" />
<label for="#paidChk">Paid</label>
</div>
<div data-role="main">
Edit Crews
</div>
</div>
</div>
Remove # in for attribute. It should be for="checkboxID" without hash.
I'm implementing jquerymobile themes via themeroller shared. I have applied two swatches a and b buttons are blue but flip switch is orange.
How can I apply both themes in one page?
I have tried this:
<fieldset data-role="controlgroup">
<div class="ui-field-contain">
<label for="txtEmail" class="ui-hidden-accessible"></label>
<input name="txtEmail" id="txtEmail" placeholder="Email" value="" type="text" data-clear-btn="true" data-theme="a" />
</div>
<div class="ui-field-contain">
<label for="txtPassword" class="ui-hidden-accessible"></label>
<input name="txtPassword" id="txtPassword" placeholder="Password" value="" type="password" data-clear-btn="true" data-theme="a" />
</div>
<div class="containing-element" >
<label class="fliplabel" for="flipRemember">Remember me:</label>
<select id="flipRemember" name="flipRemember" data-role="slider" data-theme="b" >
<option value="No">No</option>
<option value="Yes">Yes</option>
</select>
</div>
<div class="ui-field-contain" class="fieldbutton">
<a id="btnSignin" data-theme="a" data-role="button" data-theme="a" href="javascript:void(0);">Sign In</a>
</div>
</fieldset>
What you've got there should work. You'll need to include the jquerymobile.js and jquerymobile.css, as well as your theme's css file. Aside from that, you can apply theme directly to parts of a page (either jquerymobile controls, or general page elements) by using the theme related css classes such as ui-body-b (shown here at the bottom of the page). I've put together a jsfiddle as well to give an example
So I'm building a web application using Jquery Mobile and Phonegap. The app was working fine until I removed some input fields and drop down menus which became obsolete.
The problem now is that when I click on the last input field of the page & the ios keyboard activates, the footer bar is no longer fixed and there is a white gap between the footer bar and the ios keypad. When the keypad hides again I see the full page but the white gap is above the footer.
This doesn't seem to be a problem on the Android platform so I'm wondering if it is a CSS issue. Help is most certainly welcome. Here's the page code in question...
<div data-role="page" data-theme="f" id="">
<div data-role="header" class="ui-state-persist">
<h1>text</h1>
</div>
<div data-role="content">
<label for="">Text</label>
<input type="text" name="text" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="text" name="" id="" value="" class="input-field required"/>
<label for="">Text</label>
<input type="" name="" id="" value="" class="input-field required"/>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
Try the following code (using jQuery Mobile version 1.2.0):
<div data-role="page" data-theme="f" id="quickquote_insured">
<div data-role="header" class="ui-state-persist">
<h1>Contact Details</h1>
</div>
<div data-role="content">
<label for="quickquote-insured_initials">Initials:</label>
<input type="text" name="quickquote-insured_initials" id="quickquote-insured_initials" value="" class="input-field required"/>
<label for="quickquote-insured_surname">Surname:</label>
<input type="text" name="quickquote-insured_surname" id="quickquote-insured_surname" value="" class="input-field required"/>
<label for="quickquote-insured_phone_number">Mobile number:</label>
<input type="text" name="quickquote-insured_phone_number" id="quickquote-insured_phone_number" value="" class="input-field required"/>
<label for="quickquote-insured_email_address">e-Mail address:</label>
<input type="email" name="quickquote-insured_email_address" id="quickquote-insured_email_address" value="" class="input-field required"/>
<br>
</div>
<div data-role="footer" class="ui-state-persist" style="min-height:42px;">
Done
</div>
</div>
I know it may look simple, but I just added a <br> just under your email input field.
I think the problem is that, since your footer is "static", you need to "fill" your page.
For example, if you have few fields on your page and if you don't "fill" your page, you'll get the following result:
Hope this helps.
Dazed and confused here... The field in question is a boolean, and I want the UI to be a checkbox (or a yes/no or on/off jQuery slider). Each time I try to add in this checkbox input, I end up getting a
Microsoft JScript runtime error: DOM Exception: HIERARCHY_REQUEST_ERR (3)
error.
Here's the HTML+Razor
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
#Html.TextBoxFor(model => model.HandicapSession.WinByTwo, new { #type="checkbox" })
<label for="WinByTwo">Win By Two?</label>
</fieldset>
</div>
Here's the generated HTML:
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input data-val="true" data-val-required="The WinByTwo field is required." id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" type="checkbox" value="False" />
<label for="WinByTwo">Win By Two?</label>
</fieldset>
</div>
Apparently this error occurs when there are conflicting or overlapping id's as jQuery Mobile creates its checkbox widget
$.widget( "mobile.checkboxradio", $.mobile.widget, { ...etc...
But how do I use the HTML and/or razor to make a simple checkbox work in jQuery Mobile?
If the problem with jQuery Mobile really is duplicate names for the HTML tags, then you'll have to render your own input type=checkbox tag in HTML, as the ASP.NET MVC Html.CheckBoxFor helper method will render an input type=hidden tag with a duplicate name value. See this post for a discussion.
The hidden form tag is there because if you submit an unchecked checkbox to the server, the form value for that field isn't included. So a hidden input tag is included with value=false so that if the checkbox is unchecked, the value false is still submitted. The model binding process in MVC will filter out the duplicate form values for you, but if you're having a client-side problem with the duplicate name attributes, you'll have to render your own checkbox and label in HTML, then handle the fact that no value will be submitted for the HandicapSession.WinByTwo property when the box is unchecked. If no other property for HandicapSession is submitted, then that whole object will be null.
So, you can manually create the checkbox input and still load the checked and value attributes from your model, as desired, but you can run into model binding problems where the value for WinByTwo will still be false even when the box is checked.
Note also that the for attribute on your label doesn't match the ID of the checkbox in your sample. You need the full HandicapSession_WinByTwo.
The following manually creates the input tags:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input type="checkbox" id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" #(Model.HandicapSession.WinByTwo ? "checked=checked" : "") value="#(Model.HandicapSession.WinByTwo.ToString().ToLower())" />
<label for="HandicapSession_WinByTwo">Win By Two?</label>
</fieldset>
</div>
</div>
</div>
The HTML output is as follows for a checked checkbox on load:
<div data-role="page">
<div data-role="content">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input type="checkbox" id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" checked=checked value="true" />
<label for="HandicapSession_WinByTwo">Win By Two?</label>
</fieldset>
</div>
</div>
</div>
The best would be just to use the MVC helper methods, so I'm not sure if you'd tried the following. The default Html.CheckBoxFor and Html.LabelFor helper methods work with jQuery Mobile 1.0a4.1 or 1.1.0 just fine. The following works for me:
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.css" />
<script type="text/javascript" src="http://code.jquery.com/mobile/1.0a4.1/jquery.mobile-1.0a4.1.min.js"></script>
<div data-role="page">
<div data-role="content">
#using (Html.BeginForm())
{
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
#Html.CheckBoxFor(m => m.HandicapSession.WinByTwo)
#Html.LabelFor(m => m.HandicapSession.WinByTwo, "Win By Two?")
<input type="submit" id="SubmitForm" value="submit" />
</fieldset>
</div>
}
</div>
</div>
This produces the HTML output:
<div data-role="page">
<div data-role="content">
<form action="/Mobile/Mobile" method="post">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>End Game:</legend>
<input checked="checked" data-val="true" data-val-required="The WinByTwo field is required." id="HandicapSession_WinByTwo" name="HandicapSession.WinByTwo" type="checkbox" value="true" />
<input name="HandicapSession.WinByTwo" type="hidden" value="false" />
<label for="HandicapSession_WinByTwo">Win By Two?</label>
<input type="submit" id="SubmitForm" value="submit" />
</fieldset>
</div>
</form>
</div>
</div>
Fix might be pretty simple.
Choice 1: Go scorched earth and turn off Ajax based navigation. This will ensure that unique IDs stay unique. This will ensure that you never encounter this issue again. Only downside is that you lose the pretty little transitions from page to page (someone call the whambulance). You can do this by setting up a global configuration script...
script src="jquery.js"
script src="custom-scripting.js"
script src="jquery-mobile.js"
inside that you'll override the ajax settings to disable them...
$(document).bind("mobileinit", function(){
$.mobile.ajaxEnabled = false;
});
Choice 2: Call pages that are going to require this uniqueness with a link that has an attribute of rel='external' or target='_black' which will accomplish the same thing without disabling all ajax based navigation. If you are reaching the page as a results of a form post, you can use data-ajax='false' on the form tag to accomplish a clean load.
I have this link on my page:
It shows up correct but it should render this when clicked:
<div data-role="page" id="advOptions">
<div data-role="header">
<h1>Advanced Options</h1>
</div>
<div data-role="content">
<div data-role="fieldcontain">
<label for="stdDevs">Standard Deviations:</label>
<input type="textarea" name="stdDevs" id="stdDevs"/>
</div>
<div data-role="fieldcontain">
<label for="numsims">Number of Simulations:</label>
<input type="text" name="numsims" id="numsims" />
</div>
<div data-role="fieldcontain">
<label for="term">Forward Rate Data (in yrs):</label>
<input type="text" name="term" id="term" />
</div>
<div data-role="controlgroup" data-type="horizontal">
<fieldset class="ui-grid-a">
<button type="submit" data-theme="d" data-transition="pop" data-icon="delete">Reset</button>
<button type="submit" data-theme="a" data-transition="pop" data-icon="plus">Add</button>
</fieldset>
</div>
</div>
<div data-role="footer">
<h4>Chatham Financial</h4>
</div>
</div>
But it's trying to instead call the advOptions method on my controller which doesn't exist, looks like it's just trying to redirect from the base URL instead of opening that dialog.
What am I doing wrong?
The code looks good to me...
Are you adding that link to your page dynamically? Because if so, maybe JQuery Mobile did not recognize the data-rel="dialog" attribute. If this is the case, you should be able to simply call the .page() method on your page to let JQuery Mobile do its thing.