Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 7 years ago.
Improve this question
I want to use a bootstrap datepicker with my text_field inside form_for.
How should I rewrite
<%= f.text_field :some_date %>
line to store the selected date in some_date field?
date time picker just support input type for direct integration. but rails text_field create text area. So you can't do so directly.
You can either integrate datetimepicker onclick or mousedown event. Like we can do for div/span.
If you want to do so you need to override datetimepicker code which check for supported html elements.
code below which should change : link here
attachDatePickerElementEvents = function () {
input.on({
'change': change,
'blur': options.debug ? '' : hide,
'keydown': keydown,
'keyup': keyup,
'focus': options.allowInputToggle ? show : ''
});
if (element.is('input')) {
input.on({
'focus': show
});
} else if (component) {
component.on('click', toggle);
component.on('mousedown', false);
}
},
See this Demo & code and API
$('field selector').datepicker({
});
Related
This question already has an answer here:
jQuery validation custom error message display for radio button
(1 answer)
Closed 7 years ago.
I am developing an online survey form, and im using jquery mobile, i used the jquery validate plugin.
The problem is,the jquery validate error messages appear after the first radio button option.
How can I place the error message right before the first radio button option.
I tried using this code but seemingly it is not working.
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.appendTo(element.parent());
} else {
error.insertBefore(element);
}
}
I have found the answer,
errorPlacement: function(error, element) {
if (element.is(":radio")) {
error.prependTo(element.parent());
} else { // This is the default behavior of the script for all fields
error.insertAfter(element);
}
}
reference: Answer to the question I had
What I want to do:
I am trying to create a mobile quiz application that could display a list of questions in a form one by one.
What I am able to do:
I have read through this site and am able to scroll through the questions without any problems. Also, the Javascript scoring engine is working fine.
<script type="text/javascript">
$(document).ready(function () {
var currentQuestion=0;
var totalQuestions=$('questions').size();
$questions = $('.questions');
$questions.hide();
$('.scorepage').hide();
$($questions.get(currentQuestion)).fadeIn(); //show the first question
// when users click on the "Next question button...
$('#next').click(function(){
$($questions.get(currentQuestion)).fadeOut(function(){ //hide the current question
currentQuestion = currentQuestion + 1; //go to next question
if(currentQuestion == totalQuestions){ //if no more question
$('.scorepage').show();
$('.button1').hide();
}else{
$($questions.get(currentQuestion)).show(); //else display the current question
}
});
});
});
</script>
What is my current program structure:
The application begins with a form of n questions. Each question are framed using
<div data-role="fieldcontain" class="questions"> questions with radio button inputs </div>.
Following the question, there is a button, in which clicking on it will call the getScore() javascript. This section is framed as <div class="scorepage"> button here and a textbox to display score</div>.
Finally, the navigation button is at the end of the form. It is framed as <div class ="button1"></div>
What is my problem?
Before answering any question, the scorepage is hidden. This is achieved by the $('.scorepage').hide();.
However, I could not show the scorepage when there is no more question by using $('.scorepage').show(); and to hide the next button (Since there is no more question) by using $('.button1').hide();
Can anyone see where the mistake in my logic is?
To count the number of questions, try to using jquery function lenght for counting elements:
var totalQuestions = $('.questions').length
his should work
I'm opening a form for editing some record. I'm using an "infinite scroll select2".
I want the input to show the option already saved to that field (I'm editing a record...)
How can I do that? This way is not working:
$('#e7').select2('data', { id: 8, text: 'foo' });
I've created a jsfiddle to show that: http://jsfiddle.net/lucianocosta/Dyh8W/1/
ivaynberg answered me: https://github.com/ivaynberg/select2/issues/688#issuecomment-11971899
you have to pass in an object that is in the same format as what your renderers expect. in this case the renderer you specified expects the title attribute, not text. see here: http://jsfiddle.net/Dyh8W/2/
So the solution here is:
$('#e7').select2('data', { id: 8, title: 'foo' });
Closed. This question does not meet Stack Overflow guidelines. It is not currently accepting answers.
We don’t allow questions seeking recommendations for books, tools, software libraries, and more. You can edit the question so it can be answered with facts and citations.
Closed 2 years ago.
Improve this question
I would like to find an Internet Explorer ActiveX control that will allow me to print a web page or part of web page to a specific printer without a dialog box.
Is there any activex plugin to achieve this?
I used ScriptX. The free version lets you set some basic parameters, see the example below.
Example:
<!-- MeadCo ScriptX -->
<object id=factory style="display:none"
classid="clsid:1663ed61-23eb-11d2-b92f-008048fdd814"
codebase="http://[your path here]/smsx.cab#Version=7.0.0.8 ">
</object>
<script>
function printWindow() {
factory.printing.header = "This is MeadCo";
factory.printing.footer = "Printing by ScriptX";
factory.printing.portrait = false;
factory.printing.leftMargin = 1.0;
factory.printing.topMargin = 1.0;
factory.printing.rightMargin = 1.0;
factory.printing.bottomMargin = 1.0;
factory.printing.Print(false);
}
</script>
This question already has an answer here:
Closed 10 years ago.
Possible Duplicate:
Sortable and droppable knockout list
I am using knockout to bind a UL. I am wanting to gives users the ability to drag and drop a LI and for my viewmodel to update with the reorder.
Drag and drop is working and I have the correct event working within my jquery but I am not sure how to make the update.
I have had a hunt around the documentation but cant find anything.
I've created a fiddle to make explaining what I am doing a little easier
Js Fiddle here
Any suggestions would be awesome!
Updated the jsfiddle link
I've never worked with Knockout and I don't have time to understand its intricacies right now, so this isn't a complete solution, but here's something to get you started. See below for links to some pages I found while searching that may help you complete the solution.
This is the part that I changed from your original fiddle:
var view_model = new ViewModel(initialData);
ko.applyBindings(view_model);
$(function() {
$( "#sortable" ).sortable({
revert: true,
stop: function(event, ui) { console.log("stop event")},
start : function ( event, ui ) {
ui.item.data( 'previous_index', ui.item.index() );
},
// start
update : function ( event, ui ) {
var question = view_model.questions.splice(
ui.item.data( 'previous_index' ), 1
)[0];
view_model.questions.splice( ui.item.index(), 0, question );
ui.item.removeData( 'previous_index' );
}
// update
});
});
References:
jQuery UI Sortable, how to determine current location and new location in update event?
get the start position of an item using the jquery ui sortable plugin
jQuery Sortable() with original position placeholder?
knockout + jqueryui draggable/droppable follow-up
Ryan Niemeyer has authored a Knockout plug-in for this purpose:
https://github.com/rniemeyer/knockout-sortable
Here is an updated blog entry:
http://www.knockmeout.net/2012/02/revisiting-dragging-dropping-and.html