I'm using standard JQM date picker with input tag like this
<input type="date" data-clear-btn="false" id="dp" value="2006-09-14">
on request here is jsfiddle example: http://jsfiddle.net/GardenOfEmuna/47VUw/
Now I want to display value in a trigger button and open datepicker upon clicking on it.
Has anyone idea how to open datepicker with a trigger button?
You are not using a jqm datepicker, since there is none. You are using the native browser datepicker control and you can't trigger it as proved in this thread
Possible solution:
I've created a jsFiddle, it uses the datepicker from jquery ui with a wrapper class as shown in the jqm documentation (link)
html
<div data-role="page" id="foo">
<div data-role="content">
<input id='myDatePicker' type="text" data-role="date">
<button id='myButton' class="ui-btn">Button</button>
</div>
</div>
js
$(document).on('pageinit',function(){
$('#myButton').click(function() {
$('#myDatePicker').datepicker( "show" );
});
});
resources
jquery.mobile-1.4.2.min.css
jquery-1.9.1.min.js
jquery.mobile-1.4.2.min.js
jquery.ui.datepicker.js
Related
I have a jQuery UI dialog with several tabs, sometimes, I need to pop up one of those tabs as a separate dialog (atop of tabbed initial dialog), so, can I achieve this by re-using the same dialog?
(of course with a bit run-time customizations, JavaScript/DOM HTML manipulations, but with the same <div></div> template initially defined and with the same HTML FORM elements IDs)
This is not the optimal solution, but could be an approach of what should you do.
HTML:
<div id="dialog" title="Basic dialog">
<div class="dtabs">
<ul>
<li>First
</li>
<li>Second
</li>
<li>Third
</li>
</ul>
<div id="tab1">
<p>First!</p>
</div>
<div id="tab2">
<p>Second!</p>
</div>
<div id="tab3">
<p>Third!</p>
</div>
</div>
</div>
<input value="Tab 1 on Dialog" type="button" alt="1" />
<input value="Tab 2 on Dialog" type="button" alt="2" />
<input value="Tab 3 on Dialog" type="button" alt="3" />
Javascript:
$(function () {
// Dialog without autoOpen just to hide it from viewport
$('#dialog').dialog({
autoOpen: false
});
$('input').click(function () {
// Clone the dialog and append it to body
// Get "tab" number to know which tab should I set as active later
var d = $('#dialog').clone().appendTo('body'),
tab = $(this).attr('alt')-1;
// Assign "dialog" behaviour and remove it when I close it
d.dialog({
autoOpen: false,
close: function (e, ui) {
$(this).dialog('destroy').remove();
}
});
// Tabs inside my dialog has "tabs" behaviour by JQueryUI
d.find('.dtabs').tabs({
active: tab
});
// Open up!
d.dialog('open');
});
});
http://jsfiddle.net/franverona/k7cuH/
Let me explain you what I did:
I create my dialog in pure HTML and using JQueryUI assign it a dialog behaviour.
Every button has a property that will tell me later what tab should I open in my future dialog.
When user click on button I clone my previous dialog, append it to body and get "tab" attribute. Then I assign it a dialog behaviour without autoOpen and with a function associated to close event to remove it from DOM (to avoid multiple dialogs on my HTML body).
Before open, I assign a tabs behaviour to all the content inside my recently created dialog (look that I'm using find function) and set as an active tab the correct tab using tab property retrieved before.
Now I'm ready to open my dialog with all set up.
I repeat: this isn't an optimal solution, but should work as a prototype of later development iterations.
Happy coding!
Could you please guide me (an example is much appreciated) as to how i can achieve the Slide up effect on a tag like the one in jQuery 1.9.1 using jQuery MOBILE 1.3.0.
I need to do like the 1st example in this page http://api.jquery.com/slideUp/
I read the slideup but how to do it for a tag.
http://jquerymobile.com/demos/1.2.0/docs/pages/page-transitions.html
I know this would be simple but i am new to jQuery. Just couldn't get it done in the mobile API.
Is this what are you looking for? Demo
Markup
<a data-role="button" id="clickme">Click here</a>
<br/>
// this div will slideup.
<div id="test">
<img src="anyimg.jpg" alt="" />
</div>
Code
$('#clickme').click(function () {
$('#test').slideUp('slow'); // or fast, or leave it blank
});
I am using jquery mobile and a dialog to display some multiple select boxes. Some of the content is dynamically created with Ajax based on the selections. I would like to make the Ajax call when the dialog is closed (through the regular x button). The main parts of the html look as follows:
<a href="#queryPage" data-rel="dialog" data-transition="slidedown" >Filter Results</a>
<div data-role="page" id="queryPage" data-theme="a">
<div data-role="header" data-theme="a">
<h1>Select Filters</h1>
</div>
<div data-role="content">
<form action="" method="get" id="filterForm">
<fieldset id ="filterFields"></fieldset>
</form>
</div>
</div>
I am currently making the call by running the code on page hide as follows:
$('#queryPage').live('pagehide', function(event) {
//code for ajax call
});
However, I would like to make the call when the dialog closes because some of the select lists are large and they create a new page that hides the queryPage even though the dialog has not been closed. I have tried:
$('#queryPage').bind('dialogclose', function(event) {
alert('closed');
});
and also tried
$('#queryPage').dialog({close:function(event, ui){
alert("closed");
}});
These I have put in a function called on page load but the alert is not shown when the dialog is closed. Any help will be appreciated.
There are no specific events for dialogs as they are simply pages that are displayed as a dialog. Try the pagehide event.
$("#MyDialog").bind("pagehide",function(){
alert("Dialog closed");
});
Also, the first line of your sample code has a link that is outside of a <div data-role="page"> which should not be done.
Pagehide can be delegated as such:
$(document).delegate("#MyDialog", "pagehide", function() {
alert("Dialog closed");
});
and you will also have access to the screen elements of the calling page.
Andleer shared the appropriate event for closing the dialog using jquery. however, we can also code in this way.
$(document).on("pagehide","#Dialog",function(){
console.log('Dialog has closed.');
});
I have a weird problem with a simple form with checkboxes..
The first time it's shown it looks fine.. But then after navigating back to the previous page and be to it again - the ui is not updates resulting in plain checkboxes without jQuery mobile style..
I've Googled like crazy and found a couple of hints like .fieldcontain(); but it's doesn't work =(
The data is being retrieved through knockout bindings..
Any good ideas?
Here's the code...
<div id="searchCitiesPage" data-role="page" data-theme="a" class="page searchCities">
<header data-role="header" data-theme="b">
</header>
<div data-role="content" class="content" data-theme="a">
<script id="countyListTemplate" type="x-jquery-tmpl">
<form id="fieldform" action="form.php" method="post">
<fieldset id="fieldsetgroup" data-role="controlgroup">
{{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
<input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
<label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
{{/each}}
</fieldset>
</form>
</script>
<div data-bind="template: 'countyListTemplate'"></div>
<div class="submit">
Næste
</div>
</div>
I was having a problem like this too, but in my case, the checkboxes were being redrawn dynamically before loading the page. I tried refreshing:
$("input[type='checkbox']").checkboxradio("refresh");
But it gave me an error stating that checkboxradio hadn't been initialized. However, when I tried this instead:
$("input[type='checkbox']").checkboxradio();
It made the checkboxes appear correctly every time. I'm still fumbling in the dark with JQuery Mobile and can't say exactly what happens where and why (I think I'm initializing the checkboxes?), but I thought I would share for the next time someone like me googles their way to this thread.
You can add some javascript to re-initialize the jQuery Mobile markup for your checkbox on each page load. Something like this:
<script type="text/javascript">
$(function() {
$('[data-role=page]').live('pageshow',function(){
$('#fieldform').find('input').checkboxradio();
});
});
</script>
I would suspect this code
{{each BoligPortal.AdSearch.postalcodesInSelectedCounty}}
<input type="checkbox" name="checkbox-${zipcode}-${timestamp}" id="checkbox-${zipcode}-${timestamp}" class="zipcodecheckbox"/>
<label for="checkbox-${zipcode}-${timestamp}">${zipcode} ${city}</label>
{{/each}}
is being called again when you transition back to the page. I would suggest pulling the infomation/tags/etc.. before the page displays (on the first load) and display it statically. So when transitioning back it shows the same data.
of you could use one of the live events and restyle it before the page shows, example:
$('.zipcodecheckbox').live('pagebeforeshow',function(event, ui){
$("input[type='checkbox']").checkboxradio("refresh");
// or
$(".zipcodecheckbox").checkboxradio("refresh");
});
I have a form inside an iframe which is inside a jQuery UI dialog box. The form contains a file input type. The jQuery UI dialog contains an Upload button. When this button is clicked, I would like to programmatically call the submit method. My question is how I could select the form which is in a iframe using jQuery. The following code should clarify the picture:
<div id="upload_file_picker_dlg" title="Upload file">
<iframe id="upload_file_iframe" src="/frame_src_url" frameborder=0 width=100% scrolling=no></iframe>
</div>
frame_src_url contains:
<form action="/UploadTaxTable" enctype="multipart/form-data" method="post" id="upload-form">
<p>Select a file to be uploaded:</p>
<p>
<input type="file" name="datafile" size="60">
</p>
The jQueryUI dialog box javascript code:
$('#upload_file_picker_dlg').dialog({
...
buttons: {
'Close': function() {
$(this).dialog('close');
},
'Upload': function() {
$('#upload-form').submit(); //question is related to this line
$(this).dialog('close');
}
},
....
});
From the javascript code snippet above, how can I select the form with id upload-form that is in the iframe whose id is upload_file_iframe ?
Accessing an element inside an iframe is tricky.
You should use the following syntax:
$('#iframeID').contents().find('#upload-form').submit();
where 'iframeID' is obviously an ID you've given to the iframe.
Hope it is correct!
The answer is:
$('#upload_file_iframe').contents().find('#upload-form').submit();
which I learned from http://simple.procoding.net/2008/03/21/how-to-access-iframe-in-jquery/
Off the top of my head I'd say you might have to add the logic to the file where the iframe source is from.