$(document).ready(function() {
$("body").hide().fadeIn(250);
})
If I place the cursor at the end of the above code (the only lines of code in the file and the file is saved as sample.js) and press ^Q, a carriage return is added at the end.
If I select all the three lines and press ^Q, The code gets formatted as below.
$(document).ready(function() { $("body").hide().fadeIn(250); })
If I select the code snippet at the top and press ^J, I again get
$(document).ready(function() { $("body").hide().fadeIn(250); })
What should I do to get the code formatted as below?
document).ready(function() {
$("body").hide().fadeIn(250);
})
Using the Javascript tmbundle, Ctrl + Shift + H
Related
I would need to add new lines of text at specific position of "textarea" using protractor, there is no element to identify, it is just a textarea.
Help would greatly appreciated.
If you are talking about simple textarea element (like this http://www.protractortest.org/testapp/ng1/#/form ) then you should be fine with default .sendKeys() , just call it without .clear() , here is example:
describe('test1', function () {
it('1', function () {
browser.get('http://www.protractortest.org/testapp/ng1/#/form');
var textarea = element(By.model('aboutbox'));
textarea.getAttribute('value').then(console.log);
textarea.sendKeys(' MORE KEYS!')
textarea.getAttribute('value').then(console.log);
});
});
Notice that calling .getText() will return nothing. To get text from inputs and textarea use .getAttribute('value')
Example:
Jsfiddle
If the page is loaded the first time, the CKEditor is working right and the value of the editor can be edited. After hitting the button "ajax" which is calling the following function (cursor must be in the editor field):
function ajax_call() {
var html = "<textarea id=\"textarea\"><p>test 1</p><p>test 2</p><p>test 3</p></textarea><script type='text/javascript'>jQuery(document).ready(function() { ckEditor('textarea'); });<\/script>";
$.post("/echo/html/", { html: html }, function(data){
jQuery('#target').html(data);
});
}
it isn't possible to click on the text in IE11 to edit the value. Clicking beyond the text or left of it enabels the editor again.
Looks like creation of new textarea after CKEDITOR is initiated brakes editor in IE. Though i just tried to set data directly on instance of CKEDITOR and it worked fine,rather than creating new textarea tag.
function ajax_call() {
var html = "<p>test 4</p><p>test 5</p><p>test 6</p>";
$.post("/echo/html/", { html: html }, function(data){
//jQuery('#target').html(data); <-- Removed from original
CKEDITOR.instances['textarea'].setData(data)// <-- Added
});
}
function ckEditor(id) {
CKEDITOR.replace(id, {
language : 'de',
});
}
jQuery(document).ready(function() {
ckEditor('textarea');
});
Here is working example:
http://jsfiddle.net/2wq86gqs/15/
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/
I'm trying to send data to the server via Backbone if the users writes or paste a string inside an input text element.
in the Backbone events I thought something like this but it doesn't work:
events:{
"click .close":"closeResults",
"keypress input":"fetchData",
"paste input":"fetchData"
},
fetchData:function (e) {
var $this = this;
window.setTimeout(function () {
if ($.trim(e.target.value).length >= 3) {
console.log(e.target.value);
$this.collection.fetch({data: {limit: 10, term:$.trim(e.target.value)}});
}
}, 0);
}
If you switch to using the keyup event instead of keypress and paste, it will work for pasting via the keyboard ( ⌘ + v or Ctrl + v ) and typing normally.
If you use the input event, it will work even if you right click and paste (in addition to the same expected behavior as keyup).
More info on input:
https://developer.mozilla.org/en-US/docs/Web/API/window.oninput
use keyup and mouseleave (instead of input) event handlers so that it will also work in IE
see also How to detect right mouse click + paste using JavaScript?
events:{
"keyup input":"fetchData",
"mouseleave input":"fetchData"
},
Have a look at
e.originalEvent
_paste_plain_text : function (e) {
e.preventDefault();
var text = e.originalEvent.clipboardData.getData("text/plain");
document.execCommand("insertHTML", false, text);
}
I am using the jquery/ajax autocomplete, below is the code snippet of my simple app:
external .jsp:
$(function () {
$("#inputfield").autocomplete({
source: '/fruitapp/findFruit'
});
});
and in my controller:
def findFruit = {
def fruitsearch= Fruit.withCriteria {
ilike 'fruit', params.term + '%'
}
render (fruitsearch?.'fruit' as JSON)
}
As you can see, it will only fill in a single text field which is the "inputfield". Now, I want that if I select an item from the autocomplete list, it will fill in at least two fields. How would I do it?
Thanks in advance.
The autocomplete can get a "select" event. There you can do whatever you want.
From their documentation
$( ".selector" ).autocomplete({
select: function(event, ui) { ... }
});
Bind to the select event by type: autocompleteselect.
$( ".selector" ).bind( "autocompleteselect", function(event, ui) {
...
});
Here is a fiddle I made from their example.
As you can see, once an autocomplete option is selected, I am updating 2 different divs.
This is the code responsible for it:
$( "#tags" ).autocomplete({
source: availableTags,
select:function(e,u){
console.log([e,u]);
$("#output").text("This is the label:" + u.item.label);
$("#more_output").text("this is the value:" + u.item.value);
}
});
And just to be perfectly clear - "u" can contains anything you want.
Here I modified the fiddle to contain a single complex JS object. You can access all the fields.
I added a log print for you to see. Use chrome's developer tools to see the log print and view objects' content.