Remove Jquery from element and reapply?
Question
I'm using wickedpicker and have a page with 2 time fields.
I need to update the time in each field separately to the other, as a button is pressed.
Everything I've tried doesn't work, and I assume it's because the script is already bound ( not sure if that is the correct term ) to the input element.
So my question is can a script that is loaded and bound, be unloaded and then reapplied with different parameters ?
This is the code I currently have :
<script>
$(document).ready(function() {
$(".timepicker").wickedpicker({twentyFour: true});
$("#btn").click(function(e) {
alert ('click')
$("#timeTwo").wickedpicker({twentyFour: true, now: "17:35"});
})
});
</script>
<body>
<button id='btn' class='formBtn'>CHANGE</button>
<input type='text' class='timepicker' id='timeOne' name='timeOne' value='' >
<input type='text' class='timepicker' id='timeTwo' name='timeTwo' value='' >
</body>
I'm loading timepicker originally as I need the ability to use it straight away, but I also need the ability to update the time from the button click.
I've tried setting a default value in timeTwo , which is overwritten by timepicker. I've used JQuery to set the val of timeTwo and the input shows the correct value, but the timepicker shows the time now, NOT what the field shows.
Any ideas ? Thanks
UPDATE removing and readding the element works.
$("#btn").click(function(e) {
console.log ('click')
var test = $("#timeTwo").remove();
$('body').append( test ); // later
$("#timeTwo").wickedpicker({twentyFour: true, now: '15:34'});
});
But how do I ensure it's loaded back to the same location ? Thanks
2 answers
solution1
1 ACCPTED 2016-09-13 11:45:02
The wickedpicker as of here: https://ericjgagnon.github.io/wickedpicker/ has no method to set the internally used time. As it detects if an element already has a wickedpicker, you can not simply apply it a second time, as you already noted. The cleanest solution would be to extend wickedpicker with the needed functionality. Another workaround may be to remove the input, and recreate it.
EDIT: I made you a small snippet to demonstrate replacement of the picker. It's not really a nice solution, as it will break other events or references on/to the datepicker element. You'll have to be careful with those.
Extending the original wickedpicker would also not be very hard, but I think is beyond this question.
PS: Please ignore the css part. I had to inline the wickedpicker css to get it to work (minus the correct font). You should only need the javascript part.
$(document).ready(function() { $(".timepicker").wickedpicker({ twentyFour: true }); $("#btn").click(function(e) { $("#timeTwo").replaceWith("<input type='text' class='timepicker' id='timeTwo' name='timeTwo' value='' />"); $("#timeTwo").wickedpicker({ twentyFour: true, now: "17:35" }); }) });
.wickedpicker { -webkit-user-select: none; -moz-user-select: none; -ms-user-select: none; user-select: none; box-shadow: 0 0 0 1px rgba(14, 41, 57, .12), 0 2px 5px rgba(14, 41, 57, .44), inset 0 -1px 2px rgba(14, 41, 57, .15); background: #fefefe; margin: 0 auto; border-radius: .1px; width: 270px; height: 130px; font-size: 14px; display: none } .wickedpicker__title { background-image: -webkit-linear-gradient(top, #fff 0, #f2f2f2 100%); position: relative; background: #f2f2f2; margin: 0 auto; border-bottom: 1px solid #e5e5e5; padding: 12px 11px 10px 15px; color: #4C4C4C; font-size: inherit } .wickedpicker__close { -webkit-transform: translateY(-25%); -moz-transform: translateY(-25%); -ms-transform: translateY(-25%); -o-transform: translateY(-25%); transform: translateY(-25%); position: absolute; top: 25%; right: 10px; color: #34495e; cursor: pointer } .wickedpicker__close:before { content: '\\00d7' } .wickedpicker__controls { padding: 10px 0; line-height: normal; margin: 0 } .wickedpicker__controls__control, .wickedpicker__controls__control--separator { vertical-align: middle; display: inline-block; font-size: inherit; margin: 0 auto; width: 35px; letter-spacing: 1.3px } .wickedpicker__controls__control-down, .wickedpicker__controls__control-up { color: #34495e; position: relative; display: block; margin: 3px auto; font-size: 18px; cursor: pointer } .wickedpicker__controls__control-up:before { content: '\\e800' } .wickedpicker__controls__control-down:after { content: '\\e801' } .wickedpicker__controls__control--separator { width: 5px } .text-center, .wickedpicker__controls, .wickedpicker__controls__control, .wickedpicker__controls__control--separator, .wickedpicker__controls__control-down, .wickedpicker__controls__control-up, .wickedpicker__title { text-align: center } .hover-state { color: #3498db } @font-face{font-family:fontello;src:url(../fonts/fontello.eot?52602240);src:url(../fonts/fontello.eot?52602240#iefix) format("embedded-opentype"), url(../fonts/fontello.woff?52602240) format("woff"), url(../fonts/fontello.ttf?52602240) format("truetype"), url(../fonts/fontello.svg?52602240#fontello) format("svg"); font-weight:400; font-style:normal } .fontello-after:after, .fontello:before, .wickedpicker__controls__control-down:after, .wickedpicker__controls__control-up:before { font-family: fontello; font-style: normal; font-weight: 400; speak: none; display: inline-block; text-decoration: inherit; width: 1em; margin-right: .2em; text-align: center; font-variant: normal; text-transform: none; line-height: 1em; margin-left: .2em; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale } .clearable-picker { position: relative; display: inline-block } .clearable-picker>.hasWickedpicker { padding-right: 1em } .clearable-picker>.hasWickedpicker::-ms-clear { display: none } .clearable-picker>[data-clear-picker] { position: absolute; top: 50%; right: 0; transform: translateY(-50%); font-weight: 700; font-size: .8em; padding: 0 .3em .2em; line-height: 1; color: #bababa; cursor: pointer } .clearable-picker>[data-clear-picker]:hover { color: #a1a1a1 }
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> <script src="https://raw.githubusercontent.com/ericjgagnon/wickedpicker/master/dist/wickedpicker.min.js"></script> <button id='btn' class='formBtn'>CHANGE</button> <input type='text' class='timepicker' id='timeOne' name='timeOne' value='' /> <input type='text' class='timepicker' id='timeTwo' name='timeTwo' value='' />
solution2
0 2016-09-13 11:17:10
You can do as mentioned below, you can change option dynamically after initialize it.. refer document
$(document).ready(function() {
$(".timepicker").wickedpicker({twentyFour: true});
$("#btn").click(function(e) {
alert ('click')
$("#timeTwo").wickedpicker('twentyFour', true);
$("#timeTwo").wickedpicker('now', "17:35");
});
});
The technical post webpages of this site follow the CC BY-SA 4.0 protocol. If you need to reprint, please indicate the site URL or the original address.Any question please contact:yoyou2525@163.com.