Find sibling element with class and replace html content with jQuery - javascript

I'm not sure how to get the correct div to update and the correct link to click. I don't think I'm understanding the property usage for parent, sibling, find, prev, next, etc.
I'm submitting the form with AJAX and need to update the paragraph tag with class 'record-info' and click the link with class 'cancelas'.
The AJAX:
$('form').on('submit', function(e){
if($(this).attr('id') == 'editdelete'){
var thisform = $(this);
$.ajax({
type: $(this).attr('method'),
url: $(this).attr('action'),
data: $(this).serialize(),
success: function() {
var replaceText = thisform.find('input[name="extraedit"]').val();
console.log(thisform.parent().find('.record-info').html());
thisform.parent().find('.record-info').html(replaceText);
thisform.parent().find('.cancelas').click();
}
});
e.preventDefault();
}
});
replaceText displays the correct info in the console if I console.log it, but when I try to get the content of the 'record-info' paragraph, it displays as undefined. I've tried .parent().find(), .siblings(), .next(), .prev() and everything in between.
Here is the HTML structure:
<div class="catname record">
<p class="record-info">Info is here</p>
<p class="editmain">Edit</p>
<p class="markmain">Mark</p>
<form class="markas">FORM IS HERE</form>
<div class="editas">
<div>
<form action="edit-delete.php" id="editdelete" method="post">
<input name="extraedit" type="text">
</form>
<form action="edit-delete.php" id="editdelete" method="post">
FORM CONTENT
</form>
</div>
</div>
<p class="cancelas">Cancel</p>
</div>

.record-info is not a sibling of your forms, so just getting the parent and finding within that won't work.
Try closest(), which will traverse up the DOM tree until it finds a match (where parent only traverses one level, to the parent):
thisform.closest('.record').find('.record-info').html(replaceText);
The same goes for triggering your click:
thisform.closest('.record').find('.cancelas').click();
Note: I've used .record in closest() here because I'm assuming it is the common class across your 'records'. .closest('.catname') would work just as well in this case.
JSFiddle

Related

Working JQuery Script not working after ajax post response

I'd really appreciate any help!
I have a working jquery script. When a div is clicked, it updates the css class to active and executes a working ajax response.
I also have a filter functionality that works too. When a checkbox is ticked it calls a new list of div's from mysql with all the same class properties. However, when any of these new div's are clicked the ajax response doesn't work. If anyone could help I would be incredibly grateful!
HTML:
<div id="result" class="results">
<div class="w-embed"><img src="images/loader.gif" id="loader" width="" "200px"="" style="display:none;">
<?php
$sql="SELECT * FROM `posts`";
$result=$con->query($sql);
while($row=$result->fetch_assoc()){
?>
<div class="c-card" data-id="<?=$row['id'];?>">
<h1 class="s-h2">
<?=$row['title'];?>
</h1>
<!-- <div class="s-para m-light m-small"><?=$row['description'];?></div> -->
<div class="c-stats">
<div class="s-stat">Pay:
<?=$row['pay'];?>
</div>
<div class="s-stat">Deadline:
<?=$row['deadline'];?>
</div>
<div class="s-stat">Location:
<?=$row['location'];?>
</div>
<div class="s-stat">Cat:
<?=$row['category'];?>
</div>
</div>
<p class="s-para">
<?=$row['description'];?>
</p>
Find Out More
</div>
<?php }?>
</div>
</div>
Javascript:
<script>
$('.c-card').on('click', function(event){
event.preventDefault();
$('.c-card').removeClass('active'); //Removes class to all
$(this).toggleClass('active'); //Applies class
var action = 'data';
var dataId = $(this).data("id");
$.ajax({
type:"POST",
url:"ajax/selected.php",
data:{action:action,id:dataId},
success: function(response){
$("#jobber").html(response);
$("#changeme").text("altered");
}
});
});
</script>
This is the outputted response from the filters:
'<div class="c-card" data-id="'.$row['id'].'">
<h1 class="s-h2">'.$row['title'].'</h1>
<div class="c-stats">
<div class="s-stat">Pay:'.$row['pay'].'</div>
<div class="s-stat">Deadline:'.$row['deadline'].'</div>
<div class="s-stat">Location: '.$row['location'].';</div>
<div class="s-stat">Cat: '.$row['category'].'</div>
</div>
<p class="s-para">'.$row['description'].'</p>
Find Out More
</div>';
So my question is how do i make the new divs (called from the filter) to continue to be triggered and change class + execute the ajax query.
Thanks so much in advance!
I have been thought your actual problem was the ajax response is getting null.
<div class="c-card" data-id="<?=$row['id'];?>">
You are using the data-id attribute in the HTML section. But the script handles the id attribute using for getting the id. So the id is getting null for ajax call, Please use the below code or change the data-id attribute to id in the HTML section as you like.
var action = 'data';
var dataId = $(this).data("data-id");
"id" and "data-id" are different attributes for HTML. Please use same attributes in HTML and script
maybe because there is no html(div|| p || span ||...) element that have id of id="jobber"

