Odtnhj

I need some help converting existing JS functionality that was originally written with jQuery UI and now is moving to Bootstrap + jQuery. This particular code is using a form for uploading an image file and on submit it brings up a modal window with two options: "I Agree" and "Cancel". Cancel simply closes modal window but I agree submits the form.

Here's the old code:

HTML (old)

<input type="file" name="customLogo"> 
<input class="btn" type="submit" name="customLogoUpload" value="Upload File">

<div id="logoUploadLegal" class="jq-dialog txtAlnLt" title="Legal">
 By uploading a file ...</p>
</div>

JS (old)

if( $(form_selector + " .customLogo").length ) 
 test_edit_form_legal_notice_dialog_hook(form_selector, "#logoUploadLegal", "input[name=customLogoUpload]");


function test_edit_form_legal_notice_dialog_hook(form_selector, dialog_selector, upload_btn_selector)

 var upload_button_used = false,
 legal_ok = false;

 $(form_selector + " input:submit").on("click", function() 
 if( $(form_selector + " " + upload_btn_selector).is(this) )
 upload_button_used = true;
 else
 upload_button_used = false;
 );

 $(form_selector).on("submit", function() 
 if( !$(form_selector + " input:file").val().length )
 return true;

 if( legal_ok )
 return true;

 $(dialog_selector).dialog(
 modal: true,
 draggable: true,
 resizable: true,
 width: 400,

 buttons: 
 "I agree" : function() 
 legal_ok = true;
 if( upload_button_used )
 $(form_selector + " " + upload_btn_selector).click();
 else
 $(form_selector).submit();
 ,
 "Cancel" : function () 
 $(this).dialog("close");
 
 
 );

 return false;
 );

JS (new)

and here's my attempt to convert to the new code. I just don't quite understand how to engage modal button...

HTML (new)

<div class="form-group">
 <input id="customLogo" type="file" name="customLogo"> 
</div>
<input class="btn btn-default" type="submit" name="customLogoUpload" value="Upload File">

<div id="logoUploadLegal" class="modal fade bs-example-modal-sm" tabindex="-1" role="dialog">
 <div class="modal-dialog modal-sm" role="document">
 <div class="modal-content">
 <div class="modal-header h4">
 Legal
 </div>
 <div class="modal-body">
 By uploading a file ...</p>
 </div>
 <div class="modal-footer">
 <button type="button" class="btn btn-default logoUploadLegalConfirm" data-dismiss="modal">OK</button>
 </div>
 </div>
 </div>
</div>

JS (old)

function test_edit_form_legal_notice_dialog_hook(form_selector, dialog_selector, upload_btn_selector)

 var upload_button_used = false,
 legal_ok = false;

 $(form_selector + " input:submit").on("click", function() 
 if( $(form_selector + " " + upload_btn_selector).is(this) )
 upload_button_used = true;
 else
 upload_button_used = false;
 );

 $(form_selector).on("submit", function() 
 if( !$(form_selector + " input:file").val().length )
 return true;

 if( legal_ok )
 return true;


 $(dialog_selector).modal(function()

 $(dialog_selector).on('click', 'button', function() 
 console.log(upload_button_used);
 );
 //
 // buttons: 
 // "I agree" : function() 
 // legal_ok = true;
 // if( upload_button_used )
 // $(form_selector + " " + upload_btn_selector).click();
 // else
 // $(form_selector).submit();
 // ,
 // "Cancel" : function () 
 // $(this).dialog("close");
 // 
 // 
 );

 return false;
 );