I am trying to get value of linl which is generated from db using while loop.
When I prees on the link it should show alert window with its name.
while($trackResultRow = mysqli_fetch_assoc($trackResult)){?>
<li>
<a href="#" class="rem"
data-userid="<?php echo $trackResultRow['username']?>"
data-track="<?php echo $trackResultRow['track_name']?>">
<span class="glyphicon glyphicon-thumbs-down pull-right"></span>
</a>
<a href="<?php echo $trackResultRow['track_path']?>">
<span><?php echo $trackResultRow['username']?></span> -
<span><?php echo $trackResultRow['track_name']?></span>
</a>
<hr/>
</li>
<hr>
<?php
}
?>
And Jquery code
$(function() {
$(".rem").on("click", function(e) {
e.preventDefault();
var $link = $(this), // save for later
username = $(this).data("userid"),
track = $(this).data("track");
return alert (username);
});
});
But it does not work....Can anybody help me to fix this code?
You code is working for me, however I noticed that your two anchor tags are very close to each other. Are you adding event listener to first anchor tag and clicking on second? See example code below
$(function() {
$(".rem").on("click", function(e) {
e.preventDefault();
var $link = $(this), // save for later
username = $link.data("userid"),
track = $link.data("track");
return alert(username);
});
});
.glyphicon:after {
content: 'Icon'
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<ul>
<li>
<a href="#" class="rem" data-userid="USERNAME" data-track="TRACK_NAME">
<span class="glyphicon glyphicon-thumbs-down pull-right "></span>
</a>
<a href="track_path">
<span>username</span> -
<span>track_name</span>
</a>
<hr/>
</li>
<li>
<a href="#" class="rem" data-userid="USERNAME" data-track="TRACK_NAME">
<span class="glyphicon glyphicon-thumbs-down pull-right "></span>
</a> -
<a href="track_path">
<span>username</span> -
<span>track_name</span>
</a>
<hr/>
</li>
</ul>
Related
HTML
<?php $var = 1; include('PHP/NavigationBar.php'); ?>
Navigation.php
<div class="sidenav">
<h5>JavaScript</h5>
<button class="w3-button w3-theme w3-block w3-left-align w3-padding-small"
onclick="myAccFunc('1')"> Main Heading <i class="fa fa-caret-down"></i></button>
<div id="1" class="w3-blue w3-hide w3-card" >
<a class="<?php echo (($var==1)?'active':'');?>" href="Page1.php">Page 1</a>
<a class="<?php echo (($var==2)?'active':'');?>" href="Page2.php">Page 2</a>
<a class="<?php echo (($var==3)?'active':'');?>" href="Page3.php">Page 3</a>
<a class="<?php echo (($var==4)?'active':'');?>" href="Page4.php">Page 4</a>
</div>
</div>
Here is my Navigation Menu. Currently with just 4 items and the Class="Active" represents the active Page
So if the user is on page 2, the page 2 on the Nav will be highlighted with that Class
This works completely fine but i have to shift from PHP to JavaScript
So the HTML Line becomes
<script type="text/javascript" src="PHP/Navigation.js"></script>
I can get the current URL by window.location.href
How do i pass this to the JS File and How do i include the HTML Contents in a JS File (Currently PHP File)?
I have put all the Weblinks in an Array in the JS file. So what do i do next to achieve the same thing i achieved using PHP and HTML but with JavaScript and HTML.
I just need to Import the Nav Menu and Highlight the Current Site using JavaScript
It took me time to understand your expectations but now here is your Navigation.js
var activeClass = new Array(4);
if(window.location.href.includes('Page1.php')) {
activeClass[0] = 'active';
} else if(window.location.href.includes('Page2.php')) {
activeClass[1] = 'active';
} else if(window.location.href.includes('Page3.php')) {
activeClass[2] = 'active';
} else if(window.location.href.includes('Page4.php')) {
activeClass[3] = 'active';
}
document.write('<div class="sidenav"><h5>JavaScript</h5>'+
'<button class="w3-button w3-theme w3-block w3-left-align w3-padding-small" onclick="myAccFunc(1)">'+
' Main Heading <i class="fa fa-caret-down"></i></button><div id="1" class="w3-blue w3-hide w3-card" >');
document.write('<a class="'+activeClass[0]+'" href="Page1.php">Page 1</a>');
document.write('<a class="'+activeClass[1]+'" href="Page2.php">Page 2</a>');
document.write('<a class="'+activeClass[2]+'" href="Page3.php">Page 3</a>');
document.write('<a class="'+activeClass[3]+'" href="Page4.php">Page 4</a>');
document.write('</div></div>');
I have a form for a switch-styler system
<form method="post" action="index.php">
<input type="submit" name="switchstyle" value="Changer de style" />
<select name="css">
<option value="meteobell">Météobell</option>
<option value="noir">Sombre</option>
<option value="blanc">Blanc</option>
<option value="alternance">Jour Blanc / Nuit Sombre</option>
</select>
but I have since gone through a menu in jQuery bootstrap and would like to change it in this form:
<ul class="dropdown-menu ">
<form name="switchstyle" id="switchstyle" method="post" action="index.php">
<input type="hidden" name="css" id="css" value="" />
<li >
<a href="#" data-value="meteobell" data-target="#sidebar-left" data-toggle="push">
Météobell
</a>
</li>
<li>
<a href="#" data-value="noir" data-target="#sidebar-left" data-toggle="push">
Sombre
</a>
</li>
<li>
<a href="#" data-value="blanc" data-target="#sidebar-left" data-toggle="push">
Blanc
</a>
</li>
<li >
<a href="#" data-value="alternance" data-target="#sidebar-left" data-toggle="push">
Jour Blanc / Nuit Sombre
</a>
</li>
</form>
</ul>
<script>
$(function() {
$('.dropdown-menu li a').click(function() {
$('#css').val($(this).data('value'));
$('#switchstyle').submit();
});
});
</script>
and obviously it does not work. Here the PHP code from the style switcher, but the problem is not here.
<?PHP
if(isset($_POST['switchstyle']))
{
if(file_exists("./css/".$_POST['css'].".css")
{
setcookie('css', $_POST['css'], time()+(365*24*3600));
$switchcss = $_POST['css'];
}
}
elseif(isset($_COOKIE['css']))
{
$switchcss = $_COOKIE['css'];
}
else
{
$switchcss = "meteobell";
}
?>
In fact I want only submit the data-value in a $_POST, but not in a first form select html. I want submit my $_POST value with the Bootsrap dropdown-menu.
The solution:
In the PHP code replace:
if (isset ($ _ POST ['switchstyle']))
by
if (isset ($ _ POST [ 'css']))
We then shifts the name = "css" from the select to the input:
<form id = "switchstyle" method = "POST" action = "index.php">
<input id = "css" name = "css" type = "hidden">
and we add an onclick in the link by removing the href = "#" (otherwise it not works):
<li>
<a onclick="$('#css').val('meteobell'); $('#switchstyle').submit()" data-target="#sidebar-left" data-toggle="push">
Météobell
</a>
</ li>
If it can save others time ...
I have a sidebar drop-down menu, which is being operated using jquery, but when user clicks on the item the page refreshes and the menu collapses. To solve this,that is to keep it expanded, I decided to compare the REQUEST_URI with menu item URL, if found I will trigger the click event. To accomplish this I used the snipped
$("a[href='<?php echo $citems->url;?>']").parents("li").parents("ul.dropdown-menu").prev(".dropdown-toggle").trigger("click");
Which works for all item except for a particular item which appears at third last position in menu item list. Below is the code I am executing in which I am facing the issue:
<nav class="navbar navbar-default sidebar" role="navigation">
<div class="container-fluid">
<div class="navbar-header">
<button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#bs-sidebar-navbar-collapse-1">
<span class="sr-only">Toggle navigation</span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
<span class="icon-bar"></span>
</button>
</div>
<div class="collapse navbar-collapse" id="bs-sidebar-navbar-collapse-1">
<ul class="nav navbar-nav asurion-sidebar" >
<?php
$nav_menu_items = wp_get_nav_menu_items( 'left-sidebar' );
$menu_items = wpse170033_nav_menu_object_tree( $nav_menu_items );
$parents = get_post_ancestors( $post->ID );
foreach($menu_items as $items)
{
$parents1 = get_post_ancestors( $items->ID );
if(count($items->children) > 0)
{
?>
<li class="dropdown first-level">
<i class="fa <?php echo $items->classes[0];?>" aria-hidden="true"></i><?php echo $items->post_title;?> <i class="fa fa-angle-down menu-arrow" aria-hidden="true"></i>
<ul class="dropdown-menu forAnimate" role="menu">
<?php
foreach($items->children as $citems)
{
if(count($citems->children) > 0)
{?>
<li class="dropdown thirdlevel ">
<a style="cursor:pointer" class="dropdown-toggle naveen" data-toggle="dropdown-submenu"><i class="fa <?php echo $citems->classes[0];?>" aria-hidden="true"></i><?php echo $citems->post_title;?><i class="fa fa-angle-down menu-arrow" aria-hidden="true"></i></a>
<ul class="dropdown-submenu forAnimate lastlevel" role="menu">
<?php
foreach($citems->children as $ccitems)
{
if(strpos($ccitems->url,'localhost')){
$sea_domain = 'localhost';
}elseif(strpos($ccitems->url,'asurion.com')){
$sea_domain = 'asurion.com';
}
$compareUrl = explode($sea_domain,$ccitems->url) ;
if($_SERVER['REQUEST_URI'] == $compareUrl[1]){
?>
<script>
$(document).ready(function(){
$("a[href='<?php echo $ccitems->url;?>']").parents("li").parents("ul.dropdown-submenu").prev("a[data-toggle='dropdown-submenu']").trigger("click");
});
</script>
<?php }
echo "<li><a target='".$ccitems->target."' href='".$ccitems->url."'>".$ccitems->post_title."</a></li>";
}
?>
</ul>
</li>
<?php
}
else
{
if(strpos($citems->url,'localhost')){
$sea_domain = 'localhost';
}elseif(strpos($citems->url,'asurion.com')){
$sea_domain = 'asurion.com';
}
$compareUrl = explode($sea_domain,$citems->url);
echo "<li><a target='".$citems->target."' href='".$citems->url."'>".$citems->post_title."</a></li>";
if($_SERVER['REQUEST_URI'] == $compareUrl[1]){
?>
<script>
$(document).ready(function(){
$("a[href='<?php echo $citems->url;?>']").parents("li").parents("ul.dropdown-menu").prev(".dropdown-toggle").trigger("click");
});
</script><?php
}
}
}
?>
</ul>
</li>
<?php
}
else
{
if(get_the_title($post->ID)=="Dashboard" && $items->post_title=="Home" && count($parents)==0)
{
echo "<li class='active'><a target='".$items->target."' href='".$items->url."'> <i class='fa ".$items->classes[0]."' aria-hidden='true'></i>".$items->post_title."</a></li>";
}
else
{
echo "<li><a target='".$items->target."' href='".$items->url."'> <i class='fa ".$items->classes[0]."' aria-hidden='true'></i>".$items->post_title."</a></li>";
}
}
}
?>
</ul>
</div>
</div>
</nav>
Any Help would be appreciated.
Here is array being iterated for sidebar menu:Array, Here in the array one of the item for which the jquery snippet is failing is under "Device" > "Phone Simulators"
This is the Extracted HTML code from Source Code (It doesnt contain js code as fiddle doesnt allow js code to be writtent in html section, to find JS code, scroll above)
I can't imagine that why you output
<script>
$(document).ready(function(){
$("a[href='<?php echo $ccitems->url;?>']").parents("li").parents("ul.dropdown-submenu").prev("a[data-toggle='dropdown-submenu']").trigger("click");
});
</script>
in a loop, it will make your HTML code looks messy. and you should not output so many $(document).ready(...) at all.
you can give your <A /> a special className like 'xxx', and output the script code before </body>.
<script>
$(document).ready(function(){
$("a.xxx").parents("li").parents("ul.dropdown-submenu").prev("a[data-toggle='dropdown-submenu']").trigger("click");
});
</script>
it's a little better.
and if you want to keep the menu's status, you should use cookie or localStorage, not by this way.
and jsfiddle want you separate your html, css, js code, but through your way, your html and js can't be separated, it's not good. you can provide some css make the jsfiddle result page looks better, it can helps someone to understand your structure.
I have this javascript function which should redirect me to
http://localhost:8888/ID OF A PRODUCT/add-to-cart".
But instead I got this:
http://localhost:8888/undefined/add-to-cart".
$('.add-to-cart').on('click', function () {
var productId = $(this).find('.indexImg').attr('id');
$.ajax(productId+"/add-to-cart",
{
});
});
<img class="indexImg" src="{{$product->image}}" id="{{$product->id}}">
Can someone help me to get ID of a product ?
HTML:
#foreach($products as $product)
<div class="col-md-3">
<div class="box-product">
<div class="img-wrapper item">
<a href="/product/{{$product->id}}/{{$product->slug}}">
<a class="thumbnail" href="/product/{{$product->id}}/{{$product->slug}}" style="margin-bottom: 0px; border: none;">
<img class="indexImg" src="{{$product->image}}" id="{{$product->id}}">
</a>
</a>
<div class="tags">
#if($product->discount > 0)
<span class="label-tags"><span class="label label-danger">Išpardavimas</span></span>
#endif
<span class="label-tags"><span class="label label-info">Nauja</span></span>
</div>
<div class="option">
<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white"></i>
</div>
</div>
Do one thing
Change
<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white"></i>
With
<i class="fa fa-shopping-cart add-to-cart" aria-hidden="true" style="color: white" id="{{$product->id}}"></i>
and get by
$(this).attr('id');
So the code will be
$('.add-to-cart').on('click', function () {
var productId = $(this).attr('id');
$.ajax(productId+"/add-to-cart",
{
});
});
$('.add-to-cart').on('click', function (event) {
var productId = event.target.id;
$.ajax(productId+"/add-to-cart",
{
});
});
.find is try to find inside current element u need to go up then find indexImg
$('.add-to-cart').on('click', function () {
var productId = $(this).parents('.box-product').find('.indexImg').attr('id');
$.ajax(productId+"/add-to-cart",
{
});
});
The way you are trying to get product ID based on DOM is incorrect. The jQuery .find() method looks for specified elements within the elements, i.e. its descendants. If you look at the HTML, you'll see that the div elements containing the add-to-cart button and the image whose id attribute you are trying to fetch are on the same level.
So you've got to change the way you are traversing to reach the id attribute of the <img> tag.
var productId = $(this).closest('.box-product').find('.indexImg').attr('id');
I want to update the click event of the hyperlink onClick and want to update the html inside the hyperlink in jquery
HTML
<a class=" save" href="javascript:void(0);" onclick="save_unsave('unsave','UID','ID',this);">
<div class="jopt_iconwrap" title="Unsave" alt="Unsave" >
<span class="saved"></span>
</div>
Unsave
</a>
Now onlick of save_unsave function i want to update the html design as below:
<a class=" save" href="javascript:void(0);" onclick="save_unsave('save','UID','ID',this);">
<div class="jopt_iconwrap" title="Save" alt="Save" >
<span class=""></span>
</div>
Save
</a>
I am trying to do this in the function:
jQuery
if(type == 'save')
{
var new_type = "'unsave'";
jQuery(elem_obj).html("");
jQuery(elem_obj).html('<a onclick="save_unsave('+new_type+','+uid+','+id+',this);" class="saved" href="javascript:void(0);"><div class="jopt_iconwrap" title="Unsave" alt="Unsave"><span class="saved"></span></div>Unsave</a>');
}
else if(type == 'unsave')
{
var new_type = "'save'";
jQuery(elem_obj).html("");
jQuery(elem_obj).html('<a onclick="save_unsave('+new_type+','+uid+','+id+',this);" class=" save" href="javascript:void(0);"><div class="jopt_iconwrap" title="Unsave" alt="Unsave"><span class="mico"></span></div>Save</a>');
}
How can we do this in jquery.Please help me in the i have the elmenet object in the function.
simply i will suggest you to use replaceWith() in place of .html() it will work properly for you.
$('a').click(function() {
if ($(this).hasClass('save')) {
$(this).removeClass('save').addClass('unsave');
$(this).text('Unsave')
$(this).attr('id','save')
} else {
$(this).removeClass('unsave').addClass('save');
$(this).text('Save')
$(this).attr('id','unsave')
}
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<a class=" save">
<div class="jopt_iconwrap" title="Save" alt="Save">
<span class=""></span>
</div>
Save
</a>
Try this way
You can replace the onclick event, like this:
$('.save')[0].onclick = function() {
save_unsave('save', 'UID', 'ID', this);
}