Here's what I'm trying to have happen:
someone enters text into an input field
when they hit 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 over
heres 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[]" />
<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'" />
<?php if ($_GET['show_delete'] == 'yes') { ?>
<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'" />
<?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.
Related
I have this code
jQuery its an add new input field
var scntDiv = $('.q3_field');
var i = $('.q3_field p').size() + 1;
$('.add_field_q3').live('click', function() {
$('<p><span class="added'+i+'"><input type="text" name="inputq3['+i+'][q3]" class="edit-text" placeholder="http://www.domain.com" /></span> <img src="hw_img/trash.png" id="remScnt" /></p>').appendTo(scntDiv);
i++;
return false;
});
$('#remScnt').live('click', function() {
if( i > 1 ) {
$(this).parents('p').remove();
i--;
}
return false;
});
HTML - where it will be added
<div class="simpleTabs">Questions</div>
<div id="questions">
<li class="q3_field">
List five (URL) links you would like to be displaced/removed in search engine results related to your name/keywords. These can be named below or marked on a print out of a relevant Google search. <br />
<img src="hw_img/plus.png" class="add_field_q3" />
<input type="text" name="inputq3[0][q3]" class="edit-text" placeholder="http://www.domain.com" /> <br />
</li>
</div>
I am using simpleTabs jQuery where i put my simple hard code of adding input fields.
But when i click it to add, it double the field.
please see the image below.
I try that outside of the simpleTabs jQuery, it doesn't double the field when i click the add button.
Yes when im not going to use the simpleTabs.
Is there any conflict from from simTabls that i download from google? That is why it double the field when i click add button?
the codes of tab which i put it on the footer.
<script src="hw_js/jquery.easytabs.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready( function() {
$('#tab-container').easytabs();
});
</script>
UPDATE
the weird part is that when i check it on fireBug
it also double the span and id which is the same 1 and 1 2 and 2 please check the image below.
I have two divs, and when one is clicked it empties the div. I want to be able to load data into that div once it's been emptied. I've got it so it loads in both, but I only want to load data into the div that's been emptied.
HTML (I have two of these)
<div class="fl person">
<div class="maintain_size">
<input type="hidden" name="userSaved" value="<?php echo $user_one['id']; ?>" />
<img src="<?php echo "http://graph.facebook.com/".$user_one['id']."/picture?type=large"; ?>" class="circle-mask" />
<img class="hoverimage" src="images/fire_extinguisher.png" />
<div class="meta_data">
<h2><?php echo $user_one['name']; ?></h2>
</div>
</div>
</div>
Javascript
<script>
$("div.person img").click(function () {
$(this).parent("div").fadeOut(1000, function () {
var saved_id_user_who_voted_val = "<?php echo $_SESSION['id']; ?>";
var saved_id_user_voted_on_val = $(this).parent('div').find('input:hidden');
var saved_id_user_voted_on_val = saved_id_user_voted_on_val.val();
$(this).parent("div").empty();
// Load in new data
var current_div = $(this).parent("div");
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
});
});
</script>
The data seems to come through fine if I select a div that's not the current one, or I just use an alert to see if the data is there--which it is, but if I try load the data into the current div it just doesn't work. Any ideas? Thanks.
The code that I think is wrong:
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
Edit: The div I'm trying to get the data into is: div.person - although, there are 2 of these.
Once you empty the div your 'this' is no longer there. Try just declaring var current_div before you empty.
var current_div = $(this).parent("div");
current_div.empty();
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
See fiddle
You need to delegate the event as you are replacing old content with new one
$(document.body).on('click',"div.person img",function () {
Use live() function
Example
$("div.person img").live("click",function () {
//Your code goes here
});
I'm trying to code a todo list form. this form can contain unlimited rows. the rows each contain a text input field with 2 buttons beside it. 1 of the buttons adds a new row below, the second button deletes the row.
The problem is, when I click the add button a bunch of times, it removes ALL of the elements that were added below it when i click on the delete icon for that row.
I hope im making sense, maybe the code will explain whats going on.
Heres the PHP code for the todo-list form page:
<div class="table table-todo">
<?php include 'projects-add-task.php'; ?>
</div>
Here is the contents of projects-add-task.php:
<div class="field">
<input type="text" name="task[]" />
<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'" />
<?php if ($_GET['show_delete'] == 'yes') { ?>
<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'" />
<?php } ?>
<div style="clear: both;"></div>
</div>
Here is the jquery that isnt working 100% correctly:
$('.todo-add').live('click', function (e) {
e.preventDefault();
$parent = $(this).parent('.field');
$.get('projects-add-task.php?show_delete=yes', function (data) { $parent.append(data); }, 'html');
});
$('.todo-delete').live('click', function (e) {
e.preventDefault();
$(this).parent('.field').remove();
});
I had to use live for the .todo-add icon because it was not working obviously for the newly appended rows. however im unsure if this is necessary for the .todo-delete icon, but i did it just to be sure.
Any help would be greatly appreciated with this issue.
I think you need after and not append:
function (data) { $parent.append(data); }
should be
function (data) { $parent.after(data); }
Also, live is actually deprecated now. You should be using on.
you are adding many divs with the class "field" and then asking jquery to delete them on the delete button.
you need to either have unique ID for each row and then delete that ID element os simply work witht he parent of the delete button, no need to specify the '.field' in the parent()
$('.todo-delete').live('click', function (e) {
e.preventDefault();
$(this).parent().remove();
});
I have a form with number of input type images. I need to replace the webpage location to url of the image when a user clicks any image.
form is like,
<form action='free.php' id='freeForm' method='post' autocomplete="off">
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" />
<?
}
?>
</form>
$img and $url values from database.
My jquery is like,
$("#freeForm").submit(function()
{
var Form = { };
Form['inputFree'] = $("#inputFree").val();
Form['freeTOS'] = '1';
$('.anchor-url').click(function(e){
e.preventDefault();
alert($(this).attr('href'));
});
$.post('processFree.php', Form, function(data)
{
if(data == "Success")
{
$("#FreeErrors").html('').hide();
swapToPane('paneSuccess');
return;
}
swapToPane('paneFree');
$("#FreeErrors").html(data).show();
});
return false;
});
Now I am getting 'http://au.yahoo.com' when i click each image. But I want to replace 'http://au.yahoo.com' with URL of each image. How can I pass the PHP variable $url to this form?
Any idea?
Thanks!
This should work, if I understood what you were asking for correctly and though I haven't tried it. Basically you bind the click event to each image, and on click it replaces the window location with the value in the src attribute of the input element being clicked on.
$('input[type=image]').click(function(e){
e.preventDefault();
window.location.replace($(this).attr('src'));
});
EDIT
First you should add a class name to your anchor elements:
<form action='free.php' id='freeForm' method='post' autocomplete="off">
<?
for($j=1;$j<=5;$j++)
{
?>
<input type="image" src="<?=$img;?>" />
<?
}
?>
</form>
Your JS:
$('.anchor-url').click(function(e){
e.preventDefault();
window.location.replace($(this).attr('href'));
});
Notice how I added a class to the anchor links. This can be named almost anything. This gives you the ability to select for those elements with that classname only with jQuery using the $('.any-classname') selector.
First time using jQuery parent and got confused, here's my html:
<div id="friends_inveni" class="friends_rec" style="">
<br>
<div style="height: 280px; overflow-y: auto;">
<div style="width:150px;float:left;font-size:11px;color:White;">
<input type="checkbox" name="friends" value="3265" id="friend_3265">
<img style="width:24px;vertical-align:middle;" src="https://graph.facebook.com/661382259/picture">
Test1
</div>
<div style="width:150px;float:left;font-size:11px;color:White;">
<input type="checkbox" name="friends" value="3265" id="friend_3265">
<img style="width:24px;vertical-align:middle;" src="https://graph.facebook.com/599567764/picture">
Test2
</div>
</div>
<br clear="all">
<div class="action_new_comment">
<textarea class="action_comment_input" onkeyup="check_height(this);" style="height:36px;"></textarea>
<br clear="all">
<a class="action_btn" style="font-size:11px;" name="comment" id="A1">Send Recommendation</a>
</div>
</div>
Here's my jQuery code:
jQuery(document).ready(function() {
$(".action_btn").live('click', function() {
var friends = new Array();
$(this).parents('.recommend').find('input:checked').each(function(k) { friends[k] = $(this).val(); });
var comment = $(this).parents('.recommend').find('textarea').val();
if (friends.length == 0) {
alert('Please select at least one friend.');
} else {
$.post("update.php",
{ uid: <?php echo $_SESSION['uid']; ?>, mid: <?php echo $_GET['mid']; ?>, friends: friends, comment: comment },
function() {
var newComment = $('<div class="bubble_confirmation"><h1>Recommendation Sent!</h1><br /><br > Send more</div>');
$(this).parents('.recommend').append(newComment.fadeIn());
$(this).parents('.recommend').find("input:checkbox:checked").attr("checked", "");
$(this).parents('.recommend').find('.action_comment_input').val('');
});
}
});
});
Issue is that:
1. I can't get the content of the textbox
2. I can't get the array of userid
Why is this?
It looks as though your HTML class friends_rec should be recommend, judging from your jQuery code.
Also, since we don't know what $(el) is, that should probably be $(this), instead.
Addition to what Herman said you should do:
var $parent = $(this).parents('.recommend:first')
inside of your ajax callback. The :first prevents jQuery from going up the whole tree to look for more elements of that classname after you've already found the element you're looking for and keeping it as a variable reference allows you to not create a new jQuery object each time you need to use it.