$(document).ready(function() {
$(".like").click(function() {
var newValue = parseInt($(".no-like").text()) + 1;
alert(newValue);
$(".no-like").html(newValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="like" data-creation-id="1069347886434951" data-id="1" href="#">
<span class="no-like">35</span>
</a>
<a class="like" data-creation-id="1069347886434951" data-id="1">
<span class="no-like">3</span>
<span class="glyphicon glyphicon-heart"></span>
</a>
hey
Here there are multiple buttons. You need to add 1 value everytime it is clicked. For example: 35 to 36 and 3 to 4 .Jquery must select each button with respective value. But the code is not working even for one button.
simply use 'this' keyword to refer current instance of element
$(document).ready(function() {
$(".like").click(function() {
var newValue = +$(this).text() + 1;
if($(this).find('.no-like').length)
$(this).find('.no-like:eq(0)').text(newValue);
else
$(this).text(newValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="like" data-creation-id="1069347886434951" data-id="1" href="#">
35
</a>
<a class="like" data-creation-id="1069347886434951" data-id="1">
<span class="no-like">3</span>
<span class="glyphicon glyphicon-heart"></span>
</a>
$(document).ready(function() {
$(".like").click(function() {
var newValue = parseInt($(this).text()) + 1;//use this context for clicked element
alert(newValue);
$(".no-like").html(newValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="like" data-creation-id="1069347886434951" data-id="1" href="#">
35
</a>
<a class="like" data-creation-id="1069347886434951" data-id="1">
<span class="no-like">3</span>
<span class="glyphicon glyphicon-heart"></span>
</a>
hey
Use this context
You have to use $(this) for fetched from same element.
$(document).ready(function() {
$(".like").click(function() {
var newValue = parseInt($(this).text()) + 1;
alert(newValue);
$(".no-like").html(newValue);
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.0.1/jquery.min.js"></script>
<a class="like" data-creation-id="1069347886434951" data-id="1" href="#">
35
</a>
<a class="like" data-creation-id="1069347886434951" data-id="1">
<span class="no-like">3</span>
<span class="glyphicon glyphicon-heart"></span>
</a>
hey
Related
I have a problem with the Bulma framework. I have a small navbar for desktop and want to add a navbar burger. But it doesn't work. I tried the js script created by Bulma as an example and one from a yt video. Both didn't work. Can somebody Please help me? Down will find the html part and the js script:
js/index.js
document.addEventListener('DOMContentLoaded', () => {
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach( el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
});
index.html
<script src="js/index.js"></script>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<h1 class="title">10.8</h1>
</a>
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
<div class="navbar-menu" id="navMenu">
<div class="navbar-menu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<!-- navbar items -->
</div>
</div>
</div>
</nav>
Well if watched a small video produced from Bulma, tried the code from theire website and watched another video. I also tried to write my own script but it also does'nt work.
I hope sb can help me to fix it cause this must be successfully really quick.
You have a div that doesn't close in the right place.
There is a div with duplicate className.
Properly closing and removing that div everything works as expected.
// Get all "navbar-burger" elements
const $navbarBurgers = Array.prototype.slice.call(document.querySelectorAll('.navbar-burger'), 0);
// Add a click event on each of them
$navbarBurgers.forEach(el => {
el.addEventListener('click', () => {
// Get the target from the "data-target" attribute
const target = el.dataset.target;
const $target = document.getElementById(target);
// Toggle the "is-active" class on both the "navbar-burger" and the "navbar-menu"
el.classList.toggle('is-active');
$target.classList.toggle('is-active');
});
});
<link href="https://cdnjs.cloudflare.com/ajax/libs/bulma/0.9.4/css/bulma.min.css" rel="stylesheet"/>
<body>
<nav class="navbar" role="navigation" aria-label="main navigation">
<div class="navbar-brand">
<a class="navbar-item" href="index.html">
<h1 class="title">10.8</h1>
</a>
<a role="button" class="navbar-burger" data-target="navMenu" aria-label="menu" aria-expanded="false">
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
<span aria-hidden="true"></span>
</a>
</div>
<div class="navbar-menu" id="navMenu">
<div class="navbar-start">
<a class="navbar-item">
Home
</a>
<div class="navbar-item has-dropdown is-hoverable">
<a class="navbar-link">
More
</a>
<div class="navbar-dropdown">
<a class="navbar-item">
About
</a>
<a class="navbar-item">
Jobs
</a>
<a class="navbar-item">
Contact
</a>
<hr class="navbar-divider">
<a class="navbar-item">
Report an issue
</a>
</div>
</div>
</div>
<div class="navbar-end">
<!-- navbar items -->
</div>
</div>
</nav>
</body>
Currently i am building a storytelling website, where the client can iterate through several videos. However, there is also a page with chapters on the website. So when the client clicks on the next or previous button, the chapters should be lighten up on the chapter he currently is on.
At the moment i build a click counter, so the counter is counting up, when he clicked on next and counting down, when clicked on previous. I have 11 chapters, so 11 video's. I am checking the chapters by index. They are going from 0 to 11. When the client hits the next button, he's going to the next video and the click counter goes up with one.
At the moment i have trouble to connect this click counter to the current index of the chapter. So if the click counter goes to two for instance, the background of only chapter 2 (index 2) should be lighten up.
At the moment i have this:
<a href="#" class="vorige prev-rew button-sound">
<svg>icon</svg>
</a>
<a href="#" class="next prev-rew button-sound">
<svg> icon</svg>
</a>
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1">
<p>1</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-2">
<p>2</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-3">
<p>3</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-4">
<p>4</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-5">
<p>5</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-6">
<p>6</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-7">
<p>7</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-8">
<p>8</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-9">
<p>9</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-10">
<p>10</p>
</div>
</a>
<a href="#">
<div class="anchor-point chapter-11">
<p>11</p>
</div>
</a>
</div>
// Anchorpoint loop
var set = $(".anchor-point");
var length = set.length;
var ViewportCount = 1;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
console.log('klikkert next');
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
console.log('klikkert vorige');
ViewportCount = ViewportCount - 1;
}
set.each(function(index) {
index = ViewportCount;
console.log(index);
console.log(ViewportCount);
if(index == ViewportCount){
// Change the background-color of the number, connected to the index. So
current chapter will light up
}
});
});
To do what you require you can use the eq() method to directly select the element in the collection without a loop:
var set = $(".anchor-point");
var ViewportCount = 0;
$('.prev-rew').on("click", function() {
if ($(this).hasClass('next')) {
ViewportCount = ViewportCount + 1;
} else if ($(this).hasClass('vorige')) {
ViewportCount = ViewportCount - 1;
}
set.removeClass('active').eq(ViewportCount % set.length).addClass('active');
});
.active { background-color: #C00; }
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<a href="#">
<div class="anchor-point chapter-1 active"><p>1</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-2"><p>2</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-3"><p>3</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-4"><p>4</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-5"><p>5</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-6"><p>6</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-7"><p>7</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-8"><p>8</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-9"><p>9</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-10"><p>10</p></div>
</a>
<a href="#">
<div class="anchor-point chapter-11"><p>11</p></div>
</a>
</div>
However, you can avoid the need for the counter variable and instead move the active class based on its current position in the DOM. The <a> elements wrapping the div can also be removed as it's invalid HTML, it makes the JS more straightforward and it's also not necessary in this case
$('.prev-rew').on("click", function() {
let $current = $('.active');
let $target = $current[$(this).data('action')]();
if ($target.length) {
$current.removeClass('active');
$target.addClass('active');
}
});
.active {
background-color: #C00;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Previous
Next
<div class="marketing-chapter job-chapter">
<div class="anchor-point chapter-1 active"><p>1</p></div>
<div class="anchor-point chapter-2"><p>2</p></div>
<div class="anchor-point chapter-3"><p>3</p></div>
<div class="anchor-point chapter-4"><p>4</p></div>
<div class="anchor-point chapter-5"><p>5</p></div>
<div class="anchor-point chapter-6"><p>6</p></div>
<div class="anchor-point chapter-7"><p>7</p></div>
<div class="anchor-point chapter-8"><p>8</p></div>
<div class="anchor-point chapter-9"><p>9</p></div>
<div class="anchor-point chapter-10"><p>10</p></div>
<div class="anchor-point chapter-11"><p>11</p></div>
</div>
Sorry my english not good :)
I have problem with AJAX success in Laravel, after I successfully do process in AJAX, other functions are not working. Like the picture below, I like status or comment, function of collapse button and favorite button does not work.
In AJAX success I use
$("#divwrap").load(" #divwrap");
div with an id of divwrap I use as a wrapper
Please help :)
Code
<div id="divwrap">
#foreach($singgah as $d)
<div class="box box2">
<div class="box-body box-body-custom">
<div class="post">
<div class="user-block">
<img class="img-circle" src="{{ asset('storage/' . $d->user->avatar ) }}" alt="user image">
<span class="username">
<?php $email = Crypt::encrypt($d->user->email) ?>
{{$d->user->name }}
<div class="btn-group pull-right custom-curret nav-right1">
<button type="button" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-ellipsis-h"></span>
</button>
<ul class="dropdown-menu">
#if(Auth::user()->name ==$d->user->name )
<li><a onclick="editForm('{{$d->id }}')" class="pointer-jempol"> <i class="fa fa-pencil-square-o"></i> Edit Kiriman</a></li>
<li><a onclick="deleteData('{{$d->id }}')" class="pointer-jempol"> <i class="fa fa-times-circle"></i> Hapus Kiriman</a></li>
<li role="separator" class="divider"></li>
#endif
<li><i class="fa fa-exclamation-circle"></i> Laporkan Kiriman</li>
</ul>
</div>
</span>
<span class="description"><i class="fa fa-hashtag" title="Sebagai"></i> {{$d->category}} - <i class="fa fa-clock-o"></i> {{$d->created_at->diffForHumans()}}</span>
</div>
<p>
{{ $d->content }}
</p>
<div class="box box-default box-costum-collapse">
<div class="box-header with-border" style="padding:0px;">
<a class="label label-primary" title="Kota"><i class="fa fa-map-marker"></i> {{$d->lokasi }}</a>
<a class="label label-primary" title="Kontak"><i class="fa fa-phone-square"></i> {{$d->contact }}</a>
<table class="pull-right">
<tr>
<td class="mailbox-star" data-value="{{$d->id}}"><i class="fa fa-star-o text-red"></i> <a id="coba">{{ $d->singgahlike->count() }}</a></td>
<td class="btn-nopadding btn btn-box-tool" data-widget="collapse"> | <i class="fa fa-comment"></i> {{ $d->singgahcomment->count() }}</td>
</tr>
</table>
</div>
<div class="box-body" style="padding:0px;">
<div class="box-komentar">
#include('layouts.form.formComment')
<div id="box-komentar">
#foreach($d->singgahcomment as $c)
<div class="komentar-post">
<div class="user-block">
<img class="img-circle" src="{{ asset('storage/' . $c->user->avatar ) }}" alt="user image">
<span class="username usernamekoment">
{{$c->user->name }}
<div class="btn-group custom-curret nav-right-koment pull-right">
<button type="button" class="btn btn-primary-outline dropdown-toggle" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
<span class="fa fa-ellipsis-h"></span>
</button>
<ul class="dropdown-menu">
#if(Auth::user()->name ==$c->user->name )
<li><a onclick="deleteComment('{{$c->id }}')" class="pointer-jempol"><i class="fa fa-times-circle"></i> Hapus Komentar</a></a></li>
<li role="separator" class="divider"></li>
#endif
<li><i class="fa fa-exclamation-circle"></i> Laporkan komentar</li>
</ul>
</div>
</span>
<span class="description descriptionkoment"><i class="fa fa-clock-o"></i> {{$c->created_at->diffForHumans()}}</span>
</div>
<p>{{ $c->comment }}</p>
</div>
#endforeach
</div>
</div>
</div>
</div>
</div>
</div>
</div>
#endforeach
</div>
and this is one ajax success process:
$(function () {
$(".mailbox-star").click(function (e) {
e.preventDefault();
var singgah_id = $(this).data('value');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ url('singgah/like') }}",
type: "POST",
data: {singgah_id:singgah_id},
success: function (data) {
$("#divwrap").load(" #divwrap");
$('div.flash-message').html(data);
},
error: function () {
alert('Oops! error!');
}
});
//detect type
var $this = $(this).find("i");
var fa = $this.hasClass("fa");
if (fa) {
$this.toggleClass("fa-star");
$this.toggleClass("fa-star-o");
}
});
});
Below I show a button that works only once before the AJAX success button is working, but after the AJAX success button it becomes not working
It's because after jQuery changes and loads the elements of the DOM again, even if the id and class names are the same but the virtual id of the DOM elements are changed and javascript or jQuery assume this is different than previous ones.
In other words, jQuery attaches to elements on loading of DOM, so after done loading, it can't recognize the new elements. to do that you must get the elements from the document instead.
So your code will look like this:
$(document).on('click', ".mailbox-star", function (e) {
e.preventDefault();
var singgah_id = $(this).data('value');
$.ajaxSetup({
headers: {
'X-CSRF-TOKEN': $('meta[name="csrf-token"]').attr('content')
}
});
$.ajax({
url: "{{ url('singgah/like') }}",
type: "POST",
data: {singgah_id:singgah_id},
success: function (data) {
$("#divwrap").load(" #divwrap");
$('div.flash-message').html(data);
},
error: function () {
alert('Oops! error!');
}
});
//detect type
var $this = $(this).find("i");
var fa = $this.hasClass("fa");
if (fa) {
$this.toggleClass("fa-star");
$this.toggleClass("fa-star-o");
}
});
Notice this line:
$(document).on('click', ".mailbox-star", function (e) {
instead of this:
$(function () {
$(".mailbox-star").click(function (e) {
So if you want to events work after reloading part of DOM you must address the selector from the document. Note that the selecting of element works a little bit slower than the first one.
I have two divs of the same size, and when I click a button on one of the divs, it will get larger. I want to move the smaller div into the bottom-right corner of the larger div, and when I click the button again the divs will return to their original size and position.
Before:
--- ---
| 1 | | 2 |
--- ---
After:
---------
| 2 |
| ---|
| | 1 |
---------
Here's my javascript for resizing so far:
function resizeSubscriber() {
var subscriberPanel = document.getElementById('dvOtherPerson');
var publisherPanel = document.getElementById('dvYou');
var classSetting = subscriberPanel.getAttribute('class');
if (classSetting == 'col-xl-4') {
subscriberPanel.setAttribute('class', 'col-xl-12');
}
else {
subscriberPanel.setAttribute('class', 'col-xl-4');
}
}
here is my asp code
<div id="dvOtherPerson" class="col-xl-4">
<div>
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Rachel Hawkins
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-volume-up text-success"></i>
</a>
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-refresh"></i>
</a>
<a onclick="resizeSubscriber();" href="#" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-expand"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
<img src="./img/temp/users/video_rachel.jpg" class="img-fluid" />
</div>
</div>
<%-- <div id="videos">
<div id="subscriber"></div>
</div>--%>
</div>
<div id="dvYou" class="col-xl-4">
<div class="m-portlet m-portlet--fit">
<div class="m-portlet__head">
<div class="m-portlet__head-caption">
<div class="m-portlet__head-title">
<h3 class="m-portlet__head-text">
Me
</h3>
</div>
</div>
<div class="m-portlet__head-tools">
<ul class="m-portlet__nav">
<li class="m-portlet__nav-item">
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-microphone-slash text-danger"></i>
</a>
<a href="" class="m-portlet__nav-link m-portlet__nav-link--icon">
<i class="fa fa-refresh"></i>
</a>
</li>
</ul>
</div>
</div>
<div class="m-portlet__body">
<div id="publisher"></div>
</div>
</div>
</div>
Use appendChild, and it will move the source element to a target element, e.g.
target_element.appendChild(source_element)
As commented, to apply different CSS style, do like this and the source_element will automatically change when inside the target_element
source_element {...}
target_element source_element {...}
If you can use jQuery, you can use the method append():
$(<OUTER_SELECTOR>).append($(<INNER_SELECTOR>));
Through this:
var all = $("#innerhtml").map(function() {
return this.innerHTML;
}).get();
alert(all);
I find:
<a class="cart-btn remove text-muted small" onclick="removeCart('fgh', 'ser');"><i class="fa fa-minus-circle"></i></a>
<a class="name-image" >
<span class="name">
<span class="quantity">28 × </span>rum ‘n’ beat</span>
</a>
<p class="comment-amount">
<span class="amount pull-right">kr3,584.00</span>
</p>
How can i get this in to a jQuery variable..
You can use Jquery attr().
var result = $('.cart-btn').attr("onclick")
console.log(result);
var re = /'(.*?)'/g;
var [a,b,c] = result.match(re);
console.log(a, b, c);
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a class="cart-btn remove text-muted small" onclick="removeCart('89', '7647966b7343c29048673252e490f736', '0');"><i class="fa fa-minus-circle"></i></a>
<a class="name-image" onclick="openMenuOptions('89', '7647966b7343c29048673252e490f736');">
<span class="name">
<span class="quantity">28 × </span>rum ‘n’ beat</span>
</a>
<p class="comment-amount">
<span class="amount pull-right">kr3,584.00</span>
</p>