Click here to Skip to main content
15,922,894 members
Home / Discussions / ASP.NET
   

ASP.NET

 
QuestionThe datepicker input items that are added at runtime using Jquery are not firing the datepicker event Pin
indian1439-Nov-16 13:19
indian1439-Nov-16 13:19 
Hi All,

I have .js file in which I am adding some new items to the page by using the jQuery code, the Logic is once the dates are selected then it adds up an another set of the Start and End Dates. When the first set of the Input elements are firing properly and opening the Date Picker calendar the remaining added elements that are added by jQuery code at runtime not adding the Date Picker input elements.

Please anybody help me in this regards. Here is my code.

First time added like here:
template =
  '<div id="Param_' + Id + '">' +
      '<div class="parameterHeader ui-widget-header ui-corner-top">' + paramDisplayName + '</div>' +
      '<div class="parameterItem ui-widget-content ui-corner-bottom" >' +
          '<div class="parameterFieldResize parameterField" id="' + paramName + '_1_Div' + count + '">' +
              '<input class="parameterDateRangePicker clearable start" placeholder="Start" type="text" name="' + paramName + '_1_StartDate' + count + '" id="' + paramName + '_1_Start' + count + '"  />' +
              '<input class="parameterDateRangePicker clearable end" placeholder="End" type="text" name="' + paramName + '_1_EndDate' + count + '" id="' + paramName + '_1_End' + count + '"  />' +
              '<button type="button" id="' + paramName + '_1_Remove' +count + '" class="remove-field">X</button>' +
          '</div>' +
      '</div>' +<br />
  '</div>';

//Insert HTML
this.JQElem = $(template);
initialParent.append(this.JQElem);

var fullDateString = '';
$('.parameterDateRangePicker.clearable.start').datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function (dateText) {
        $(this).trigger("input");
        if (typeof me.values[this.id.split('')[1]] === 'undefined')
            me.values[this.id.split('')[1]] = {};
        me.values[this.id.split('_')[1]]['Start'] = dateText;

        fullDateString = $(this).val() + "-" + $(this).next().val

        if (fullDateString.length == 21) {
            var str = fullDateString.replace(/[_\W]+/g, "");

            count++;
            var $wrapper = $(this).parent().parent();

            var tmpHTML = '<div class="parameterFieldResize parameterField" id="' + paramName + '_1_Div' + count + '">' +
               '<input class="parameterDateRangePicker clearable start" placeholder="Start" type="text" name="' + paramName + '_1_StartDate' + count + '" id="' + paramName + '_1_Start' + count + '"  />' +
               '<input class="parameterDateRangePicker clearable end" placeholder="End" type="text" name="' + paramName + '_1_EndDate' + count + '" id="' + paramName + '_1_End' + count + '"  />' +
               '<button type="button" id="' + paramName + '_1_Remove' + count + '" class="remove-field">X</button>' +
             '</div>';

            $wrapper.append(tmpHTML);
        };<br />
    }
});

$('.parameterDateRangePicker.clearable.end').datepicker({
    changeMonth: true,
    changeYear: true,
    onSelect: function (dateText) {<br />
        $(this).trigger("input");
        if (typeof me.values[this.id.split('')[1]] === 'undefined')
            me.values[this.id.split('')[1]] = {};
        me.values[this.id.split('_')[1]]['End'] = dateText;

        fullDateString = $(this).prev().val() + "-" + $(this).val();

        if (fullDateString.length == 21) {
            var $wrapper = $(this).parent().parent(); //$('.parameterFieldResize.parameterField');

            count++;

            var tmpHTML = '<div class="parameterFieldResize parameterField" id="' + paramName + '_1_Div' + count + '">' +
              '<input class="parameterDateRangePicker clearable start" placeholder="Start" type="text" name="' + paramName + '_1_StartDate' + count + '" id="' + paramName + '_1_Start' + count + '"  />' +
              '<input class="parameterDateRangePicker clearable end" placeholder="End" type="text" name="' + paramName + '_1_EndDate' + count + '" id="' + paramName + '_1_End' + count + '"  />' +
              '<button type="button" id="' + paramName + '_1_Remove' +count + '" class="remove-field">X</button>' +
            '</div>';

            $wrapper.append(tmpHTML);
    };
    }
});
Thanks,

