Dialog and Datepicker not working inside jquery tabs for Safari or Chrome

Dialog and Datepicker not working inside jquery tabs for Safari or Chrome

Hi There,

I am fairly new to jquery and really enjoy the jquery ui.  I'm developing an internal notification app and came across an issue.  Maybe this is a quick fix, but I haven't been able to figure it out since it works in IE & FF.

I have a few inputs in which I've binded the datepicker. I've also binded an anchor tag to a click function which opens a new dialog with content generated from a different page.  The dialog and datepicker work perfectly fine while using IE and Firefox.

However, the behavior is not the same for Safari or Chrome for the dialog.  Instead of popping up the dialog on click, it redirects me to the actual referenced html page.  The datepicker doesn't even work. Below is a snippet of my code: 

main index.php file contains the javascript code to render the tabs:
=====
This is my markup for the tabs:

<div id="latest_tab">
<ul>
<li><a href="latest_notice.php">Latest Notice</a></li>
<li><a href="search_outages.php">Search</a></li>
</ul>
</div>

As you can see, I am referencing two other php pages which will render the content inside the tabs.  Below is the code for both.

latest_notice.php:
<script type="text/javascript">
$(document).ready(function() {
var $latest_dialog = $('<div></div>').dialog({
        autoOpen: false, 
        modal: false,
        position: 'center',
        zindex: 3000,
        width: 400,
        height: 350,
        resizable: false,
        draggable: true

        });

    $('.latest a').click(function() {          
        var URL = $('#outage').attr("href");
        $.get(URL, function(data) {
            $latest_dialog.html(data);
            $latest_dialog.dialog('open');
        });
        return false;
    });
});

This works fine in IE and FF.. but in Chrome or Safari, again just takes me to those pages as opposed to opening the dialog.

search_outages.php:
$(document).ready(function() {
$("#start_date").datepicker({
duration: '',
showTime: false,
constrainInput: false,
stepMinutes: 1,
stepHours: 1,
time24h: false
});


$("#end_date").datepicker({
duration: '',
showTime: false,
constrainInput: false,
stepMinutes: 1,
stepHours: 1,
time24h: false
});
});

This is the binding for the date picker.  This too works in IE and FF and fires off the datepicker via the index.php page.  However, it Chrome or Safari, it does nothing.  I don't see any errors as well.  Can anyone tell me what I may be doing wrong here?

Thanks again and apologize for the long post.

[RQ]

    • Topic Participants

    • info