Let me first say I am 98% positive I am going about this the wrong way.
First time poster, be gentle. I am working on a website where I want a primitive admin portal back-end where the site can be managed in a single .php page. I have two columns, on the left is a series of stacked nav-pills and on the right is a PHP form to edit site content. Depending on which nav-pill is clicked, the right hand side will display a corresponding PHP form. I need the jQuery function to .empty() the container div called "admin-div" and .toggle() the proper div based on id. The jQuery doesn't seem to be working, and I'm having a hard time grasping why. I am entirely new at jQuery and I'm still a student, so forgive any obvious oversights. Code below for reference. Thanks in advanced! (Sorry if this is off-topic or not a valid question / post, I'm new).
$(document).ready(function(){
$("#geo-btn").click(function(){
$("#admin-div").empty();
$("#geo-div").toggle();
});
});
$(document).ready(function(){
$("#school-btn").click(function(){
$("#admin-div").empty();
$("#school-div").toggle();
});
});
<div class="container">
<ul class="nav nav-pills nav-stacked nav-justified">
<label>Edit Geographic Information</label>
<li><button id="geo-btn" class="btn btn-warning" >Geography</button></li><br>
<li><button id="school-btn" class="btn btn-warning" >Schools</button></li><br>
</ul>
<div class="admin-div">
<div id="geo-div" align="left" class="span8">
<?php
require("geo.inc.php");
?>
</div>
<div id="school-div" align="left" class="span8">
<?php
require("school.inc.php");
?>
</div>
</div>
Is this what you are trying to do:
<ul class="nav nav-pills nav-stacked nav-justified">
<label>Edit Geographic Information</label>
<li><button category="geo" class="btn btn-warning" >Geography</button></li><br>
<li><button category="school" class="btn btn-warning" >Schools</button></li><br>
</ul>
<div id="admin-div">
<div id="geo-div" align="left" class="span8">
<?php
require("geo.inc.php");
?>
</div>
<div id="school-div" align="left" class="span8" style="display: none;">
<?php
require("school.inc.php");
?>
</div>
</div>
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script type="text/javascript">
$(document).ready(function()
{
$(".btn").click(function()
{
var category = $(this).attr("category")
$("#admin-div div").hide();
$("#"+category+"-div").fadeIn();
});
});
</script>
If I understand your question you need content switcher so here's an example FIDDLE
First add data-rel attribute to buttons, content of the data-rel attribute must match div ID in this case, it don't has to be data-rel it could be data-anything because it's HTML5 custom data attribute but if you change it don't forget to change the name in the script too.
<li><button id="geo-btn" data-rel="geo-div" class="btn btn-warning" >Geography</button></li>
<li><button id="school-btn" data-rel="school-div" class="btn btn-warning" >Schools</button></li>
Second add this piece of CSS
.span8:first-child {
display: block;
}
.span8 {
position: absolute;
display: none;
}
Third and last add this script just before the </body> tag
<script>
$(function() { // <-- Short for $(document).ready(function() {
$('.btn').click(function() {
$('#'+$(this).data('rel')).stop().fadeIn(450).siblings('.span8').stop().fadeOut(450);
});
});
</script>
Related
I have this code from a template I brought. I tried some of the answers on StackOverflow but I cannot get data from the option when it is changed. When user selects an option without out reload I have to insert new data to a div. but I can't figure out how to get data from this drop down.
<div class="drop-list-one">
<div class="inner clearfix">
<div class="dropdown-outer"><a class="btn-box dropdown-toggle" id="dropdownMenu4" data-toggle="dropdown" aria-haspopup="true" aria-expanded="true" href="#">Default Sorting</a>
<ul class="dropdown-menu" aria-labelledby="dropdownMenu4">
<li>Subjects</li>
<li>Timelines</li>
<li>Popular</li>
<li>Incomplete</li>
</ul>
</div>
</div>
</div>
<script type="text/javascript">
$(document).ready(function(){
$('.dropdown-menu li').on('click', function () {
console.log($(this).text());
});
}) ;
</script>
I'm developing discussion board and I want to make a reply system on each comment using jquery so I can click on a comment link then text box will be opened to write my reply to this comment without loading the whole page.
Here are my Html and PHP code.
<?php
$query = $conn->query("SELECT * FROM comments WHERE article_id = '$ArticleID' ");
$rowCount = $query->num_rows;
if($rowCount > 0)
{
while($row = $query->fetch_assoc())
{
$CommentID = $row['comment_id'];
$Comment = $row['text'];
?>
<li class="comment">
<div class="comment-container">
<div class="comment-meta">
<a class="comment-reply-link link-style3 creply" href="">Reply »</a>
</div>
<div class="comment-body">
<p><?php echo $Comment; ?>.</p>
</div>
</div>
</li>
<li style="list-style: none; display: inline">
<div class="comment_form">
<form action="#" method="post">
<textarea class="span10" name="Comment" rows="6"></textarea><br>
<input class="btn btn-primary" type="submit" value="Reply">
</form>
</div>
<?php
}
}
?>
</li>
And here is my my jquery code that I have a problem on it.
<script type="text/javascript">
$(document).ready(function()
{
$(".creply").click (function(e)
{
e.preventDefault();
$(this).next(".comment_form").show(); // problem here...
//$(".comment_form").show();
});
});
</script>
When I use the comment line in the script It works but without logic.
On click the link it shows all reply form on all comments not on the separate comment I clicked on. The code above I used $(this) to get the comment I clicked but It doesn't do any actions !??
Any Help, please !!??
I'm using this version of jquery
<script src="jquery-3.1.1.min.js">
You just need to select the closest parent with class .comment first, then reach the child element.
$(document).ready(function() {
$(".creply").click(function(e) {
e.preventDefault();
$(this).closest('.comment').next().show();
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<li class="comment">
<div class="comment-container">
<div class="comment-meta">
<a class="comment-reply-link link-style3 creply" href="">Reply »</a>
</div>
<div class="comment-body">
<p>
MyComment</p>
</div>
</div>
</li>
<li style="list-style: none; display: none">
<div class="comment_form">
<form action="#" method="post">
<textarea class="span10" name="Comment" rows="6"></textarea>
<br>
<input class="btn btn-primary" type="submit" value="Reply">
</form>
</div>
</li>
You can check the modified demo, it's working with multiple comments too:
JsFiddle Demo
You need to query parents() and find the next .comment_form element.
<script type="text/javascript">
$(document).ready(function() {
$(".creply").click (function(e) {
e.preventDefault();
$(this).parents().next('.comment_form').toggle();
});
});
</script>
I'm incorporating jquery into an html file and have had some trouble getting a button to produce some action when I click on it. I've successfully managed to produce an alert for the event whereby I click on a div, but the button is a different matter.
<script type = "text/javascript">
alert("I am an alert box!");
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
</script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<div class="page-content-wrapper">
<div class="page-content">
<!-- BEGIN PAGE HEADER-->
<div class="row">
<div class="col-md-12">
<!-- BEGIN PAGE TITLE & BREADCRUMB-->
<h3 class="page-title">
Verification & Validation Tools <small>statistics and more</small>
</h3>
<ul class="page-breadcrumb breadcrumb">
<li>
<i class="fa fa-home"></i>
Home
<i class="fa fa-angle-right"></i>
</li>
<li>
Users
</li>
<li class="pull-right">
<div id="dashboard-report-range" class="dashboard-date-range tooltips" data-placement="top" data-original-title="Change overview date range">
<i class="fa fa-calendar"></i>
<span>
</span>
<i class="fa fa-angle-down"></i>
</div>
</li>
</ul>
<!-- END PAGE TITLE & BREADCRUMB-->
</div>
</div>
<!-- END PAGE HEADER-->
<form class="form-horizontal" method="post" action="validateuser" >
<div class="validate">
<div class="form-group">
<label class="col-md-2 control-label">Email Address to Activate</label>
<div class="col-md-5"><input class="form-control" type="text" name="emailAddress"></input></div>
<button type="submit" class="btn-green"><i class="fa fa-check"></i> Validate</button>
</div>
</div>
</form>
</div>
I think the problem may be that the document it is not fully loaded when you add those event listeners. Try to use:
$(function() {
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
});
Which is a shortcut for
$(document).ready(function() {
...
});
You're running the code before anything exists on the page
Use the jQuery ready wrapper https://api.jquery.com/ready/
<script>
$(function() {
// put your code here
})
</script>
wrap your javascript code inside . your code maybe attach event before
DOM load .
$(document).ready(function(){
// code here
});
or add your code at end of page
Wrap the script code inside document.ready function like:
$(document).ready(function(){
alert("I am an alert box!");
$("div").click(function(){
alert("test1");
});
$(".btn-green").click(function(){
alert("test2");
});
});
I've tried my best to figure this out myself but to no avail as I'm new to web development. It's probably really basic but I'd really appreciate some help because I'm going around in circles here..
I have a Google map search form (essentially a store locator) and what I've done for the search results is split into two tabs; a list and a map.
What I would like to do is have the map tab always be the active tab when the submit button is pressed in the search form.
This is the HTML code:
<ul class="nav nav-tabs" id="myTab">
<li id="maptab" class="active">Map</li>
<li id="listtab" >List</li>
</ul>
<div class="tab-content">
<div class="tab-pane active" id="resmap">
<div id="map_canvas"></div>
</div>
<div class="tab-pane" id="reslist">
<div id="results">
<ul class="res-list" id="list"></ul>
</div>
</div>
</div>
So basically for the map items I'm trying to get the code to return to
div class="tab-pane active"
and
li class="active"
Presumably I have to add an onclick element to the submit button??
The html for the submit button in the form is
<input type="submit" name="op" id="edit-submit" value="Search" class="btn btn-primary" />
In your case, I presume you are trying to add the "active" class to that li element:
var button = document.getElementById('edit-submit');
button.onclick= function() {
// this adds the 'active' class to the classes that the element already has
var maptab = document.getElementById('maptab');
maptab.className = maptab.className + ' active';
};
I'm trying to simply hide something when the page loads...I'm actually going to have quite a few things hidden eventually, but right now I can get this to hide. I've scrolled some of the answers I've found on SO, but can't get it working. I have to keep the .jumbotron class for css so I simply added an id onto it...........not sure if that's the problem or what....here's my code. I left out the beginning as nobody really needs to see that.
<!-- Jumbotron -->
<div class="jumbotron">
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div>
<div id="second_slide" class="jumbotron" >
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div>
<hr>
<!-- Example row of columns -->
<div class="row-fluid">
<div class="span4">
</div>
</div>
<hr>
<div class="footer">
<p>© Company 2013</p>
</div>
</div> <!-- /container -->
<script>
//doesn't work
$(document).ready(function(){
$('.jumbotron #second_slide').click(function(){
var index=$('.jumbotron #second_slide').index(this);
$('.jumbotron #second_slide').hide();
});
});
It doesn't work because there is no element with an ID of 'second_slide' inside an element with a class of 'jumbotron'.
Try this:
$('.jumbotron#second_slide').hide();
Try this
<div class="jumbotron">
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
<div id="second_slide" class="jumbotron" >
<h1>Data Loader</h1>
<p class="lead">Follow the directions to load your data.</p>
<a class="btn btn-large btn-success" href="#">Start</a>
</div></div>
Try
$('#second_slide').click(function(){
var index=$('#second_slide').index(this);
$(this).hide();
});
It looks like the problem is the selector in $('.jumbotron #second_slide'). All you need is the id: $('#second_slide').
$('.jumbotron #second_slide') is trying to find an element with id="second_slide" within the class="jumbotron" divs.
Did you read http://api.jquery.com/category/selectors/ ? Writing something like .clazz #id you actually want to search for the id inside .clazz. You should probably iterate through those jumbotrons and select one you're interested in, then extract that component.
I'll have a go:
$(function(){
$('#second_slide').click(function(){
$(this).hide();
});
});
That's the entire <script> element.