when i trigger this jquery event, other element in other row of table got triggered as well which i want to prevent

when i trigger this jquery event, other element in other row of table got triggered as well which i want to prevent
$(document).ready(function(){
$(".Trigger_modi").delegate("a", "click",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$('.inner_element_1').html('<input type="text" name="subject" value="">');
$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');
$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
});
This is jquery function that would be triggered if i click "a" tag.
and this would make table look like this ↓↓↓↓↓↓↓↓
This is description of what is happening
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">수정</a></div></div>
and this html code is wrapped by for loop which i suspect that it might be reason why i am getting trouble with
anyone suggest i could try?
<a class="Trigger" id="<%=idx %>"> <%=subject %></a>
<div class="Slider slideup">
<div id="Actual"><!-- 누르면 본문내용 보게됨. -->
</form>
<jsp:useBean id="bdao" class="Bob.Community.CommunityDAO" scope="session"></jsp:useBean>
<jsp:useBean id="bdto" class="Bob.Community.CommunityDTO"></jsp:useBean>
<div class="inner_element_1"><%=content %></div>
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>">Modify</a></div></div>
<div class="">
<div id="Actual_modi">
</div>
</div>
<div class="inner_element_3">Delete</div>
<div class="inner_element_4"></div>
<div class="inner_element_5"></div>
</div>
</div>
**
Edit 1) it works, appreciate for all you comment, reply
**
i first suspected that the problem was caused by for loop, and it turned out to be right.
[assume for loop loops 5times.]
when for loop finished and in javascript function triggers, the inner_element_(number) --> all 25 element(for loop 5 times * 5element) is set to same html tag for each number of element. i change it to something like <div class="inner_element_<%=idx%>"> which makes possible for 25 element to have a different class value individually. and it works fine. thanks
**
Edit 2) All I did to make it completely work fine : turned out Integrity problem
**
<div class="inner_element_(number) to <div class="inner_element_<%=idx %>
$('.inner_element_(number)') to $('.inner_element_'+tnp)
and i delete e.stopPropagation();
event.stopImmediatePropagation();
and i change $(".Trigger_modi").delegate("a", "click",function(e){ to $(".Trigger_modi").click( function (frm) {
$('.inner_element_1').html('<input type="text" name="subject" value="">');
$('.inner_element_2').html('<h2 > yahoo</h2>');
$('.inner_element_3').html('<h2>yahoo</h2>');
$('.inner_element_4').html('<h2>yahoo</h2>');
$('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
In the above code you are assigning html to all .inner_element_1, .inner_element_2, .inner_element_3, .inner_element_4 and .inner_element_5 which jQuery will look all element with class inner_element_[1-5] of the whole page. So it may not raised another row event, it may just simply a HTML binding logic error in this case.
Try to revise your function as follow:
$(".Trigger_modi").each(function () {
var $Trigger_modi = $(this);
$Trigger_modi.delegate("a", "click",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$Trigger_modi.find('.inner_element_1').html('<input type="text" name="subject" value="">');
$Trigger_modi.find('.inner_element_2').html('<h2 > yahoo</h2>');
$Trigger_modi.find('.inner_element_3').html('<h2>yahoo</h2>');
$Trigger_modi.find('.inner_element_4').html('<h2>yahoo</h2>');
$Trigger_modi.find('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
Edit 1 -
Please wrap the above code inside a $(document).ready() and also revise the first 3 lines as follow:
$(".Trigger_modi").each(function () {
var $Trigger_modi = $(this);
$Trigger_modi.find("a").on("click", function(e){
....
Edit 2 -
After looked into your noticeList.jsp, I think you have to revise all your elements that contain the id attribute inside the for loop since it is not allowed to contains 2(or more) elements share the same id in HTML.
Also, since you are looping via for(int i= (n-1) ;i<=(n-1)+x;i++), it is not allowed in HTML that using digit only in the id attribute, so you have to revise your a element as follow as well:
<div class="Trigger_modi"> <div class="inner_element_2"><a id="<%=i %>" data-id="<%=i %>">Modify</a></div>
After that, you could give a class name for your td as follow:
<td class="TriggerCell">
<form name=f>
And revise the code in edit 1 as follow:
$(".TriggerCell").each(function () {
var $TriggerCell = $(this);
$TriggerCell.find(".Trigger_modi a").on("click", function(e){
var tnp = $(this).attr("data-id");
....
Try the following
$(document).ready(function(){
$(".Trigger_modi").on("click","a",function(e){
e.stopPropagation();
var tnp = $(this).attr('id');
window.alert("tnp: "+tnp);
document.getElementById('modi_i').value=tnp;
$('#myDiv').html('<input type="button" name="modify" id="mD" value='+tnp+' onclick="modiTest.jsp">');
$(this).parent().find('.inner_element_1').html('<input type="text" name="subject" value="">');
$(this).parent().find('.inner_element_2').html('<h2 > yahoo</h2>');
$(this).parent().find('.inner_element_3').html('<h2>yahoo</h2>');
$(this).parent().find('.inner_element_4').html('<h2>yahoo</h2>');
$(this).parent().find('.inner_element_5').html('<h2>yahoo</h2>');
var t = document.getElementById('modi_i').value
window.alert("t: "+t);
event.stopImmediatePropagation();
});
});

insert / delete balise

I want to add a p tag in a div tag when I click a button, and also when I click on a p tag i want to delete the p tag I clicked on.
This is my Jquery:
$('#ajou').click(function(){
alert( $('#skill').val());
$('#skills').append('<p>'+$('#skill').val()+'</p>');
});
$("p").click(function(){
$(this).remove();
});`
And this is my HTML:
<input type="text" id="skill" name="skill">
<button id="ajou" name="ajou">Valide</button>
<br><br>
<div name="skills" id="skills"><p>hello</p> </div>
To be specific, when I click on the button Valid the text I entered in the input is add to my <div> but when I want to delete it I can't, only <p>hello</p> will remove it when I click on it.
Slight change to your event handler to give it scope:
$('#skills').on('click', 'p', function(){
$(this).remove();
});
This allows the event to be bound to the skills and thus allow all paragraphs (p) to be removed from within that scope. Binding to the p element only binds to the currently existing paragraphs (anywhere in the document) and not those added.
Edited to full sample and to only remove <p> elements when clicked on. Works for both static and dynamic <p> elements.
HTML:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<input type="text" id="skill" name="skill">
<button id="ajou" name="ajou">Valide</button>
<br><br>
<div name="skills" id="skills"><p>hello</p> </div>
JAVASCRIPT:
$('#ajou').click(function(){
alert( $('#skill').val());
$('#skills').append('<p>'+$('#skill').val()+'</p>');
});
$(document).on('click', '#skills p', function(events){
events.target.remove();
});
The latter is to bind the removal function to the parent element (#skills) simply because the children will be dynamically added later, so could not be bound beforehand. Once you catch the click on the parent it is possible to remove the clicked child <p> (targeted element).
$('div', {
id: 'foo',
name: 'anything',
title: 'adding these attributes is not necessary',
text: 'Waow, I am one sexy p tag'
}).appendTo($('.myDiv'));

Get first child ID from an article with just a class name with Jquery

I have my code like this. It is supposed to show like horizontal buttons with dates. When the user clicks on one of that buttons, the box expands itself showing the pictures in it.
I'm trying to get the first child ID of the article clicked with jquery to be able to show the gallery_items with the first child ID without the "_title" at the end. But I get undefined.
My html:
<section id="gallery">
<article class="gallery_date">
<div id="1389848400_title">16-01-2014</div>
<div class="gallery_items" id="1389848400">
261689_10150238069156283_4353481_n.jpg<br>
IMG_4667.jpg<br>
millenium2.png<br>
</div>
</article>
<article class="gallery_date">
<div id="1389762000_title">15-01-2014</div>
<div class="gallery_items" id="1389762000">
IMG_4661.jpg<br>
</div>
</article>
<article class="gallery_date">
<div id="1389675600_title">14-01-2014</div>
<div class="gallery_items" id="1389675600">
bcn.png<br>
logoenmedio.png<br>
</div>
</article>
</section>
My Jquery:
$().ready(function() {
$(".gallery_date").click(function(event) {
console.log($(".gallery_date:first-child").attr("id"));
});
});
Thanks
"I'm trying to get the first child ID of the article clicked with jquery to be able to show the gallery_items with the first child ID without the "_title" at the end."
Do this:
$(this).children().first().prop("id").split("_")[0];
Or without jQuery so it's not so verbose:
this.children[0].id.split("_")[0];
But if that's the only need for the ID, then you could just select the element with .children() by its class:
$(this).children(".gallery_items")
the first child ID without the "_title".
You can use .replace() to remove '_title' or you can use .split()
$(document).ready(function() {
$(".gallery_date").click(function(event) {
var id = $(this).children().first().attr("id")
console.log(id.replace('_title',''));
console.log(id.split("_")[0]);
});
});
Try this:
$(document).ready(function() {
$(".gallery_date").click(function(event) {
console.log($(this).find('.gallery_items:first-child').attr("id"));
});
});
$(".gallery_date").click(function(event) {
console.log($(this).children().first().attr("id"));
});
If your html is structured the way it is, you can also just use the .next() method to get the gallery_items div, like this, so you don't have to worry about getting IDs and retrieving the DOM elements again:
$(document).ready(function() {
$(".gallery_date").click(function() {
$(this).next(".gallery_items").slideDown();
});
});

getting input box value undefined in alert box

I want to get input field value. Only based on class and id name.
I am getting undefined in alert box.
Not getting any value which i have entered in input box.
HTML
<div id="tab1" class="tab-pane active">
<div class="input-text">
<div class="input-append">
<input id="textData" class="input-xxlarge" type="text" name="inputName" />
<button id="pressme" class="btn btn-success btn-large" type="button">Convert</button>
</div>
</div>
</div>
JS
$('#pressme').on({
'click': function () {
var data = $(".tab-pane active #textData").val();
alert(data);
}
});
.tab-pane active looks for an <active> element inside of an element with a class of tab-pane. The correct selector for an element with those two classes would be .tab-pane.active., but since your element has an id, just select it using an id selector:
$("#textData").val();
You can use the selector as your text box id enough
var data = $("#textData").val();
Your selector is incorrect as the div has both classes, so you need to join them together like this:
var data = $(".tab-pane.active #textData").val();
Note that id selectors should be unique, so in effect the class selector is redundant anyway.
It will be like
$('#pressme').on({
'click': function () {
var data = $(".tab-pane.active #textData").val();
alert(data);
}
});
Makesure that you have enclosed it on DOM ready
TRY THIS:
$('#pressme').on('click',function () {
var data = $("#textData").val();
alert(data);
});

Categories