Abdul Aleem

"There is already enough hatred in the world lets spread love, compassion and affection."

AnswerRe: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event Pin
Richard Deeming10-Nov-16 2:13
mveRichard Deeming10-Nov-16 2:13 
GeneralRe: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event Pin
indian14310-Nov-16 5:53
indian14310-Nov-16 5:53 
GeneralRe: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event Pin
Richard Deeming10-Nov-16 5:58
mveRichard Deeming10-Nov-16 5:58 
GeneralRe: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event Pin
indian14310-Nov-16 6:30
indian14310-Nov-16 6:30 
GeneralRe: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event Pin
Richard Deeming10-Nov-16 6:48
mveRichard Deeming10-Nov-16 6:48 
GeneralRe: The datepicker input items that are added at runtime using Jquery are not firing the datepicker event Pin
indian14310-Nov-16 6:51
indian14310-Nov-16 6:51 
Questiondiv controls outside of a repeater should be made invisible Pin
Scott529-Nov-16 5:17
Scott529-Nov-16 5:17 
AnswerRe: div controls outside of a repeater should be made invisible Pin
Richard Deeming9-Nov-16 5:42
mveRichard Deeming9-Nov-16 5:42 
GeneralRe: div controls outside of a repeater should be made invisible Pin
Scott529-Nov-16 7:59
Scott529-Nov-16 7:59 
GeneralRe: div controls outside of a repeater should be made invisible Pin
Scott529-Nov-16 9:57
Scott529-Nov-16 9:57 
GeneralRe: div controls outside of a repeater should be made invisible Pin
Richard Deeming9-Nov-16 10:38
mveRichard Deeming9-Nov-16 10:38 
QuestionMessage Closed Pin
9-Nov-16 2:00
Pk Fun Zone9-Nov-16 2:00 
AnswerRe: Design my Site?? Pin
Richard MacCutchan9-Nov-16 2:24
mveRichard MacCutchan9-Nov-16 2:24 
AnswerRe: Design my Site?? Pin
Peter Leow9-Nov-16 2:35
professionalPeter Leow9-Nov-16 2:35 
QuestionNeed help with showing tab info when first landing on page. Pin
Bootzilla336-Nov-16 11:28
Bootzilla336-Nov-16 11:28 
QuestionHow do layout out the columns using stringbuilder? Pin
samflex4-Nov-16 15:51
samflex4-Nov-16 15:51 
AnswerRe: How do layout out the columns using stringbuilder? Pin
Richard MacCutchan4-Nov-16 22:52
mveRichard MacCutchan4-Nov-16 22:52 
GeneralRe: How do layout out the columns using stringbuilder? Pin
samflex5-Nov-16 2:33
samflex5-Nov-16 2:33 
QuestionGenerate SQL query Pin
Member 128253814-Nov-16 6:23
Member 128253814-Nov-16 6:23 
AnswerRe: Generate SQL query Pin
Richard MacCutchan4-Nov-16 6:58
mveRichard MacCutchan4-Nov-16 6:58 
QuestionOperation must use an updateable query - question Pin
Member 87616672-Nov-16 15:59
Member 87616672-Nov-16 15:59 
AnswerRe: Operation must use an updateable query - question Pin
Richard Deeming3-Nov-16 3:10
mveRichard Deeming3-Nov-16 3:10 
QuestionCrud operation by pattern Pin
Member 1282618731-Oct-16 20:27
Member 1282618731-Oct-16 20:27 
AnswerRe: Crud operation by pattern Pin
Nathan Minier1-Nov-16 2:12
professionalNathan Minier1-Nov-16 2:12 

General General    News News    Suggestion Suggestion    Question Question    Bug Bug    Answer Answer    Joke Joke    Praise Praise    Rant Rant    Admin Admin   

Use Ctrl+Left/Right to switch messages, Ctrl+Up/Down to switch threads, Ctrl+Shift+Left/Right to switch pages.