my js file has
$('#opt_no').click(function() {
$('#sample6').append('<br>Employee Number:').append($("#dynamic").val());
});
$('# opt_yes').click(function() {
$('#sample7').append('<br>Employee Number:' ).append($("#dynamic").val());
});
opt_no and opt_yes are links on my html page.
when user click on submit button, i want to identify on which link he has clicked and pass this link id to onClick function of submit button
Hard to say without the rest of the code. Do you want something like this?
$('#opt_no').click(function() {
$('#sample6').append('<br>Employee Number:').append($("#dynamic").val());
$("#submitlink").attr("href", $(this).attr('id'));
});
Assuming only one link can be clicked, or that the most recent clicked link is the only one you care about, then you can store the id values in a global variable. This can then be accessed from within any other function, such as your submit click event.
var linkId;
$('#opt_no').click(function() {
linkId = $(this).attr('id');
$('#sample6').append('<br>Employee Number:').append($("#dynamic").val());
});
$('# opt_yes').click(function() {
linkId = $(this).attr('id');
$('#sample7').append('<br>Employee Number:' ).append($("#dynamic").val());
});
$('#submitButton').click(function() {
//do something with linkId
});
you ca n get id using this code
$(this).attr('id');
Related
I am trying to run a function when a dynamically generated button is clicked. It does for some reason not seem to work, whatever method I try using.
JavaScript
//Generating the button
$('<div><h3>Back<h3></div>')
.attr('class', 'rtext btn arrowback').attr('role', 'button').attr('id', '2')
.appendTo($(".row1")).hide().delay(800).fadeIn(1000);
//function when button is clicked
$(".row1").on("click", ".arrowback", function(){
var userID = this.id;
alert(userID);
});
I have tried using .on as above, I have tried using .live as:
$(".arrowback").live("click", function(){
var userID = this.id;
alert(userID);
});
Yet nothing seem to work. Is my syntax incorrect?
Ah, I have now solved it, if both parent and child are dynamically generated, the below will function:
$(document.body).on("click", ".arrowback", function(){
var userID = this.id;
alert(userID);
});
Generating elements dynamically also allow to bind event to the recent element created.
Look at this codepen: http://codepen.io/andtankian/pen/dXpZPR
$('div').append("<div></div>");
$('div>div').addClass("row1");
//Generating the button
$('<div><h3>Back<h3></div>')
.attr('class', 'rtext btn arrowback').attr('role', 'button').attr('id', '2')
.appendTo($(".row1")).hide().delay(800).fadeIn(1000);
//function when button is clicked
$(".row1").on("click", ".arrowback", function(){
var userID = this.id;
alert(userID);
});
I simulated your environment and everything works fine.
So I have this function where I add content on click to a "Favorites page", but when I click the button to remove it from the Favorites tab it removes the content but the button on the main page does not reset, the question is, how do I reset the button to it's original state after clicking the "Unfavorite" button?
https://jsfiddle.net/yjL7L6g7/3/
$(document).ready(function() {
$('button').click(function() {
if ($(this).html() == 'Favorite') {
var $favorited = $(this).parent().parent().parent().clone();
$(this).html('Favorited');
$favorited.find('button').html('Unfavorite');
$($favorited).click(function() {
$(this).remove();
});
$('#favorites').append($favorited);
}
});
});
And my second question related to this code is, how do I add a button to be on the same row with the content that is being added to the "Favorites"? I tried a simple .append(); but it did not suffice as the button got placed in a new row, will .css() suffice?
The questions might be stupid but I am still on my first steps in learning jquery
I'd avoid cloning if possible because there are simpler ways to do what you're trying to do. The code below will create a new button and add it to your favorites page. It will also attach an event to the Remove button to change the text of the Favorited button as well as remove itself after being clicked.
$(document).ready(function () {
$('button').click(function () {
if ($(this).html() == 'Favorite') {
var that = this;
$(this).html('Favorited');
var id = $(this).attr('id');
$('#favorites').append('<button id="' + id + 'Remove" class="ui-btn">Remove</button>');
$('#' + id + 'Remove').click(function () {
$(this).remove();
$(that).html('Favorite');
});
}
});
});
As for your second question, there is CSS that allows elements to live on the same line. For example, if you have two buttons that you want on the same line, it would look something like this:
<button style="display: inline;">Button1</button>
<button style="display: inline;">Button2</button>
Let me know if you have any questions.
I've got the following links in my page:
<a href='/post/view/12' id='93' class='notification_link'>your post</a>
<a href='/post/view/13' id='112' class='notification_link'>your post</a>
Whenever the user clicks on any of the above links, I need to post the id of the link (e.g. 93) along with the post id (e.g 12) to the (/post/view) page. But I don't want to do this via ajax. I want to be redirected to the /post/view page as if the user has clicked on the link. So far I've come up with the following code, but don't know how to continue. Any advice would be appreciated.
$(document).ready(function(){
$(document).on("click", '.notification_link', setNotification);
});
function setNotification(e){
targetUrl = $(this).attr('href');
id = $(this).attr('id');
$.post(targetUrl, { id: $(this).attr('id'), view_id: "12" }, null);
return false;
};
If you really want to do this without ajax then you can try this...
function setNotification(e){
targetUrl = $(this).attr('href');
id = $(this).attr('id');
$('<form/>').append('<input name="id" value="'+ id +'"/><input name="view_id" value="12"/>').attr('action', targetUrl ).attr('method', 'POST').appendTo('body').submit();
return false;
};
In a similar scenario I used cookies to save the value I didn't want to appear in the URL. Put the handler in the mousedown event so that the cookie will be created before the new page starts to load.
jQuery('a.notification_link').mousedown(function () {
var myid = jQuery(this).attr('id');
//here save in a cookie, you can use your own code to save in a cookie
create_cookie('notification_link', myid, 0);
});
And you can get this value both in the code behind and also in the client side.
I am trying to accomplish delete in page which is filled with data by ajax call.
my page has this before data is loaded:
<span id="ShowSelectedCategories"></span>
and after ajax call i fill with below info:
function(data){
$('#ShowSelectedCategories').prepend(' x <span style="color:red">' + data +'</span>   ');
}
and finally after click i want to remove clicked element but it doesn't work.
$(function(){
$("#ShowSelectedCategories").click(function(e){
e.target.outerHTML //this is the part i want to remove after click
e.preventDefault();
})
I have tried $(".DeleteCat).click() but this gave error because elements with that class was created dynamically.
Your help is appreciated
Try $(e.target).remove(),
$("#ShowSelectedCategories").click(function(e){
$(e.target).remove();
e.preventDefault();
});
If you want to delete element with class DeleteCat within span with id ShowSelectedCategories then you can do it like this,
$("#ShowSelectedCategories").on("click", "DeleteCat" function(e){
$(this).remove();
e.preventDefault();
});
$('#ShowSelectedCategories').on('click', '.DeleteCat', function(e){
$(this).remove();
e.preventDefault();
});
http://jsfiddle.net/Dj5NQ/
Use something like this to call dynamically added class
$('.class').live("click", function(){
$('#id').remove();
});
Need to identify each of these 'a' tag in div and bind an onclick event.I have binded the same.I need to append some text below the clicked 'a' tag.But when i tried with my code it binds to all the 'a' tag in the div.How can i specify the 'a' tag which i have clicked.I can make changes to the content in div using jquery.can't modify the content in 'a' tag.
<div class="people_rt_link2">
2011<br><br>
2008<br><br>
</div>
$(document).ready(function() {
var timesClicked = 0;
$('.people_rt_link2 a').bind('click', function() {
jQuery.post("<?php bloginfo('template_directory'); ?>/test.php", data, function(response) {
alert('Got this from the server: ' + response);
//this response should to binded to the clicked a tag
//$(this).after('<div>'+response+'</div>');
});
timesClicked++;
if (timesClicked >= 1) {
$(this).unbind();
}
});
});
Use this to refer to the clicked <a>. Example using jQuery:
$('div.people_rt_link2 a').click(function(){
$(this).unbind('click');
var that = this;
$.post('somepage.php', function(data){
$(that).after(data);
});
return false;
});
Example
Let me know if that's not exactly what you were trying to achieve.
Theres lots of ways to specify the a tag you want to append text too.. first child.. first of type.. but mostly you just append an id to the tag and let javascript handle it..
$("people_rt_link2 a.YourClass").bind("click", function({do stuff}));
http://www.w3schools.com/tags/tag_a.asp
try something like this:
$("people_rt_link2 a").bind("click", foo(<!--Put here all your code you want to be executed -->));