Move div element from one parent div to another - javascript

So let's assume that I have a set of nested divs:
<div id="likelyToBeCalled">
<div id="likelyOddHeader" class="row">
<div id="likelyOddA" class="left" name="test1">Test1</div>
<div id="LikelyOddB" class="middle"><img src="image002.png"/></div>
<div id="timeZone" class="right">West</div>
</div>
and further down the page:
<div id="unlikelyToBeCalled">
<div id="likelyOddHeader" class="row">
<div id="likelyOddA" class="left">Test2</div>
<div id="LikelyOddB" class="middle"><img src="image002.png"/></div>
<div id="timeZone" class="right">West</div>
</div>
How would I move Test1 to "unlikelyToBeCalled". I've been trying this with a form / submit button just for kicks, here's the code for that:
<script type="text/javascript">
function doSubmit() {
document.getElementById('unlikelyToBeCalled').appendChild(
document.getElementsByTagName('Test1')
);
}
</script>
<br /><br /><br />
<form method="POST" action="file:///C:/wamp/www/index.html" id="submitform" name="submitform">
<input type="submit" name="Submit" value="Move divs" onClick="doSubmit()" />
</form>
Or something to that effect. Any help would rock

Use .appendTo()
$('#likelyOddA').appendTo('#unlikelyToBeCalled')

If I understand what you want:
$('div[name=test1]').appendTo('#unlikelyToBeCalled');
getElementsByTagName('Test1') will not get element with name="Test1", it is supposed to, for example, get all divs (with code getElementsByTagName('div') of course). Next, you have used #likelyOddHeader and other ids twice, but id must be unique.

Related

How do I replace divs on click using jQuery (comment system)?

I want to replace the ".comment" div with the ".edit-form" div on the click of the "edit-comment" button. Things are working, but not exactly the way I want them to. There is one little problem: when I click on any "edit button" of the primary unordered list (inside list item), and then I click on the "edit button" of the secondary unordered list, the ".comment" div of the primary unordered list hides/disappears, but I don't want that to happen, I want it to show and not to be influenced by the "edit-comment" button effect in the secondary list, if at all you understand me. This is my jQuery code:
$(document).ready(function(){
//$(document).on('click' , '.reply' , function(){
$('.reply').click(function(){
var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
$('.reply-to-comment').not(closestDiv.find('.reply-to-comment')).css("display", "none");
closestDiv.find('.reply-to-comment').slideToggle(100);
});
//$(document).on('click' , '.edit-comment' , function(){
$('.edit-comment').click(function(){
var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
$('.edit-form').not(closestDivtwo.find('.edit-form')).css('display', 'none');
closestDivtwo.find('.edit-form').slideToggle(100);
//$(this).next('.edit-form').slideToggle(100);
});
//$(document).on('click' , '.edit-comment' , function(){
$('.edit-comment').click(function(){
var closestDivtwo = $(this).closest('div'); // also you can use $(this).parent()
//$('.comment').not(closestDivtwo.find('.comment')).fadeOut();
//closestDivtwo.find('.comment').css('display','block');
closestDivtwo.find('.comment').toggle();
//$('.comment').not(closestDivtwo.find('.comment')).slideToggle(100);
});
});
Just concentrate on the second and third, let's say, paragraph of this snippet. This is my HTML:
<html>
<head>
<title>Test it!</title>
<link rel="stylesheet" type="text/css" href="test.css"/>
</head>
<body>
<div>
<ul class="list-of-comments">
<div class="allcomments">
<li class="noofcomments">
<div class="comment-wrap">
<div class="commentator-pic"></div>
<div class="comment">Comments show here</div>
<!--This is the position of the edit form-->
<div class="edit-form">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit comment</textarea>
<input type="submit" name="edit" value="Submit">
</form>
</div>
<br>
<!--These are the main comment buttons or controllers-->
<button class="edit-comment">Edit</button>
<button class="reply">Reply</button>
<button>Delete</button>
<!--This is the position of the reply form-->
<div class="reply-to-comment">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit comment</textarea>
<input type="submit" name="reply" value="Submit">
</form>
</div>
</div>
<!--Here we have the replies to the comment above-->
<ul class="replies">
<li class="clicktoviewreplies">Show/hide replies</li>
<div class="replies-wrap">
<div class="commentator-pic"></div>
<div class="comment">Replies show here</div>
<!--This is the position of the edit form-->
<div class="edit-form">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Edit reply</textarea>
<input type="submit" name="edit" value="Submit">
</form>
</div>
<br>
<!--These are the main comment buttons or controllers-->
<button class="edit-comment">Edit</button>
<button class="reply">Reply</button>
<button>Delete</button>
<!--This is the position of the reply form-->
<div class="reply-to-comment">
<form enctype="multipart/form-data" method="post" action="">
<textarea class="subcomment" name="subcomment" cols="50" rows="4">Submit reply</textarea>
<input type="submit" name="reply" value="Submit">
</form>
</div>
</div>
</ul>
</li>
</div>
</ul>
</div>
</body>
</html>
To make things easier, follow this link: https://jsfiddle.net/hx9mvdjg/8/
This will solve the issue once and for all:
//$(document).on('click' , '.edit-comment' , function(){
$('.edit-comment').click(function(){
var closestDiv = $(this).closest('div'); // also you can use $(this).parent()
if ($(".edit-form").css("display") == "block") {
closestDiv.find('.comment').hide();
$('.comment').not(closestDiv.find('.comment')).css("display","block");
}else{
closestDiv.find('.comment').toggle();
$('.comment').not(closestDiv.find('.comment')).css("display","block");
}
});
Get your whole code and just replace this "paragraph", as you said yourself, with the last one you have in your snippet and paste it in your "jsfiddle" and test it, please. Then, tell me if it's all you need.
Use the replaceWith() in jquery.

