jquery:Dialog box not poping in a dynamically generated table - javascript

I have created a struts2-jsp application,i want a dialog pop up whenever edit hyperlink in clicked,I am using Jquery to pop up a dialog when Edit hyperlink is clicked.
The problem is that Dialog box pops up only when the first edit is clicked,in the second and other edits which are generated dynamically when a record is added dialog box doesn't pops up.
The Jquery code is:
<script>
$(document).ready(function(){
$( "#todo" ).dialog({ autoOpen: false });
$( "#dialogLink" ).click(function() {
$( "#todo" ).dialog('open');
});
});
</script>
The code to dynamically generate the table is:
<div class="content">
<table class="todoTable" cellpadding="5px">
<tr class=even>
<th>TITLE</th>
<th>STATUS</th>
<th>EDIT</th>
<th>DELETE</th>
</tr>
<!--This will iterate through the todolist -->
<s:iterator value="gettodoList()" status="todoStatus">
<tr class="<s:if test="#todoStatus.odd == true ">odd</s:if> <s:else>even</s:else>">
<td><s:property value="title" /></td>
<td><s:property value="complete" /></td>
<!-- This will append the Id with the url -->
<td>
<a id="dialogLink" href="#">Edit</a>
</td>
<td><s:url id="deleteURL" action="deleteTodo">
<s:param name="id" value="%{id}"> </s:param>
</s:url> <s:a href="%{deleteURL}">Delete</s:a>
</td>
</tr>
</s:iterator>
</tbody>
</table>
</div>

You need to use the .on() to set the event handler instead of the .click() as the latter will only attach the event on existing nodes while the first will attach it to existing nodes and new ones as well similar to how .live() used to work in earlier versions of jquery
take a look at http://api.jquery.com/live/

1) it is because you are using an id, use a class and it should work fine.
&
2) you should try to use on() for dynamically generated elements.

Related

Keypress action query using jQuery class attribute

