Develop Reference

Get variable inside certain div with jquery, when there are multiple divs with same id

I'm printing an arraylist with jsp. Each object inside of that arraylist is printed with a loop like this:
<% ArrayList <MessageObject> list = (ArrayList<MessageObject>) request.getAttribute("list"); %>
<%int index = 0;%>
<%for(MessageObject msg :list){
index++;
if(mensaje.getState().compareTo("unread") == 0){%>
<tr data-status="unread" class="unread">
<td>
<a href="javascript:;" class="star">
<i class="glyphicon glyphicon-star"></i>
</a>
</td>
<td>
<div class="media">
<h4 class="title">
User Identifier
</h4>
</div>
</td>
<td id="unread-id">
<div class="media">
<p class="summary"><% out.print(msg.getMessage());%></p>
<input id="index" type="text" value="<%out.print(index);%>"></input>
</div>
Some of the closing tags and other structures are not written above, in order to make my code easier to read.
Basically that prints me messages from a queue, and its index in the arraylist:
My problem is that I want to save the index value of any of my messages when I click on them.
I tried this:
<script>
$(document).on('click', '#unread-id', function () {
var index = $('#index').val();
$("#setindex").val(index);
});
So I click on any div containing a message, the script is called, but I always get the same index value, 1.
Problem is that having always the same div with the same id name, causes that my script always selects the first div with id unread-id, which is always the first one, so it returns 1.
How can I get the index of the clicked div, if all my container divs have the same id value?

Add a class to your <td id="unread-id"> like row and change your script for the following one. Your td should end up looking like <td class="row">. Also, don't use ids in your inputs, change it to a class, like row-input.
JS
$(document).on('click', '.row', function () {
var index = $(this).find('.row-input').val();
$("#setindex").val(index);
});
JSP Changes
<td id="unread-id"> to <td class="row">
<input id="index" type="text" value="<%out.print(index);%>"></input> to <input class="row-input" type="text" value="<%out.print(index);%>"></input>
Note
You are setting the same id to all your rows. An id must be unique and that is the reason you keep getting the same index.

First - id should be unique in your page. You should really fix this (and if you need some selector to work with multiple elements - you can use classname instead).
However - your code can work (might cause issues with some browsers, so I really advise you to fix this asap):
$(function() {
$(document).on('click', '#unread-id', function () {
console.log($(this).val());
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<input id="unread-id" value="1" /><br />
<input id="unread-id" value="2" /><br />
<input id="unread-id" value="3" /><br />
<input id="unread-id" value="4" /><br />
When inside the click function - the this element is the element you just clicked. You can use that in order to get the value that you need.

get item from multiple inputs with jquery which have the same name

I am listing items via table then want to change individual names of items.
<td class="tdFileName">
<?php $nameArray = explode(".", $f->file_name); ?>
<input type="text" name="ra_name" class="raName" value="{{$nameArray[0]}}">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
<td>{{$userName}}</td>
$('.btnRaName').on('click', function (e) {
e.preventDefault();
alert($('.raName').val());
location.reload();
});
When I click the individual button I only get first input's value. How can I fix that?

On click you need to pick the prev HTML element as it will be the desired input field:
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var txt = $(this).prev('input.raName').val();
console.log(txt);
location.reload();
});

You need to use DOM traversal to get only the .raName element thats related to the clicked button. Try this:
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var raName = $(this).closest('td').find('.raName').val();
console.log(raName);
});

Select the element relative to your clicked element using sibling()
$('.btnRaName').on('click', function (e) {
e.preventDefault();
var raName = $(this).siblings('.raName').val();
console.log(raName);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<td class="tdFileName">
<input type="text" name="ra_name" class="raName" value="the value">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
<td class="tdFileName">
<input type="text" name="ra_name" class="raName" value="another value">
<button type="submit" class="btn-warning btnRaName">Düzenle</button>
</td>
</table>

How to dynamically create objects on the fly with click of a button

I'm trying to create 2 rows of 6 rectangles (considered to be one object).
I also want to add a plus button, so that when the user clicks on either end, a new set of rectangles appear above or below the original ones. (depending on which plus button they click on)
So I am trying to achieve the following:
What I have tried/found so far:
$(function () {
$(".repeat").on('click', function (e) {
e.preventDefault();
var $self = $(this);
$self.before($self.prev('table').clone());
//$self.remove();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<form>
<div class="repeatable">
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat">Add Another</button>
</div>
<input type="submit" value="Submit" />
</form>
The above example only works for forms. Does anyone know how I can go about making this work for what I want?

I modified your code to allow add to top, or add below.
I edited your event listener to check whether the button has a specific class. If so, either add above or below. It also listens to "body" click, because new DOM elements won't have event listeners attached:
$("body").on('click', ".repeat", function (e) { //other stuff here}
Also, changed your HTML so it wasn't dependent on "form", you could swap out the element types as long as the classes remain.
$(function () {
$("body").on('click', ".repeat", function (e) {
e.preventDefault();
var $self = $(this);
var $parent = $self.parent();
if($self.hasClass("add-bottom")){
$parent.after($parent.clone());
} else {
$parent.before($parent.clone());
}
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="container">
<div class="repeatable">
<button class="repeat add-top">Add above</button>
<table border="1">
<tr>
<td>
<input type="text" name="userInput[]" />
</td>
</tr>
</table>
<button class="repeat add-bottom">Add below</button>
</div>
</div>

Dojo dialog - how to save contents of dialog

I am new to dojo and I have been following the tutorials mentioned here
http://dojotoolkit.org/reference-guide/1.7/dijit/Dialog.html
I am not sure how to capture the data entered in dialog
<script type="text/javascript">
require(["dojo/ready", "dijit/Dialog", "dijit/form/Button"],
function(ready, Dialog, Button){
ready(function(){
var myDialog = new Dialog({
title: "Add",
style: "width: 600px"
});
var myButton = new Button({
onClick: function(){
myDialog.set("content", getDialog());
myDialog.show();
}
}, "progbutton");
});
});
function getDialog(){
return document.getElementById('add-link-dialog-container').innerHTML;
}
</script>
Html:
<div id="add-link-dialog-container" style="display:none;">
<div>
<table class="dijitDialogPaneContentArea">
<tr>
<td><label for="name">Name:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="name" id="name" value="Test"/></td>
</tr>
<tr>
<td><label for="address">Address:</label></td>
<td><input data-dojo-type="dijit/form/TextBox" name="address" id="address"/></td>
</tr>
</table>
<div class="dijitDialogPaneActionBar">
<button dojoType="dijit.form.Button" type="submit" id="ok">Add</button>
<button dojoType="dijit.form.Button" type="button" id="cancel">Cancel</button>
</div>
</div>
</div>
<button id="progbutton" type="button">Add New</button>
The dialog does pop up. But how do I capture the data entered in the fields?
Is there any better way to do this?

If the dialog is being opened, then you should be able to use the dijit/registry module to retrieve your form fields (and thus, also your values/data).
For example:
require([ "dijit/registry" ], function(registry) {
registry.byId("ok").on("click", function() {
registry.byId("address").get("value"); // Will return the "address" value
});
});
The question of course is, when do you add the onClick event handler to your button. You have to wait until the dialog is loaded until you can add an event handler to it. Good thing, the dijit/Dialog has an event called onLoad which we can use.
For example:
myDialog.on("load", function() {
registry.byId("ok").on("click", function() {
registry.byId("address").get("value"); // Will return the "address" value
});
});
However, if you're interesting in submitting all form data, you should take a look at the dijit/form/Form widget which allows you to get/set the form values, validate the form and submit it as well.

How to submit selected checkbox items?

I have a list of items that need to be selected and take an action based on user's request.
User selects the items and click on one of the btns to do something on the items.
My code is as following but I am not sure how to complete it. I believe, need to put them in a form to be submitted or pass the but not sure how to have a form with two submit btns, (if I need to have ).
<body>
<p><b>Shopping cart</b></p>
<table>
<tbody>
<c:forEach items="${mycart.items}" var="item">
<tr>
<td>
<input type="checkbox" name="Items"
value="${item.ID}"/>
</td>
<td>
Name : ${item.name}
</td>
</tr>
</c:forEach>
</tbody>
</table>
checkout
Delete

you can easily have two <input type="submit" name="something" /> in one <form>
if you want to differentiate the actions, just use different name for each submit button
EDIT:
<form ...>
...
...
<input id="b1" type="submit" name="edit" value="Edit"/>
<input id="b2" type="submit" name="delete" value="Delete"/>
</form>
If the form above is submitted by clicking #b1, then your request will contain a parameter named "edit". If the submit is triggered by #b2, then it will contain "delete".

I think following script might let you obtain what items are checked.
With jQuery, you need implement your checkout() like this
function checkout() {
$('input[name="Items"]:checkbox').each(function() {
if ($(this).attr("checked")) {
alert($(this).val() + 'is checked');
} else {
alert($(this).val() + 'is not checked');
}
}
);
}