<SCRIPT LANGUAGE='JavaScript'>
alertify.prompt('Please enter password for authorization', function(evt, value) {
value = md5(value);
if (value != null && value == '$pass') {
alertify
.alert('Success! Shifting to Happy Hour. ', function(){
alertify.message(window.location = `main_2.php`);
});
}else{
alertify
.alert('Invalid Password, Please Try Again.', function(){
alertify.message(window.history.back());
});
}});
</SCRIPT>");
I want to make to prompt to have the text input and ok button only. What will be the easiest way to do this?
The easiest way would be hiding the cancel button. I have added a CSS to hide the Cancel button.
alertify.prompt('Please enter password for authorization', function(evt, value) {
value = md5(value);
if (value != null && value == '$pass') {
alertify
.alert('Success! Shifting to Happy Hour. ', function(){
alertify.message(window.location = `main_2.php`);
});
}else{
alertify
.alert('Invalid Password, Please Try Again.', function(){
alertify.message(window.history.back());
});
}});
.ajs-cancel {
display: none;
}
<script src='https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.11.1/alertify.min.js'></script>
<link rel='stylesheet' href='https://cdnjs.cloudflare.com/ajax/libs/AlertifyJS/1.11.1/css/alertify.min.css'>
Related
Here I am validating a field in my jquery-mobile form:
$("#contactForm").submit(function (e)
{
e.preventDefault();
if($("#name").val() == '')
{
alert("Fill in name");
}
});
Obviously I don't want to do this using an alert box. How might I convey to the user instead that the field is invalid? I would like to have a solution that works on all typical mobile platforms.
Create a custom class.
.required {
border: 1px solid red;
}
Add / remove it to fields:
Text input
$(document).on('blur', 'textarea, input', function (e) {
if (!$(this).val() && e.target.localName == 'input') {
$(this).closest('div').addClass('required');
}
if (!$(this).val() && e.target.localName == 'textarea') {
$(this).addClass('required');
}
});
Textarea
$(document).on('focus', 'textarea, input', function (e) {
if (e.target.localName == 'input') {
$(this).closest('div').removeClass('required');
}
if (e.target.localName == 'textarea') {
$(this).removeClass('required');
}
});
Demo
I am calling a function whenever someone press enter in the textarea. Now I want to disable new line or break when enter is pressed.
So new line should work when shift+enter is pressed. In that case, the function should not be called.
Here is jsfiddle demo:
http://jsfiddle.net/bxAe2/14/
try this
$("textarea").keydown(function(e){
// Enter was pressed without shift key
if (e.keyCode == 13 && !e.shiftKey)
{
// prevent default behavior
e.preventDefault();
}
});
update your fiddle to
$(".Post_Description_Text").keydown(function(e){
if (e.keyCode == 13 && !e.shiftKey)
{
// prevent default behavior
e.preventDefault();
//alert("ok");
return false;
}
});
Below code is to prevent to getting resize the "textarea", avoid scroll bar inside textarea, and also prevent to get into next line when enter key is pressed.
style.css
textarea {height:200px; width:200px;overflow:hidden;resize: none;}
index.html
<textarea></textarea>
Script.js
$("textarea").keydown(function(e){
// Enter pressed
if (e.keyCode == 13)
{
//method to prevent from default behaviour
e.preventDefault();
}
});
React: textarea w/ value and onChange event
const PreventTextAreaEnter = () => {
const [comment, setComment] = useState();
const handleTextArea = (e) => {
console.log({e}) // Destructure to get a more accurate log
// Return if user presses the enter key
if(e.nativeEvent.inputType === "insertLineBreak") return;
setComment(e.target.value);
};
return (
<>
<textarea value={comment} onChange={ (e) => { handleTextArea(e) } />
</>
)
}
$(".Post_Description_Text").keypress(function(event) {
if (event.which == 13) {
alert("Function is Called on Enter");
event.preventDefault(); //Add this line to your code
}
});
For Angular Users
While there are existing working solutions, if anyone comes across this question using Angular, you can disable new lines with the following:
Add <textarea ng-trim="false" ng-model='your.model' ...
In your controller, add:
$scope.$watch('your.model', function(newvalue, oldvalue) {
if (newvalue && newvalue.indexOf('\n') > -1) {
$scope.your.model = oldvalue;
}
});
use the input tag instead of textArea tag in your HTML
I am working on a PhoneGap application that uses jQuery Mobile (jQM). This application has areas that will require the user to be authenticated. So I'm using jQM's pagebeforechange to determine if the user needs to authenticate before viewing the page they have requested. If so, I send them to a login page.
I want to keep the login page out of jQM's history tracking. That is, if the user is presented with the login page, but decides to press "cancel," I want the application to go back to the previous page and not have a "next" page in the history; the "previous page" would be at the top of the history stack.
Here's how I am handling the login page redirection:
$(document).bind('pagebeforechange', function(e, data) {
if (typeof data.toPage !== 'string') {
return;
}
if (data.toPage.match(/someRestrictedPage/)) {
data.options.transition = "pop";
data.options.changeHash = false;
data.toPage = "myLogin.html";
}
});
For the cancel button of my login page I am doing:
$loginCancelButton.bind('click', function() {
var prevPage = $.mobile.urlHistory.getPrev();
if (typeof prevPage !== 'undefined') {
$.mobile.changePage(prevPage.url, {
changeHash: false,
reverse: true,
transition: "pop"
});
}
});
However, when I do this, I end up with a $.mobile.urlHistory.stack with three elements:
[ {"index"}, {"login"}, {"index"} ]
How do I manage intercepting page changes to redirect to a login form when necessary, but not create an "invalid" navigation history?
looking at the jquery docs it mentions that pagebeforeload event needs to be stopped. and then call the data.deferred (resolve or reject).
try changing it to:
$(document).bind('pagebeforechange', function(e, data) {
if (typeof data.toPage !== 'string') {
return;
}
if (data.toPage.match(/someRestrictedPage/)) {
e.preventDefault()
data.options.transition = "pop";
data.options.changeHash = false;
data.toPage = "myLogin.html";
}
data.deferred.resolve(/* url */, data.options)
});
A solution for the initial problem could be something like:
$(document).bind('pagebeforechange', function(e, data) {
if (typeof data.toPage !== 'string') {
return;
}
if (data.toPage.match(/ your regex /gi))
{
if (!check_login())
{
e.preventDefault();
data.options.transition = "pop";
data.options.changeHash = false;
data.toPage = "#SignIn";
$.mobile.changePage("#SignIn");
}
//data.deferred.resolve('#SignIn', data.options);
}
});
That worked for me just fine.
VeXii's solution seemed to work for me. By simply removing
data.deferred.resolve('#SignIn', data.options);
and
e.preventDefault();
On jquery mobile 1.3...
$(document).bind('pagebeforechange', function(e, data) {
if (typeof data.toPage !== 'string') {
return;
}
if (data.toPage.match(/index/)) {
data.options.transition = "pop";
data.options.changeHash = false;
data.toPage = "#login";
}
});
I'm trying to figure out how to make an "opposite" of a jquery ui select. When someone does not select an option and just types "jquery something" output will be:
"new input: jquery something". However when the "jquery" is selected it would be nice to somehow only have "selected from list: jquery", and prevent the keypress propogation. However, both events fire. I'm trying to make it one or the other.
<input class="test" type="text" />
<script>
$('.test').autocomplete({
select: function (event, ui) {
alert('selected from list: ' + ui.item.label);
event.preventDefault();
return false;
},
source: ["jquery", "jquery ui", "sizzle"]
});
$('.test').live('keypress', function (e) {
if ((e.which && e.which == 13) || (e.keyCode && e.keyCode == 13)) {
alert('new input: ' + $(this).val());
}
});
</script>
This is going with the assumption that the "enter" key is used to select an option from the ui's menu.
You could accomplish this using the autocompletechange event. Using this event, you can determine if the user selected an option or typed something in that wasn't on the list:
$("#auto").autocomplete({
source: ['hi', 'bye', 'foo', 'bar'],
change: function(event, ui) {
console.log(this.value);
if (ui.item == null) {
$("span").text("new item: " + this.value);
} else {
$("span").text("selected item: " + ui.item.value);
}
}
});
Example: http://jsfiddle.net/Ne9FH/
I'm using datepicker inside my input , my last field is the datepicker input , after validating it i want to set focus on another input inside my form , but the problem is the datepicker is not closed even taht it does not have the focus..
how can I close the datepicker when i set the focus on another input field?
(I tried .datepicker("hide"); but it did not worked for me).
UPDATE:
this is my code:
$(function()
{ $( "#test_date" ).datepicker({
dateFormat: "dd/mm/yy"
});
});
//when i call my function:
$( "#test_date" ).datepicker("hide"); //---> this does not work!
Thank's In Advance.
Question Edited to work with the latest version of jqueryUI
JqueryUi auto-closes the datepicker when an element loses focus by user interaction, but not when changing focus with JS.
Where you are calling your function which removes focus from the input assigned a datepicker you also need to call:
$("#test_date ~ .ui-datepicker").hide();
This code is hiding the datepicker which is a sibling (~) of #test_date.
To be dynamic, and using the class assigned by jQueryui you can do:
$(".hasDatepicker").on("blur", function(e) { $(this).off("focus").datepicker("hide"); });
;(function() {
function eventOnFocusDP(e, par) {
if (par.ver == $.fn.jquery) {
if (this.tmr) clearTimeout(this.tmr);
par.lbl1.text(par.msgs[1]);
this.tmr = setTimeout(function() { par.inpNP.focus(); }, par.secs*1e3);
}
}
function eventOnFocusNP(e, par) {
if (par.ver == $.fn.jquery) {
par.lbl1.text(par.msgs[0]);
par.lbl2.text(par.msgs[2]);
}
}
function eventOnBlurNP(e, par) {
if (par.ver == $.fn.jquery) par.lbl2.text("");
}
function eventOnBlurHDP(e, par) {
if (par.ver == $.fn.jquery) {
$(this).off("focus").datepicker("hide");
}
}
function test(secs) {
this.ver = $.fn.jquery;
this.secs = (typeof secs)=='number'?secs:2;
this.msgs = [
'This will lose focus to box below '+this.secs+' seconds after it gains focus.',
'Losing focus in '+this.secs+' seconds!',
'Focus now on bottom box.'
];
this.inpDP = $('[name=datePicker]');
this.inpNP = $('[name=nextPicker]');
this.lbl1 = $('#dPMsg').text(this.msgs[0]);
this.lbl2 = $('#dPMsg2');
var par = this;
this.inpDP.datepicker({ dateFormat: "dd/mm/yy" })
.on('focus', function(e) { eventOnFocusDP.apply(this, [e, par]) });
this.inpNP.on('focus', function(e) { eventOnFocusNP.apply(this, [e, par]) });
this.inpNP.on('blur', function(e) { eventOnBlurNP.apply(this, [e, par]) });
$(document).on('blur', '.hasDatepicker', function(e) { eventOnBlurHDP.apply(this, [e, par]) });
return this;
}
function init() {
window.Test = test;
setTimeout(function() {
$(document).on('change', '.switcher, .switcher-ui', function(e) { if (window.Test) new Test(); });
$(jQueryUISwitcher).trigger('change');
}, 1e3);
}
if (document.readyState == "complete") init();
else jQuery(window).on('load', init);
})();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="https://cdn.rawgit.com/JDMcKinstry/cfc32292cbbfa548fb9584db05b2b2fc/raw/4f16f7ee441dfb98aa166a2e84193b14574a46d1/jquery.switcher.js"></script>
<form action="javascript: void 0">
<input type="text" name="datePicker" id="dP" placeholder="mm/dd/yyyy" />
<label for="dP" id="dPMsg"></label>
<hr />
<input type="text" name="nextPicker" placeholder="tab to here" />
<label for="dP" id="dPMsg2"></label>
</form>
<hr />
<hr />
<hr />
Here's a modified solution that worked for me:
$(".hasDatepicker").each(function (index, element) {
var context = $(this);
context.on("blur", function (e) {
// The setTimeout is the key here.
setTimeout(function () {
if (!context.is(':focus')) {
$(context).datepicker("hide");
}
}, 250);
});
});
My version of js:
<script type="text/javascript"> $(function () {
$("#dtp1").on("dp.change", function (e) {
$('#dtp1').data("DateTimePicker").hide();
});
});
I hope it's help you
This worked for me:
$("#datepickerTo").datepicker({
onSelect: function () {
$(this).off( "focus" );
}
});