i have following :
<button id="not" class="notification btn btn-default dropdown-toggle" data-toggle="dropdown" type="button">
<i class="fa fa-bell"></i>
<span class="badge badge-success" style="background-color:#f3b760">
10 </span>
</button>
<div id="show"></div>
I want div id "show" to load job-notification.php on clicking the button above, so i got this:
<script>
$(document).ready(function(){
$("#not").click(function(){
$("#show").load("job-notification.php");
});
});
</script>
FYI, Button is a DROPDOWN & job-notification.php contains results like this:
<ul class="dropdown-menu dropdown-menu-right">
<li>
EXAMPLE 1
</li>
<li>
EXAMPLE 2
</li>
</ul>
Why is this not working?
You can also try this one: $(document).on("click","#not",function() {});
For loading css, you can use this: $('head').append('');
Add the following in append function in less than and greater than brackets :
link rel="stylesheet" href="cssname.css" type="text/css"
Related
I'm looking for a way to automatically add +1 to the number when a user clicks the icon or -1 if the user clicks again. My code adds already in the back a +1 or -1, so that event is already covered. But I want that only the number right from that particular icon is being added. The problem is that I have 32 icons on that same page, so the code should only do an action on the number in that span on not all span's and without refreshing the page every time a user clicks on an icon.
<span class="float-right">
<a href="#" id="1234" class="favorite">
<i class="fas fa-heart" style="color:#dc3545"></i></a>
1
</span>
<span class="float-right">
<a href="#" id="12345" class="favorite">
<i class="fas fa-heart" style="color:#dc3545"></i></a>
1
</span>
This is the jQuery code for toggling the icon.
$('.favorite').click(function(e) {
e.preventDefault();
vote(this);
$("i", this).toggleClass("far fa-heart fas fa-heart");
});
This is the vote function
function vote(_obj) {
$.ajax({
type: "POST",
data: "id=" + $(_obj).attr("id"),
url: "vote.php"
});
}
You can try below example (ignore my html because I used font awesome 4)
$('.favorite').each(function(e) {
let clicked = false;
$(this).click(function(e) {
e.preventDefault();
let text = +$(this).children('.count').text();
//vote(this); // exclude to avoid error
$(this).children('i').toggleClass('fa-heart-o');
if (!clicked) {
$(this).children('.count').addClass('plus').text(parseInt(0 + 1))
clicked = true;
} else {
$(this).children('.count').removeClass('plus').text(parseInt(0 - 1))
clicked = false;
}
});
});
a {
text-decoration: none
}
span.count.plus::before {
content: "+";
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<link href="https://stackpath.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css" rel="stylesheet" integrity="sha384-wvfXpqpZZVQGK6TAh5PVlGOfQNHSoD2xbE+QkPxCAFlNEevoEH3Sl0sibVcOQVnN" crossorigin="anonymous">
<span class="float-right">
<a href="#" id="1234" class="favorite">
<i class="fa fa-heart-o fa-heart" style="color:#dc3545"></i>
<span class="count">0</span>
</a>
</span>
<span class="float-right">
<a href="#" id="12345" class="favorite">
<i class="fa fa-heart-o fa-heart" style="color:#dc3545"></i>
<span class="count">0</span>
</a>
</span>
<div>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
<i class="fa fa-snowflake-o" aria-hidden="true"></i>
</div>
How to create a drop down list using bootstrap to include it in the form?
There has to be 3 fields but 1 of them has to be hidden depending of what a User selected in first field.
Example:
First field options: Book/Movie
2nd field options if book is selected (after selecting in first field this field should appear 1field should stay visible and 3rd field should stay invisible): Action/Horror/Drama
3rd field oprions if movie is selected: DVD/Cinema/VoD (now 1st field is visible, 2nd is not.
Code which i've tried.
<div class="dropdown">
<button type="button" class="btn btn-primary dropdown-toggle" data-toggle="dropdown">
Books
</button>
<div class="dropdown-menu_1-always-visible">
<a class="dropdown-item" href="#">Books</a>
<a class="dropdown-item" href="#">Movies</a>
</div>
<div class="dropdown-menu-2-hidden-if-movies-selected-in-field-1">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Horror</a>
<a class="dropdown-item" href="#">Drama</a>
</div>
<div class="dropdown-menu-3-hidden-if-books-selected-in-1">
<a class="dropdown-item" href="#">DVD</a>
<a class="dropdown-item" href="#">Cinema</a>
<a class="dropdown-item" href="#">Vod</a>
</div>
</div>
Thank you for all the help! I need to implement it with PHP/HTML and Bootstrap to Laravel :)
<a class="dropdown-item" onclick="showMySection()" href="#">Books</a>
<a class="dropdown-item" onclick="showMySection1()" href="#">Movies</a>
<script type="text/javascript">
function showMySection(){
document.getElementsByClassName("dropdown-menu-2-hidden-if-movies-selected-in-field-1").style.display = 'block';
document.getElementsByClassName("dropdown-menu-3-hidden-if-books-selected-in-1").style.display = 'none';
}
function showMySection1(){
document.getElementsByClassName("dropdown-menu-2-hidden-if-movies-selected-in-field-1").style.display = 'none';
document.getElementsByClassName("dropdown-menu-3-hidden-if-books-selected-in-1").style.display = 'block';
}
</script>
How to allow multiselect in this bootstrap dropdown?. because this one is a dropdown menu that consists of a ul and li element..it's not a select element that I can just add 'multiple'...so how ?
<div class="dropdown pull-left dropdown-custom-quicklook">
<button class="btn btn-default dropdown-toggle" type="button" data-toggle="dropdown"><i class="icon-filter"></i> Filter By Quick Look</button>
<ul class="dropdown-menu pull-right keep-open-on-click" role="menu">
<?php
foreach($quicklook as $look){
echo '<li>'.$look.'</li>';
}
?>
</ul>
</div>
I used the bootstrap-select.js thing to make it work
I currently have multiple drop down buttons for several table rows that need to be tied to an onClick event. The problem I'm having is capturing the information from each button. Here is what my test code looks like:
<table class="table table-bordered">
<tbody>
<tr>
<td><img src="/photos/files/5/m/131309a4fb918110ed1061e90a715eca.jpeg"/></td><td><div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Edit</li>
<li><i class="icon-trash"></i> Delete</li>
</ul>
</div>
</tr>
<tr>
<td><img src="/photos/files/5/m/b19102d8ba1158e2a139ffa84e8e8540.jpeg"/></td><td><div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li><i class="icon-pencil"></i> Edit</li>
<li><i class="icon-trash"></i> Delete</li>
</ul>
</div></tr>
</tbody>
</table>
current javascript:
$('.btn').click(function(e) {
e.preventDefault();
???
});
How do I capture and process each click event from multiple buttons? I'm assuming I need to add a unique ID to each button but how can I capture an onclick event for each button item?
inside the function you can use this to reffer to the object in cause.
$(".btn").click(function () {
//here you can check which button did it
if ($(this).attr('class')=='icon-pencil')
//do sth
else
//do sth else
});
Check the jquery docs.
I have a table that contains multiple dropdown menus for a list of profile images. I've tagged the list element with the DB id of the photo so I can perform the associated action. I've coded my table to look like this:
<table class="table table-bordered">
<tbody>
<tr>
<td><img src="/photos/files/5/m/131309a4fb918110ed1061e90a715eca.jpeg"/></td><td><div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="5"><i class="icon-pencil"></i> Edit</li>
<li id="5"><i class="icon-trash"></i> Delete</li>
</ul>
</div>
</tr>
<tr>
<td><img src="/photos/files/5/m/b19102d8ba1158e2a139ffa84e8e8540.jpeg"/></td><td><div class="btn-group">
<a class="btn btn-primary" href="#"><i class="icon-user icon-white"></i> User</a>
<a class="btn btn-primary dropdown-toggle" data-toggle="dropdown" href="#"><span class="caret"></span></a>
<ul class="dropdown-menu">
<li id="7"><i class="icon-pencil"></i> Edit</li>
<li id="7"><i class="icon-trash"></i> Delete</li>
</ul>
</div></tr>
</tbody>
</table>
My jquery attempt is below but isn't working:
$('.dropdown-menu').on('click', 'li', function(e){
if ($(this).attr('class')=='icon-pencil') {
var id = $(this).attr('id');
alert("ID= " + id);
}
});
I never hit my alert code so what am I missing here?
Also is there a better way to track the photo ID's or will they work this way?
You have li > a > .icon-pencil in your structure but you're looking for this.className on li click (which is, obviously, the li). Try this:
$('.dropdown-menu').on('click', 'li', function(){
if ($(this).find('icon-pencil').length > 0) {
var id = this.id;
alert("ID= " + id);
}
});
A cleaner approach would be to listen for click on the anchor, since this is the usual click element:
$('.dropdown-menu').on('click', 'a', function(){
if ($(this).children('.icon-pencil').length > 0) {
var id = $(this).closest('li').attr('id');
alert("ID= " + id);
}
return false;
});
And the cleanest solution would be to set the ID's only on .dropdown-menu, so they are unique, then get it via .closest('ul') instead of .closest('li').
PS: having duplicate IDs is always bad.