In the index page, I have a div that serves as the modal container:
- <div class="modal" id="edit-document">
- <div id="edit-document-container"></div>
- </div>
On this page, I have a drop area that will accept files:
- <div id="fileUploadDropZone">
- <input type="file" name="formlessUpload" id="formlessUpload" class="inputfile" multiple />
- <p id="fds">Click/Drop Files Here</p>
- </div>
And some CSS to make the area a drop area:
- #fileUploadDropZone {
- width: 100%;
- height: 200px;
- border: 4px dashed #808080;
- }
- #fileUploadDropZone p {
- width: 100%;
- height: 100%;
- text-align: center;
- line-height: 170px;
- font-size: 2em;
- }
And code to initialize the modal (using LightView):
- $("#formlessUpload").on("change", function () {
- // Get uploaded file(s) collection, assign to local variable.
- files = $("#formlessUpload").prop("files");
- $.get(url, function (data) {
- // Load HTML from ajax GET into modal container div (MVC partial view).
- $("#edit-document-container").html(data);
- Lightview.show("#edit-document-container");
- });
- });
This all works as expected. At first, I had a form on the index page and loaded the HTML into a container div in the form on that page. Unfortunately, loading the partial view this way meant that my form inputs were null when posting to the controller. To get around this, I used hidden form field values outside of the modal container, and assigned the partial view's inputs to these hidden fields before posting via JavaScript. This was an ugly hack, and I found out the problem was that my form needed to be inside the partial view. So I put it there, but now I'm having trouble getting to those input form fields from the index page. What I want to do is this:
1. User drops files on the drop area.
2. Files are saved to a local variable, and...
3. Modal pops up for user to enter some metadata about the files.
4. User submits the form in this modal, which then...
5. Copies the files from the local variable to a form input field and submits the form.
The LightView modal plugin has event callbacks, but I can't select the modal form fields using jQuery with or without using the callbacks. If I look at the resulting source code in Chrome after loading the modal, it's in the DOM, so I thought I should be able to query against it once it loaded. So far no dice.
I either need to be able to select ajax-loaded HTML elements with jQuery, or I need to pass the uploaded files into the call to the modal (which I don't know if it's possible). Any suggestions?