getBootstrap: javascript in modal dialogue

I made an administration console using getBootstrap framework. Wonderful and simple in use mechanism to create fully functional sites.
At some moment, I faced a problem, that I need more “stay in one page” solution. For that purposes, I started looking deeper to utilizing modal dialogues.

My first experience was with adding pictures to products in our database.
It is a very simple example how you can use modal dialogues for your own forms. The list of images is taken from Microsoft Azure image search API. User selects proper image from the list and saves. After saving image in proper row is set to selected and product is updated in database.
The code is the following:

image


            

                

                    

                        

                            ×
                             
Modal title

                        
                        
One fine body…
                        

                            Close
                            Save changes
                        
                    
                    
                
                
            
                                        

Modal container is needed to put content of our script into.

Now a little sneak view of our images_list.php

$request = $_GET["request"];

$rootUri = 'https://api.datamarket.azure.com/Bing/Search';
$serviceOp = "Image";

        $requestUri = "$rootUri/$serviceOp?\$format=json&Query='".urlencode($request)."'";
        // Encode the credentials and create the stream context.

        $data = array(
            'http' => array(
            'request_fulluri' => true,

        // ignore_errors can help debug – remove for production. This option added in PHP 5.2.10
            'ignore_errors' => false,
            'header' => "Authorization: Basic $auth")
        );

        $context = stream_context_create($data);

        // Get the response from Bing.
        $response = file_get_contents($requestUri, 0, $context);
        $jsonObj = json_decode($response);

        $image_url = "";
        $resultStr ="";
$i=0;
        foreach($jsonObj->d->results as $value) {
            $i++;
            $checked = "";
            if ($i==1)
                $checked = "checked";
            switch ($value->__metadata->type) {
                case 'WebResult':
                    $resultStr .= "Url}\">{$value->Title}
{$value->Description}
";
                    break;
                case 'ImageResult':
                    $resultStr .=
                  "

                    

                      
                        MediaUrl}\" $checked>
                        {$value->Title} ({$value->Width}x{$value->Height}) " . "{$value->FileSize} bytes)
                      
                    
" .
                        "
MediaUrl}\" >" .
                            "Thumbnail->MediaUrl}\">
                        
                  
";
                    $image_url = $value->MediaUrl;
                    break;
            }
        }


?>

        

            

                ×
                 


            
            

                
                

                    

                        

                        
                        
                    
                
                

                    Close
                    Save changes

                
            

        
        
    
    

And a little bit of JavaScript to submit our form and do all the needed actions:

$(document).on('submit','form#modal-form', function(event) {

        var id = $("input#id").val();

        $.ajax(
                {
                    type: 'POST',
                    url: $(this).attr('action'),
                    data: $(this).serialize(), //your form datas to post
                    success: function(response)
                    {
                        $("img#image-"+id).attr("src",response);
                        $("a#link-"+id).attr("href",response);
                    },
                    error: function()
                    {
                        alert("Failure");
                    }
                });
        $('#myModal').modal('hide');
        return false;
    });

Another big task was to make edit dialogue with automatically uploading image.
I used an interesting project to make file upload fast and reliable jQuery File Upload. This project gives you possibility to upload files just after you selected a file on your computer hard drive. The problem I met was, that there is no simple way to assign fileUpload to the element in modal dialogue. So, I found the following solution for this:

$('#myModal').on('shown.bs.modal', function(e) {
        $('.modal-body #fileuploadModal').fileupload({
            dataType: 'json',
            done: function (e, data) {
                $.each(data.result.files, function (index, file) {
                    $('#imageUrlModal').val(file.url);
                    $('#fileupload-outputModal').text(file.url);
                    $('#fileupload-imageModal').attr("src", file.url);
                });
            },
            progressall: function (e, data) {
                    var progress = parseInt(data.loaded / data.total * 100, 10);
                    $('#progressModal .bar').css(
                        'width',
                        progress + '%'
                    );
                }
        });

    });

This issue was the most difficult to solve. I spent several hour to find the solution. Actually, event ‘shown.bs.modal’ is the key to success 😉