We Keep Coding

Is there a way to disable href link / links if the user is already on the page the href link / links leads to, without using JQuery?

So I have something like this in my html:
<a id="one" href="/index.html"> HOME </a>
<a id="two" href="/something.html"> SOMETHING </a>
<a id="three" href="/again.html"> AGAIN </a>
and if for example user is on page linked "..../index.html" and tries to click on "HOME" link button, it does nothing or fake redirects or its disabled to be clickable, same goes for other href buttons if the user is already on the page the buttons are redirecting to, and user tries to click on them, I have been looking everywhere but all solutions for this problem requires you to use JQuery, and I would like to not use libraries as much as possible, any solutions?

For simplicity, add a class to all menu links in which you want this behavior
<a class="locationLink" id="one" href="/index.html"> HOME </a>
<a class="locationLink" id="two" href="/something.html"> SOMETHING </a>
<a class="locationLink" id="three" href="/again.html"> AGAIN </a>
And check this:
var links = document.getElementsByClassName("locationLink");
for (var i = 0; i < links.length; i++) {
var link = links[i];
if (link.classList.contains('locationLink') && location.href == link.href) {
link.addEventListener("click", function (event) {
event.preventDefault();
});
break;
}
}
Basically, you get all links and check only your locationLinks. If the current url is equals to the href, you add an event listener that blocks the navigation. Maybe you need some debugging in the "location.href == link.href" because relative/absolute urls (you can refer to https://stackoverflow.com/a/44547904/18452174) but it's working.
If your menu can change dynamically, you can try this other approach:
document.addEventListener("click", function (event) {
var link = event.target;
if (link.classList.contains('locationLink') && location.href == link.href) {
link.addEventListener("click", function (event) {
event.preventDefault();
});
}
}, false);
You do the same but check the condition in each document click instead only one time in document load.

AJAX loads content twice

I am trying to build a sidebar navigation, which uses AJAX to load content inside a div.
So far it is working great, it is just that i noticed, that everytime i click onto the buttons to navigate to a different site on my page, the site content seems to be loaded on top of the current content.
I have got this hypothesis, because on every site load my site sends one request to a server, to get data from there.
Now if i already visited the site on my page, that sends this request, navigate to a different site on my page and navigate back to the first site, this site sends two requests to the server.
If i am repeating those steps, it just adds up and the request gets sent 3,4,5..times
This is the Code of my navigation bar:
<div id="sidedrawer" class="mui--no-user-select">
<div class="mui-divider"></div>
<ul>
<li onClick="remote();" href="./#remote">
<strong>Remote</strong>
</li>
<li onClick="groups();" href="./#groups">
<strong>Groups</strong>
</li>
<li onClick="devices();" href="./#devices">
<strong>Devices</strong>
</li>
<li onClick="users();" href="./#users">
<strong>Users</strong>
</li>
<li onClick="programs();" href="./#programs">
<strong>Programs</strong>
</li>
<li onClick="settings();" href="./#settings">
<strong>Settings</strong>
</li>
</ul>
</div>
The functions remote()/groups()/devices() look about the same:
function remote() {
showSubPage("Remote", "./remote.php");
}
showSubpage() looks like this:
function showSubPage(title, page){
changeTabName(title);
$.ajax({
url: page,
type: "GET",
cache: false,
success:function(data){
var $main = $('#main');
$main.html('');
$main.html(data);
}
});
}
Main is just a normal div:
<div id="main"></div>
Does anyone have an idea why my page does not get called just once everytime i click the links?
Edit:
When i am looking into the source code of my page, the content is only listed once.
Edit2: I figured that the problem does not come from the ajax itself.
This is the PHP-code that i am using to generate my page.
function addGroup($groupId, $groupname, $devicearr)
{
echo('<div class="group">
<h3>'.$groupname);
echo('<div class="verticalcenter"><div class="toggle-button toggle-button-selected " id="groupButton'.$groupId.'"><button></button></div></div>');
echo(' </h3>
<div>
<table class="devicetable">
');
foreach ($devicearr as &$device) {
echo('<tr>
<td>'.$device['name'].'</td>');
if($device['status'] == 1){
echo('<td class="togglecolumn"><div class="verticalcenter" ><div class="toggle-button toggle-button-selected group'.$groupId.' device'.$device['id'].'" id="group'.$groupId.'device'.$device['id'].'" ><button></button></div></div></td></tr>');
} else {
echo('<td class="togglecolumn"><div class="verticalcenter"><div class="toggle-button group'.$groupId.' device'.$device['id'].'" id="group'.$groupId.'device'.$device['id'].'"><button></button></div></div></td></tr>');
}
echo ('<script>
$(document).on("click","#group'.$groupId.'device'.$device['id'].'", function() {
if($("#group'.$groupId.'device'.$device['id'].'").hasClass("toggle-button-selected")){
$(".device'.$device['id'].'").removeClass("toggle-button-selected");
var frame = document.createElement("iframe");
frame.src = "http://localhost/callMethod";
frame.style.left = "-9999px";
frame.style.display = "none";
frame.onload = function() {
this.parentNode.removeChild(this);
};
document.body.appendChild(frame);
}
else{
$(".device'.$device['id'].'").addClass("toggle-button-selected");
var frame = document.createElement("iframe");
frame.src = "http://localhost/callMethod";
frame.style.left = "-9999px";
frame.style.display = "none";
frame.onload = function() {
this.parentNode.removeChild(this);
};
document.body.appendChild(frame);
}
});
</script>');
}
echo('
</table>
</div>
</div>');
}
My code creates a button for each "device" that is in the "devicearr". But when my page got called twice and i click the button once, it registers two click events.

Instead of:
$(document).on("click","#group'.$groupId.'device'.$device['id'].'", function() {
});
I used:
$("#group'.$groupId.'device'.$device['id'].'").click( function() {
});
so that the Click-Event does not stay alive after reloading the ajax content.
Additionally (not necessarily needed), i also unbind the click-event, before i register the click-event with:
$("#group'.$groupId.'device'.$device['id'].'").off("click");
Thanks to Barmar for the hint.

jQuery / javascript How to load Script when a css class presents in the page

I have a page shows a list of rows and with a pagination, when you click on next page the next page loads in same page contains another list of rows. so basically next page loads a bunch of other rows without my exact page been reloaded
So the problem im haven is i use this script below while it works fine but when the next page loads in same window this script does not work for them.
I hope i make sense here :) what is a good solution for this?
$('.ltwitch').each(function () {
var tnick = $(this).data('tnick');
var span = $(this).next();
$.getJSON("https://api.twitch.tv/kraken/streams/" + tnick + ".json?callback=?", function (data) {
if (data.stream === null) {
span.html(
'<strong class="ipsOnlineStatus ipsOnlineStatus_offline"><i class="fa fa-circle"></i></strong><h4 class="ipsDataItem_title ipsType_break"> ' + tnick + ' </h4><div class="ipsDataItem_meta">Offline</div>');
} else {
var views = data.stream.viewers;
var game = data.stream.game;
span.html(
'<strong class="ipsOnlineStatus ipsOnlineStatus_online"><i class="fa fa-circle"></i></strong><h4 class="ipsDataItem_title ipsType_break"> ' + tnick + ' </h4><div class="ipsDataItem_meta"> ' + views + ' viewers </div><div class="ipsDataItem_meta">Playing: '+ game +' </div>');
}
$(function() {
var online = $('.ipsOnlineStatus_online').closest('.cCmsRecord_row');
var first = $('.cCmsRecord_row')[0];
online.each(function() {
$(first).before(this);
});
});
short of HTML
<ol class="List">
<li class="row">
<div class="main">
<a href="#" class="ease">
<div class="ltwitch" data-tnick="esl_lol"></div>
</a>
</div>
</li>
<li class="row">
<div class="main">
<a href="#" class="ease">
<div class="ltwitch" data-tnick="esl_lol"></div>
</a>
</div>
</li>
....
....
....
</ol>
<div data-role="tablePagination">
<ul class="ipsPagination">
<li class="ipsPagination_prev ipsPagination_inactive">Prev</li>
<li class="ipsPagination_next">Next</li>
</ul>
</div>

It sounds like you want to wrap your work in a named function so you can call it on subsequent paging. Your code right now is most likely in a document ready which is only called on initial page load. Turning all of that work into a function now allows it to be called many times.
function myFunction () {
...
};
myFunction();
Then where your pagination code is set up ( I figure an anchor click binding ) just call myFunction() again.
$('.ipsPagination_next').click(function(){
...
myFunction();
});
I would note that if these two areas are in different document ready functions or different files, ideas like scope and encapsulation might become problematic. We'd have to see more code to confirm if it would be an issue. If you are having problems you could put the function myFunction() onto the root which would be outside of any document ready, load, or whatever you might be using. Then it would be on the root or window level.
window.myFunction = function () {
...each(... your current work
};
This could be used if you aren't sure about encapsulation or how scope works.

Your $('.ltwitch') selector only captures the classes present in the first page. When a subsequent page is loaded, $('.ltwitch') is not executed again on the new classes.
I suggest that you somehow differentiate between classes corresponding to already loaded pages, and classes corresponding to new pages. You could do this by adding a class, e.g. .already-loaded to the classes as you load them.
$.getJSON("https://api.twitch.tv/kraken/streams/" + tnick + ".json?callback=?", function (data) {
$(this).addClass('already-loaded'); // Mark as loaded.
...
This way, replace your first line with this:
$('.ltwitch').not('.already-loaded').each(function () {
...
Not tested, but could work.

Strange behaviour of values from tag

let's suppose the value of ${currentPage} is 5 i.e. we are on the fifth page
there are two links:
<a id="idArrow" href="#" data-currentpage="${currentPage-1}" title="${currentPage-1}">backward</a>
<!-- the title displays 4 -->
<a id="idArrow" href="#" data-currentpage="${currentPage+1}" title="${currentPage+1}">forward</a>
<!-- note, the title displays 6, it seems ok-->
a script to get a value:
$('body').on('click', '#idArrow', function() {
console.log("running idArrow");
var pageNumber = $("#idArrow").data('currentpage');
console.log('pageNumber '+pageNumber);
...
now the most interesting part...
if I press backward link then I get
running idArrow
pageNumber 4
if I press forward link then I get the same! how can it be?
running idArrow
pageNumber 4

You could use the this object provided by jQuery to event handling functions:
var pageNumber = $(this).data('currentpage');
Note that you should use unique id properties. $("#idArrow") refers to the first node with that id, and explains the behaviour you describe.
It would therefore be better to give a different selector to the on handler, like for instance a class that the elements share:
<a class="clsArrow" ... >
Code:
$('body').on('click', '.clsArrow', function(e) {
...
var pageNumber = $(this).data('currentpage');

Do something like this:
<a id="idArrow1" href="#" data-currentpage="${currentPage-1}" title="${currentPage-1}">backward</a>
<!-- the title displays 4 -->
<a id="idArrow2" href="#" data-currentpage="${currentPage+1}" title="${currentPage+1}">forward</a>
<!-- note, the title displays 6, it seems ok-->
javascript
$('body').on('click', '#idArrow1', function() {
console.log("running idArrow1");
var pageNumber = $("#idArrow1").data('currentpage');
console.log('pageNumber '+pageNumber);
...
$('body').on('click', '#idArrow2', function() {
console.log("running idArrow2");
var pageNumber = $("#idArrow2").data('currentpage');
console.log('pageNumber '+pageNumber);
...
Your issue is that you have 2 of the same id's make them unique and it should solve your issue

Open Expanding List from Href

I'm trying to modify this pen I found on CodePen. I'd like to be able to open a specific list on the page from another page. Clicking the link should open the corresponding section on the next page on page load.
I'm a bit of a newbie when it comes to jQuery, so I appreciate any help I can get. I've tried searching around and have an idea of what I need to target, but I haven't been able to make it happen. Here is my code:
HTML:
<!--Link on Previous Page-->
Click Here
<!--Target List-->
<div class="integration-list">
<ul>
<li class="integration">
<a class="expand" id="list">
<div class="expand_intro"><h3 class="teal_bold">Click Here</h3></div>
<div class="right-arrow">▼</div>
</a>
<div class="detail">
<div><p>Lorem Ipsum Dolor...</p></div>
</div>
</li>
</ul>
</div>
JS:
$(function() {
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "▼") {
$expand.text("▲");
} else {
$expand.text("▼");
}
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
$('.expand').find('a[href*='+ thash + ']').trigger('click');
});
});

Few things that I did to get it to work:
The trigger event is probably firing before the handler is actually attached. You can use setTimeout as a way around this.
Also, even with setTimeout around $('.expand').find('a[href*='+ thash + ']').trigger('click'); it didn't work for me. I changed that to simply $(thash).click();.
The complete code of the "expand.js" file:
$(function() {
var hash = window.location.hash;
var thash = hash.substring(hash.lastIndexOf('#'), hash.length);
setTimeout(function() {
$(thash).click();
}, 10);
$(".expand").on( "click", function() {
$(this).next().slideToggle(100);
$expand = $(this).find(">:nth-child(2)");
if($expand.text() == "â–¼") { //If you copy/paste, make sure to fix these arrows
$expand.text("â–²");
} else {
$expand.text("â–¼");
}
});
});
Apparently the arrows don't display properly here, so watch that if you copy/paste this.