I am building a website in which left side is restaurant name and in right side there is anchor link button.All button are produced from a single link inside a while loop.
while($dt=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
<a class='morebtn hvr-rectangle-in' href='#'>Menu!</a>
}
All anchor button is same so how to know which button is get selected so that I can display menu page for that restaurant.
Change your code to this
$i = 0;
while($dt=mysqli_fetch_array($res,MYSQLI_ASSOC))
{
echo "<a class='morebtn hvr-rectangle-in' id = 'a_'.$i href='#'>Menu!</a>";
$i++;
}
And then write javascript like this
<script type = "text/javascript">
$(document).ready(function(){
$('.morebtn hvr-rectangle-in').click(function(){
var myId = this.id;
//alert(myId);
});
});
</script>
then use that id.
I don't know if I understand your problem correctly.
Maybe you can do it in JS using scrollspy.
Example:
http://getbootstrap.com/javascript/#scrollspy
Related
I can't find/think of a way to solve this problem.
I have a list of links outputted by a php script and I need to get the text value from the item (link) that's been clicked.
Here is the php part that outputs data:
$query = mysql_query("SELECT NAME FROM ccm WHERE NAME LIKE '$value%'");
while( $run = mysql_fetch_array($query)){
$name = $run['NAME'];
echo '<a id="rez_link" onClick="klik();">'.$name.'</a>';
}
And here are some of my attempts to fetch the .text() from the link that's been clicked:
var value = $('a#rez_link').text(); //this one targets every text if there are multiple search result from the query
var value = jQuery(this).find("a").text(); //this one returns nothing
So how do I do it?
Maybe I should modify the php script so that it outputs new links with id=""+i and then target them like that in jQuery or something like that.
Is there a simple way to do this?
You can't have more anchor tags with same id
echo '<a id="rez_link" onClick="klik();">'.$name.'</a>';
it's better to use class instead
echo '<a class="rez_link">'.$name.'</a>';
$(function() {
$(".rez_link").on("click",function()
{
var text = $(this).text();
alert(text);
}
});
$(function() {
$('.rez_link').bind('click', function(e) {
e.preventDefault();
var linkText = $(this).text();
$('#show').text(linkText);
});
});
It's this what you try to do ?
In my jquery mobile app, when I click a list element, I get the id of that element. Now I want to pass that id to another page so I can make a query to the database. What would be the best way to achieve this? I tried with a form to post the id, but I don't want a form with a submit button on the page. I also tried using sessionStorage, but I am unsure how to use it properly. Presently, when I click a list element, an alert shows me the id of that selected list element.
<script>
$(document).ready(function(){
$("li").click(function() {
var journeyID = this.id;
sessionStorage.journeyId = journeyID;
alert(sessionStorage.journeyId);
var j = getElementById(journeyDetailsForm);
j.innerHTML = journeyID;
//document.forms["journeyForm"].submit();
});
});
</script>
If you know the url of the page
$("li").on("click",function(){
var url = "example.com/page.php",
id = this.id;
window.location= url + "?id=" + id;
});
I am trying to show a jQuery alert by hovering on different links with different ids.
I want to tailor the alert based on each link hovered over. These links are created dynamically from a table...
Each link has a different id attribute, so I was thinking to have alert for each without having to click on the link.
For example: a link might have index.php?id=1 So I want to show an alert on hover that says This is an alert for link 1, etc.
Edit 1:
The div:
echo '<div class="trigger">';
echo "<a class='trigger' href='".INDEX.'?categ='.$_GET['categ'].'&action='.$_GET['action'].'&subaction=viewlevels'.'&levelid='.$compi['Competence_ID']."'>";
echo '<img class="linkki" src="'.KUVAT.'paivita.gif" alt="'._("tiedot").'" title="'._("What is this?").'"/></a>';
echo '<div id="pop-up">';
echo" <h3>Pop-up div Successfully Displayed for".$_GET['levelid'].
"</p></div>";
Edit 2:
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.5.0/jquery.min.js"></script>
<script type="text/javascript">
$('.trigger').mouseover(function() {
alert("You are hovering over " + $(this).attr('href').match(/id=([0-9]+)/)[1]);
});
</script>
But it always tells me that levelid is undefined..( of course because the form has not been sent)
Yes, you can use jQuery's mouseover() for this:
$('.trigger').mouseover(function() {
alert("This is an alert for link " + $(this).attr('href').match(/id=([0-9]+)/)[1]);
});
You should change from using ID's to using a common class.
to bind jquery function on a link over of container child element use below code
$(document).ready(function(){
jQuery("#container a").each(function() {
jQuery(this).mouseover(function() {
alert(jQuery(this).attr('href'));
});
});
});
$('#aid').mouseover(function(){alert('whatever you want'+this.id)});
documentation http://api.jquery.com/mouseover/
You can also use .hover and that has two callback one when hover-over and one for hover-out.
$('a').hover(function(){
alert($(this).attr('href'));
},function(){
alert('hover out');
});
If you are creating links dynamically, then associate attribute class (say sampleclass) and attribute id as (concatenate "link " and id value from database) with each link
Now
$(document).redy(function(){
$(".sampleclass").hover(function(){
alert("This is " + $(this).attr("id"));
});
});
I've got this lines of code that, when the user clicks on the link, the page should scroll down to the respective anchor.
Turns out that it only works with the first link. The others just fire this exception
Uncaught TypeError: Cannot read property 'slice' of undefined
Here's the code
jQuery
$(document).on('click','#scrollTo',function(){
var to = $(this).attr('class');
//alert(to);
//This allways print the correct class name
$(window).scrollTo('div #'+to,'1000');
});
PHP
<ul id="source">
<?php
$sourceRCS = $source->getAllSources();
foreach($sourceRCS as $src)
{
echo '<li data-value="'.$src->name.'">'.$src->name.'</li></a>';
}
?>
</ul>
foreach($sourceRCS as $src)
{
echo '
<div class="custom-label-src">
<div id="'.$src->name.'" class="span12 label-title-src">
'.$src->name.'
</div>
</div>';
}
What am I doing wrong?
Thank you in advance
ID's are supposed to be unique, but you repeat #scrollTo. Try using a CSS class as your target instead.
var to = $(this).attr('class');
$(window).scrollTo('div #'+to,'1000');
You are selecting a class and assigning it to "to". Then you take the class and convert it into an ID in the next line.
Your selector should be like this:
var to = $(this).attr('class');
$(window).scrollTo('div .' + to,'1000');
Html Id's have to be unique. Like previously suggested, try using classes instead. Also, try capturing the event target and scrolling to it:
$(document).click(function(evt){
var target = evt.target;
$(window).scrollTo(target, 1000);
});
However, this will scroll to everything that a user clicks on. A better solution is to set up click event handlers on only the anchor tags that you want to scroll to:
$("#source a").click(function(evt){
evt.preventDefault();
var target = $(evt.currentTarget);
$(window).scrollTo(target, 1000);
// More code here...
});
I have a page where ID is generated dynamically and be fetch from database and I put the result inside <a> tag :
<?php while($row = mysql_fetch_array($result))
{ ?>
ID Number 1<br />
ID Number 2
<?php } ?>
and when user click the link, the javascript myfunc() function will be trigger.
function myFunc(){
$("#div").load("get_id.php?","id="+"SHOW THE $row['id'] HERE"); }
But I don't know how to retrieve href value and put it inside the load() method. Can someone show me the correct way?
Thank you
-mike
Make sure that you generate a complete href attribute:
ID Number 1
and then attach a click handler unobtrusively (don't mix markup and javascript):
$(function() {
$('a').click(function() {
$('#div').load(this.href);
return false;
});
});