CODEWITHSUNDEEP
javascriptjqueryjquery-uijquery-ui-dialog
geoctrl
geoctrl

Reputation: 685

jQuery Dialog UI scrolls to the top indefinably

I'm working on someone's code and they used jquery UI Dialog for all the popups. The problem is that the page keeps scrolling to the top while the dialog is left wherever it was opened at. Here's the code:

$('body').on('click', 'a[href$="#dialog"]', function(e) {
    e.preventDefault();
    $('#contact-popup').dialog({
        title: 'Contact',
        modal: true,
        width: 328,
        show: {effect: 'fade', duration: 400},
        hide: {effect: 'fade', duration: 400},
        resizable: false,
        draggable: false,
        open: function() {
            $('#contact-popup form').show();
            $('#thanks').hide();
        }
    })
    return false;
});

I've tried e.preventDefault(), return false, but it still scrolls to the top of the page.

I'm calling the dialog from an anchor: <a href="#dialog">Click Here</a>

Do I need to change the way I'm calling the dialog? Or am I doing something wrong here?

Here's the link so you can test it out: test.persogenics.com/hire/interview-guide/

Just tried putting the dialog 'open' into a regular js function - didn't work - still scrolls to the top:

js:
function popup() {
    $('#contact-popup').dialog()
    return false;
};

html:
<button onClick="popup();">Click Me</button>

this means it's not an anchor issue,.. right?

Upvotes: 1

Views: 2719

Answers (2)

geoctrl
geoctrl

Reputation: 685

Found the issue! Turns out that the issue was an absolute positioned input I created to "trick" the dialog UI into not auto-focusing on any of the real inputs.

<div id="contact-popup" style="display:none">

--> <input type='text' style='position:absolute; top:-9999px;' />

    <form method="post" action="../../email.php">
        <h5>Leave us your contact info and we'll get in touch.</h5>
        <div data-role="fieldcontain">
            <input type="text" name="first-name" value="" class="required">

I guess that trips out the view of the page because it pushes it to the top.

Now I know that you not only have to be careful how you write the jQuery, but also what you put into the dialog popups!

Thank you to everyone for your help on this!

Upvotes: 1

Shobhit Sharma
Shobhit Sharma

Reputation: 1609

The problem might be that you are using an anchor URL which points to an anchor within a page common practice is passing "javascript:void(0)" as href, in your case you are detecting the particular anchor by it's href, so to tackle that you can pass a class to the anchor tags that point to the dialog box and selecting by that. Maybe something like this

<a class="dialog_link" href="javascript:void(0)" >

and JQuery

$('body').on('click', ',dialog_link', function(e) {
e.preventDefault();
$('#contact-popup').dialog({
    title: 'Contact',
    modal: true,
    width: 328,
    show: {effect: 'fade', duration: 400},
    hide: {effect: 'fade', duration: 400},
    resizable: false,
    draggable: false,
    open: function() {
        $('#contact-popup form').show();
        $('#thanks').hide();
    }
})
return false;

});

Upvotes: 0

Related Questions