Michael Cooper Michael Cooper - 2 months ago 10
Ajax Question

how to get and pass a link parameter using html and javascript

i am wondering how to i pass an album ID# in the "include" url from ajaxbtn.php in this tab to the file that actually requests the URL


  1. home.php:
    HTML:
    <a href="javascript:;" id="album" class="ajax_tab">ALBUM ID #22</a>



JAVASCRIPT:

$( document ).ready(function GoAlbum() {
//alert("pageload event fired!");
$.ajax({
url: 'assets/ajaxbtn.php',
type: 'POST',
data: {
action:'album'
},
success: function(response){
//alert(response);
$("#content").html(response);
$("#loading_image").hide();
window.history.pushState("object or string", "Title", "/album");
}
});


now i have another files that handles the actions of the tabs

ajaxbtn.php:

if($_POST['action'] == 'album'){
include("http://gypsychristiannetwork.com/assets/album.php?AlbumID=22");
}


And this would be the content for album.php

if(isset($_GET['AlbumID'])){
$AlbumID = $_GET['AlbumID'];
echo '<h1>TEST: '.$AlbumID.'</H1>';
}


as you can see here "id" is already being used by the html link, and href is set to javascript

so i'm not exactly sure what direction to go into to find a resolution to this

Thank you for your help

Answer

In your ajax call, you could add:

id: 22

So it would be:

$.ajax({
        url: 'assets/ajaxbtn.php',
        type: 'POST',
        data: {
            action:'album',
            id: 22,
        },
        success: function(response){
            //alert(response);
            $("#content").html(response);
            $("#loading_image").hide();
            window.history.pushState("object or string", "Title", "/album");
        }

And then in the PHP file:

if($_POST['action'] == 'album'){
   include("http://gypsychristiannetwork.com/assets/album.php?AlbumID=".$_POST['id']);
}

And if you need the id coming from the HTML part:

<a href="javascript:;" id="album" data-album-id="22" class="ajax_tab">ALBUM ID #22</a>

And then, in the ajax call:

data: {
    action:'album',
    id: $(this).attr("data-album-id"),
},