Jump to content
Sign in to follow this  
ArtPur

Help with svg php AJAX website. 1st site.

Recommended Posts

Great site!, Im trying to understand a bit more pdo.. I have the following:

 

I have a svg and when I click on the map the country name is loaded into a var on the click event by the code below:

<script>
function fill_contact(evt) //display click event
{
var country_id = evt.target.id
document.getElementById('country_name').firstChild.data = country_id
}
</script>

My php code is as follows:

<?php
//Define constants
define('DB_DRIVER', "mysql");
define('DB_SERVER', "127.0.0.1");
define('DB_DATABASE', "aeea");
define('DB_USER', "root");
define('DB_PASSWORD', "root");

//Database connection
try {
      $dbh = new PDO(DB_DRIVER . ":dbname=" . DB_DATABASE . ";host=" . DB_SERVER, DB_USER, DB_PASSWORD);
      $dbh->setAttribute(PDO::ATTR_ERRMODE, PDO::ERRMODE_EXCEPTION);
} catch(PDOException $e){
     die("Sorry, we could not connect you to this database, please contact the Administrator to sort this out.". $e->getMessage());
}
               
//Get data         
$query = "SELECT firstname, lastname, email, photo FROM reps WHERE country like ?";
$country = 'country_name';

//Create the statement
$stmt = $dbh->prepare($query);
$stmt->execute(array($country));          

//Use data
                $row = $stmt->fetch(PDO::FETCH_ASSOC);                        
                                echo '<pre>', print_r($row), '</pre>';
                               
?>

My Html code is as follows:

<div id="IndexPage">
    <div id="IndexPage_Left">                    
                <div id="IndexPage_Left_top">
                                <h3>Country: <span class="label" id="country_name"> </span></h3><!—This works fine-->
                                <p></p>
                                <h4>Regional Representative: <span class="label" id="firstname"> </span></h3></h4><!--get Rep ” firstname, lastname” from database based on country from svg to display-->
                                <p></p>
                                <h4>Photo</h4><!--get Rep “photo” from database based on country from svg to display-->
                                 <p></p>
                                <input style='margin-top: 20px;' type="submit" value="Contact me." id='jqxSubmitButton' /><!-- if clicked, it opens a contact form below, the email address is hidden-->
                </div>
                <div id="IndexPage_Left_bottom">
                                <h4>email form here<h4><!-- if email is clicked, it opens a contact form here with “email” address from database -->
                </div>
     </div>
  <div id="IndexPage_Right">
                                <svg id="map" version="1.1" and rest of svg code.

My database has a table called reps. It had dta of representatives in each country in Africa. It has a number of fields ie. rep_id(unique indexed), firstname, lastname, email, postal, city, state, country, contact_no, photo etc.

 

I want to be able to get the fields in the database and display them in the html form on the click events. Ie. The database must also refresh the query every time a click event happens. Guests might click a few countries to look at reps. If they click off the map, it blanks out the details.
How do I go about doing this? I’ve heard about XMLHttpRequest but don’t know how to go about doing it.
Another question: Once I get the information, how do I display it correctly in the Html? I used <span>, but is it correct?
Last question: Once I get the information email address, how do I show a contact form on "conact me" button? and then when guests click on another country, remove the contact form?

 This is my first website.

 

Please help

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.

Sign in to follow this  

×
×
  • Create New...

Important Information

We have placed cookies on your device to help make this website better. You can adjust your cookie settings, otherwise we'll assume you're okay to continue.