building a dynamic website with javascript/jquery/php and storing the html in mysql

Question

I'm new to dynamic website coding, I have a project that eventually will scale quite large.

I am unable to get my javascript to pull from my external website html files or from my external PHP file I've created that pulls content from a mysql table. I also don't quite know how to convert my static implementation into a dynamic one, I've provided details below on both the static version and the partial working/incomplete dynamic version below.

point form process:

onclick javascript talks to php
php talks to mysql accessing the content requested
mysql sends back to php
php sends to javascript
javascript appends, prepends or loads(depending on what we want it to do) content into a specific DIV on webpage.

I had an example which somewhat worked for static html files:

HTML on the HTML page:

<a href="#" id="item1">item1</a>

DIV where content will load to:

<div id="content"></div>

javascript on the HTML page:

<script>
        $('#item1').click(function() {

            $.get("item1.html",function (test) { $("#content").prepend(test);});
        });
</script>

This above example works for staticly prepending code without clearing the 'content' DIV each time you click the link which is what we want. However when trying to convert this static setup to a dynamic setup we are unable to do so.

I have also tried the following javascript alteration just to see if we could load html from an external source but it fails to do so(Not sure why my javascript wont load external pages?):

<script>
            $('#item1').click(function() {

                $.get("http://localhost/item1.html",function (test) { $("#content").prepend(test);});
            });
    </script>

What I believe would be the ultimate solution for a dynamic looking structure would be something like:

NOTE DOES NOT WORK, JUST CONCEPT

HTML would show:

<a href="#" id="I8">item8</a>

javascript concept:

onclick of anchor link pass ID from the anchor to PageContent.php via PageContent.php?id=I8
wait for PHP PageContent.php to process request
php passes content back to javascript in the form of HTML and javascript then prepends/appends/loads the content to the #content DIV.

PHP PageContent.php INCOMPLETE:

<?php
$conn = mysqli_connect('localhost', 'user', 'pass', 'DB')
    or die("Unable to connect to MySQL");
echo "Connected to MySQL<br>";

$sql = "SELECT * FROM `content` where ID='<? ID VARIABLE that was passed from javascript HERE ?>';";
$result = mysqli_query($conn, $sql);
$resultarr = mysqli_fetch_assoc($result);
?>

I've never built php pages that you can pass information to and get a result from in this type of way where you have the '?ID='. How do you accomplish the passthrough of PageContent.php?ID=8

after a get on item1.html your running a php script. . try item1.php then after you select statement in mysql store it in array variable then return $mysqlData or echo $mysqlData — noobHere
– noobHere, Commented Dec 12, 2014 at 4:49
unfortunately that is not what I'm looking for. I'm trying to take HTML content that is stored in the MYSQL DB and pass it to PHP which passes it to javascript and updates the DOM accordingly. I'm not quite exactly sure what your explanation was getting at? — RCG
– RCG, Commented Dec 12, 2014 at 4:56

noobHere · Accepted Answer · 2014-12-12 05:13:04Z

2

let's say you have index.php where your content is. . then on getContent.php you have the mysql queries to get data on your mysql table

$(function(){
    $('#item1').click(function(){
     var id = 5; //id of your mysql table row
     $.get("getContent.php?id=" + id,function(response){
       $('#content').html(response); //append the data return from content.php
         });
       });
 });

then on your getContent.php

$id = $_GET['id'];
//then here is your mysql query getting data by it's ID and store it in a variable
// sample is $mysqlContentData

  echo $mysqlContentData; // and also try using return $mysqlContentData;

it will return your data from getContent.php to $.get function on your index.php

answered Dec 12, 2014 at 5:13

noobHere

2513 silver badges11 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

RCG Over a year ago

I think this may be close to what I want, I'm still quite new with the javascript/php programming and will try to implement it and get back to you. Thanks

Collectives™ on Stack Overflow

building a dynamic website with javascript/jquery/php and storing the html in mysql

What I believe would be the ultimate solution for a dynamic looking structure would be something like:

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

What I believe would be the ultimate solution for a dynamic looking structure would be something like:

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related