I am using static FBML but I am having trouble debugging a form validation problem. I get the dialog which to me seems like it should return false, but the form submits anyway. I am using Firebug and I see a brief message in Red that I have no chance to read. I appreciate the help :-)
var txt ='Enter Zipcode';
//...
function setError(){
var obj=document.getElementById('mapsearch');
obj.setValue(txt);
obj.setStyle('color', '#FF0000');
}
function valform(){
var obj=document.getElementById('mapsearch');
var val = obj.getValue();
if(val!='' && !isNaN(val) && val.length>2 ){
return true;
} else {
setError();
(new Dialog()).showMessage('Zip Required', 'Please enter your zip code.');
return false;
}
}
//...
Try the "Persist" button if the Firebug/javascript error message in Firebug disappears too quickly. This way all messages are kept between page loads until you click "Clear".
Related
How can I create a share button, and also get count for each post shared?
In your Blade file that outputs the article, you can output a button. this contains a hidden textarea as a child element. With JS you can put a click event listener on it.
So you can copy the URL to the post. I hope I have understood it correctly?
document.addEventListener("click", function(e)
{
const textArea = document.createElement("textarea");
textArea.value = e.target.querySelector('.url-container').innerHTML;
document.body.appendChild(textArea);
textArea.select();
let successful = null;
let msg = '';
try {
successful = document.execCommand('copy');
msg = successful ? 'successful' : 'unsuccessful';
} catch (err) {
console.warning('unable to copy');
console.warning(err);
}
document.body.removeChild(textArea);
if (successful) {
alert('copied');
// make an XHR call to your App Api for counting
}
});
<button id="share" data-test="test"><textarea class="url-container" style="display:none;">www.your-domain.com/your-post-x</textarea>Share Post X</button>
I am trying to figure out if I can Auto-Magically select no in a UI alert in google script..
var old = e.oldValue;
var ui = SpreadsheetApp.getUi() ;
if( old == null ){} else{
if( old == "NO"){} else {
if(e.range.getRow() == 3 ) {}
else{ var response = ui.alert('⚠️ Change order? ⚠️', 'Are you sure you want to change this order?',ui.ButtonSet.YES_NO)}}} ;
if(response == ui.Button.NO) {e.range.setValue(old)} ;
this is where I am at, everything works great.... as long as a button is pressed, I am hoping there is a way to Auto press "no" after ~20 seconds.
This is not exactly you want.
Because it doesn't ask for yes or no. It just shows a timeout message. But I think it can be modified as per your requirement.
function showTimeoutAlert(header, message, time){
SpreadsheetApp.getUi().showModelessDialog(
HtmlService.createHtmlOutput(
'<div>'+ message + '</div>' +
'<script> \
var a = document.querySelector("div"); \
a.addEventListener("click",()=>{setTimeout(google.script.host.close,'+ time +')}); \
a.click(); \
</script>'
).setHeight(50),
header
);
}
Use it like:
showTimeoutAlert("No serial number(s) found", "Sr. No(s) 2, 3 not found", 2000)
It will show this message for 2 seconds
One can adjust timeout time in milliseconds.
I believe your goal as follows.
You want to automatically run the script as clicking "NO" button after 20 seconds from opening the dialog.
Modification points:
Unfortunately, in the current stage, the count down cannot be achieved with SpreadsheetApp.getUi().alert(). So in your situation, in order to achieve your goal, I would like to propose to use the custom dialog. When the custom dialog is used, Javascript can be used. By this, the count down can be used.
When above points are reflected to a script, it becomes as follows.
Sample script:
Google Apps Script side:
Please copy and paste the following script to Code.gs of the script editor of Spreadsheet.
function processForNo(value) {
// do something
Browser.msgBox(`Clicked NO. Retrueved value is '${value || ""}'.`);
}
function processForYes(value) {
// do something
Browser.msgBox(`Clicked YES. Retrueved value is '${value || ""}'.`);
}
// Please run this function.
function main() {
var value = "ok";
var html = HtmlService.createTemplateFromFile("index");
html.value = value;
SpreadsheetApp.getUi().showModalDialog(html.evaluate().setHeight(100), '⚠️ Change order? ⚠️');
}
HTML & Javascript:
Please copy and paste the following script to index.html of the script editor of Spreadsheet.
Are you sure you want to change this order?
<input type="button" id="yes" value="YES" onclick="google.script.run.withSuccessHandler(google.script.host.close).processForYes()">
<input type="button" id="no" value="NO" onclick="processForNo('')">
<script>
const processForNo = _ => google.script.run.withSuccessHandler(google.script.host.close).processForNo(<?= value ?>);
setTimeout(processForNo, 20000);
</script>
When main() of above script is run, a dialog is opened. When you don't click the buttons, the dialog is closed after 20 seconds, and the process is run as clicking "NO" button. At that time, processForNo is run. Also, the value can be sent when the dialog is opened.
When "YES" button is clicked, processForYes is run.
Testing:
When above script is tested, the following situation is obtained.
Note:
Above script is a sample script for confirming the script. When above script is included in your script, it becomes as follows.
Google Apps Script side
function myFunction() {
// do something. I cannot understand about your whole script. So please add your actual script and function name.
var old = e.oldValue;
var ui = SpreadsheetApp.getUi();
if (old == null) {
} else {
if (old == "NO") {
} else {
if (e.range.getRow() == 3) {
} else {
var html = HtmlService.createTemplateFromFile("index");
html.value = old;
ui.showModalDialog(html.evaluate().setHeight(100), '⚠️ Change order? ⚠️');
}
}
}
}
function processForNo(old) {
// do something
}
function processForYes(value) {
// do something
}
HTML & Javascript side is the same with above sample script.
Although I cannot confirm your function name from your question, from var old = e.oldValue in your script, I thought that you might be using the OnEdit trigger of the simple trigger. If my understanding is correct, when you use above script, please use the installable OnEdit trigger. By this, when the cell is edited, showModalDialog works. Ref
References:
Custom dialogs
Installable Triggers
on website I have sometimes additional button with restoring autosaved data filled in the form, which pops in random moments (sometimes someone tests something and close form, which causing the popup button). I tried with Continue if element is not visible in protractor with following code:
let DoNotRefillBtn=element.all(by.className('modal-button-no'));
var isApproachable = function(element) {
return element.isPresent().then(function (present) {
return present
? element.isDisplayed()
: false;
});
};
describe(...)
it('Open the form:', function () {
browser.driver.get('foo');
browser.sleep(1000);
isApproachable(DoNotRefillBtn).then(function(approachable) {
if (approachable) {
DoNotRefillBtn.click();
browser.sleep(500);
}
else {
browser.sleep(300);
}
});
It clicks correctly, but after clicking, it throws error Failed: element not visible on line DoNotRefillBtn.click();.
Why does the program clicks and throws an error that thing is not clickable (after it was clicked)?
I used a workaround, the button comes with the status message "Do you want to refill the form?". So when I check for the status message and click the button, seems to be working:
let StatusMessage=element.all(by.className('status-message'));
let DoNotRefillBtn=element.all(by.className('modal-button-no'));
var isApproachable = function(element) {
return element.isPresent().then(function (present) {
return present
? element.isDisplayed()
: false;
});
};
describe(...)
it('Open the form:', function () {
browser.driver.get('foo');
browser.sleep(1000);
isApproachable(StatusMessage.get(8)).then(function(approachable) {
if (approachable) {
DoNotRefillBtn.get(0).click();
browser.sleep(500);
}
});
});
});
StatusMessage.get(8) is 8 because there are some more messages with the same class, but not displayed. I counted which status-message is that one and it seems to be working - closes popup if displayed, but skipping when it's not.
Propably checking the button and clicking it gives some problems
I am using Chosen with jquery valodation.
you can see this example: http://jsfiddle.net/hfdBF/9/
if you click submit, you see that the validation is working for combo and input.
if you put one letter in the input box you will get an alert that the letter un-highlighted, as it suppose to be.
BUT, if you choose in the select box a value, it wont be alert as un-highlighted.
do you have any idea how to get that to work?
$(function() {
var $form = $("#form1");
$(".chzn-select").chosen({no_results_text: "No results matched"});
$form.validate({
errorLabelContainer: $("#form1 div.error"),
wrapper: 'div',
});
var settings = $.data($form[0], 'validator').settings;
settings.ignore += ':not(.chzn-done)';
settings.unhighlight= function(el){
alert(el.name + " hit unhighlight")
}
});
Thanks
You don't need to do the validation manually. You can bind a function to the change event handler that will check if the specific select is valid. This will also clear the error if the select is valid.
$('.chzn-select').change(function () {
$(this).valid();
});
You need to reset the jQuery validation manually:
$(".chzn-select").chosen().change(function () {
var value = $('#UserCompanyIds').val(); // the select element
if (value != "") {
$('.field-validation-error').each(function () {
if ($(this).attr('data-valmsg-for') == 'UserCompanyIds') {
$(this).html("");
$(this).removeClass("field-validation-error").addClass("field-validation-valid");
}
});
}
});
I hope this helps!
I have buttons that trigger jQuery validation. If the validation fails, the button is faded to help draw attention away from the button to the validation messages.
$('#prev,#next').click(function (e)
{
var qform = $('form');
$.validator.unobtrusive.parse(qform);
if (qform.valid())
{
// Do stuff then submit the form
}
else
{
$('#prev').fadeTo(500, 0.6);
$('#next').fadeTo(500, 0.6);
}
That part works fine.
However, I would like to unfade the buttons once the invalid conditions have been cleared.
Is it possible to hook into jQuery Validation to get an appropriate event (without requiring the user to click a button)? How?
Update
Based on #Darin's answer, I have opened the following ticket with the jquery-validation project
https://github.com/jzaefferer/jquery-validation/issues/459
It might sound you strange but the jQuery.validate plugin doesn't have a global success handler. It does have a success handler but this one is invoked per-field basis. Take a look at the following thread which allows you to modify the plugin and add such handler. So here's how the plugin looks after the modification:
numberOfInvalids: function () {
/*
* Modification starts here...
* Nirmal R Poudyal aka nicholasnet
*/
if (this.objectLength(this.invalid) === 0) {
if (this.validTrack === false) {
if (this.settings.validHandler) {
this.settings.validHandler();
}
this.validTrack = true;
} else {
this.validTrack = false;
}
}
//End of modification
return this.objectLength(this.invalid);
},
and now it's trivial in your code to subscribe to this event:
$(function () {
$('form').data('validator').settings.validHandler = function () {
// the form is valid => do your fade ins here
};
});
By the way I see that you are calling the $.validator.unobtrusive.parse(qform); method which might overwrite the validator data attached to the form and kill the validHandler we have subscribed to. In this case after calling the .parse method you might need to reattach the validHandler as well (I haven't tested it but I feel it might be necessary).
I ran into a similar issue. If you are hesitant to change the source as I am, another option is to hook into the jQuery.fn.addClass method. jQuery Validate uses that method to add the class "valid" to the element whenever it is successfully validated.
(function () {
var originalAddClass = jQuery.fn.addClass;
jQuery.fn.addClass = function () {
var result = originalAddClass.apply(this, arguments);
if (arguments[0] == "valid") {
// Check if form is valid, and if it is fade in buttons.
// this contains the element validated.
}
return result;
};
})();
I found a much better solution, but I am not sure if it will work in your scenario because I do not now if the same options are available with the unobtrusive variant. But this is how i did it in the end with the standard variant.
$("#form").validate({
unhighlight: function (element) {
// Check if form is valid, and if it is fade in buttons.
}
});