We Keep Coding

jQuery Confirm3 $.confirm nor returning boolean neither expected result

I have 2 functions related to each other .. _confirm and _process. _confirm is responsible for returning true/false values to _process and based on response _process function will act and process the bid.
BUT THE ISSUE IS:
that the within _process the _confirm is returning undefined rather showing boolean, because it's moving on before data from _confirm
NOTE*
using jquery-confirm-3 library for alert/confirm
<script type="text/javascript">
/* Extra confirmation message on place bid */
function _confirm( formname, id_Bid ) {
var response = '';
/* Get bid value, format value and then add to confirm message */
var bidval = jQuery(id_Bid).val();
var bidval = parseFloat(bidval);
if ( bidval > 0 ) {
var floatbidval = bidval.toFixed(2);
var currencyval = "$";
var finalval = currencyval + floatbidval;
if( formname == 'custom' ) {
var confirm1 = 'Do you really want to bid';
} else if( formname == 'direct' ){
var confirm1 = 'Do you really want to directly place this bid';
}
let confirm_message = confirm1 + ' ' + finalval + ' ?';
$.confirm({
title: false,
content: confirm_message,
onAction: function( btnName ) {
response = btnName;
},
buttons: {
confirm: function () {},
cancel: function () {}
}
});
if( response != 'confirm' ) {
event.preventDefault();
return false;
} else{
return true;
}
}
} /* end of function - _confirm() */
function _process( formname, id_Bid ) {
<?php
$enable_bid_place_warning = get_option('uwa_enable_bid_place_warning');
$placebid_ajax_enable = get_option('woo_ua_auctions_placebid_ajax_enable');
/* using page load */
if( $placebid_ajax_enable == 'no' || $placebid_ajax_enable == '' ) {
if( $enable_bid_place_warning == 'yes' ) { ?>
$data = _confirm( formname, id_Bid ); <?php
}
} elseif ( $placebid_ajax_enable == 'yes' ) { /* using ajax */
if( $enable_bid_place_warning == 'yes' ) { ?>
retval = _confirm( formname, id_Bid );
if( retval == true ) {
place_ajax_process( formname );
} <?php
} else { ?>
place_ajax_process( formname );
<?php
}
}
?>
} /* end of function */
</script>
Later researching here, I found a couple of answers to use .Deferred() and return a promise .. but the promise is also returning unidentified
later I made the following changes but still no luck
function _showConfirmDialog( message ) {
let def = $.Deferred();
$.confirm({
title: false,
content: message,
onAction: function( btnName ) {
def.resolve(btnName);
},
buttons: {
confirm: function () {},
cancel: function () {}
}
});
def.promise();
}
/* Extra confirmation message on place bid */
function _confirm( formname, id_Bid ) {
var response = '';
/* Get bid value, format value and then add to confirm message */
var bidval = jQuery(id_Bid).val();
var bidval = parseFloat(bidval);
if ( bidval > 0 ) {
var floatbidval = bidval.toFixed(2);
var currencyval = "$";
var finalval = currencyval + floatbidval;
if( formname == 'custom' ) {
let confirm1 = 'Do you really want to bid';
} else if( formname == 'direct' ){
let confirm1 = 'Do you really want to directly place this bid';
}
let confirm_message = confirm1 + ' ' + finalval + ' ?';
$.when(_showConfirmDialog(confirm_message)).then(function( response ) {
if ( response == 'confirm' ) {
return true;
} else {
return false;
}
});
}
}
i also tried to use async and await but no luck.

