I have a mySQL database table with events , artists, time , date, etc.
CREATE TABLE IF NOT EXISTS `wp_artists` (
`artist_id` int(10) NOT NULL,
`artist_name` varchar(255) NOT NULL,
`artist_info` varchar(1000) NOT NULL,
`date` varchar(35) NOT NULL,
`time` varchar(10) NOT NULL,
`venue` varchar(100) NOT NULL,
`pic` varchar(100) NOT NULL,
`video` varchar(200) NOT NULL,
`book_url` varchar(100) NOT NULL
)
Then I have a page which lists these events through a query.
global $wpdb;
$results = $wpdb->get_results("SELECT * FROM wp_artists", ARRAY_A);
foreach($results as $row) {
$artist_id = $row['artist_id'];
$artist_name = $row['artist_name'];
$artist_info = $row['artist_info'];
$date = $row['date'];
$time = $row['time'];
$venue = $row['venue'];
$pic = $row['pic'];
$fee = $row['fee'];
print ("<div class=event_float>");
print ("<div class=event>".$date."</div><img class=aligncenter size-full wp-image-1652 src=".$pic." />
<h4> ".$time." </h4><h2>".$artist_name."</h2><strong>".$venue."</strong><i>".$fee."</i><a href=".$book_url." target=_blank><img src=http:# alt=book now width=64 height=22 /></a>
<div class=infoEvent><h4>Artist Info</h4></div></div>");
}
?>
I have a jquery dialog set up to load more info for the selected event when clicked on.
<script>
$( function() {
$( "#blu" ).dialog({
autoOpen: false,
width: 925,
height: 800,
modal: true,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( ".infoEvent" ).on( "click", function() {
$( "#blu" ).dialog('open');
});
} );
</script>
<?php
global $wpdb;
$myData = $wpdb->get_results($wpdb->prepare("SELECT * FROM wp_artists WHERE artist_id = ????", ARRAY_A));
foreach($myData as $row){
$artist_id = $row->artist_id;
$artist_name = $row->artist_name;
$info = $row->artist_info;
$venue = $row->venue;
$date = $row->date;
$time = $row->time;
$pic = $row->pic;
$video = $row->video;
$book_url = $row->book_url;
print ("<div id=blu style=background-color: #ff0000");//url(".$pic.") top no-repeat>
print ("<table border=0 class=table>");
print ("<tr><td colspan=5 valign=top><h3>".$artist_name."</h3><br><b>".$date."</b> ".$time." <h4>".$venue."</h4></td>
</tr>
<tr>
<td rowspan=2 valign=top><div class=tryer><img class=aligncenter size-full wp-image-1676 src=".$pic." /></div><br><div class=tryer2><iframe width=320 height=115 src=".$video."frameborder=0 allowfullscreen></iframe></div></td>
<td rowspan=2 valign=top> </td>
<td valign=top></td>
<td rowspan=2 valign=top> </td>
<td rowspan=2 valign=top></div></td>
</tr>
<tr>
<td valign=top><div class=boxer><p>".$info."</p></div><br><div class=tryer3> <a href=".$book_url." target=_blank><img src=http:# alt=book now width=64 height=22 /></a>
</div></td>
</tr>
</table>");
print ("</div>");
}
How can I get the selected event ($artist_id) into the query (SELECT * FROM wp_artists WHERE artist_id = ????") from the click of a button(Artist Info) to populate the jquery dialog?
I have been on this for hours now and I think I'm getting to complicated with the solutions, I think it should be simple but I've tested a few things, i.e. making it a form, putting query's onto separate pages, etc.
All help will be greatly appreciated and thank you in advance.