Here's what I'm trying to have happen:
ENTER
on their keyboard, it adds an input field AFTER the current input field using the after()
function, then it focuses that input field so they can continue typing and do this over and overheres my code which is not working:
$('.table-todo input[type=text]').live('keypress', function (e) {
if (e.which == 13)
{
$parent = $(this).parent('.field');
$.get('projects-add-task.php?show_delete=yes', function (data) { $parent.after(data); }, 'html');
$(this).next('input[type=text]').focus();
}
});
heres the contents of projects-add-task.php
:
<div class="field">
<input type="text" name="task[]" />
<a href="#" title="Add Task Below" class="todo-add"><img src="images/icon-todo-add.png" alt="" onmouseover="this.src='images/icon-todo-add-h.png'" onmouseout="this.src='images/icon-todo-add.png'" /></a>
<?php if ($_GET['show_delete'] == 'yes') { ?>
<a href="#" title="Delete This Task" class="todo-delete"><img src="images/icon-todo-delete.png" alt="" onmouseover="this.src='images/icon-todo-delete-h.png'" onmouseout="this.src='images/icon-todo-delete.png'" /></a>
<?php } else { ?>
<img src="images/icon-todo-delete-o.png" alt="" />
<?php } ?>
<div style="clear: both;"></div>
</div>
its just not focusing the input that was added via $.get
and i cant figure out how to fix it. it is adding the next input field to the page fine, but its not focusing it.
You can do it like this:
$parent = $(this).parent('.field');
$this = $(this);
$.get('projects-add-task.php?show_delete=yes', function (data) {
$parent.after(data);
$parent.next().children('input[type=text]').focus();
}, 'html');
The problem is that the next input element is not actually created when $(this).next('input[type=text]').focus();
is executed because you are using an AJAX call to create it. Also you need the parent's next element.