getBootstrap: javascript in modal dialogue

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.
kosher_admin_imageslist 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:

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

Now a little sneak view of our images_list.php

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

Another big task was to make edit dialogue with automatically uploading image.
kosher_admin_edit 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:

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 😉