I am implementing the view behavior using jQuery. I can input directly to the table td. I want to give an event when inputting to this td.
But the event is not recognized, what should I do?
Here is the code:
<div class="a">
<table class="tb">
<tr>
<td></td>
</tr>
</table>
</div>
<script type="text/javascript">
$(".a table tr td").on('keypress', function(event){
console.log(event);
});
</script>
It is an event required only on the page, so it is difficult to modify the common jQuery code that draws and enters the table.
Based on this:
A keypress event handler can be attached to any element, but the event
is only sent to the element that has the focus
So you need to have focusable element, see this to know what are the focusable element: Which HTML elements can receive focus?
If I have textbox in td everything going to be fine:
$(".a table tr td").on('keypress', function (event) {
console.log(event.key);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.5.1/jquery.min.js"></script>
<div class="a">
<table class="tb">
<tr>
<td><input /></td>
</tr>
</table>
</div>
The below code works, so if it doesn't work in your case, that probably means that the <input> field is not yet added by your other "common" code, at the time you add the keypress listener.
So the solution should be to first add the <input> fields, and after that you execute your key handler code.
<div class="a">
<table class="tb">
<tr>
<td><input type="text"></td>
</tr>
</table>
</div>
Execute this AFTER the input fields have been added
$(".a table tr td").on("keypress", function (event) {
console.log(event.key);
});
Working example here: https://jsfiddle.net/081cL2xu/

Simulate drag and drop with jquery

I want to simulate a drag and drop with jquery or javascript.
I have to datatables where I want to simulate the drag and drop.
<table class="dataTable table table-hover null table-cells dragDropTable table-draggable" id='tableListViewFields' data-testid='tableListViewFields'>
<thead>
<tr>
<th>Name</th>
</tr>
</thead>
<tbody>
<tr class="drag-cue" data-name="test" data-index="1">
<td class="no-border-right">
test
</td>
</tr>
</tbody>
</table>
The destination table looks the same.
So how can I simulate a drag ond drop from a row element to another?
I found another solution:
I now use https://github.com/j-ulrich/jquery-simulate-ext/blob/master/doc/drag-n-drop.md which has a very easy implementation of drag and drop
To simulate dropping first row to second, you can manually trigger the drop event:
$( ".drag-cue:eq(1)" )
.trigger("drop", $( $( ".drag-cue:eq(0)" ) ));
You can do it via simple javascript HTML5 Drag and Drop or as i did using JQuery plugin for ex. Dragula

expand event for content added dynamically

I am trying to display some collapsibles with data in my webpage and execute a function each time they are opened.
Now I can display them. I get them by an ajax call in a pageshow in my home page. Then I set in the html() of the content div in the second page (where they go)
They seem like this:
<div id='off_id_offer' class='offer_send_obs' onclick='offer_send_obs();' data-role='collapsible'>
<h3><font size='4' face='verdana'>titulo</font></h3>
<table border='0' style='width:100%;'>
<tr>
<td align='center'>
fechas
</td>
</tr>
<tr>
<td align='center' style='width:50%;'>
<img style='width:70%;' src=imagen />
</td>
</tr>
<tr>
<td>
texto
</td>
</tr>
</table>
</div>
<br>
I tried adding an onclick function in this code and also creating a class to bind the function.
But when I click the collapsible in my webpage, nothing happens, nothing is launched.
This is my code for functions in javascript page:
function offer_send_obs(){
console.log("function exec");
}
$('.offer_send_obs').on('click', '.offer_send_obs', function(){
console.log("click exec");
});
I am using jquery 1.10.2 and jquery mobile 1.4.3

Focus on first form element, whatever it may be. jQuery dialog

I have a jQuery modal dialog, when it opens I want it to focus on the first form element.
At the moment I have this:
the_dialog.dialog({
modal: true,
width: 700,
title: 'title',
close: suicide ,
open: function(event, ui) {
setTimeout(function() {
jQuery('#').focus(); <-- VERY SPECIFIC CSS SELECTOR PERHAPS?
}, 220);
}
}
);
My problem is that the this dialog is called from a few different places in my application and the first form element can sometimes be an input or sometimes be a select.
The layout of the form is always the same, only the first form element is subject to change.
<table>
<tbody>
<tr>
<td>LABEL</td>
<td>FIRST FORM ELEMENT</td>
</tr>
<tr>
<td>LABEL</td>
<td></td>
</tr>
<tr>
<td>LABEL</td>
<td></td>
</tr>
<tr>
<td>LABEL</td>
<td></td>
</tr>
</tbody>
</table>
Without adding any CLASSes or IDs, when the form opens, can I focus on the FIRST FORM ELEMENT, whatever it may be?
Can use the psuedo :input selector within your open callback and look for the first non hidden element
open: function(event, ui) {
the_dialog.find(':input:not(:hidden):first').focus()
}
:input filters the tags <input>, <textarea> and <select>
:hidden filters any tags that are not visible from display:none as well as type="hidden"
You can try
jQuery('input,select').first().focus();
with respect to the comments, you should scope it so that it applies to dialog only, e.g.
http://jsfiddle.net/chkfgfwy/
You can use the :input selector to find the first form element within the dialog:
the_dialog.find(':input:first').focus()
I'd suggest:
// I'm assuming that <textarea> elements may be used, they can be removed if not;
// 'dialog' is an assumed reference to a jQuery object containing the relevant <table>:
dialog.find('input, select, textarea')
// retrieving the first element matched by the selector:
.eq(0)
// focusing that found element:
.focus();
// this part is entirely irrelevant, and used only to vary the "first form element",
// in order to demonstrate the approach working, regardless of which element is 'first':
var formElements = ['<input />', '<select></select>', '<textarea></textarea>'];
$('td:nth-child(2)').html(function(i) {
return $(formElements[Math.floor(Math.random() * formElements.length)]).val(i);
});
// the relevant part (explained above):
$('input, select, textarea').eq(0).focus();
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<table>
<tbody>
<tr>
<td>LABEL</td>
<td></td>
</tr>
<tr>
<td>LABEL</td>
<td></td>
</tr>
<tr>
<td>LABEL</td>
<td></td>
</tr>
<tr>
<td>LABEL</td>
<td></td>
</tr>
</tbody>
</table>
References:
JavaScript:
Math.random().
Math.floor.
jQuery:
eq().
focus().
html().
would it be possible to us <th> tags to wrap your labels?
Then you could use
$('table').find('td').eq(0).children().eq(0).focus()
Although its a bit long winded, but would work if the child was a input, select or anything else (textarea etc)

How to Copy and Insert Table Row using jQuery / JavaScript

I have a table with the following structure
<table id='table1'>
<tbody>
<tr id='rowa'>
<td><select>....</select></td>
<tr>
...
<tr id='rowx'>
<td>....</td>
</tr>
...
<tr id='rowz'>
</tr>
</tbody>
</table>
What I want to do is on clicking of a button, I want to copy the rowa and insert it before rowx.
What I am currently doing is
<script type='text/javascript'>
function copyRow() {
var row = $('#rowa').clone();
$('#rowx').before(row);
}
</script>
It seems to show the newly constructed row before the rowx but when I try to access that new row, it does not work. what I mean by does not work in that the select input item does not behave like a select item, it behaves like the static text.
elsewhere on the page I have
<a href='javascript:copyRow()'><img src='images/copyrow.png' title='Copy Row' /></a>
Sorry! I should have made it clear that the copyRow is being called when the user clicks on a link somewhere else on the page.
Check this http://jsbin.com/owivin/1/.
JS:
$(document).ready(function(){
$("#rowx").before($("#rowa").clone());
});
Your code's not working because you never call copyRow(). I put it in the document.ready() so that it would run as the document gets ready!

Categories

Resources