JQuery плагин, работающий после того, как я нажал кнопку

Я пишу веб-страницу, где результат из базы данных должен отображаться на основе выбранных дат. Здесь я использую jquery datepicker, чтобы выбрать даты, а ниже - мой код.JQuery плагин, работающий после того, как я нажал кнопку

index.html

</head> 
<body> 
    <marquee> 
     <h1>This is an example of ajax</h1> 
    </marquee> 

    <p> 
     Date: <input type="text" id="startDatePicker"> 
    </p> 
    <p> 
     Date: <input type="text" id="endDatePicker"> 
    </p> 

    <form name="vinform"> 
     Enter id:<input type="button" id="somebutton" value="Click Me"> 
    </form> 
    <span id="somediv"> </span> 
    <script type="text/javascript" src="tableGenerator.js"></script> 

</body> 
</html>

tableGenerator.js

$('#somebutton').click(
     function() { 
      $("#startDatePicker").datepicker(); 
      $("#endDatePicker").datepicker(); 
      $.getJSON('Controller', { 
       //the parameters go here 
      }, function(searchList) { 
       var $table = $('<table>').appendTo($('#somediv')); 
       $.each(searchList, function(index, userBean) { 
        $('<tr>').appendTo($table).append(
          $('<td>').text(userBean.caseNumber)).append(
          $('<td>').text(userBean.caseOwner)).append(
          $('<td>').text(userBean.status)).append(
          $('<td>').text(userBean.issue)).append(
          $('<td>').text(userBean.reason)).append(
          $('<td>').text(userBean.age)); 
       }); 
      }); 
     });

Здесь мне нужно сначала выбрать даты, а затем, когда я ударил представить, это должен отображать таблицу. Но в моем случае, когда я нажимаю на текстовое поле выбора даты, это не работает, но вместо этого, если я нажму кнопку, а затем, если я нажму на текстовое поле datepicker, он отлично работает.

, пожалуйста, дайте мне знать, где я ошибаюсь и как это исправить.

Благодаря

источник

2016-01-11 user3872094

Вы должны назвать это:

$("#startDatePicker").datepicker(); 
$("#endDatePicker").datepicker();

Из функции Click, или будет применяться только DatePicker, когда пользователь нажимает на кнопку.

Так что вам нужно сделать, это

$(document).ready(function() { 
     $("#startDatePicker").datepicker(); 
     $("#endDatePicker").datepicker(); 
});

Так, с этим вы будете применять DatePicker на странице загрузки, без щелчка по кнопке

источник

2016-01-11 10:28:37

Попробуйте это!

$(document).ready(function() { 
    $("#startDatePicker").datepicker(); 
    $("#endDatePicker").datepicker(); 
}); 

$('#somebutton').click(
    function() { 
     $.getJSON('Controller', { 
      //the parameters go here 
     }, function(searchList) { 
     var $table = $('<table>').appendTo($('#somediv')); 
     $.each(searchList, function(index, userBean) { 
      $('<tr>').appendTo($table).append(
        $('<td>').text(userBean.caseNumber)).append(
        $('<td>').text(userBean.caseOwner)).append(
        $('<td>').text(userBean.status)).append(
        $('<td>').text(userBean.issue)).append(
        $('<td>').text(userBean.reason)).append(
        $('<td>').text(userBean.age)); 
     }); 
    }); 
});

источник

2016-01-11 10:30:31

$("#startDatePicker").datepicker(); 
$("#endDatePicker").datepicker(); 

$('#somebutton').click(function() { 


    $.getJSON('Controller', { 
     //the parameters go here 
    }, function(searchList) { 
     var $table = $('<table>').appendTo($('#somediv')); 
     $.each(searchList, function(index, userBean) { 
      $('<tr>').appendTo($table).append(
        $('<td>').text(userBean.caseNumber)).append(
        $('<td>').text(userBean.caseOwner)).append(
        $('<td>').text(userBean.status)).append(
        $('<td>').text(userBean.issue)).append(
        $('<td>').text(userBean.reason)).append(
        $('<td>').text(userBean.age)); 
     }); 
    }); 

});

источник

2016-01-11 10:31:34

Вы должны добавить опцию Datepicker снаружи и внутри вашего Некоторые кнопки.

$(document).ready(function() {  

    // Date Picker   
    $("#startDatePicker").datepicker(); 
    $("#endDatePicker").datepicker(); 

    $('#somebutton').click(function() { 


     $.getJSON('Controller', { 
      //the parameters go here 
     }, function(searchList) { 
      var $table = $('<table>').appendTo($('#somediv')); 
      $.each(searchList, function(index, userBean) { 
       $('<tr>').appendTo($table).append(
         $('<td>').text(userBean.caseNumber)).append(
         $('<td>').text(userBean.caseOwner)).append(
         $('<td>').text(userBean.status)).append(
         $('<td>').text(userBean.issue)).append(
         $('<td>').text(userBean.reason)).append(
         $('<td>').text(userBean.age)); 
      }); 
     }); 

     // Date Picker   
     $("#startDatePicker").datepicker(); 
     $("#endDatePicker").datepicker(); 

    }); 

});

источник

2016-01-11 10:40:32

попробовать это

$(document).ready(function() { 
      $("#startDatePicker").datepicker(); 
      $("#endDatePicker").datepicker(); 
      $.getJSON('Controller', { 
       //the parameters go here 
      }, function(searchList) { 
      var $table = $('<table>').appendTo($('#somediv')); 
      $.each(searchList, function(index, userBean) { 
       $('<tr>').appendTo($table).append(
         $('<td>').text(userBean.caseNumber)).append(
         $('<td>').text(userBean.caseOwner)).append(
         $('<td>').text(userBean.status)).append(
         $('<td>').text(userBean.issue)).append(
         $('<td>').text(userBean.reason)).append(
         $('<td>').text(userBean.age)); 
      }); 
     }); 

    });

JS FIDDLE работает

источник

2016-01-11 10:47:09 jitsu553

JQuery плагин, работающий после того, как я нажал кнопку

ответ

Смежные вопросы