Ways to combine jquery-ui Datepicker with inserting text on click. - javascript

I have a table list with many input fields that has the jqueury datpicker in it. Every input field has as class datepicker and a random id number. when clicked in the input field teh datpicker pops up. With a click on he date the dtae gets inserted. So the he datepicker works fine. But now i want to add an image or text link next to the input field, and when i click on the image/text the content on the input field changes into the selected text. But untill now i cannot combine datepicker and this fucntion into one....
example i tried:
<input type="text" id="a11" class="datepicker" name="sterilizationdate_1" value="<?php echo $sterilizationdate_1?>">
CSA
and the javascript
$('a.CSA').click(function(){
$('.datepicker').val($('.datepicker').val()+$(this).html());
});
I tested this code without the datepicker and it just works fine... why cant i combine the two?
FOUND ANOTHER SOLUTION
custom text insert in datepicker

You are trying to get the val() of input tag but calling val on anchor tag
$('a.CSA').click(function(){
$('.datepicker').val($('.datepicker').prev().val()+$(this).html());
});

Maybe you have another problem on how you call the Datepicker.
You can try:
$('a.CSA').on('click', function(){
$('.datepicker').val($('.datepicker').prev().val()+$(this).html());
});
Instead of:
$('a.CSA').click(function(){
$('.datepicker').val($('.datepicker').prev().val()+$(this).html());
});
Please this link .on()

Related

Generate input field using jQuery's append

Issue:
I am attempting to append an input field from a modal window, containing a value inserted by the user, to an existing panel. So far the user is able to create the new field from the modal and add it, however, as this is part of an edit page, I want their input to be added to an input field. Here is the working code: BOOTPLY EXAMPLE. I want the newly generated field to be formatted the same as the existing fields because it will become part of a giant form allowing it to be submitted and update the operational page.
Question:
Will I have to format this within the append function itself where I declare the other formatting constraints? or can I somehow set the attributes within the 'cloudcontainer' div where the input is being appended to? Also, should I be using .html function instead of append? Performance is really not a concern here.
Thanks
You have to append exactly same formatted input tag as you have generated in the beginning and then add the form value to it
$("#clickme").click(function(){
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b><input style="display: inline; width: 325px;" class="form-control" id="projectName" type="text" value="'+$('#fieldvalue').val()+'" </input></p></div>');
});
Demo
In your JavaScript, on the line where you append fields you should do something like this:
$('.cloudcontainer').append('<div class="cloud"><p><b>'+$('#fieldtitle').val()+': </b>'+'<input type="text" value="' + $('#fieldvalue').val() + '"></p></div>');

DatePicker date is wrongly binding to textbox-1 ? fiddle provided

I am dynamcically generating rows with some controls . In one of those controls i am having a textbox which is binded with datepicker .
Everything is working fine but there is a minor issue i.e when i select date from textbox-2 which is dynamically generated the selected date is apperaring in textbox-1 and textbox-2 is empty sadly .. so this goes on like if i have 10 textboxes in any textbox i select date end of the day i get the selected date in textbox-1 only ..
You can find the excat senario here : http://jsfiddle.net/JL26Z/8/
Correct me if i made any silly error
Regards
there is minor issue with the element, you created element with id so due to same id its causing problem.
please use class instead of id, it will work fine.
I have updated the fiddle, see here:
http://jsfiddle.net/JL26Z/10/
If you have a look at generated html when you add new fields by pressing button you will see that every text box has the same id. When you set date in calendar it searches for text box with matching id and finds first text box on your form and sets date for it. Make sure that you generate unique id for newly added controls. You can have a counter variable and increment it and append to id when you add new set of controls.
In your fiddle calendar shows for phone number field when it should probably show for date field.

JQuery Focus() Not Firing

new member but I've been reading and learning here for a bit. I hope I"ve formatted this question correctly but here goes. Here's the basics of my problem. I'm using JQuery replaceWith to swap a dropdown select with an input box and vice-versa. It seems that I'm affecting the ability of JQuery to set focus() on the swapped out id. Here's the code (no closing tags).
For the form
Select A Sign
lawn signs
banners
carved signs
sandblasted signs
Quantity:
the JQuery that swaps the drop down select with the input box which happens on a change of the product id shown above newField either contains on or the other of the following:
newField = "<select id='quantity' name='quantity'><option selected value='10'>10</option><option value='20'>20</option><option value='30'>30</option><option value='40'>40</option>option value='50'>50</option><option value='60'>60</option><option value='70'>70</option><option value='80'>80</option><option value='90'>90</option><option value='100'>100</option></select>";
newField = "<input id='quantity' name='quantity' maxlength='2' size='2' \>"
and the JQuery replaceWith() which will swap out one of the two fields above depending upon another selection drop down box.
$('#quantity').replaceWith($(newField)).attr("id", "quantity");
This all works just fine and the swaps work great except that when I do the following (my test code), nothing happens. No alert is triggered when I focus into the input box.
$('#quantity').focus(function(){
alert ("focused");
});
Am I losing some sort of context on the id with the swap using replaceWith() since the id is the same regardless of whether I swap a select drop down with an input box.
Thanks
You should use .on() for binding events to dynamically created elements. Try:
$(document).on('focus','#quantity',function(){
alert ("focused");
});
you should use deligates for dynamically created objects
$(document).on("focus","#quantity",function(){
alert ("focused");
});

Jquery multiple onchange events - dropdown lists and input text

What i would like to have is sort of this which doesnt work:
http://jsfiddle.net/adige72/BS9rp/
If i select an option, all values of input text fields change but in fact i would like to only one text field to be populated which is next to that dropdown list i select from.
Is this possible?
It is absolutely possible with jquery. On the example in that link you are selecting based on the class of the input boxes "phonenumber". If you select based on the the actual control Id it will not populate all the input boxes on the screen. Please see below for example:
$("#dropdownlistID").live("change", function() {
$("#inputfieldID").val("update with whatever you want");
})
Many ways to do this including using id's on the fields but using your fiddle, you could do this:
$(this).next($('.phonenumber')).val($(this).find('option:selected').attr('data-phonenumber'));
Yea. Use unique ids for each drop down and text field and that will get you in the right direction.
<select id="IDX" class="name" name="name[]">
...
<input id="textIDX" type="text" class="phonenumber"...
...
$('#IDX').change(function(){
$('#textIDX').val('anything....');
});

jquery-ui datepicker with showOn: button showed even if source input is disabled

I have an input text field with a datepicker instance from jquery-ui with the following parameters:
'buttonImageOnly': true,
'showOn': 'button',
'buttonImage': 'gfx/calendar.gif'
It works well. When I click the "calendar.gif" datepicker image, the calendar is shown. However, when I select a date, the input field (which was disabled) is changed.
Is this a bug or am I doing something wrong? When I look at the instance object in Firebug, the disabled parameter is set to true.
Disabled mean you can't manually write in it. But you still can with javascript.
The textbox is where it saves the date value. If you don't want it to show, turn it to a hidden field or hide it with CSS (easier).
The buttonImageOnly is about using a button with an image type or just an image.
I don't see any bug nor error from your part. :)
If you don't care that the image will no longer show, try the following:
$('#myfield:not([disabled])').datepicker();

Categories

Resources