JQuery :: Using .data() On Element With HTML5 Data Attributes?
Oct 18, 2010
I am trying to try jQuery 1.4.3 updated .data() method with HTML5 data attributes. The way I understood these changes is that an element with these attributes would automatically have their data populated by .data(). For example, if I have an element:
<ahref="#" data-cheese="cheddar">DataElement</a>
I can access this with .data('cheddar'). This part works fine. The issue I am having is that calling JUST data like $(this).data() just produces an empty object. Is this how it should be expected to function?
I make use of new HTML5 data attributes to attach data to DOM elements like so:<div class="foo" data-randomdata="bar">jQuery is awesome.</div> It would be nice to have a specific method to accessing the attributes without having to use the .attr() method like this: var foo = $('div').attr('data-randomdata'); It would be nice for it to work something like this: var foo = $('div').DOMdata('randomdata'); //equals bar
I am using .ajax() to access cross-domain data using JSONP. Because I need to be able to cache the data I want to use a static name for thejsonpCallback function, so I have set the jsonpCallback option in the .ajax() request. However that appears to requires a global function whereas the auto generated function didn't (well maybe it did but that was all hidden from me).
I definitely need to be able to cache the results. Ideally I wouldn't have a global function handling the data. Is there another way to do this? If not what is the best practice way to go about using a global function these days and how do I provide it with the context of the object/module it was called from - which is where the data is needed?
Relatively new to jQuery but have a problem with getting data to display.Using a webform with 2 forms. User slects and inputs data into the first form, clicks a button then using jQuery .ajax submits the serialized data to a php script. The script processes the input into multiple paragraphs of text which is based on the input from the first form.The data is returned to the webpage and displayed in a text area (of the 2nd form) where the user can edit it to fine tune the wording. The 2 forms are displayed in different tabs so it is easy to move back and forward between the 2 forms.
The problem occurs when the user goes back to the first form and enters or selects different text and then click the submit button to generate a whole new text for insertion into the textarea on the second form. For certain fields the modified text is displayed.However if the whole of the text in the textarea is deleted, then the user clicks the submit button to re-generate the text content area then nothing at all is ever interted into the textarea. If have user alert to check that data is returned from the php handler and this text is correct. BUT when I click on the tab to see the textarea (id is "draftrec") there is no text inserted. The relevant function is below and the line that should insert the text into the textarea is:
I would like to use jQuery to prepopulate a form - ie make a call to a php program to get data from a database and pre-populatea form with appropriate data for the user. Can anyone point me in the right direction for some examples on the simplest way to do this?
I wonder if i can make the variable data which is [data] in jQuery.post( url, [data], [callback], [type] ) dynamic. for instance, this is the form i want to send,
I am writing a small data entry screen that will post the form data to a page and return a message. But i cannot get the Success or Error functions working properly.
Here's the code where strData is the posted querystring of:
I'm not sure whether it should be in a form and using the onsubmit or click of a button.
I am still new to jQuery and I am trying to figure something out. I have this code:
[Code]...
This is working fine on itself. What is does is when I click a link it loads data into the following div. When done loading it slides out. But I want to change the appearance of the slide. I have tried to do that like this: $(this).show("slide", { direction: "down" }, 1000); But this doesn't work. When I check firebug it says the following: o.easing[this.options.easing || (o.easing.swing ? "swing" : "linear")] is not a function
I have a jQuery plugin that creates a list of news items and appends the <ul> to the element(s) calling the plugin. Each <li> gets a document key added to its data.
A brief snippet of the code:
(function ($){ $.fn.NewsList=function (options){
[Code].....
None of the <li>'s have the data attached to them. I've tested the selector shown above in line 3, and it does pick up the correct <li>'s. The data is not visible in Firebug as it is on the other page. Both functions are called after document.ready and insert the elements after page load.
The onlydiscernible differences between these two circumstances is that in the working case, the plugin is called against an ID, whereas in the nonworking instance, it is called against a CLASS. In addition, in the working case, only one DIV is affected, and in the nonworking case, there are two DIVs that receive the treatment.
When retrieving JSON data I'm able to access individual elements using the $.each() function and iterate over them. However, how would I access just one element by its location and not by name? (i.e. data(0) not data.ID).
i have something questions. how can i select element from another page for processing data. ex : #myname.value from content.php and i will process that value to the process.php.
I have a close buttons wich removes the element from dom: $("#element").fadeOut('fast').empty().remove();
The second time I execute the onclick event, the first code takes approx 1 second, so much slower. The php code execution time is the same as previously.
I have a list where each list item has a click event attached to it. Upon clicking a list item, the click calls a PHP script and passes the list's title attribute as a parameter to the script. How can I take the data returned (some HTML) from the AJAX call and append it to the list item which was clicked? I know that the data variable contains the correct HTML coming back from the script and thought that $ (this).append(data) would work but it doesn't. I was thinking of calling another function from within the AJAX return function call, but don't know how to reference the list item which was originally clicked.
Are there any plans to allow the .data() method to accept a map of key/value pairs of data?I don't think this is currently supported although many other jQuery methods support this type of functionality...
I wrote a little live clock in JS (using Steve Levithan's "date format" code) that formats the time display according to a format string. I then find all elements by classname and search for a classname of "clock" and write the clock string to the innerHTML of every element I find.But recently I added another "feature". Rather than hard code a format string, I instead pass it in ID. Example:
<span class="clock" id="hh:mm:mm tt"></span>
..and the JS:
var doClock = function () { var now = new Date(); var e = getElementsByClassName('clock');
[code]...
Note that I am passing the clock FORMAT STRING by using the span's ID. It works great...
I'm having trouble placing some data returned by an ajax function in the page where I want it.
I've included the relevant html and the javascript function below. There is some php code included which works but is not relevant to this question. The first ajax part of the function works. I have tested it with positive results in another context.
The part starting with "var x . . ." is the part that is not working. This part is supposed to generate the following html: Code:
i am thinking of using a xml file as a data base for example , the xml file stores a list of reference numbers which is allocated to a url or a name such as 0123456789 and i have a text box on a webpage and the user types in a reference number and the javascripts reads the xml file to check if its a valid reference number i.e a registered number i am new to working with xml etc.
[Code]....
id like it to read the specific data thats contained within the tag such as 0123456789's tag = JOE
I'm trying to compare incoming JSON data to the existing data to see if there are any changes, but for giant objects like:
Code: [{"date":"2011-09-03 23:06:03","notifier_id":"1","type":"1","unread":"0"},{"date":"2011-09-05 00:37:46"}] if (JSON.stringify(oldData) == JSON.stringify(newData))
This doesn't seem to work. I've tried using:
Code: escape("'" + JSON.stringify(W.notification.list + "'")) but that ignores the objects properties and returns something like 22%5Bobject%20Object%5D%2C%5Bobject
I know that I can get (eg) the href attribute via $('a').attr('href') BUT I would like to do the following :
get *all* the attribute names and values without knowing anything about the attribute names and values in advance (or even how many there are) - something like a loop and $('a').(attribute name, attribute value). I suppose they would best be placed in a JavaScript object as a set of name/value pairs eg { href: 'page.htm', id: 'foo', alt: 'alt text' }
When you need for a certain element (say a text input box) to remember some data, what is the best way to do this? Can you extend the input box object with jquery? Right now i've been storing it in the rel tag $('#testInput').attr('rel','extrainfo') it just seems like there should be a better way to do this.
I'm trying to grab values from a set of arrays based on the value returned by my select box.
**Caveat - this is not an area I have any real experience with**
My arrays look like:
Code JavaScript:
I then need to test for each, then associate with one of my fees arrays, then grab each of the values in the array and write those values to elements within my page.
I'm then doing this to evaluate for each degree
Code JavaScript:
I need to first figure out how best to import all of these 60+ arrays and then in each of my conditions pull out each value and write to my page.
There is a unique 1 to 1 relationship between each degree and array so I can't consolidate as the values for each degree differ slightly.
