CODEWITHSUNDEEP
javascriptjqueryhtml
Adam Zeigler
Adam Zeigler

Reputation: 69

Capturing href and prevent event default

Not sure why the code is not working. The javascript is not printing the alert box nor preventing the event default. I was under the assumption that the data would load asynchronously keeping me on the same page.

<!DOCTYPE html> 
<html> 
<head> 
<title>Page Title</title>
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <script type='text/javascript' src='http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js'></script>
    <link rel="stylesheet" type="text/css" href="stylesheet.css">
</head>
<body>
<div data-role="page"> 
<div data-role="header"></div> 
    <div data-role="content">
        <p id = "heading">Is Nursing For You?</p>
        <br/>
        <div id = "div1" align="center"></div>
    </div> 
<div data-role="footer" id = "foot" data-position="fixed">
<table>
    <tr>
        <th><h1 id = "alignLeft">Future Goals</th></h1>
        <th><h1 id = "socialMediaText alignCenter">Get Social With Us!</h1>
</th>
        <th></th>
    </tr>
    <tr>
        <td id = "alignLeft">Telephone: 304-444-39876</td>
    <tr>
        <td = "alignLeft">Email: [email protected]</td>
    </tr>
    </tr>
</table>
</div> 
</div> 

This is where im having the trouble at. Not sure why the alert is not sending or redirecting me.
<script type='text/javascript'>
$(document).ready(function(){
$("#div1").load("FONWVhp.php");
    $('#div1').click(function(e){
    e.preventDefault();
    alert($(this).attr('href'));
});
});




    </script>

</body>
</html>

This is the Fp.php which is called when the page is loaded but once the page is loaded there are href's that are displayed. so when the person clicks the href the page will stay but the data will change and get the info coming from articles.php (at the bottom). 

$sqlPAQuery = "SELECT pages.pageId, pages.pageTitle FROM pages order by 
pages.pageId";
$paqueryResult = mysqli_query($conn,$sqlPAQuery);
while ($paqueryRow = mysqli_fetch_object($paqueryResult))
{


$pages = "<div class='center-wrapper'><a href = articles.php?
pageId=".$paqueryRow->pageId."><button class= center-wrapper'>".$paqueryRow-
>pageTitle."</button></a><br/><br/></div>";
echo $pages;

}

articles.php

$sqlARTICLEQuery = "SELECT * FROM articles where pageId=".$_GET['pageId']." 
order by articleId";
$articlequeryResult = mysqli_query($conn,$sqlARTICLEQuery);
while ($articlequeryRow = mysqli_fetch_object($articlequeryResult))
{
$articles ="<div id = 'div1' class='center-wrapper'><a href = 
article.php?articleId=".$articlequeryRow->articleId."><button id 
='wrapper'>".$articlequeryRow->articleTitle."</button></a><br/><br/></div>";

echo $articles;
}

Upvotes: 3

Views: 110

Answers (2)

karliwson
karliwson

Reputation: 3485

You need to wait for the div contents to load before manipulating it. Try this:

$(document).ready(function() {
    $("#div1").load('FONWVhp.php', function() {
        $('#div1 div.center-wrapper a button').click(function(event){
            event.preventDefault();
            alert($(this).parent().attr('href'));
        });
    });
});

Also, I've corrected some mistakes in your code:

  1. Instead of $('#div1').click(...) use $('#div1 div.center-wrapper a button').click(...).
  2. I suppose you want the anchor's href, so you need to use alert($(this).parent().attr('href')).

Upvotes: 3

Sharifur Robin
Sharifur Robin

Reputation: 325

just put an e / event in the function

<script type='text/javascript'>

 $(document).ready(function(){
     $("#div1").load("Fp.php"); 
     $('div.div1 a button').click(function(e){ 
         e.preventDefault(); 
         alert($(this).attr('href')); 
     });
 });
</script>

Upvotes: 0

Related Questions