We Keep Coding

File upload window after Sweet Alert

Use Case:
I'm trying to change window.alert to Sweet alert.
When I used window.alert, alert pop-up appeared before file-upload window and then clicked 'OK', file upload window appeared.
But, after changing window.alert to Sweet alert, file-upload window appears simultaneously.
<label for="ScanFile"><i class="fa fa-upload" style='cursor: pointer;' ng-click="uploadAlert(row)"></i></label>
<input id="ScanFile" type="file"/>
When a user clicks the label, Sweet-alert appeared, and then the user can select the file.
uploadAlert() :
$scope.uploadAlert = function() {
$window.alert(~~~~~~);
}
How to solve this problem?

<label for="ScanFile"><i class="fa fa-upload" style='cursor: pointer;' ng-click="uploadAlert(event, row)"></i></label>
<input id="ScanFile" type="file"/>
your uploadAlert() function will be like,
$scope.uploadAlert = function(e) {
e.preventDefault(); // this will prevent the upload dialog from opening
swal(); // sweetalert popup
}
now you can programatically click on the <input id="ScanFile" type="file"/> using the id, to open the dialog after closing sweetalert dialog.
document.getElementById("ScanFile").click();
For example:
$scope.uploadAlert = function(e) {
e.preventDefault(); // this will prevent the upload dialog from opening
swal({
title: 'Demo',
text: 'Demo',
showCancelButton: true,
confirmButtonText: 'Submit',
},
function() {
document.getElementById("ScanFile").click();
});
});
}

Listener that checks to see if button is DISABLED and IF IT IS clicked on while disabled and if it is, pop up an alert

I am new to Javascript and jquery and trying to learn
I made a submit button that stay disabled while the client doesn't upload an image. It is working fine.
The submit button is called PROSEGUIR.
What I am trying to do is... if the client try to click in the PROSEGUIR button while it is disabled, it pop up an alert msg.. but it is not working.
Check out the html button:
<input type="submit" disabled="disabled" name="proseguir" id="proseguir" value="Prosseguir >>" class="bg-red btn_next_two">
Is that right ??
NOw, I wrote this listener after jquery in
<script>
$(document).ready(function(){
$("#proseguir").click(function(){
if($(this).is('[disabled=disabled]') == true) {
alert("Please upload an image before submitting");
}
});
});
</script>
What am I doing wrong ? because it is not working. When the user click in PROSEGUIR button (submit) while it is disabled an alert pop up doesn't show up...
Please, help me !!