How to make php content appear in a html div element

I am trying to create a search using ajax and mysql and placing the returned data into a div. I am following a tutorial on youtube and so far so good, however I am trying to pass in dummy data into the div but it isn't appearing.
This here is my jquery
$('#submit').on('click', function() {
var search = $('#search').val();
if ($.trim(search) != '') { //if search is not equal to nothing - using trim allows users to type in blank space and it won't return anything
$.post('searching.php', {search: search}, function(data) {
$('#search').text(data);
});
}
});
This is my html
<div class="container">
<div class="card card-container">
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" method="POST">
<input type="text" name="search" id="search" class="form-control" placeholder="Search">
</form><!-- /form -->
<button class="btn btn-lg btn-primary btn-block btn-signin" value= "search" type="required" id="submit" name="submit">Search</button>
</div><!-- /card-container -->
<div class="row">
<div class="col-md-4">
<div id="search"></div>
<div class="caption">
<p></p>
</div>
</div>
When the user clicks search the content from the searching.php file should appear in the div. Currently in the searching.php file it just has echo"content";. It should have "content" in the div but it isn't appearing in the web browser and there are no errors. Within the network in inspect element the name is searching.php and the status is ok. Not sure where I am going wrong, any help would be grateful.
You have multiple id="search" elements in your HTML. So this isn't going to know which one you mean:
$('#search')
It's probably trying to set the "text" of the <input>, which doesn't have a "text" (it has a "value"). Correct the HTML. Either change the <input> or the <div> to have a unique id. (And, of course, update your jQuery selectors as well as anything else targeting these elements.)
don't use same id (search) for both input and div
change the id in html
<div class="container">
<div class="card card-container">
<p id="profile-name" class="profile-name-card"></p>
<form class="form-signin" method="POST">
<input type="text" name="search" id="search" class="form-control" placeholder="Search">
</form>
<button class="btn btn-lg btn-primary btn-block btn-signin" value= "search" type="required" id="submit" name="submit">Search</button>
</div><!-- /card-container -->
<div class="row">
<div class="col-md-4">
<div id="searchText"></div>
<div class="caption">
<p></p>
</div>
</div>
and javascript
$('#submit').on('click', function() {
var search = $('#search').val();
if ($.trim(search) != '') { //if search is not equal to nothing - using trim allows users to type in blank space and it won't return anything
$.post('searching.php', {search: search}, function(data) {
$('#searchText').text(data);
});
}
});
.text not work with input
use val() instead of text() for input
$('#search').val(data);
$("#btn1").click(function(){
$("#test1").text("Hello world!");
});
$("#btn2").click(function(){
$("#test2").html("<b>Hello world!</b>");
});
$("#btn3").click(function(){
$("#test3").val("Dolly Duck");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<p id="test1">This is a paragraph.</p>
<button id="btn1">Set Text</button>
<p id="test2">This is another paragraph.</p>
<button id="btn2">Set HTML</button>
<p>Input field: <input type="text" id="test3" value="Mickey Mouse"></p>
<button id="btn3">Set Value</button>

My other forms do not get submitted

So I have created a page to print out a div for every chat in the database and each chat has a form attched to it. When I click on the form, the form gets submitted with the displayed none input and it's value sent to php to do other things. Now the problem is that only the first div's form gets submitted even though the code is the same.The form is right on the div and it is displayed absolute. The two forms are the same but I need both to work and to get to the same php code. Code: HTML
<div class="chaty">
<form method="post" action="index.php" name="chat_lox" id="chat_loc">
<input type="text" name="chat_locy"
value="5e2dbe2be3b5927c588509edb1c46f7d">
</form>
<div class="chatDesc" id="84281145">
<div class="tit">Creator: </div>
<div class="iriss"><i id="close_chatn" onclick="closeChat(84281145)"
class="material-icons">close</i></div>
<form action="mypage.php" method="post">
<div class="authr_name"><button value="John Brown" name="userlink"
class="subm_as_text">Hitsuji</button></div>
</form>
<div class="titd"><h3>Description</h3></div>
<div class="description_chat">jaames</div>
</div>
<span onclick="openChat(84281145)">☰</span>
<div class="chatname"><h3>james</h3></div>
<div class="chatback"></div>
<div class="underlie"><p>Users: 1</p><p> Created: 2017/07/28 07:09:40pm</p>
</div>
</div>
<!-- one that doesn't work -->
<div class="chaty">
<form method="post" action="index.php" name="chat_lox" id="chat_loc">
<input type="text" name="chat_locy"
value="9503e253936e716f18d9c57b4f97d618">
</form>
<div class="chatDesc" id="6179276">
<div class="tit">Creator: </div>
<div class="iriss"><i id="close_chatn" onclick="closeChat(6179276)"
class="material-icons">close</i></div>
<form action="mypage.php" method="post">
<div class="authr_name"><button value="Hitsuji" name="userlink"
class="subm_as_text">Hitsuji</button></div>
</form>
<div class="titd"><h3>Description</h3></div>
<div class="description_chat">The Army of JOhn</div>
</div>
<span onclick="openChat(6179276)">☰</span>
<div class="chatname"><h3>John Army</h3></div>
<div class="chatback"></div>
<div class="underlie"><p>Users: 2</p><p> Created: 2017/07/23 11:31:06am</p>
</div>
</div>
JS
$("#chat_loc").on("click",function() {
$(this).submit();
alert("submitted");
});
PHP
if(isset($_POST['chat_locy']) ? $_POST['chat_locy'] : null){echo "it
worked";}
You can only submit only one form at a time. Try changing the id to a class such that all forms have same class like 'chat_loc'.
For example, change the JavaScript to this:
$(".chat_loc").on("submit", function() {
$(this).submit();
alert("submitted");
});

Jquery Need siblings value but not working

I want to populate the value of the "eventTitle" in "Requirement" input box when some one click on the corresponding check box. i.e If some one clieck on the check box of Vels Group Of Instutions then automatically i want this to populate in texbox with name "Requirement" if multiple check box are clicked i want it to be comma seperated. Below is the code i tried to get but it is not working and getting undefined.
<div class="wid100">
<div class="eventTitle">Vels Group Of Instutions</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">This is world wide institute of technology </div>
<div class="selectEvent">
<input type="checkbox" class="seminar selected" id="179">
<label for="179"></label>
</div>
</div>
<div class="wid100">
<div class="eventTitle">Title goes here</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">sdfdsafasdfdsafdsafsadfsdfsdf </div>
<div class="selectEvent">
<input type="checkbox" class="seminar" id="179">
<label for="179"></label>
</div>
</div>
<input type="text" name="Requirement" placeholder="Title 01" id="divclass" required="required" class="pull-left" />
<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<script type="text/javascript" src="js/jquery-ui.js"></script>
$(".seminar").click(function () {
if ($(this).is(":checked")) {
//checked
$(this).addClass("selected");
var event_title = "";
event_title = $(".selected").siblings('.eventTitle').val();
console.log(event_title); return false;
} else {
//unchecked
$(this).removeClass("selected");
}
});
.eventTitle is not the sibling of .selected and the .eventTitle is a div element having no value, text there. change this line
event_title = $(".selected").siblings('.eventTitle').val();
to
event_title = $(this).parent().siblings('.eventTitle').text();
or
event_title = $(this).parent().siblings('.eventTitle').html();
The issue you have is because .eventTitle is not a sibling of the clicked checkbox, so the DOM traversal logic is wrong. div elements also do not have a val(), so you should use text() or html() instead.
However, you can improve the logic and also achieve the comma separated list of the selected event titles by using map() to build an array which you can then join() before setting in the value of #divclass. Try this:
$(".seminar").click(function() {
$(this).toggleClass('selected', this.checked);
var eventNames = $('.seminar:checked').map(function() {
return $(this).closest('.wid100').find('.eventTitle').text();
}).get().join(',');
$('#divclass').val(eventNames);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="wid100">
<div class="eventTitle">Vels Group Of Instutions</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">This is world wide institute of technology </div>
<div class="selectEvent">
<input type="checkbox" class="seminar selected" id="179">
<label for="179"></label>
</div>
</div>
<div class="wid100">
<div class="eventTitle">Title goes here</div>
<div class="eventDate">2017-07-25</div>
<div class="eventVenue">sdfdsafasdfdsafdsafsadfsdfsdf </div>
<div class="selectEvent">
<input type="checkbox" class="seminar" id="179">
<label for="179"></label>
</div>
</div>
<input type="text" name="Requirement" placeholder="Title 01" id="divclass" required="required" class="pull-left" size="100" />
I'd suggest changing the id of the #divclass to something more descriptive, as the element is not a div, and it's an identifier, not a class.
Finally, your .seminar elements have the same id attribute which is invalid. You should ensure that the ids are unique within the DOM - assuming that this is not just a typo from copy/pasting the code in the question.

Meteor radio buttons don't return correct value

When I have a form with two radio buttons in Meteor, the first value is always returned in the .val() call. What is the correct way to access which radio button is checked?
Here is my sample code:
testRadioButtons.html:
<template name="testRadioButtons">
<form class="main">
<div class="control-group">
<div class="controls">
<input name="insuranceDecision" type="radio" value="NoInsurance"/> &nbsp Don't Buy Insurance<br><br>
<input name="insuranceDecision" type="radio" value="BuyInsurance"/> &nbsp Buy Insurance<br><br>
</div>
</div>
<div class="control-group">
<div class="controls">
<input type="submit" value="Submit" class="btn btn-primary"/>
</div>
</div>
</form>
</template>
testRadioButtons.js
Template.testRadioButtons.events({
'submit form': function(e) {
e.preventDefault();
console.log('running form submit')
decision = $(e.target).find('[name=insuranceDecision]').val();
// console.log($(e.target).find('[name=insuranceDecision]'));
console.log("decision: " + decision); // ZZZZZ Why is NoInsurance always displaying, even when the other radio button is checked.?
Meteor.Router.to('happyPage');
}
});
And the following are needed to make what I wrote run but do not do anything important.
main.html
<head>
<title>testRadioButtons</title>
</head>
<body>
{{renderPage}}
</body>
router.js
Meteor.Router.add({
'/': 'testRadioButtons',
'/happyPage' : 'happyPage'
})
happyPage.html
<template name="happyPage">
<p> Happy page </p>
<p><a href={{testRadioButtonsPath}}>Test Radio Buttons Again</a></p>
</template>
I think this is the answer:
https://stackoverflow.com/a/4196937/233382
I have to loop over the individual elements and find the one that is "checked".

Categories

Resources