How can I add php variables to this Javascript?

Question

I'm trying to build a simple news page with ajax filters depending on what category the user wants to see. The javascript below connects to a php file and outputs HTML with data from the mysql database. I need to know how to tell the JS to put the data from the "heading" column into a php variable so that it wraps it in the correct href link.

This is the php that creates the heading and the link

$data_fields = '`id`, `heading`, `date`, `copy`, `summary`, `article`, `press_release`, `video`';
$from = '`media`';

$news_result = $db->selectByStrings($data_fields, $from, $where_conditions, $order_by);
$news = $db->getAllRows($news_result);

foreach ($news as $new) {
    echo '<h2 class="news"><a class="news" href="'.$base_href.$new['id'].'">'.$new['heading'].'</a></h2>';
}

I somehow need to include this is the separate JS file, making sure it is only applied to data from the heading column.

Javascript

function makeTable(data) {
    var tbl_body = "";
    $.each(data, function () {
        var tbl_row = "";
        $.each(this, function (k, v) {
            tbl_row += "<div class='row'><div class='col-md-8 col-md-offset-2'>" + v + "   </div></div>";
        });
        tbl_body += "<div class='non-white'>" + tbl_row + "</div>";
    });
    return tbl_body;
}

function getEmployeeFilterOptions() {
    var opts = [];
    $checkboxes.each(function () {
        if (this.checked) {
            opts.push(this.name);
        }
    });
    return opts;
}

function updateEmployees(opts) {
    $.ajax({
        type: "POST",
        url: "filter3.php",
        dataType: 'json',
        cache: false,
        data: {filterOpts: opts},
        success: function (records) {
            $('#employees div').html(makeTable(records));
        }
    });
}

var $checkboxes = $("input:checkbox");
$checkboxes.on("change", function () {
    var opts = getEmployeeFilterOptions();
    updateEmployees(opts);
});
updateEmployees();

The php file the above connects to:

<?php
$pdo = new PDO('mysql:host=localhost;dbname=xxx', 'xxx', 'xxx');
$select = 'SELECT heading, summary, created_date';
$from = ' FROM media';
$where = ' WHERE TRUE';
$opts = isset($_POST['filterOpts']) ? $_POST['filterOpts'] : array('');
if (in_array("article", $opts)) {
    $where .= " AND article = 1";
}
if (in_array("press_release", $opts)) {
    $where .= " AND press_release = 1";
}
if (in_array("video", $opts)) {
    $where .= " AND video = 1";
}
$sql = $select.$from.$where;
$statement = $pdo->prepare($sql);
$statement->execute();
$results = $statement->fetchAll(PDO::FETCH_ASSOC);
$json = json_encode($results);
echo($json);
?>

Would you like to do some sensible code indentation on all that code, so we dont have to go blind looking for start and end blocks please!!! — RiggsFolly
– RiggsFolly, Commented Sep 11, 2015 at 11:18

DarkMukke · Accepted Answer · 2015-09-14 16:38:31Z

1

I think you are looking for something like this :

var base_href = 'http://www.stackoverflow.com/';
function makeTable(data) {
    var tbl_body = "";
    $.each(data, function (index, row) {
        var tbl_row = "";
        $.each(row, function (k, v) {
            if(k == 'heading' && 'id' in row) {
                v = '<a class="news" href="' + base_href + row.id +'">' + v + '</a>';
            }
            tbl_row += "<div class='row'><div class='col-md-8 col-md-offset-2'>" 
            + v + "   </div></div>";
        });
        tbl_body += "<div class='non-white'>" + tbl_row + "</div>";
    });
    return tbl_body;
}

edited Sep 14, 2015 at 16:38

answered Sep 11, 2015 at 13:29

DarkMukke

2,4891 gold badge24 silver badges32 bronze badges

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

7 Comments

Rob88991 Over a year ago

Thank you, I tried what you suggested but for some reason it stops everything from displaying completely.

Rob88991 Over a year ago

Yes, I get the following, I did change the "vat that" to "var that" but that doesn't seem to make a difference: Uncaught ReferenceError: id is not defined(anonymous function) @ media:361m.extend.each @ jquery.js:2(anonymous function) @ media:359m.extend.each @ jquery.js:2makeTable @ media:356$.ajax.success @ media:403m.Callbacks.j @ jquery.js:2m.Callbacks.k.fireWith @ jquery.js:2x @ jquery.js:4m.ajaxTransport.a.send.b @ jquery.js:4

DarkMukke Over a year ago

ok i edited my post, try that one, i might have been using an idea from a complete different language there

Rob88991 Over a year ago

Thanks, it doesn't produce any errors now but the headings are not going into the <a> tags as they were before, if I removed the that[id] on the previous version it was working and adding the <a> tags and linking to the base url only, but on the updated version it is putting the headings into col-md-8 etc

DarkMukke Over a year ago

can you pastebin your script please

|

Collectives™ on Stack Overflow

How can I add php variables to this Javascript?

1 Answer 1

7 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

7 Comments

Your Answer

Sign up or log in

Post as a guest

Related