Question

I have an Index.aspx page with a button. If you click the button a create overlay pops up. In this overlay lies the form. So the create overlay form page and the Index.aspx are seperated. The whole form is rendered into the Index.aspx using jQuery Overlay plugin from http://flowplayer.org/tools/overlay/index.html (in $(document).ready(function ():

var triggers = $("a[rel]").overlay({
                expose: '#3B5872',
                effect: 'apple',
                closeOnClick: false,
                onBeforeLoad: function () {
                    var wrap = this.getContent().find(".contentWrap");
                    wrap.load(this.getTrigger().attr("href"));
                }
            });

.contentWrap is the div element where the overlay (form) is rendered in.

How can I prevent the form submit via jQuery?

The problem I have is that the form is not there at the $(document).ready(function () function.

When this done I want to send the data from the form via Ajax and update the table on the Index.aspx by also using Ajax with jQuery.

This does not work for now (in document ready function), because the form is not there:

    $("#formCreate").submit(function(event){
        event.preventDefault();
        hijack(this, update_employees, "html");
    });

How can I do this?

Thank you very much in advance!

EDIT
Now I tried this in the $(document).ready function, with no success 🙁

$(document).ready(function () {
            $("a[rel]").overlay({
                mask: '#3B5872',
                effect: 'apple',
                api: true,
                onBeforeLoad: function () {
                    var wrap = this.getOverlay().find(".contentWrap");
                    wrap.load(this.getTrigger().attr("href"));
                },
                onLoad: function () {
                    $("#new_employee").submit(function (event) {
                        event.preventDefault();
                        alert('PREVENT');
                        hijack(this, update_employees, "html");
                    });
                    alert('onLoad');
                }
            });
        });

When I press a button an external page is rendered into a div and the page is popped up as an overlay. The onLoad method is executed AFTER everything is loaded as I understood. And there seems to be the problem. My “new_employee” form is sometimes completly loaded and sometimes not. Because of this at one time I get the alert PREVENT and other times I got no alert. This is in Chrome. In Firefox this does not work at all.

Has anybody any suggestions for me?

Answer 1

When you create the form you can bind to the form’s onSubmit and submit it via ajax and then just return false to stop it from submitting.

For example:

$('.contentWrap form').submit(function() {
        $.ajax({
            type: $(form).attr('method'),
            url: $(form).attr('action'),
            data: $(this).serializeArray(),
            success: function (data) {
               //do something on success
            }
        });
        return false;
}