You are nearly there with your second attempt but _showConfirmDialog() needs to return Promise. It currently returns undefined.
You should also consider exploiting the promise's settled state (resolved/rejected) rather than resolving with btnName. Thus the code is more independent of natural language.
You might write:
function _showConfirmDialog(message) {
return $.Deferred(function(dfrd) {
^^^^^^
$.confirm({
'title': false,
'content': message,
'buttons': {
'confirm': dfrd.resolve, // resolve on confirm
'cancel': dfrd.reject // reject on cancel
}
});
}).promise();
}
Similarly, _confirm() should also return promise in order to keep its caller informed of the dialog's outcome.
You might write:
function _confirm(formname, id_Bid) {
var bidval = parseFloat(jQuery(id_Bid).val());
if (bidval > 0) {
if (formname == 'custom') {
let confirm1 = 'Do you really want to bid';
} else if (formname == 'direct') {
let confirm1 = 'Do you really want to directly place this bid';
} else { // unconditional else
// what if formname is neither 'custom' nor 'direct'
}
return _showConfirmDialog(`${confirm1} $${bidval.toFixed(2)} ?`);
^^^^^^
}
}
Thus, _confirm() returns a promise that will resolve if the user clicks "confirm" or rejects if the user clicked "cancel" (rather than resolving wirth true|false).
Note: Unless there's a compelling reason to want a jQuery promise, it's better to Promisify jQuery.confirm() with a native JS Promise.
You might write:
function _showConfirmDialog(message) {
return new Promise(function(resolve, reject) {
^^^^^^ ^^^^^^^^^^^
$.confirm({
'title': false,
'content': message,
'buttons': {
'confirm': resolve, // resolve on confirm
'cancel': function() { // reject on cancel
reject(new Error('confirm dialog cancelled'));
}
}
});
});
}
Thus, _confirm() (as above) will also return a native Promise.

You are right #Roamer-1888
and I will impose the changes you applied in your code, anywho i would like to show the changes I made in my code before you post
function _showConfirmDialog( message ) {
let def = $.Deferred();
$.confirm({
title: false,
content: message,
draggable: false,
theme: 'modern',
// icon: 'dashicons dashicons-format-chat',
boxWidth: '30%',
useBootstrap: false,
onAction: function( btnName ) {
def.resolve(btnName);
},
buttons: {
confirm: function () {},
cancel: function () {}
}
});
return def;
^^^^^^^^^^
}
Previously I was returning def.Promise() which was causing the issue. then when I use this function i awaited
async function confirm_bid( formname, id_Bid ) {
^^^^^
... (code block)
await _showConfirmDialog(confirm_message).then(function (res) {
^^^^^
if ( res == 'confirm' ) {
response = true
} else {
response = false;
}
});
}
and lastly where ever I use confirm_bid() function i added await with async
async function bid_process( formname, id_Bid ) {
^^^^^
...( other code )
retval = await confirm_bid( formname, id_Bid );
^^^^^
if( retval == true ) {
/* bid using ajax if confirm yes */
placebid_ajax_process( formname );
}
...( other code )
}

using jquery addclass and removeclass in PHP

I' working on a PHP-Jquery-Ajax submit info form and I would like to use the addclass and removeclass jquery methods but I can't make it work as I want, so my question is: How do I have to fix the code below in order to add a css depending on the user input?
The addclass and removeclass are in the function verificaForm where I validate the input fields, in this case I only show you two fields validations but there are more... I also know that out there is a library(validate.js) that helps to validate the inputs from users but in this specific case I must have to sitck to this code.
here is my js code and thanks in advance:
$(document).ready(function () {
$('#ID_formulario').on('submit', function (e) {
e.preventDefault();
var nombre = $('input#ID_nombre').val().trim();
var email = $('input#ID_email').val().trim();
if (validaForm(nombre, email)) {
$('#result').html("<b>resolviendo peticion...</b>");
var url = $(this).attr('action');
var data = $(this).serializeArray();
var type = $(this).attr('method');
//...more code goes here ... it works fine ...
}
});
});
function validaForm(nombre, email) {
if ((nombre == '') || nombre.replace(/s+/, '') == '') {
alert("Favor especificar nombre");
nombre.addClass('hightlight');
return false;
} else {
else nombre.removeClass('hightlight');
}
if (nombre.length < 4) {
alert('El valor del campo es muy corto');
return false;
}
if ((email == '') || email.replace(/s+/, '') == '') {
alert("Favor especificar correo");
return false;
}
return true;
}