You can check disabled by using prop() or simply by this.disabled like,
$(document).ready(function(){
$("#proseguir").click(function(){
if($(this).prop('disabled')) { // or use this.disabled
alert("Please upload an image before submitting");
}
});
});
But you can't trigger click event on a disabled element. See snippet,
$(document).ready(function() {
$(".proseguir").click(function() {
console.log(this.disabled);
if ($(this).prop('disabled')) {
alert("Please upload an image before submitting");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input type="submit" disabled="disabled" name="proseguir" value="Prosseguir >>" class="bg-red btn_next_two proseguir"><br/>
<input type="submit" name="proseguir" value="Prosseguir >>" class="proseguir bg-red btn_next_two">
Instead of checking submit button disabled property, validate your input file element like,
$(document).ready(function() {
$("#proseguir").click(function() {
var fileName = $('#pfile').val();
if (fileName == '') {
alert("Please upload an image before submitting");
return false; // to prevent form submit
} else {
alert('File is: ' + fileName);
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="file" name="pfile" id="pfile" class="bg-red btn_next_two proseguir" /><br/>
<input type="submit" id="proseguir" name="proseguir" value="Prosseguir >>" class="proseguir bg-red btn_next_two" />
</form>

when you element is disable you can't catch a click event.
you can do like this:
<input type="submit" class="bg-red btn_next_two is_disable" name="proseguir" id="proseguir" value="Prosseguir">
javascript:
$('#proseguir').click(function (event) {
if ($(this).hasClass('is_disable')) {
alert('do some stuff');
} else {
alert('do some stuff when is enable');
}
});
and when upload finished you can remove is_disable class with
$('#proseguir').removeClass('is_disable')

Disabled elements don't fire events by design, so you can't capture a click on a disabled button.
You could just keep the button enabled and style it in some way, or you could fake the click by placing another element on top of it, like this
$(document).ready(function() {
var inp = $('#proseguir'),
div = $('<div />', {
css: {
height : inp.outerHeight(),
width : inp.outerWidth(),
top : inp.offset().top,
left : inp.offset().left,
zIndex : 999
position : 'absolute',
},
id : 'fakeBtn',
on : {
click: function() {
inp.trigger('click');
}
}
}).appendTo(inp.parent());
$('#uploadFiles').on('change', function() {
$("#proseguir").prop('disabled', false);
$('#fakeBtn').hide();
});
$("#proseguir").click(function() {
if (this.disabled) {
alert("Please upload an image before submitting");
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<form>
<input type="file" id="uploadFiles">
<br /><br /><br />
<input type="submit" disabled="disabled" name="proseguir" id="proseguir" value="Prosseguir >>" class="bg-red btn_next_two">
</form>

Featherlight hide div on Close

I'm trying to create a preview screen with data submitted, and display it in Featherlight Lightbox.
I have the following sample codes.
jQuery(document).ready(function() {
//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {
var pa_firstname= jQuery('input[name="pa-[name_first]"]').val();
var pa_lastname= jQuery('input[name="pa-[name_last]"]').val();
if (pa_firstname == null || pa_firstname == '') {
alert('Cannot be empty');
return false;
} else {
jQuery('.LightBox').empty();
jQuery('.LightBox').append('First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname);
//alert('done');
}
jQuery.ajax({
url : padvisor_ajax.ajax_url,
type : 'POST',
dataType: 'json',
data : {
action: 'padvisor_test_ajaxcall_lightbox',
pa_first_name: pa_firstname,
pa_last_name: pa_lastname
},
success: function (data) {
jQuery.featherlight(jQuery('.LightBox'), {});
jQuery('.LightBox').toggle();
}
});
return false;
});
And then I have the following html codes to create 2 fields, a submit button and a preview button:
<form id="pd_test">
<span id="pa-[name_first]" class="pa_name_first"><label for="pa_name_first" >First Name</label>
<input type="text" name="pa-[name_first]" id="pa-[name_first]" value=""/>
</span>';
<span id="pa-[name_last]" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-[name_last]" id="pa-[name_last]" value=""/></span>
<button type="submit" value="Submit">Send Now</button>
<button value="preview" class="OpenLightBox">Preview</button></form>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">This is the content, let the content dwell here</div>
I'm able to show to featherlight box with my DIV when i use .toggle, however I cannot make sense of how I can hide the <div> when i close the featherlight light box.
Can anyone guide me on how to hide the DIV when the featherlight box is close, and let me know whether this is the right way to do?
My Objective... to collect input from the form fields, send via ajax to php to process it, and on success, display in a preview light box where i can have a close button and a submit button. The close button can close it, but the submit button will have the same function as the form submit button.
Problem 1: I need to toggle Hide when the feather light closes.
Problem 2: When the featherlight lightbox closes now, and i click on the preview button again, the DIV only calls empty but it doesn't call the .append to put in the value.

You needed to pass the content properly to featherlight and also did not need to toggle the element since featherlight will do that on the close event.
HTML
<span id="pa-name_first" class="pa_name_first"><label for="pa_name_first" >First Name</label>
<input type="text" name="pa-name_first" id="pa-name_first" value=""/>
</span>
<span id="pa-name_last" class="pa_name_last"><label for="pa_name_last" >Last Name</label><input type="text" name="pa-name_last" id="pa-name_last" value=""/></span>
<button type="submit" value="Submit">Send Now</button>
<button type="button" class="OpenLightBox">Preview</button>
<div class="LightBox" style="width: 300px; height: 60px; display:none;">
<span id="content"></span>
</div>
jQuery
//Triggle when Preview Button is Clicked.
jQuery('.OpenLightBox').off('click').on('click', function( e ) {
var pa_firstname= jQuery('input[name="pa-name_first"]').val();
var pa_lastname= jQuery('input[name="pa-name_last"]').val();
if (pa_firstname == null || pa_firstname == '') {
alert('Cannot be empty');
return false;
} else {
var content = 'First Name in Ajax is' + pa_firstname + ' And Last Name in Ajax is ' + pa_lastname+'';
jQuery('#content').html("");
jQuery('#content').html(content);
jQuery.featherlight('#content', {});
}
});
Working JSFiddle: https://jsfiddle.net/rdawkins/9vktzw88/

create dynamically buttons to show dialog

I have a button (create) and when it's clicked, it creates a new button (Change coordinates) that should be able to open dialog when it's clicked.
First of all I created body of dialog window, I created this via JavaScript, this is just how it looks like in HTML:
<div id="dialog-form" title="Change coordinates">
<p class="validateTips">Both fields are required.</p>
<form>
<fieldset>
<label for="lon">Longitude (decimal)</label>
<input type="text" name="lon" id="lon" value="" class="text ui-widget-content ui-corner-all">
<label for="lat">Latitude (decimal)</label>
<input type="text" name="lat" id="lat" value="" class="text ui-widget-content ui-corner-all">
<input type="submit" tabindex="-1" style="position:absolute; top:-1000px">
</fieldset>
</form>
</div>
Now when create button is clicked I crate new button able to open dialog:
$( "#create" ).button().on( "click", function()
{
var btn = document.createElement("BUTTON");
btn.id = "change_coord";
var t = document.createTextNode("Change coordinates");
btn.appendChild(t);
document.body.appendChild(btn);
});
And this is how my dialog looks like:
dialog = $( "#dialog-form" ).dialog({
autoOpen: false,
height: 300,
width: 350,
modal: true,
buttons:{
"Create an account": addUser,
Cancel: function(){
dialog.dialog( "close" );
}
},
close: function(){
form[ 0 ].reset();
allFields.removeClass( "ui-state-error" );
}
});
Weird is that it works when I'm creating body of dialog and button to open it in
$(function()
{
....
});
But when I'm dynamically creating this button to open dialog it doesn't work at all.
HERE is my fiddle to show you my problem.

Per Charlietfl, who is correct "live" has been deprecated, but it does still remains a common solution to the problem. The other method I've used, which also works is:
$(document).on("mouseenter","#lsTMFmenu", function() {
However, I cannot get JQuery to work against dynamically loaded HTML using just $("#selector").on(), I must use $(document).on statement shown above.
Thanks.

window.close not working in firefox/chrome?

I checked on duplicate threads but did not work. I just need to close browser after I click close. but it is firing Controller [HttpPost] method instead of close the browser.
browser is closing if open the same url from another window.
view
#using (Html.BeginForm())
{
#Html.AntiForgeryToken()
#Html.ValidationSummary(true)
.....
....
<td align="right">
<input type="submit" name="btnSave" value="Save" id="btnSave" />
<input type="submit" name="btnCancel" value="Cancel" id="btnCancel" />
</td>
}
JS
<script type="text/javascript">
$(document).ready(function () {
......
$("#btnCancel").click(function (event) { window.close(); });
});
Controller
[HttpPost]
[ValidateAntiForgeryToken]
public ActionResult Index(List<CustomerCommPreferences> lstcustCommPref, bool chkSolicitation)
{
}
Console warning show Scripts may not close windows that were not opened by script.

JavaScript can only close the windows it has opened. For example:
var yourWindow = window.open('http://google.com');
You could then use yourWindow.close();
The reason why you are hitting the controller is because you have two buttons which are inside a HTML form. When these buttons are clicked the form is submitted back to the server.