JQuery UI Dialog + внешний контент с AJAX не работает - PullRequest
Новая
       2

JQuery UI Dialog + внешний контент с AJAX не работает

1 голос
/ 02 сентября 2010

Моя цель: после нажатия на ссылку я хочу загрузить внешнюю страницу (с формой загрузки изображений) в диалоговое окно jQuery UI и передать ее в стиле AJAX.

Моя проблема: Диалог прекрасно загружает внешнюю страницу PHP, и я могу отправить форму через AJAX - используя плагин формы jQuery, показанный здесь http://jquery.malsup.com/form/ - НО по какой-то причине отправка AJAX не будет работать внутри диалогового окна, только когда я просматриваю страницу напрямую. Он просто загружает саму страницу, как будто JS выключен или что-то в этом роде.

Вот родительская страница, отображающая диалоговое окно:

port_edit.php (заголовок) 

    <script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
    <script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
    <script type="text/javascript" src="../common/js/jquery.form.js"></script>
    <script type="text/javascript">
    function refreshWindow(){
        location.reload(true);
    }

    $(document).ready(function() {
    $('#gallery-display').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>')
            .load($link.attr('href'))
            .dialog({
                autoOpen: false,
                title: 'Gallery Display',
                width: 280,
                height: 280,
                close: refreshWindow,
                resizable: false

            });

        $link.click(function() {
            $dialog.dialog('open');
            return false;
        });


    });
});
    </script>

port_edit.php (ссылка) 

<a href="image_upload.php" id="gallery-display">Modify</a>

И внешний документ загружается в диалог:

image_upload.php 

<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script> 
    <script type="text/javascript"> 
        // wait for the DOM to be loaded 
        $(document).ready(function() { 
        // attach handler to form's submit event
        $('#image-upload').submit(function() { 
            // submit the form 
            $(this).ajaxSubmit(); 
            return false;
        });        }); 
    </script> 
</head>

<body>
<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
<input type="file" name="file" id="file" /> 
<input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
<br />
</form>

HELP!

1 Ответ

0 голосов
/ 02 сентября 2010

Хотите попробовать переместить код в document.ready () в image_upload.php в ту же функцию в port_edit.php и попробовать еще раз? Я не уверен, что это сработает, но вы можете попробовать это ...

Как показано ниже:

port_edit.php 

<script type="text/javascript" src="../common/js/jquery-1.4.2.min.js"></script>
<script type="text/javascript" src="../common/js/jquery-ui-1.8.4.custom.min.js"></script>
<script type="text/javascript" src="../common/js/jquery.form.js"></script>
<script type="text/javascript">
function refreshWindow() {
    location.reload(true);
}

$(document).ready(function() {
    $('#gallery-display').each(function() {
        var $link = $(this);
        var $dialog = $('<div></div>').load($link.attr('href')).dialog({
            autoOpen: false,
            title: 'Gallery Display',
            width: 280,
            height: 280,
            close: refreshWindow,
            resizable: false

        });

        $link.click(function() {
            $dialog.dialog('open');
            return false;
        });
    });

    // attach handler to form's submit event
    $('#image-upload').submit(function() {
        // submit the form
        $(this).ajaxSubmit();
        return false;
    });

});
</script>
<a href="image_upload.php" id="gallery-display">Modify</a>

image_upload.php 

<form action="image_upload_action.php" method="post" enctype="multipart/form-data" name="portfolio-upload" id="image-upload">
    <input type="file" name="file" id="file" />
    <input type="submit" name="btn-submit" id="btn-submit" value="Upload" class="button"/>
    <br />
</form>
...