You should pass the element to the function, not the value. Then You can obtain the value within the function. Something like that:
var nombre = $('input#ID_nombre');
var email = $('input#ID_email');
if(validaForm(nombre, email))
....
function validaForm(nombre,email){
var nombre_value = nombre.val().trim();
var email_value = email.val().trim();
.......

So, you can add classes to a jQuery object and not to a value. Change things around like below.
Replace
var nombre = $('input#ID_nombre').val().trim();
var email = $('input#ID_email').val().trim();
if (validaForm(nombre, email)) {
With
if (validaForm($('input#ID_nombre'), $('input#ID_email'))) {
And modify your function as below.
function validaForm(nombre,email) {
var nombreVal = $.trim(nombre.val());
var emailVal = $.trim(email.val());
if ((nombreVal == '') || nombreVal.replace(/s+/, '') == '') {
..........
..........
}
And remove that extra else in here:
} else {
else nombre.removeClass('hightlight');
}
And change it to
} else {
nombre.removeClass('hightlight');
}

Validation best approach while looping fields

I have a save button handler inside which i check the employee name , skills and level for the employee which can be in multiple. I need the best possible way to do it as i am certain the way i do it looks really messy. Thanks
JS code:
$("#btnSave").click(function(){
var empName = $("#empName").val().trim(); // VALIDATE THIS
var skillArr = [];
var empObj = {};
if(empName != '')
return false;
$(".trSkillCls").each(function( index ) {
// VALIDATE FOR skill and level
if($(this).find('input[name=skill]').val().trim() == '' || $(this).find('select[name=ddlSkillLevel] option:selected').text().trim() == '')
return false;
skillObj = {
"skill" : $(this).find('input[name=skill]').val(),
"level" : $(this).find('select[name=ddlSkillLevel] option:selected').text()
};
skillArr.push(skillObj);
});
empObj = {
"empName" : $("#empName").val(),
"skillDetails" : skillArr
};
$.post( "indexBase.php",
$('#str').val(JSON.stringify(empObj)),
function(info){
var result = JSON.parse(info);
$( "#divEmpDetails" ).empty();
$("#divEmpDetails").append($("#tmplEmpDetails").render({data:result}));
// verify this callback for failures
});
$("#mainForm").submit( function() {
return false;
});
$('.trSkillCls').not(':first').remove();
$( "#reset" ).trigger( "click" );
});

javascript validation with regex breaking all javascript

I'm writing javascript to validate a business calculator / orderform
another team mate has written the math code, but when I put in my code the whole thing stops.
I can't find my error (I'm more a css/html person)
help?
//Order Detail Variables//
var clientname =document.getElementById(clientname);
var phonenumber =document.getElementById(phoneno);
var deliveryaddress=document.getElementById(deliveryaddress);
var suburb =document.getElementById(suburb);
var postcode =document.getElementById(postcode);
var state =document.getElementById(state);
var deliverydistance = document.getElementById(deldistance);
var bagsordered =document.getElementById(bagsordered);
var orderdetailsarray = new Array();
//validation//
// these are boolean variables that when made true//
//by the validation will allow the calculation and logging to occur//
var clientnamevalid = new Boolean(false);
//Regex Variables//
//these are the regex patterns that are used to //
//confirm that the data is valid//
var alpha = pattern=/^[a-zA-Z\-]+$/;
function validation()
{
function validation();
{console.log (clientname);
if(alpha.test(clientname));
var clientnamevalid = true;
if { clientnamevalid = true;
alert(client name valid); //to be replaced with inline alert
}
else {
alert("client name invalid");
}
}
Edit Updated code:
the vars are now
var clientname =document.getElementById('clientname');
the function:
function validation()
{console.log (clientname);
var clientnamevalid = alpha.test(clientname);
if(clientnamevalid);
{
alert('client name valid')
}
else
{
alert("client name invalid");
}
}
Edit Updated code 2:
<button name="calculate" id="calcbutton" onclick="validate()"> Calculate </button>
function validate()
{console.log (clientname);
var clientnamevalid = alpha.test(clientname);
if(clientnamevalid);
{
alert('client name valid');
}
else
{
alert("client name invalid");
}
if clientnamevalid = true;
{
function calculateorder();
}
}
edit 3:
function validate()
{console.log (clientname);
var clientnamevalid = alpha.test(clientname);
if(clientnamevalid);
{
alert("client name valid"); //edited from single quotations
}
else
{
alert("client name invalid");
}
if (clientnamevalid == true);
{
calculateorder();
}
else
{
alert ("please review form");
}
}
calc order func:
function calculateorder()
{
orderdetailsarray [0] = document.forms["orderform1"] ["clientname"].value;
orderdetailsarray [1] = document.forms["orderform1"] ["phoneno"].value ;
orderdetailsarray [2] = document.forms["orderform1"] ["deliveryaddress"].value;
orderdetailsarray [3] = document.forms["orderform1"] ["suburb"].value;
orderdetailsarray [4] = document.forms["orderform1"] ["postcode"].value;
orderdetailsarray [6] = parseFloat(document.forms["orderform1"] ["deldistance"].value);
orderdetailsarray [7] = parseFloat(document.forms["orderform1"] ["bagsordered"].value);
orderdetailsarray [8] = document.forms["orderform1"] ["orderdate"].value;
//gross calculation
var grossbagcost = orderdetailsarray[7] * millendcost;
grossbagcost = Math.round(grossbagcost *100)/100;
document.forms["resultsform"] ["bagsgross"].value = grossbagcost;
//end gross calculation
//discount amount calculation
if (orderdetailsarray [7] <=50)
{
var discountedbagcost = grossbagcost * discountnil;
document.forms["resultsform"] ["discount"].value = discountedbagcost;
}
else if (orderdetailsarray[7] >50 && orderdetailsarray[7] <100)
{
var discountedbagcost = grossbagcost * discount4percent;
discountedbagcost = Math.round(discountedbagcost *100)/100;
document.forms["resultsform"] ["discount"].value = discountedbagcost;
}
else if (orderdetailsarray[7] >=100)
{
var discountedbagcost = grossbagcost * discount7percent;
discountedbagcost = Math.round(discountedbagcost *100)/100;
document.forms["resultsform"] ["discount"].value = discountedbagcost;
}
updated code with null check
function validate()
{console.log (clientname);
//pattern test
var clientnamevalid == alpha.test(clientname);
if(clientnamevalid);
{
alert("client name valid");
}
else
{
alert("client name invalid");
//null check
}
if (x==null || x=="")
{
alert("Client name cannot be left blank");
clientnamenotnull == false;
}
else
{
clientnamenotnull == true;
}
//is the whole form valid
{
if (clientnamevalid == true)
if (clientnamenotnull) == true)
{
calculateorder();
}
else
{
alert ("please review form");
}
}

This appears to be problem area:
function validation()
{
function validation();
You have function inside another function.

Your function validation() is one big bug.
Did you mean
function validation(clientname)
{
console.log (clientname);
var clientnamevalid = alpha.test(clientname);
if (clientnamevalid)
{
alert('client name valid');
}
else
{
alert("client name invalid");
}
}
And you don't call that function in your code. And remember, parentheses and curly braces position does matter.

Another one, adding to anubhava's answer you need to change all getElementById from
document.getElementById(deldistance);
to
document.getElementById('deldistance');

In addition to anubhava and Surender,
the document.getElementById() get string.. so you need to change all this
//Order Detail Variables//
var clientname =document.getElementById(clientname);
var phonenumber =document.getElementById(phoneno);
var deliveryaddress=document.getElementById(deliveryaddress);
var suburb =document.getElementById(suburb);
var postcode =document.getElementById(postcode);
var state =document.getElementById(state);
var deliverydistance = document.getElementById(deldistance);
var bagsordered =document.getElementById(bagsordered);
and write the parameters between quotes.
for example:
var bagsordered = document.getElementById('bagsordered');
because as you wrote it, it confuse the compiler.
you can't pass the variable you just declare now at the same line you want his id.
if you're a css/html person as you say, you know that when you create an html button or div
you can define his id.
like <input type="button" id="order" value="press to order" />
now in javascript you can add functionality to this button. so when you want to get
this button in javaScript you can use the function document.getElementById('order')
see? I gave the id of the button that was declared in the html code.
hope you understand what i mean
Edit
look, when you have a button, as you said. for example i'll use the button I wrote before.
<input type ="button" id="order" value="press to order"/>
now if I have a function called "function()";
and I want that when the user will press on the button the function will be called
so I'll add to the html code of the button the onclick
so now it will be :
<input type = "button" id="order" value ="press to order" onclick="function()"/>
now when the user will click on that button, the function will be called and the code in it will performed
in addition, when you write a function that will change some label or button text.
you will need to get theirs id.
if my function is "changeText()". and I have a button with value "Hello" and id = "btn"
and I want to change the button value's from "Hello" to "wow"
so I need to get that button right?
and how do I get it?
with the method document.getElementById
here is the code:
function changeText()
{
var btn = document.getElementById('btn');
btn.value = "wow";
}
Edit 2:
clientnamevalid is boolean,right?
so when you want to check if it true or false, you can use the if statement.
if (clientnamevalid == true)
{
// do something, like call to calculateorder
calculateorder();
}
else // it's false
{
// do something else
}
note that you don't have to compare the 'clientnamevalid' variable or all another boolean variable to 'true' or 'false', the if statement does it alone. so you can write
if (clientnamevalid) // means that the clientnamevalid is true
{
calculateorder();
}
else
{
// do something else
}
Edit 3:
** From where you get the client name?! you need to enable the user to enter his name..
So you need a Form.. **
function validate()
{
console.log (clientname);
if (clientname != "" || clientname != null)
{
var clientnamevalid = alpha.test(clientname);
if(clientnamevalid)
{
alert("client name valid");
calculateorder();
}
else
{
alert("client name invalid, please review form");
}
}
else
{
alert("client name can't be empty!");
}
}

Execute an action before redirecting to the template in the confirm dialog

The first field is the title of critic, the second field is the content of critic. When I write something in the title field automatically creates the object Critic in the db. In this situation I have a new row with the new critic but in the fileld of content the value is null. In this situation appears a confirm dialog.
When the confirm dialog appears, what should I do to click the "ok" button and, apart from being redirected to the new template, executing the eliminarCriticaAction of the Controller.
$('a').on('click', function(e) {
if( ! $('#criTitulo').val() || ! $('#criContenido').val() ) {
if ( ! $('#criTitulo').val() && $('#criContenido').val() ) {
if(! window.confirm( 'Falta el titulo' )) {
e.preventDefault();
}
}
else if ( ! $('#criContenido').val() && $('#criTitulo').val() ) {
return confirm('Falta el contenido');
}
}
});
Delete action of Controller:
public function eliminarCriticaAction($pysStr)
{
$em = $this->getDoctrine()->getManager();
$pys = $em->getRepository('PYSBundle:Pys')->findPys($pysStr);
$usuario = $this->get('security.context')->getToken()->getUser();
$critica = $em->getRepository('UsuarioBundle:Usuario')->findCritica($usuario, $pys);
if(!$critica)
{
throw new AccessDeniedException("No hay ninguna crítica que borrar");
}
$em->remove($critica);
$em->flush();
}
EDIT
$('a').on('click', function(e) {
var titulo = $('#criTitulo').val(), contenido = $('#criContenido').val();
console.log(titulo);
console.log(contenido);
if ( ( titulo && !contenido ) || ( !titulo && contenido ) ) {
e.preventDefault();
console.log('Link clicked !');
if (window.confirm( 'Falta el titulo' )) {
$.get(Routing.generate('eliminar_critica.' + $('html').attr('lang'), { "_locale": $('html').attr('lang'), "pysStr": $('section').attr('pelicula') }));
window.location.href = $(e.target).attr('href');
}
}
});

It is unclear to me what the route to your delete controller is. I will assume "/Pys/{pysStr}" with route name "my_pys". Also your current "pysStr" should be available as variable in your twig template. Assuming in your display controller you put:
'currentPysStr' => $pysStr (put this in the render method are argument)
$('a').on('click', function(e) {
if( ! $('#criTitulo').val() || ! $('#criContenido').val() ) {
if ( ! $('#criTitulo').val() && $('#criContenido').val() ) {
if(! window.confirm( 'Falta el titulo' )) {
e.preventDefault();
} else {
$.get({{ path('my_pys', {'pysStr': currentPysStr}) }})
}
}
else if ( ! $('#criContenido').val() && $('#criTitulo').val() ) {
return confirm('Falta el contenido');
}
}
});
Then in your delete controller you will have the current PysStr and this controller will only be called when you press OK in the confirmation dialog.
The same as in your order question you have a choice if you want to put this script in a twig template or use a global variable. ( https://stackoverflow.com/questions/18035337/translate-the-jeditable-plugins-attributes/18035436#18035436 )
EDIT: (after chat)
$('a').on('click', function(e) {
var titulo = $('#criTitulo').val(),
contenido = $('#criContenido').val();
console.log(titulo);
console.log(contenido);
// Requested: XOR
// One of the values must be set, the other one must not be set
if ( ( titulo && !contenido ) || ( !titulo && contenido ) ) {
e.preventDefault();
console.log('Link clicked !');
if (window.confirm( 'Falta el titulo' )) {
var ajax;
var url = Routing.generate('eliminar_critica.' + $('html').attr('lang'), { "_locale": $('html').attr('lang'), "pysStr": $('section').attr('pelicula') });
console.log(url); // This is just here for debugging purposes
ajax = $.get(url);
ajax.done(function() {
window.location.href = $(e.target).attr('href');
});
}
}
});
Placing window.location.href in done() guarantees the request was made before the page refresh
eliminarCriticaAction should give a Response that everything went on (2**) response. 204 is appropriate like this:
return new response('', 204); // 204: No Content

Take a look at the FOSJsRoutingBundle. It gives you the possibility to use your routes in JavaScript as well.
After installing the bundle, modify your Controller annotation:
eliminar_critica:
locales: { es: "/eliminar-critica/{pysStr}/", en: "/delete-critic/{pysStr}/" }
defaults: { _controller: UsuarioBundle:Default:eliminarCritica }
options:
expose: true
After that you can use this code of JavaScript to access the route:
Routing.generate('eliminar_critica', { pysStr: 10 });
// will result in /eliminar-critica/10/
$.get(Routing.generate('eliminar_critica', { pysStr: 10 }));
// will call /eliminar-critica/10/ without redirecting your browser
For further reading you should read about jQuery and AJAX
In your JavaScript:
$('a').on('click', function(e) {
if( ! $('#criTitulo').val() || ! $('#criContenido').val() ) {
if ( ! $('#criTitulo').val() && $('#criContenido').val() ) {
if(! window.confirm( 'Falta el titulo' )) {
e.preventDefault();
} else {
// insert this line: (optional add a callback)
$.get(Routing.generate('eliminar_critica', { pysStr: 10 }));
}
}
else if ( ! $('#criContenido').val() && $('#criTitulo').val() ) {
return confirm('Falta el contenido');
}
}
});
For a nice callback like
Your Entity has been deleted!
Take a look at the jQuery get() method here.