Couldnt upload file in Jquery Dialog using AJAX. Help !

Question

Im using Zend Framework. Here's index.phtml :

    <div id="edit-add-form" title="Insert">
    <form id="main-form" name="main-form" action="" method="post" enctype="multipart/form-data">

    </form>
    </div>
<a onclick="openAddPopup()">Open Popup</a>

I use ajax to load content to modal dialog (edit-add-form div element) from addForm.phtml:

openAddPopup = function(){
    $.ajax({
        type: "POST",
        url: '<?php echo $this->baseUrl()?>/core/database/landmark',
        data: "&act=insert",
        success: function(result,status,xResponse) {
        $("#main-form").html(result);
            $("#edit-add-form").dialog({
                autoOpen: true,
                title: 'Insert Data',
                width: $(window).width()-20,
                height: $(window).height()-20,
                resizeable: false,
                buttons: {
                            'Insert' : function() {
                                validateLForm();    
                            }
                            ,
                            Cancel: function() {
                                resetAllField();    
                                $(this).dialog('close');
                            }
                }

            });
        }
      });

}

Here's addForm.phtml :

<input type="text" id="l_name" name="l_name">
<input type="file" id="l_image" name="l_image">
<input type="submit" name="upload" id="upload" value="Upload Image">

But when I hit the submit button, just only the text input posted, but the file input didnt. It's weird huh?

Need your help so much. Regard.

Edgar Villegas Alvarado · Accepted Answer · 2011-07-06 09:22:11Z

1

You're missing the success handler. You should do:

openAddPopup = function(){
    $.ajax({
        type: "POST",
        url: '<?php echo $this->baseUrl()?>/core/database/landmark',
        data: "&act=insert",
        success: function(result){ //This line!!!
            $("#main-form").html(result);
            $("#edit-add-form").dialog({
                autoOpen: true,
                title: 'Insert Data',
                width: $(window).width()-20,
                height: $(window).height()-20,
                resizeable: false,
                buttons: {
                            'Insert' : function() {
                                validateLForm();    
                            }
                            ,
                            Cancel: function() {
                                resetAllField();    
                                $(this).dialog('close');
                            }
                }

            });

        } //This line also!
     });

}

ADVICE: Use firefox's firebug Net panel to see if your file is really uploading

Hope this helps. Cheers

answered Jul 6, 2011 at 9:22

Edgar Villegas Alvarado

18.4k2 gold badges45 silver badges61 bronze badges

Sign up to request clarification or add additional context in comments.

2 Comments

Nấm Lùn Over a year ago

Sorry, it's my typo mistake. I've updated my post. Still need help.

Nấm Lùn Over a year ago

Finally I know that it's impossible to upload a file via ajax. Using iFrame is one of many solutions.

Collectives™ on Stack Overflow

Couldnt upload file in Jquery Dialog using AJAX. Help !

1 Answer 1

2 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

2 Comments

Your Answer

Sign up or log in

Post as a guest

Related