We Keep Coding

A href"#" data-toggle anchor goes to the top

There is a project I took over for restyling and they asked me to fix the anchors for tabs where the user gets send to the top in firefox: http://new.yourcoach.be/opleidingen/nlp-bootcamp/
It works like a charm in Chrome but not in other browsers
<script>function changeTab(e){
e.preventDefault();
console.log("Changing tab");
}</script>
<a class="nav-link <?php if ($i == 1): ?>active<?php endif; ?> text-uppercase" data-toggle="tab" data-target="#<?php echo sanitize_title($tab['_title']); ?>" href="javascript:;" onClick="changeTab(event)"><?php echo $tab['_title']; ?> </a>
I tried the following without succes:
Anchor
Anchor
Anchor
<script>
$( "tablink" ).click(function() {
e.preventDefault();
console.log("Changing tab");
})(jQuery);
</script>
<a id="tablink" href="#">Anchor</a>
Solution
Anchor

To have an html element fire a javascript event, you can either use the onClick attribute of the element and enter the javascript function directly in the attribute:
# html
Example
# javascript
function changeTab(e) {
e.preventDefault();
// do things
}
Or you can just do it in the javascript by hooking onto all elements that match a certain selector. This is the preferred method, as it doesn't mix the html and javascript, which makes it easier to understand what affects what.
# html
Example
# javascript
document.querySelectorAll('.js-change-tab').forEach( a => {
a.addEventListener('click', e => {
e.preventDefault();
// do things
});
});

Following worked for all browsers not to go to the top anymore:
Anchor

Use a JQuery callback to avoid event object issues
<script>
function changeTab(e){
e.preventDefault();
console.log("Changing tab");
}
$(document).on("click", ".nav-link", changeTab);
</script>
<a class="nav-link <?php if ($i == 1): ?>active<?php endif; ?> text-uppercase" data-toggle="tab" data-target="#<?php echo sanitize_title($tab['_title']); ?>" href="javascript:;"><?php echo $tab['_title']; ?> </a>

Pass the value when a <div> has onclick function and the data inside is changing dynamically

enter image description hereThis is my index_category.php.
<?php
include("db.php");
$sql="SELECT * from tcategory";
$conect= mysqli_query($conn, $sql) or die ("Failed To Connect.");
while($rows= mysqli_fetch_array($conect, MYSQLI_ASSOC)){ ?>
<div class="dialog-outer" data="<?php echo $rows['cat_id']; ?>" onclick="openNav()">
<div class="dialog-inner">
<?php echo $rows['cat_nm'];?>
</div>
</div>
<?php }
?>
This is the side nav to which I want to pass the data of div
<div id="mySidenav" class="sidenav">
<h3 class="sub"><i class="fa fa-arrow-right" aria-hidden="true"></i><strong> Sub Category</strong></h3>
×
<div id="result">
<?php include("functions/sub_category.php")?>
</div>
</div>
<script>
function openNav() {
$("#mySidenav").attr("style","width:250px");
var id=$(".dialog-outer").attr("data");
alert(id);
$.post('functions/sub_category.php',{id: id},function(data){
$('#result').html(data);
});
}
function closeNav() {
$("#mySidenav").attr("style","width:0px");
}
</script>
The problem is it is taking data=1 only but in network it showing as data=1 data=2 data=3 so on...
How to pass all the values from div in index_category.php to script in index.php
as u can see in the image i want to filter the sub category based on category. But when i click on any of the category it is taking only first value.But when u look in the image(inspect element) it is taking all the values as data=1 data=2 so on...when i click on category i want to get their respective id's.

If I understand correctly your your outer nav is repeated, that means that your $(".outer-nav") will return an array of elements not just one. You will need to iterate over them to read their data attributes. If you are looking to get just one specific one I would recommend using JQuery(since you are using it) selector for the click detection and from there working out the .outer-nav that you need.
Sorry if I did not understand your question correctly, but you use a weird mixture of pure JS and JQuery so it is a bit stange to read the code.

