Question

I’m trying to run an update script from my jquery application when the user presses the friendConfirm button. What’s going on is that when I press this button my server is redirected to the root of my domain with the number 4. (cca:8888/4) I’m not quite sure why this is happening and what I’m doing wrong after some investigation of the jquery manual and online tutorials.

here is my code:

$(document).ready(function(){
$(".friendAdded").css('display', 'none');
var frid = $(".friendRequest").attr('id');
$(".friendConfirm#"+frid).click(function(){
    $.get("JSON/addFriend.php?fid="+frid,
        function(data){
        $(".friendAdded").append(data);
        $(".friendAdded").show() })
});

});

this is where the button is coming from

    $requestInfo .= "<div class='friendRequest'id='{$rowID}'>";
        $requestInfo .= "<img src='{$row['fb_pic']}' alt='{$row['fn']}'/> ";
        $requestInfo .= $row['fn'];
        $requestInfo .= "<a id='{$rowID}'class='friendConfirm'href='{$row['fb_id']}' style='border:1px solid #dadada; 
        background:#fff; margin-left: 10px;
        line-height: 60px; padding: 4px 4px; color:gray; 
        text-decoration:none;'>Confirm</a></br></div>";
        $rowID += $rowID;

HTML

    <div class="friendAdded"
style="position: fixed; top:25%; background-color: gray; left:30%; right:50%; width: 300px; text-align: center;">
You have added whatever as a friend.
</div>
<h3>Pending Friend Requests:</h3><div class='friendRequest' id='0'><img src='[url]' alt='Charles Williamson'/> Charles Williamson<a id='4' class='friendConfirm' href='#' 
        style='border:1px solid #dadada; background:#fff; margin-left: 
        10px; line-height: 60px; padding: 4px 4px; color:gray; text-decoration:none;'>
        Confirm</a></br></div><h3>Friends</h3>
<img src ='[url]' alt = 'Marc Foster' /></img>  Marc Foster</br><img src ='[url]' alt = 'James Bond' /></img>  James Bond</br><img src ='[url]' alt = 'Rachel Cole' /></img>  Rachel Cole</br></b|||o|dy>

thanks for the help

Answer 1

Just try this

$(".friendConfirm#"+frid).click(function(e){
    e.preventDefault(); // prevents the default action
    // Rest of your code
});

Also you have some errors in your $requestInfo string, make it look like as follows

$requestInfo .= "<div class='friendRequest' id='".$rowID."'>";
$requestInfo .= "<img src='".$row['fb_pic']."' alt='".$row['fn']."'/> ";
$requestInfo .= $row['fn'];
$requestInfo .= "<a id='".$rowID."' class='friendConfirm' href='".$row['fb_id']."' style='border:1px solid #dadada; background:#fff; margin-left: 10px; line-height: 60px; padding: 4px 4px; color:gray; text-decoration:none;'>Confirm</a></br></div>";
$rowID += $rowID;