Ajax form submission from a JQuery UI modal dialog in CakePHP

I just wanted to share with you two approaches to bringing up an add or edit form in a JQuery UI modal dialog and closing the dialog on a successful submit or keeping it open and displaying errors in case of validation or other save problems.

A non-Cake approach

Ingredients

CakePHP 2+
JQuery 1.9+
JQuery UI
JQuery Form Plugin

The Views

Main page

This is the page from which we want to launch our modal add or edit dialog:

<!-- overlayed element -->
<div id="dialogModal">
     <!-- the external content is loaded inside this tag -->
     <div class="contentWrap"></div>
</div>
...
<div class="actions">
    <ul>
        <li>
            <?php echo $this->Html->link(__('Add user', true), array("controller"=>"users", "action"=>"add"), array("class"=>"overlay", "title"=>"Add User"));
        </li>
    </ul>
</div>
...
<script>
$(document).ready(function() {
    //prepare the dialog
    $( "#dialogModal" ).dialog({
        autoOpen: false,
        show: {
            effect: "blind",
            duration: 500
            },
        hide: {
            effect: "blind",
            duration: 500
            },
        modal: true
        });
    //respond to click event on anything with 'overlay' class
    $(".overlay").click(function(event){
        event.preventDefault();
        $('#contentWrap').load($(this).attr("href"));  //load content from href of link
        $('#dialogModal').dialog('option', 'title', $(this).attr("title"));  //make dialog title that of link
        $('#dialogModal').dialog('open');  //open the dialog
        });
    });
</script>

Our add or edit form

This is shown in the dialog

echo $this->Form->create('User');
echo $this->Form->input('name');
echo $this->Form->end('Submit');
<script>
$('#UserAddForm').ajaxForm({ 
    target: '#contentWrap', 
    resetForm: false, 
    beforeSubmit: function() { 
        $('#contentWrap').html('Loading...'); 
        }, 
    success: function(response) { 
        if (response=="saved")) { 
            $('#dialogModal').dialog('close');  //close containing dialog    
            location.reload();  //if you want to reload parent page to show updated user
            } 
        } 
    });
</script>

Controller

For our add or edit action

function add() {
    ...
    if (!empty($this->request->data)) {
        $this->User->create();
        if ($this->User->save($this->request->data)){ 
            return "saved"; 
            } 
        }
    ...
    }

 

A more Cakey approach

With thanks to RXC on StackOverflow

Ingredients

CakePHP 2+
JQuery 1.9+
JQuery UI

The Views

Main page

This is the same as above

Our add or edit form

echo $this->Form->create('User');
echo $this->Form->input('name');
echo $this->Js->submit('Save', array(  //create 'ajax' save button
    'update' => '#contentWrap'  //id of DOM element to update with selector
    ));
if (false != $saved){ //will only be true if saved OK in controller from ajax save above
    echo "<script>
        $('#dialogModal').dialog('close');  //close containing dialog         
        location.reload();  //if you want to reload parent page to show updated user
    </script>";
    }
echo $this->Form->end();
echo $this->Js->writeBuffer(); //assuming this view is rendered without the default layout, make sure you write out the JS buffer at the bottom of the page

Controller

For our add or edit action

function add() {
    ...
    $this->set('saved', false); //false by default - controls closure of overlay in which this is opened
    if (!empty($this->request->data)) {
        $this->User->create();
        if ($this->User->save($this->request->data)){ 
            $this->set('saved', true); //only set true if data saves OK
            } 
        }
    ...
    }

Hope that’s helpful. Would be very interested in alternatives that have worked for you…and corrections to inevitable errors above.

Google Maps Autocomplete in Bootstrap Modal

I’ve just spent a while struggling to get a Google Maps API v3 Places Autocomplete search text box working in a Bootstrap JS Modal. It seemed as though the autocomplete wasn’t working at all, which I initially thought meant that I had messed up my JQuery selectors. However, it turns out that it the autocomplete was working (I could use the down arrow to toggle through the results), but the results were being shown behind the modal box. The z-index of the modal box is 1040 by default, whereas that of the .pac-container div that shows the autocomplete results is 1000 (defined inline).

Therefore, the solution (easy when you know how) is to change the z-index of the .pac-container div to greater than 1040, so that it appears on top of the modal. Since the z-index of .pac-container is defined inline, it is necessary to use !important to override this inline style with from an internal/external stylesheet:

div.pac-container {
   z-index: 1050 !important;
}

Moving/copying large MySQL databases between servers with or without phpMyAdmin

I don’t suppose I’m alone in restricting the majority of my interactions with MySQL to what you can do through the wonderful phpMyAdmin. However, one place where it really lets you down is when you are trying to move large databases between servers. Exporting doesn’t seem to cause any problems (with the 100MB or so that I’ve tried so far anyway) but importing is where things start to go wrong.

phpMyAdmin seems to default to a maximum file upload size of 8MB but this, and other settings, are actually set in php.ini. You can zip (or gzip, etc.) your exported SQL file to bring down its size and/or change:

post_max_size = 8M
upload_max_filesize = 2M

in php.ini (just make sure you’re editing the right one – you will often find more than one) to values appropriate for your file.

However, you may still run into problems with execution timeouts and out of memory errors. You can fiddle around trying to change these settings in php.ini:

max_execution_time = 30 (in seconds)
memory_limit = 128M

If this fails, or if you’re just more of a GUI kind of person, and before you take the desperate step of trying to import table by table (if you do go down this route, make sure you have exported with ‘Disable foreign key checks’ ticked with InnoDB tables, to prevent missing foreign key errors), take a look at the free, cross-platform MySQL Workbench (http://www.mysql.com/products/workbench/). We already use this as a great visual DB modelling tool which takes care of all the complexities of foreign key constraints but I have only just realised today that it’s also a great way to import large databases. Simply connect to your target MySQL DB and:

  1. Click ‘Data Import/Restore’ under ‘Management’ in the ‘Navigator’ pane;
  2. Choose ‘Import from Self-Contained File’ and browse to your sql file;
  3. Choose the pre-existing database name (from ‘Default Target Schema’) if you have already created it or allow it to create it for your if you have exported with the DB creation code in there.

It takes a while, and the progress bar doesn’t move ’til it’s finished but it does the job beautifully.