as #Aurus told, it is not only one element. You should modify like this:
===== 1st method =====
.... onclick="openNav(this)">
and the function too:
function openNav(element) {
...
var id=$(element).attr("data");
.....
}
===== 2nd method =====
<div class="dialog-outer" data="<?php echo $rows['cat_id']; ?>" onclick="openNav('oid_<?php echo $rows['cat_id']; ?>')" id="oid_<?php echo $rows['cat_id']; ?>">
and the function too:
function openNav(id) {
...
var id=$("#"+id).attr("data");
.....
}

How to insert PHP snip into a Javascript script

The variable in $pieces[12] is the url of an image on my server, some times when the page loads there is a broken image. My script is suppose to find the broken image error if there is one and replace it with $pieces[12] again. If that sounds right. But I don't know how to do it with my code.
<div class="right_ad" id="right_ad">
<script>
<img src="<?php echo $pieces[12]; ?>"
onError="this.onerror=null;this.src='<?php echo $pieces[12]; ?>';"
style="width: 100%;max-height: 100%"/>
</script>
</div>

You should urlencode those values. My tip is that there are special values in your filenames.

function onError_run_this_func(){
//get your new image url with ajax function
//or if you already have it in $pieces[12] then use it.
$.('.image-class).attr('src', '<?php echo $pieces[12]; ?>');
}
<div class="right_ad" id="right_ad"><script><img class="image-class" src="`<?php echo $pieces[12]; ?>" onError="onError_run_this_func()" style="width: 100%;max-height: 100%"/></script> </div>`

JQuery .click doesn't work with php file

I have a website which connects to a database and displays some pictures. I want to make it so that when you click one of the pictures, it will display an alert but that doesn't seem to work when the images are dynamically rendered. Whenever i try it on jsbin it works but when i try it with a php file it doesn't. I am using jquery and bootstrap.
JSbin: http://jsbin.com/xamovudiroqe/2/
PHP code
while($i > $y){
$picture_query = mysqli_query($link, "SELECT * FROM images WHERE team = '$full_table_array[$y]' AND teamphoto = 1");
$picture_array = mysqli_fetch_array($picture_query);
echo "
<div data-team=\" ".$picture_array['team']." \" class=\"col-xs-6 col-md-3\">
<a href=\"#\" class=\"team-nail thumbnail\">
<img src=\" ".$picture_array['name']." \" >
</a>
</div>
";
$y++;
}
Javascript code
$(".team-nail").click(function() {
var team = $(this).attr('data-team');
alert(team);
alert("hi");
console.log(team);
});

I see the problem. You are adding the click event to the anchor element, but the data-team attribute is on the div element. All you need to do is move the data-team attribute the anchor and it will work like a charm.
echo "<div data-team=\" ".$picture_array['team']." \" class=\"col-xs-6 col-md-3\">
<a href=\"#\" class=\"team-nail thumbnail\">
<img src=\" ".$picture_array['name']." \" >
</a>
</div>";
To:
echo "<div class=\"col-xs-6 col-md-3\">
<a href=\"#\" data-team=\" ".$picture_array['team']." \" class=\"team-nail thumbnail\">
<img src=\" ".$picture_array['name']." \" >
</a>
</div>";

javascript foreach loop values

I am new to this and I am struggling with one thing for such a long time...
I use foreach loop to show all images in a list, that works fine.
<?php
foreach($listImages as $image) {
?>
<a href="#" class="show_hide" title="<?php echo $image; ?>" >
<img src="foto.php?file=<?php echo $image; ?>" alt="building thumb"/>
</a>
<?php
}
Then I use simple show and hide script that looks like this:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
Finally, when I use div slidingDiv, it works as I expect, but I also need to know name of the image I clicked on but I really don't know how to do that.
<div class="slidingDiv">
!!! I need to know $image from the foreach loop here !!!
</div>
Thank you for your help!