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>
Related
I have an element like this
I want mylink2 to also be clicked whenever somebody clicks on mylink
To start I am trying to get the parent container on click like this
$("#mylink").click(function(){
parentcontainer = this.closest('.myelement');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>
But now I am stuck trying to click mylink2 am I on the right track?
You can use closest to get the parent and then find second element and trigger click command but since you have ids maybe you can use them for selecting elements. Keep in mind that id's must be unique.
$("#mylink").click(function() {
const parent = $(this).closest('.myelement');
parent.find('#mylink2').trigger('click')
});
$("#mylink2").on('click', function() {
console.log('click link 2')
})
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>
you can trigger the jQuery first click to trigger the second one this way:
$("#mylink").click(function(){
$("#mylink2").click();
});
taking in cosider that #mylink2 has some kind of a click handler function
If your links have ids the easiest way would be to use these ids:
$('#mylink').on('click', function(event) {
console.log('my link click');
$('#mylink2').click();
});
$('#mylink2').on('click', function(event) {
console.log('my link2 click');
});
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="myelement">
<div class="container">
<div class="testitem">
<a id="mylink" href="#">
Test Link 1
</a>
</div>
</div>
<div class="container">
<a id="mylink2" href="#">
Test Link 2
</a>
</div>
</div>
Try this:
$('#mylink, #mylink2').on('click', function(event){
console.log($("#mylink1").text());
console.log($("#mylink2").text());
});
It should be straightforward since you are using unique IDs for the two elements.
Triggering the second elements click event in the first elements handler.
$("#mylink").on("click", function(){
$("#mylink2").trigger("click");
});`
I have a multiple bootstrap accordion running and would like to disable once clicked. One tab has to remain open at all times.
For example, Link1 is already open so link1 should be disabled. Only link2 and link3 should be clickable. How should I achieve this?
Here's the code:
<div id="accordion">
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample1">
Link 1
</a>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample2">
Link 2
</a>
<a class="btn btn-primary" role="button" data-toggle="collapse" href="#collapseExample3">
Link 3
</a>
<div class="collapse in" id="collapseExample1">
This is the description 1
</div>
<div class="collapse" id="collapseExample2">
This is the description 2
</div>
<div class="collapse" id="collapseExample3">
This is the description 3
</div>
</div>
Javascript:
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
JSFiddle Link Demo:
https://jsfiddle.net/DTcHh/19604/
This would give you that result.
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
$('a').on('click',function(){
// enable all
$('a').each( function(){
$(this).removeAttr('disabled')
})
// disable me
$(this).attr('disabled', 'disabled')
})
jsFiddle: https://jsfiddle.net/DTcHh/19608/
Just remove the classes collapse in from the element for which you want to disable accordion. Like here it is link1.
$('#accordion').on('show.bs.collapse', function () {
$('#accordion .in').collapse('hide');
});
$(".collapse.in").removeClass('collapse in');
I hope this is what you wanted. Check this fiddle.
Update:
Final Fiddle with a proper solution.
So, I have a series of divs and inside each div there is a link.
What I want to accomplish is to open in another window or tab the .pdf file if the link ends in.pdf if not do nothing or something else to decide later.
The problem I'm having is that when you click on the link it will open the same document as many times as you have .pdfs on the page.
I tried replicating the problem in this fiddle:
https://jsfiddle.net/x9fo6cgk/
But it isn't working. The code works on my side.
Here is the code:
$('.somelink').click(function(eventObject) {
var elem = $(this);
if (elem.attr("href").match(/\.pdf$/i)) {
eventObject.preventDefault();
elem.attr('target', '_blank');
}
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="linkholder">
<a class="somelink" href="https://bitcoin.org/bitcoin.pdf">pdf 1</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.pdf995.com/samples/pdf.pdf">pdf 2</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.bing.com">.com</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.google.org">.org</a>
</div>
Thanks in advance!
You should just change the targets on page load if they are PDFs.
$('.somelink').each(function() {
var elem = $(this);
if (elem.attr("href").match(/\.pdf$/i)) {
elem.attr('target', '_blank');
}
});
JSFiddle: https://jsfiddle.net/x9fo6cgk/3/
Results in this HTML:
<div class="linkholder">
<a class="somelink" href="https://bitcoin.org/bitcoin.pdf" target="_blank">pdf 1</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.pdf995.com/samples/pdf.pdf" target="_blank">pdf 2</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.bing.com">.com</a>
</div>
<div class="linkholder">
<a class="somelink" href="http://www.google.org">.org</a>
</div>
Note: Your JSFiddle did not have jQuery selected so nothing ran.
You can do like this:
$('.somelink').click(function(eventObject) {
var elem = $(this);
if (elem.attr("href").match(/\.pdf$/i)) {
eventObject.preventDefault();
window.open(elem.attr('href'));
}
});
Look here: https://jsfiddle.net/x9fo6cgk/6/
For some reason the behavior of this script:
https://learn.jquery.com/events/event-basics/#preventdefault
under Magnolia CMS acts a bit weird.
So this code was used instead:
$(".linkholder a[href$='pdf']").attr('target','_blank').addClass('pdf');
$(".linkholder a:not(a[href$='pdf'])").addClass('generic');
Here is a the fiddle:
https://jsfiddle.net/x9fo6cgk/13/
Thanks everyone!
How can I create a Pjax that can have multiple containers? I tried this Pjax on this link:
https://github.com/defunkt/jquery-pjax/blob/master/README.md
and this is my code:
$(document).pjax('a', '#pjax-container, #pjax-navbar');
but it doesn't work.
then I tried this code:
$(document).pjax('a', '#pjax-container');
$(document).pjax('a', '#pjax-navbar');
and it doesn't work either. It just loads the last one.
How do I make it work?
this is my HTML
<div class="wrap">
<nav id="w0" class="navbar-inverse navbar-fixed-top navbar" role="navigation" id="pjax-navbar">
<div class="container">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#w0-collapse"><span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span></button><a class="navbar-brand" href="/josh/cms_template/backend/web/">My Company</a></div>
<div id="w0-collapse" class="collapse navbar-collapse">
<ul id="w1" class="navbar-nav navbar-right nav">
<li class="active">Home</li>
<li>Logout</li>
</ul>
</div>
</div>
</nav>
<div class="container" id="pjax-container">
<div class="site-index">
this is my content
</div>
</div>
</div>
all i want is when i go to another page, only pjax-container will changing.
i already make it. but the navigation bar is not changing.
Pjax doesn't have multiple containers.
To copy the same response to other pjax container, you can use pjax complete event handler like this.
Remove/disable existing pjax code from your page:
//Remove Code
//$(document).pjax('a', '#pjax-container');
//$(document).pjax('a', '#pjax-navbar')
//$(document).pjax('a', '#pjax-container, #pjax-navbar');
// Add this Code
$(document).on('pjax:complete', function(event) {
//This code will copy #pjax-container container's response
// to #pjax-navbar when event is completed.
$('#pjax-navbar').html( $('#pjax-container').html() );
});
You could add two links with same href but different id.
And attach pjax to each of them:
$(document).pjax('a#pjax-link-container', '#pjax-container');
$(document).pjax('a#pjax-link-navbar', '#pjax-navbar');
$(document).pjax('a', '#pjax-container');
$(document).on('pjax:clicked', function(options) {
$.pjax.reload('#pjax-container', {
fragment: '#pjax-container',
timeout: 5000,
scrollTo: false
})
});
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>