I have a search box on my site that uses autocomplete to give suggestions, and it works great. Now I want to use it on several INPUT fields on a single page. However, the script uses ID tags to access the contents of the INPUT form box.
I modified this:
$('#suggest').autocomplete(
to this:
$('.suggest').autocomplete(
How do I access the INPUT box text now that I lose the ability to use getElementsById?
So, I think I know what you're asking. You have several input elements on a page, none of which have id attributes, but do have name attributes. Each input has a separate autocomplete widget attached to it, and you want to query a URL as your data source, passing in the name if the input being interacted with.
Ok.
I set up a fiddle to do what I'm describing above, which I think is what you want. See it here: http://jsfiddle.net/4GXAm/1/
The magic is here:
$(".example").autocomplete({
source: function(request, response) {
var url = "/suggest/?" + $(this.element).serialize();
alert("perform an AJAX request with " + url);
// Respond with the ajax results
response(["a", "b", "c"]);
}
});
Using .serialize() will get you a name/value pair from the input, without needing to know its id or name attribute. You can get the element being interacted with by using $(this.element) when using a callback function as your autocomplete source.
I recommend looking at an example of the autocomplete that uses a callback function as a remote data source for more details.
The jQuery UI autocomplete plugin should do the trick for you. This seems to be a scrap of what you were trying to use before, but reading the documentation should get you through it a bit better:
http://jqueryui.com/demos/autocomplete/
Just make sure to:
include the scripts and stylesheets for jquery ui on your page
make good use of $(this) to refer to the element that is being worked with. The above example is selecting all text inputs.
If you are still confused after this, I'd be glad to give more specific guidance if you can cut most of the explanation here and provide us with the actual code that isn't working, but as long as you understand the $(this) concept, I think this should get you what you need.
Related
I am looking for some assistance with acceptance testing of the Selectize jQuery plugin using the Capybara test framework.
We are having a problem with the way Selectize lays out the HTML it generates, there is no definitive link between the select dropdown and the values contained within the dropdown
As you can see from my jsfiddle here : http://jsfiddle.net/et4t20wz/
$('.test').selectize({
create: false,
dropdownParent: 'body'
});
Viewing the source code, the containing div has the 3 selects within it and the values for the dropdown are contained within the body tag.
I need a way for our test team to be able to create a 1 - 1 connection between the two elements. So far we have come up with a rather weak connection, as we know the first Selectize values will be stored in the first div.selectize-dropdown we can use this logic to map to the first div.selectize-control
This is rather flimsy and probably not the best approach, but the best we can come up with thus far. We have found a few solutions on the web, but sadly they appear to be out dated or reliant on different DOM structures.
For example: http://climber2002.github.io/blog/2014/09/22/capybara-integration-tests-with-jquery-selectize/
Hopefully we are not the only ones to have come in contact with this problem and someone can offer some assistance / advice
Thanks in advance.
I believe the link is just positional in the html, the two divs that make up a a selectize control are inserted immediately after the select element that is converted. Therefore if you know the id of the original select you should be able to get the associated divs using the sibling selectors
page.find(:css, '#test + div.selectize-control + div.selectize-dropdown')
or
page.first(:css, '#test ~ div.selectize-dropdown')
if you've already clicked on the div.selective-control (or maybe the input in it) then the elements in the .selectize-dropdown should be visible and you can click on them
So we managed to fix this problem using a solution I found here :
Capybara integration tests with jquery.selectize
The code didn't really work, however. So I ended up using this script I wrote.
var selectize = jQuery('#key').selectize()[0].selectize;
jQuery(selectize.setValue(selectize.search('#value').items[0].id));
My problem is that I want to create a Firefox AddOn, and I need to extract from the HTML document every "writable" (I mean: input, textarea or other ways to write text) to work with its value.
I know the method document.getElementByTagName(), but the case is that i don't know how many tags to input text exist (or a webpage usually have on it) to refer them this way; or even if this problem can be solved otherwise.
I really appreciate any help or idea to do this efficently, so I can go forward with this project.
You only have 2 possible tags: textarea and input. The problem is that with HTML5 the input tag has several kinds of types which you can insert text but you have also another ones that you can't (like submit or radio):
color
date
datetime
email
month
number
password
search
tel
text
time
url
You can use document.querySelectorAll function to retrieve those elements:
document.querySelectorAll("textarea input[type=text] input[type=email]");
Note that I have only include text and email in the selector but was just a sample mode. You should add all the types you think necessary retrieve.
Here you have all the possible types for input tag and the browser support of those, I recommend check out the documentation to have a better idea of what tags should be relevant for you.
I am adding an id to an element via call to jQuery.data:
$layout.nextAll('.imagepicker').data('imgPickerId', randomnumber);
So my element of a class imagepicker will have [imgPickerId=randomnumbervalue] data attribute added to it.
It seems like there is a problem how I later on look for .imagepicker with exactly this imgPickerId. Where can I lookup which attributes are added to a particular element in a convenient way (excep from js code)? Maybe in firebug somewhere?
P.S. for some reason my "getter code" works in jQuery 1.6 but does not in 1.7. Still I am suspecting data isn't being added to an element and need a way to check it.
jQuery's data function stores everything in JavaScript, without altering the DOM in any way. I'm afraid you'll have to use code to access it.
A quick Google search also showed me a FireQuery plugin for Firebug, which seems to enable you to see the attached data of your elements. Haven't tried it myself, though, so I can't confirm that.
Update: Tested it, and it works fine! With FireQuery all data of your elements are visible right next to the HTML:
Have you considered in writing your data in an custom attribute like data-imgPickerID="someID"?
For sure this does not allow you to save huge data but you could inspect it via firebug and since you are only saving an ID it would fit for your needs.
Which is also very cool about the .data() method is you can retrieve your custom attribute from above like so .data("imgPickerID");
data() will save data in memory (of course linked to the elements in your selector), it doesn't write things on the element, so you can't look at that in firebug.
You can pre-populate elements with some data by using the html5 data attibute though
Look at this question for an expanded explanation
How does jQuery store data with .data()?
I have a textarea by id "compose" and i want to get the data from that textarea before the submit button is pressed. I have another javascript function that will share the information to various other sites based on the user preferences and i need to pass the information in the textarea to that js.
function getVal(){
alert(document.getElementById("compose").value);
}
I am not getting any information and im guessing its because the information is stored else where but i dont know where that is stored.
I am using zend with this and i would like to use jQuery but i cannot get jQuery to work properly with zend. It either wrecks other components on the page or does not work at all. Any suggestions?
edit: This is where i am calling getVal(). Its just a link right now as i am trying to get the input into the text area. Then i will insert the found data into my js script.
I attached Zend because the site is made using the zend framework and after a while of stuggling with jquery i didnt want a jquery answer because i would not be able to use it.
click
edit1 It seems the engine im using has dropped jquery support for the version im using.... Thank you for your answers and help
since you tagged this as jquery I assume you use it. In that case, the simplest way would be ...
$("#compose").val()
Oh, never mind, I read now that you can't make jquery work?
In that case, did you read this post? Best way to start using jQuery in a Zend Framework 1.9 application?
You can hi-jack the submit event for the form, do your AJAX request, then submit the form normally:
$('form').on('submit', function () {
$.ajax({
url : '<URL>',
data : { compose : $('#compose').val() }
});
});
Note that .on() is new in jQuery 1.7 and in this case is the same as .bind().
Docs for .on(): http://api.jquery.com/on
On a particular page, I use json to load a bit of html code that displays information about what the user submitted when he clicks on something.
In this case, the user is picking his favorite baseball player and the json returns some html code that formats and displays the name of the player.
When that html is loaded on the page, the live click javascript function no longer applies to the html that is loaded. Is there some way I can refresh the javascript so that it applies to it?
When the user clicks on his favorite baseball player, you make a request to the server and it returns a json object with the players information, right? If the server returns a string containing html tags instead of a json object I don't think you are doing it the right way.
The JSON object that the server should respond with should look like the following.
{Name : 'Kobe Bryant', JerseyNumber : 0, Salary : 500}
Once you receive this object, you will parse it and put its content in an element on the page. Responding with an HTML code is not good practice, you should create a template where your athletes data will be store.
If you give us some code along with this question, I would be more than happy to help you solve it.
Are you using jQuery? They have a built-in method to handle this.
$('#myElement').live('click', function() {
/* Your Code Goes Here */
});
In jQuery 1.7 the same thing can be written as:
$('#myElement').on('click', function() {
/* Your Code Goes Here */
});
After doing a lot of research and talking to several people, I found that I need to re-bind the event after the json callback.
This was a great help:
http://jetlogs.org/2009/01/29/re-binding-jquery-events-on-ajax-callbacks/
When using jQuery's .click() method and rendering new html, the javascript that was originally attached to it, needed to be attached again.
This is more easily solved by using the .live() method with the 'click' option. The .live() method automatically re-binds the new code.