Affect only the item being clicked, and track unique identifiers? - javascript

So I will have a list of items to check off. They could have the same name/attributes but should all have a unique identifier. I want to be able to check them off of a list and have them run a function on themselves that hides them and send and update to the server with the unique id.
I'm trying to figure out where the unique ID should be stored? Should I use it as a class to easily find the item in the dom? What are my other options for tracking this user input on a particular item? The items will be sent from the server initially.
Here is a start, http://jsfiddle.net/QQPtn/1/ trying to figure out best practices for working with this kind of problem. Thanks!

If I'm not wrong there is another option. You can take help of a custom attribute. You can use custom attributes in each image element. Custom attribute can be any user defined name except existing attributes. As an example I can define my own attribute as index="n".
Example:
<img src="..." index="1" class="myimage" />
On click of the image you can read the attribute index as below
Using normal JavaScript
var index = element.getAttribute('index');
Using JQuery
$(".myimage").click(function (s) {
var imgIndex = s.currentTarget.getAttribute('index');
});

Related

How to send value of drop down item to export plugin?

I am new in Grails. I have a drop down box and a button which generates PDF. I am able to generate and download PDF using following tag
<export:formats formats="['excel', 'pdf']" />
But, now I want to select item from drop down and pass that selected item to the export tag like below
<export:formats formats="['excel', 'pdf']" params ="Pass selected item here"/>
I tried a lot but no luck. Does anybody know how to pass selected item value of drop down to the export tag?
In your controller use flash.value = params?.value inside the appropriate method. This will allow you to store the key:value pair for one transaction only.
In the GSP page define the select box value value="${flash?.value}" and give the select box an ID.
Assuming you want to pass the variable into the business logic, in your controller use an if statement to check for the select box value and follow the appropriate logic based on each value.
Flash is a temporary key:value storage mechanism for one request only. For more information on flash check out the documentation.

Select & Submit images Form / java-script

I have been researching ways to submit a form with the images selected by users. I will give the users a set of Images , they can choose multiple.
Method 1
If image is selected, add input via onclick() with the selected Value. [Possible?]
Method 2
For each Img , load hidden input , let users delete that they don't want. [Weird]
Any advice / example i can look at?
I would use invisible checkboxes with the img tag inside the label for it. That way, a click on the image should in theory trigger the checkbox.
Add an extra class with the img tag's class attribute. What you can do is create a click function for those images and their ID's via JQuery. Let's make an img tag and see how it can work
In JQuery, do the following
var imgIDs = "";
$('.multImg').click(function(){
imgIDs += $(this).attr('id')+",";
});
You'd most probably want to keep the record of the images user has clicked on and send it to the server. But before you do, do not forget to remove the trailing ",". You can achieve that by
imgIDs = imgIDs.substring(0, imgIDs.length - 1);
On server end, you can simple use explode and have all the IDs in an array. Those are the IDs of the images user has selected. You can do whatever you want with the array now.

posts array of all element names by class

I have numerous elements on a page. I am using Jquery toggle to toggle a class.
I need to post a php array containing the names of all the elements that contained that class. (were toggled on).
My first thought was to simply create an form with display:none with a listbox. Everytime the element is toggled the name will be added to the listbox and then when the user clicks next all the values from the listbox are posted to the next page. I am hoping that there might be a cleaner and simpler solution than this.
So, to clarify, I am wanting to detect all the elements that I toggled on, and post those values to another page.
How would I achieve this?
Thanks
You can create an array of all the element names (is this the name attribute, or the id) with the .map() function:
var names = $(".targetClassName").map(function() {
return this.name; //takes the `name` attribute, change to `id` for ID
}).get();

Ways to make a change listener for all HTML objects following similar ID structure?

I have several hundred HTML input and select fields on a page in table format, all with unique ID's. The ID's all follow a basic structure, and there are 3 particular ID structures I'd like to listen to for change. ID structure is described below:
xx-rownumber-jobnumber
The xx is simply a 2 digit letter combination to describe the column, rownumber is the row number of the table the field exists on, and jobnumber is just the job number of the job being bid on (will be the same for every item on a single table).
I need to listen to all ID's that follow the structure:
js-rownumber-jobnumber
wi-rownumber-jobnumber
qt-rownumber-jobnumber
How can this be achieved?
Not sure if this helps, but at any one time I will know the maximum number of rows on the screen, but this number is variable (overall max of 300).
Extra information -
The general problem I have here is I have a table being used to bid jobs. Each row is for a line item for the bid, and the various columns hold information about that line item. Once a bid has been created, it has to be finalized. Once it is finalized, any changes need to be recorded to notify someone that the changes need to be run by the client.
You can use jQuery to listen for the change event, and then use regular expressions to parse the IDs once a change event has occurred.
Xenph Yan's post seems very relevant to what you're trying to accomplish: jQuery selector regular expressions. Specifically, the regex selector plugin for jQuery:
http://james.padolsey.com/javascript/regex-selector-for-jquery/.
You could delegate it to the parent:
var table = document.getElementById('parentTable');
table.addEventListener('change', function(ev) {
var target = ev.target;
// where the regex below matches the pattern
if ( target.id.match(/(.*?)-(\d+)-(\d+)/) ) {
console.log(target);
}
});
Please note that the change event does not bubble in IE < 9. You may be able to use onpropertychange for those, but I don't know for certain. Using jQuery would also allow the change event to bubble in previous versions of IE.
Using jQuery you can try to find elements whose id begin with js $("[id^=js]"), wi $("[id^=wi]") and qt $("[id^=qt]").
You can use wildcards in selectors in various ways. Here is the jquery documentation on the subject
If changing the design of the existing table is an option, then I think you should be better off with assigning multiple classes to each element (input) rather than IDs:
For instance,
Assign class row-i to all elements belonging to row i
Assign class job-j to all elements belonging to job j
Assign class attr-c to all elements belonging to column c
Now you can find any input element by specifying any of row, job & attr.
In this specific case, you can listen various events on input.attr-js, input.attr-wi or input.attr-qt. I think this approach should save you a lot of overhead of working with regex and provide you a tag based search in your input fields.

How do I get the ID of the currently selected jQuery UI Tab?

I know that I can get the (numerical) index of the currently selected tab like this:
$('.selector').tabs('option', 'selected');
Is there a way to get the ID of the currently selected tab, outside of an event handler? By "ID" I'm referring to the string property (ui.panel.id) in the ui object that's passed in as an argument to an event listener callback - but I'm trying to do it outside of a callback.
I know I can hack together my own solution, but I want to make sure I'm not reinventing the wheel first.
I'd would rather work with IDs than indices so that changing the order of my tabs doesn't break my code - it's at least a little more robust and readable.
As far as I know, selected tab has class ui-tab-selected. You may use
$('.selector').find('.ui-tab-selected a');
to fetch selected tab. It was element, where href attribute - identifier of active panel.
#Matt Ball
You can select it using the "ui-state-active" class associated with the active tab and then get the id from the inner href link:
var selected_tab_id = $('.ui-state-active a', '#ui-tabs-widget').attr('href').split('#')[1];
'#ui-tabs-widget' is the id for your actual tabs widget so replace it with it so the active tab is selected only in the widget you wanted to and not in every one in the page.

Categories

Resources