Difference between .Remove() and .Destroy() in Jquery datepicker - jquery-ui

I'm currently looking at this question here in stackoverflow. And I am wondering what is the difference between using .remove() and .destroy in the datepicker javascript cause when I tried to run it in an online compiler, it seem to perform the same way.
I was checking the jquery api documention and I can only see the destroy() method in it.
using .destroy()
<button onclick="datepicker.destroy()">Destroy</button>
<input id="datepicker" width="200" />
<script>
var datepicker = $('#datepicker').datepicker();
</script>
using .remove()
<button onclick="datepicker.remove()">Destroy</button>
<input id="datepicker" width="200" />
<script>
var datepicker = $('#datepicker').datepicker();
</script>

destroy() doesn't necessarily remove the element from the DOM. Destroy will 'remove' saved states on the element and put it back to a pre-init state. After destroying, you can re-initialize the same element.
In contrast, remove() will both destroy and remove the element. Gone for good and good riddance to it!

Related

How can I prevent JQuery UI from controlling my selectmenu

I really like bits and pieces of both jquery ui and jquery mobile... mobile makes it easy to render my page for mobile devices, ui gives me a really powerful spinner widget for number boxes that gives me a spinchange event that is too useful to ignore...
But, when I have a selectmenu on a page with both, it short-circuits that select menu and prevents it from opening entirely.
following some pages I found here on stackoverflow, I saw that some people experience problems getting a select to work with jquery mobile, and that wrapping it in a form and setting the data-native-menu option to "false"...
<form action="#" method="get">
<div data-role="fieldcontain">
<label for="option1" class="select">Pick one:</label>
<select id="option1" name="option1" class="optionPicker" data-mini="true" data-native-menu="false" >
<option value="1" selected="selected">1</option>
<option value="2">2</option>
<option value="3">3</option>
</select>
</div>
</form>
but that doesn't fix the problem. Cutting either jquery mobile or ui from the document does... but, again, I lose desired functionality elsewhere.
I found that I can turn off jquery mobile for just that item specifically by doing the following after I load jquery but before I load jquery mobile:
$(document).bind("mobileinit", function () {
$.mobile.selectmenu.initSelector = ".neverGonnaLetYouClick";
});
I would assume something similar exists for JQuery UI? But... I am not finding it anywhere...
Did some testing and I suspect it is due to your load order.
Example: https://jsfiddle.net/Twisty/40n27pca/16/
If you read here: https://api.jquerymobile.com/global-config/ they talk about the following:
Because the mobileinit event is triggered immediately, you'll need to bind your event handler before jQuery Mobile is loaded. Link to your JavaScript files in the following order:
<script src="jquery.js"></script>
<script src="custom-scripting.js"></script>
<script src="jquery-mobile.js"></script>
So I would advise the following:
<script src="https://code.jquery.com/jquery-2.1.3.js"></script>
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
<script src="https://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.js"></script>
If you reverse it, jQuery UI gets control of selectmenu.
Hope that helps.

Use autocomplete in masked-input primefaces

I'd like to make a masked input field with autocompletion. In my example i have a field with article numbers _.___.___. I have also a list of often used articles. The user can select existing article numbers from the list and can add new articlenumbers.
How can i combine these two primefaces components?
Thanks for your help
Lepo
To achieve this you have two possibilities: Create a custom component or set the inputmask manually via jQuery. I implemented the second method this way:
Use the normal Autocomplete Widget
<h:form id="myPanel">
<p:autoComplete id="number" value="#{myBean.number}" completeMethod="#{myBean.complete}" />
</h:form>
Activate Inputmask via this little Javascript
<script>
//<![CDATA[
$(document).ready(function() {
$(':input[id="myPanel:number_input"]').inputmask("mask", {"mask": "(999) 999-9999"});
});
//]]>
</script>
(3. Make sure you have included the inputmask jquery library:)
<script src="jquery.inputmask.js" type="text/javascript"/>
Although this solution does what it should do, i think the custom component would be the more cleaner way.
Hope my Snippet helps you anyway.

Customize jtsage datebox for jquery mobile

I am using this incredibly awesome jquery mobile oriented datepicker that I would like to customize based on device size. I saw some suggestions pointing towards modifying the CSS but I am unable to trap the event that creates the popup dialog that comes up with the calendar.
Is there a jsfiddle that I can look and learn from?
Looking at the examples on the page you provided, it appears to be binding to the vmouseclick event. So you should be able to use click, vmousedown, vmouseup depending on your needs.
So if you had HTML like:
<label for="mydate">Some Date</label>
<input name="mydate" id="mydate" type="date" data-role="datebox" data-options='{"mode": "datebox"}'>
Your JQM Would be like:
$("mydate").click(function(){
// Do something
});
I don't see any options of configs to adjust the size of the DateBox upon opening. So you would want to examine the CSS and class settings of the DIV when it is created and then add your own CSS to override the CSS they use (<link rel="stylesheet" type="text/css" href="http://dev.jtsage.com/cdn/datebox/latest/jqm-datebox.min.css" />), or download the CSS and Edit it.
There is no default jsFiddle for this, yet I moved an example into one for you to play with if you like: http://jsfiddle.net/Twisty/pNQeD/

Recieving data from a dialog invoked via knockoutJS

I have learned how one can open jQuery UI dialogs via KnockoutJS custom bindigns as answered in this question: integrating jquery ui dialog with knockoutjs
If my dialog has an input text field, how can I access data from it upon dialog close to alter the main view model based on the text filed contents? What is the general idea and even handler code place?
This is pretty straightforward. Just put an input in your dialog div with a value binding. Same as you would capture input from any binding. Here is the fiddle from that answer with an input binding.
<div id="dialog" data-bind="dialog: {autoOpen: false, title: 'Dialog test' }, dialogVisible: isOpen">foo dialog
<input data-bind="value: dialogEntry" />
</div>
Just make both fields bind to the same knockout js observable. Then they will always be the same values.
<a href="#popupLogin" class="site_title" data-position-to="window" data-rel="popup" data-bind="text:Title">
<div data-role="popup" id="popupLogin" data-theme="a" class="ui-corner-all">
<input type="text" data-bind="value:Title" />
</div>
When you change the text in the modal and click away or close it in some fashion you will see that the value in the other input will have changed as well.

Client side validation on normal (not submit) button

Here is my code, simplified:
<form id="form1" style="height: 759px" runat="server">
<%= Html.TextBox("txtDateFrom")%>
<input type="button" value="Add" id="btnAdd" onclick="return btnAdd_onclick()" />
</form>
I want to add a validator on client side. For example, it will control the entered text's in the textBox length.
Important: I don't have a model passed in that view.
If you are open to use Jquery use JQuery Validation Plugins
eg.Jquery Validation Plugin
and Position Absolute Jquery validation plugin
Any reason not to use jquery validation add-in?

Resources