i m getting data from databse, number of div depend on the number of records but i m getting wanted result if i click 4th button the first div is removed but i want it to remove 4th div not first, my code is here
<button class="mws-button red" type="button" id="red_remove_<?php echo $i;?>"onclick="rem(id,id);">Remove</button>
i have called this function on button click
var count=0;
function rem(key,l){
$('#remove_more_opertaion'+count).remove();
$('#label'+count).remove();
count++;
}
Cleaner way to do it using jQuery:
HTML:
<button class="mws-button red remove-btn"
type="button"
data-id="<?php echo $i; ?>" // <-- will use this id to remove corresponding div
id="red_remove_<?php echo $i;?>">Remove</button>
JS:
$('.remove-btn').click(function() {
var id = $(this).data('id');
$('#remove_more_opertaion' + id).remove();
$('#label' + id).remove();
});
Alos no need to use onclick="..." since you have jQuery.
use the split function and match the number and deleted clicked button div
Related
I try to solve this problem:
I have a from MYSQL fetched element in PHP:
<button class="like-btn" id="idLike-'.$row['id'].'">Button text</button>
Currently, there are 3 fetched elements and every fetched element has its own id automatically e.g. idLike-1, idLike-2, idLike-3 etc.
I added a Jquery script:
$(document).ready(function(){
$("#idLike-2").click(function(){
$("#idLike-2").addClass("btn-first");
});
});
This works fine with the idLike-2 element of course, but I cannot find an ultimate solution for this script to work every id separately e.g. if I click on the idLike-1, only this element has a new class.
Thank you for your help!
Update:
If I try to save the current state of the element into the localStorage, the state of all elements will be saved. My full code:
$(document).ready(function(){
$(document).ready(function() {
if(localStorage.getItem('isCliked')){
$(".like-btn").addClass('liked-btn');
$(".like-btn").removeClass('like-btn');
}
$('.like-btn').on('click',function() {
$(this).addClass('liked-btn');
$(this).removeClass('like-btn');
// set the value upon clicking
localStorage.setItem('isCliked', true)
});
});```
You could solve that by using a more general "class" selector like so:
PHP fetched HTML:
<button class="like-btn">Button text</button>
Javascript:
$(document).ready(function() {
$(".like-btn").click(function() {
$(this).addClass("btn-first");
});
});
You can target the jQuery element triggering the event using the $(this) selector.
References:
https://api.jquery.com/class-selector/
https://api.jquery.com/jquery/#jQuery-element
1 alternative option is using wildcard on id.
$('button[id*="idLike-"]').click(function() {
$('button').removeClass("btn-first");
$(this).addClass("btn-first");
});
.btn-first {
background: red
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button class="like-btn" id="idLike-1">Button text</button>
<button class="like-btn" id="idLike-2">Button text</button>
<button class="like-btn" id="idLike-3">Button text</button>
How to update multiple data using AJAX ?
Example :
TableA
id : 1, 2
name : Jack, John
It's only working with id 1, when I am trying to edit name for id 2 it's not working.
I have try with this code but failed.
HTML/PHP :
...
while($row=mysqli_fetch_array($query)){
echo'
<form class="btn-group">
<input type="text" class="form-control" name="id_user" id="id_user" data-user="'.$row['id'].'" value="'.$row['id'].'">
<input type="text" class="form-control" name="id_status" id="id_status" data-status="'.$row['id'].'" value="'.$row['id'].'">
<button type="submit" id="likestatus" class="btn btn-primary btn-outline btn-xs"><i class="fas fa-thumbs-up"></i></button>
</form>
';
}
AJAX :
$(document).ready(function(){
$("#likestatus").click(function(){
var id_user=$("#id_user").data("user");
var id_status=$("#id_status").data("status");
$.ajax({
url:'status/like-status.php',
method:'POST',
data:{
id_user:id_user,
id_status:id_status
},
success:function(response){
alert(response);
}
});
});
});
The problem with your code is that ids should be unique, but in the loop you create elements with same id.
Use this in the event handler to find the siblings of the button that has been clicked - closest returns the parent of type form.
$(document).ready(function(){
$(".btn-primary").click(function(){
var $form = $(this).closest('form');
var id_user=$form.find('[name="id_user"]').data("user");
var id_status=$form.find('[name="id_status"]').data("status");
$.ajax({
url:'status/like-status.php',
method:'POST',
data:{
id_user:id_user,
id_status:id_status
},
success:function(response){
alert(response);
}
});
});
});
You might want to use your own class instead of .btn-primary because this affects all buttons on the page.
Judging from the incomplete PHP, it appears as if you're not assigning to $ruser within your loop. This would mean you're always posting the same id to like-status.php.
PS: Would've posted as comment, but I can't.
Make your ID unique so make them dynamic
<?php
$counter = 0;
while($row=mysqli_fetch_array($query)){
$counter++;
echo'
<form class="btn-group">
<input type="text" class="form-control" id="userid_$counter" data-user="'.$ruser['id'].'" value="'.$ruser['id'].'">
<input type="text" class="form-control" name="id_status" id="status_$counter" data-status="'.$rtimeline['id'].'" value="'.$rtimeline['id'].'">
<button type="submit" id="likestatus_$counter" class="btn btn-primary btn-outline btn-xs"><i class="fas fa-thumbs-up"></i></button>
</form>
';
}
?>
Then
<script type="text/javascript">
$(document).ready(function(){
$('[id^="likestatus_"]').on('click',function(){
var index = $(this).attr('id').split("_")[1];
var id_user=$("#user_"+index).data("user");
var id_status=$("#status_"+index).data("status");
$.ajax({
url:'status/like-status.php',
method:'POST',
data:{
id_user:id_user,
id_status:id_status
},
success:function(response){
alert(response);
}
});
});
});
You're using the id's multiple times. Thus your query for var id_user=$("#id_user").data("user"); always finds the first input field on the page. You should avoid using the same id multiple times on one page (see this Question).
You may subscribe to the jQuery submit event of the form and then search for the input fields within that form, to properly extract the id_user and status_user values. For that you have to add an appropriate event listener to the <form> element. To find the form I would recommend adding a css-class like like-status-form.
$(document).ready(function(){
// We're attaching a submit-event listener to every element with the css class "like-status-form"
$(".like-status-form").submit(function(event){
// Form get's submitted
// Prevent that the Browser reloads the page
event.preventDefault();
// Extract the user id and status from the form element (=== $(this))
var id_user = $(this).find('[name="id_user"]').data('user');
var id_status = $(this).find('[name="id_status"]').data('status');
// TODO Perform AJAX Call here
});
});
To detect the form elements one can use the jQuery Attribute Equals Selector.
Find a working example at https://jsfiddle.net/07yzf8k1/
I have a JS that output the button dynamically:
<button class='btn btn-mini btn-primary likebtn' name='likebtn' value='1' type='button'>value1text</button>
<button class='btn btn-mini btn-primary likebtn' name='likebtn' value='2' type='button'>value2text</button>
$('button=[name=likebtn]').click(function (){
alert($(this).val());
});
I would like to get the value of the button click! But it doesn't seem to get the name of button clicked. Why? Find it strange...
Code is here...
$('#div').append("<button class='btn btn-mini btn-primary likebtn' name='likebtn' type='button' value='"+obj.value+"'>"+"LIKE"+"</button>");
If you are outputting the buttons via javascript you need to use on instead of click to bind your events.
$('body').on("click", "button[name=likebtn]", function (){
alert($(this).attr("value"));
});
you can just use
$(this).val()
to get value
use
$(this).text()
to get the text
if u want to append value to asd use
alert('asd'+$(this).val());
and use the selector as $('button[name=likebtn]').click(....
In script, you should write :
$('button[name="likebtn"]').click(function(){
alert($(this).val());//if you are trying to get value of 'value' attribute
alert($(this).text());//if you are trying to get text between the tag
});
You can look at this to check the example.
I believe you are trying to get the text of the button, if so:
$(this).text()
And remove the 'asd':
alert($(this).val());
And fix your selector:
$('button[name=likebtn]')
You can use this directly and remove unwanted doublequotes.
$('button[name=likebtn]').click(function (){
alert($(this).val());
});
Check this JSFiddle
You need to correct the append method
$('div').append('<button class=btn btn-mini btn-primary likebtn name=likebtn value='+ obj.value + '>LIKE</button>');
check this
You can try this one,if the button is dynamic and brought using ajax:
$(document).ready(function(){
$(".details").click(function(){
var value=$(this).attr('id');
$.post("product-viewbills-1.php",
{
value1:value
},
function(data){
//alert(data);
$('#shadow').html(data);
});
});
});
Now the above code is the j query (ajax) we are using. $.post is used instead of $.ajax
Now we will see the button used dynamically. this one is a php code
<?php
$con=mysqli_connect("localhost","root","root","amazing"); //connecting to database
$result=mysqli_query($con,"SELECT * FROM productmaster"); //taking values from table
while($row=mysqli_fetch_array($result)) //fetching the array which contains the column
{
?>
<input type="button" class="details" id="<?php echo $row['pmid'];?>" value="details">
<?php
}
?>
Now we have made so many buttons having unique ids and same class pmid is the column of the table we have taken.
Now each button contains different ids and can be used separately.
<div id="shadow"></div>
<?php
mysqli_close($con); //closing the database
?>
I am creating a jQuery function in which I am using one class for a button that is common in second div's button too. my html markup is
<div class="micmstabs miindex">
<h4>Manage Your Index Page Here</h4>
<textarea class="redactor_content" name="content" rows="4"><?php cms_html('index'); ?></textarea>
Save Changes
</div>
<div class="micmstabs miterms">
<h4>Manage Your Terms & Conditions Page Here</h4>
<textarea class="redactor_content" name="content" rows="4"><?php cms_html('terms'); ?></textarea>
Save Changes
</div>
In the above when we click on cms_s i try to get value of textarea based on a condition check in jQuery that if this button has this class then get me value of the textarea of div in which this button and the textarea is.
My jQuery function is
$(document).on('click', '.cms_s', function(event) {
if ($(this).hasClass('index_save')) {
var cms_page='index';
}
if ($(this).hasClass('terms_save')) {
var cms_page='terms';
}
if ($(this).hasClass('policy_save')) {
var cms_page='policy';
}
if ($(this).hasClass('mem_save')) {
var cms_page='membership';
}
alert(cms_page);
var cms_html=$(this).parents("div").find('.redactor_content').val();
alert(cms_html);
});
I am able to get the condition check for the class perfectly . But when i try to get the value of textarea based on the button i clicked no matter what button i click it gets me the value of the textarea present in the first div markup.
If you pres on the button and you want the previous textbox value. It's easier to do this:
$(document).on('click', '.cms_s', function(event) {
var val = $(this).prev("textbox").val();
// Or within the same level
val = $(this).parent().find("textbox").val();
val = $(this).siblings("textarea").val();
});
You problem occurs when because all the inputs have the class redactor_content so the .val() will get the first textarea in the array and get that value. Which is allways the first redactor_content.
var cms_html=$(this).parents("div").find('.redactor_content').val();
Try this -
var cms_html=$(this).closest("div").find('.redactor_content').val();
I have this script thats send a post via jquery.form addon:
$(document).ready(function() {
$('#submit_btn').on('click', function(e) {
$("#preview").html('');
$("#preview").html('<img src="loader.gif" alt="Uploading...."/>');
$("#imageform").ajaxForm({
target: '#preview',
success: afterSuccess //call function after
});
});
});
function afterSuccess()
{
$('#imageform').resetForm();
$('.ImgStatus').appendTo('.img');
}
and gets a html respond.
<div id="<?php echo $RandNumber; ?>" class="ImgStatus">
<input id="<?php echo $RandNumber; ?>" type="checkbox" name="<?php echo $RandNumber; ?>" />
<img src='upload/<?php echo $actual_image_name; ?>' class='preview'>
</div>
And what I'm trying to do is to remove the div that corresponds to the checkbox ID, when the delete button is clicked. And also to send a $_POST to a php page with the checked divs. Until now I have something like this but When I press the button its not removing the element...
$("#clickme").click(function(e){
var selected = $(".img input:checked").map(function(i,el){return el.name;}).get();
$(selected).remove();
});
jsfiddle.net/aHr6v/3
You can simply select the parent of the selected input field (the div), and remove it like this:
$("#clickme").click(function(e){
var selected = $(".img input:checked").parent();
$(selected).remove();
});
Here's a working example: http://jsfiddle.net/aHr6v/5/
check this: http://jsfiddle.net/aHr6v/6/
Based on what you said in your comment, I added the following line which search the div by its id and remove it
$("div#"+selected).remove();
I'd suggest:
$("#clickme").click(function (e) {
$('div.img input:checked').closest('div').remove();
});
JS Fiddle demo.
This looks at all inputs that are checked, finds the closest parent ancestor that's a div and then removes that/those elements from the DOM.
References:
closest().
remove().
selected is an array. What you want to do is pass one or more elements of that array as a selector:
$.each(selector, function(){
$('#' + this).remove();
})
Just change
$(selected).remove();
To
$('#'+selected).remove();
Edit: Or To (to remove all selected divs)
$.each(selected, function(){
$('#' + this).remove();
});