How to disable the enter key from going second line when onpress? - enter

I want the enter key to save the data to database, but whenever I press it will break and create second line, I just want it stay at one line
<div id="editable" contentEditable="true">Press enter now</div>

This is a jquery solution.
$('input').on('keypress', function(e){
if(e.keyCode == 13){
e.preventDefault();
}
});

Related

How to select a value from a Dropdown in Protractor

I want to select a value from a dropbox. The contents from dropbox do not have values or ID, instead, they have a title. This is the HTML for one of the contents and for the dropdown. The id below is from dropbox. With this information, I am just able to select the dropbox, not the values.
<span class="select2-selection__placeholder">Select reason</span>
<span class="select2-selection__rendered" id="select2-e5dt-container" role="textbox" title="01 - <Change of mind, back to stock>">01 - Change of mind, back to stock</span>
<span class="select2-selection__rendered" id="select2-e5dt-container" role="textbox" title="04 - <Production Fault, to recovery>">04 - Production Fault, to recovery</span>````
To solve this problem statement all you need to do is:
Find the dropdown using element
Click the dropdown
Click the option
it("should select the dropdown." async () => {
await $("span.select2-selection__placeholder").click();
//add sleep to give a time for the options to reveal or use an explicit wait
//here. I prefer the latter.
await browser.sleep(1000)
// click the option '01 - Change of mind, back to stock'
await $$("span#select2-e5dt-container"").get(0).click();
});
Lemme know how it works out for you!
Identify Drop Down and click on it
Wait for DropDown options to be displayed (use ExpectedConditions.visibilityOf())
var EC = protractor.ExpectedConditions;
var filteroption = "Production Fault, to recovery";
this.DDOptions = element.all(by.css('[role="textbox"]'));
//Click on the Drop Down
// Wait for Drop Down options to be visible
browser.wait(EC.visibilityOf(this.DDOptions.get(0), 500, "DD option not visible timing out"));
this.DDOptions.filter(function (elem, index) {
return elem.getText().then(function (text) {
return text.toUpperCase() === filteroption.toUpperCase();
});
}).then(function (filteredElements) {
filteredElements[0].click();
});

How to restrict tab key handler event in gwt

I am using GWT components for web page. In my page I used ten text boxes. I want to block "tab" key event for navigate one text box to another text box.
Expected Approach: If I pressed tab key it wont go to another text box.
You can do somthing like this.
window.onkeydown = function() {
if (event.keyCode == 9) {
event.preventDefault();
}
}
Use NativePreviewEventHandler and use the logic mentioned by Mayank Pandya, which is
if (event.keyCode == 9) {
event.preventDefault();
}
Check for the Tabkey keycode. I am not sure about it.

Can't unbind keypress; pressing 'enter' in searchbar passes the window.location/document.location I specified and goes to the wrong page

I'm working on a page that is part of a pre-existing site. There is some script attached to the page that is overriding my searchbar 'enter' presses, so that every time I press enter it goes to the site-search page instead of my events-search page. This is my function:
$(".searchBox").keypress(function (e) {
var key = e.which;
if (key == 13) // the enter key code
{
var searchTerms = $(this).val();
var newQueryString = updateQueryStringParameter(resetPage(document.URL), "q", searchTerms);
window.location.href = newQueryString;
}
});
By stepping through it, I can see that it is hitting each line of my method, including window.location.href... but then it keeps going, and loads the wrong page even though newQueryString is correct.
I tried using document.location isntead of window.location.href, and I tried unbinding my searchbox
$(document).ready(function () {
$(".searchBox").unbind();
}
but it didn't work...
You can use preventDefault() method to stop the default event propagation.
$("#myForm").submit(function(event){
event.preventDefault();
});
http://api.jquery.com/event.preventdefault/

jQuery dialog won't stop re-opening

Problem with field validation and two jQueryUI dialogs.
There is a registration form in the first jQUI dialog.
Field validation on the username field using AJAX. If field fails validation (already exists), PHP file returns a number > zero and an error message is displayed in a second jQueryUI dialog.
However, when user closes 2nd dialog, it immediately re-opens, forever.
Any thoughts?
$("#c_username").blur(function() {
var uu = ($(this).val()).toLowerCase();
$(this).val(uu); //in case user did not input as all lowercase
$.ajax({
type:'POST',
url: 'ajax/ax_all_ajax_fns.php',
data:'request=does_username_already_exist&username=' + uu,
success: function(data) {
if (data != 0) {
$('#alert').html('Username <span style="font-weight:bold;color:darkgreen;">' +uu+ '</span> already exists. Please enter another.');
$('#alert').dialog({
title: 'Username already exists:',
width: 400,
close: function() {
$(this).dialog('destroy');
}
});
$("#c_username").addClass('field_invalid').focus();
}else{
alert("Username is okay");
}
}
});
});
$("#c_username").addClass('field_invalid').focus(); focuses the input behind the dialog. When you click the close button on the dialog, the input's blur event is raised again, causing another ajax call, and another dialog to be opened.
Try moving the focus() call to the close callback on the dialog. You could also try displaying the message in a span next to the input instead of in a dialog so focus issues can't happen.

Update using AJAX and JQuery

I'm trying to do a simple update, but can't figure out somthing.
I have a table that i get from a DB with an Edit button that when i press change to a Save button so i can save with Ajax the record that the user just edit.
I'm doing the first part just fine, have one function that do all the jquery stuff on the page (that is working just fine).
Now I want to change the $('#a'+productID) line to save insted of edit. i am changing the link attribute also, so when the user presses save it will send him to a function that will make the Ajax request and update the record.
But i dont have a clue how to start that....I don't think it has any thing to do with any bind function becouse i am allready binded by calling the save function (or am i wrong and need to bind antway???) can any one help me out here?
P.S. the save function recives the productID do i have the right product when i will need it.
Don't have a code to send for the save function becouse i don't know how to start it and every thing i tried doesn't work....sorry :-(
It might be easier if you simply had both buttons on the page and toggled between them depending on the page state.
<a id="editButton" href="http://example.com/widget/edit/1">Edit</a>
<a id="saveButton" href="http://example.com/widget/update/1" style="display: none;">Save</a>
$(function(){
$('#editButton').click( function() {
// set up the form as edit...
$(this).hide();
$('#saveButton').show();
return false;
});
$('#saveButton').click( function() {
var button = $(this);
var href = button.attr('href');
$.post(href,$('form').serialize(), function() {
// change form back to readonly...
button.hide();
$('#editButton').show();
}
});
});

Resources