Open jQuery dialog box upon selecting a date from jQuery datepicker inline

问题

Presently my project page is having a jQuery datepicker inline placed on one of the section of the page. The below code is used to achieve the same.

<link rel="stylesheet" href="~/Scripts/Calendar/jquery-ui-1.10.1.custom.css">
<script src="~/Scripts/Calendar/jquery-1.9.1.js"></script>
<script src="~/Scripts/Calendar/jquery-ui-1.10.1.custom.js"></script>
<script>
$(document).on("change", "#datepicker", function () {
    var date = $(this).val();
    $( "#dialog" ).dialog();
});
</script>

// The below section is in one of the sections
<div id="datepicker" style="font: 80% 'Trebuchet MS', sans-serif;"></div>
<script>
    $("#datepicker").datepicker();
</script>
.
.
.
<div id="dialog-modal" title="Basic modal dialog">
   <p>Adding the modal overlay screen.</p>
 </div>

Now I would have to show a jQuery dialog with information, when the user click's on a specific date.

Well I tried to call the dialog

$(document).on("change", "#datepicker", function () {
    var date = $(this).val();
    $( "#dialog" ).dialog();
});

but it shows an error as Object doesn't support property or method dialog.

Could any body put me in the right direction.

Thank you

回答1:

Have a look this fiddle to see if this helps.

http://jsfiddle.net/qqabC/

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

$("#datepicker").change(function(){
     var date = $(this).val();
    $('<div>' + date + '</div>').dialog();
});

回答2:

I think you are including jquery twice. You have a jquery-1.9.1.js and also some other jquery-1.x.x.js script files included, or same jquery-1.9.1.js 2nd time Everything seems to be plugging into the first instance and then the last include overrides $. So that's why you're seeing this error message.

Please review once again..

also Include $j = jQuery.noConflict(); into your script tag to avoid conflicts!

来源：https://stackoverflow.com/questions/15469553/open-jquery-dialog-box-upon-selecting-a-date-from-jquery-datepicker-inline

标签

jquery

dialog

datepicker