We Keep Coding

How to refresh multiple divs containing PHP queries using ajax

I have built a calendar appointment script and want to display the results for any given day on a google map and a table below without having to refresh the whole page. Currently, using ajax, the map refreshes perfectly but the table doesn't.
When the date is clicked in the calendar it is written via javascript to a hidden form field, then when the update button (submit) is clicked, ajax in the head submits the form in the background to overwrite the $updatedate variable, refresh the map div and the table div.
Currently the variable gets updated in the session, a script runs to update an xml file and the calendar successfully refreshes showing this xml data. However the table div does not refresh. If I manually refresh the whole page the new results are shown successfully so it is picking up the updated variable but not refreshing via the ajax.
I realise this is probably due to ajax being client side and php server side so the php queries are not being ran but I have also tried to use file_get_contents (which works for the xml generating script) inside the div to run these queries without loading the whole page but this just shows nothing so I think I'm missing something fundamental and possibly very simple!
--------- ajax in head to run update script and reload divs --------
<!-- silently submit the updatedate form to update the session variable.
Then reload the map and table divs using this new variable -->
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script>
$(function () {
$('#update').on('submit', function (e) {
// stop the page from reloading
e.preventDefault();
// but submit the form
$.ajax({
type: 'post',
url: 'actions/updatedate.php',
data: $('#update').serialize(),
success: function () {
$("#map-outer").load("../map.php");
$("#tbl-outer").load("../table.php");
}
});
});
});
</script>
--------- main page --------
<div>calendar content here</div>
<div>customer details form here</div>
<div class="clear" style="text-align: left;">
<!-- set default then let script overwrite -->
<?php $updatedate = date('Y-m-d'); ?>
<!-- run form (via ajax in head) to update variable and write to session -->
<form id="update" method="post">
<input type="hidden" name="updatedate" id="updatedate" />
<input type="submit" name="submit" value="update map and table" />
</form>
<!-- update variable form session -->
<?php $updatedate = $_SESSION['updatedate']; ?>
<br />
</div>
<div id="map-outer" class="twocol1">
<?php include "../map.php" ?> <!-- this page runs a script to pull the db values and write them to xml, then displays google map code -->
<br /><br />
</div>
<div id="tbl-outer" class="twocol2">
<?php include "../table.php" ?> <!-- this page pulls the db values and display them in a table -->
</div>
--------- map.php page --------
<?php
// silently run the db to xml script before loading the map //
file_get_contents("admin/actions/dbtoxml.php");
?>
<div id="map"></div>
<script> ..... script to show google map with custom markers ..... </script>
--------- table.php page --------
<h2>Morning</h2>
<?php
$sql = "SELECT * FROM wasps_appointments WHERE date = '$updatedate' AND time = 'Morning' AND block = 0 AND completed = 0 ORDER BY date ASC";
$result = $connection->query($sql);
?>
<?php include 'admin/includes/view-table-today.php'; ?>
<br /><br />
<h2>Afternoon</h2>
<?php
$sql = "SELECT * FROM wasps_appointments WHERE date = '$updatedate' AND time = 'Afternoon' AND block = 0 AND completed = 0 ORDER BY date ASC";
$result = $connection->query($sql);
?>
<?php include 'admin/includes/view-table-today.php'; ?>
Can anyone point me in the right direction?
Many thanks, Helen

I have fixed this now. The table.php page wasn't loading using the existing mysql db connection so I had to use a different one.
Can anyone tell me the difference between using
$connection = new mysqli(DB_HOST, DB_USER, DB_PASS, DB_NAME);
and
$connection = mysqli_connect(DB_HOST, DB_USER, DB_PASS);
$db_selected = mysqli_select_db($connection, DB_NAME);

How to change a href when using multiple variables in PHP?

So I didn't found what I was looking for in last two days.
To be clear I have a table "tracks" in my database.
So I can show from "tracks" the "demo" field wich is an audio file "url"..
<?= $tracks['demo']; ?>
I have multiple url's but then I need to replace the a href
<a href="<?php echo $tracks['demo'];?>"
in a logical way.
In simple terms it's like I want to click on button 1 that loads
url 1 into this a href with the ID, title field from that track.
When you press button 2 you need to load another url and replace url 1 with url2.
I tried many ways including javascript but it won't work.
Problem now is that when I list 4 items it always loads the latest "URL" i have posted in my source code. :)
When I echo out <?php echo $tracks['demo]; ?> on all items I can see the correct url's so the functionality to replace the url is my issue.
* I basically want to load many mp3 url's in a player I made in the footer of my website. It works by hardcoding the urls in the url field but this is not what it should be... *
Code:
<?php while($tracks = mysqli_fetch_assoc($muziek)) : ?>
<div class="col-md-2 viny" id="muziek">
<h4><?= $tracks['title']; ?></h4>
<img src="<?= $tracks['img']; ?>"
alt=" <?= $tracks['title']; ?> />
<p class="artist">Artist: <?= $tracks['artist']; ?></p>
</div>
<?= $tracks['demo'] = $audiourl ; ?>
<button type="button" onclick="play">Play</button>
</div>
<?php endwhile; ?>
*THIS LOOPS PERFECT FOR ALL ITEMS TRACKS ARE LISTED PERFECT *
In my player I have
<a href="<?php echo $audiourl;?>" ><?= $tracks['artist']; ?></b> - <?= $tracks['title']; ?></a>
function play(){
I'm not good at JS... And this is my issue because it now loads the latest output from the php loop...
}

I don't know how you are replacing it but
Why not pass the audio in the function. Here like this
<button type="button" onclick="play(<?= $tracks['demo'] = $audiourl ; ?>)">Play</button>
assign a id to anchor tag
<a id="someId" href="<?php echo $audiourl;?>" ><?= $tracks['artist']; ?></b> - <?= $tracks['title']; ?></a>
and in the play function, you receive it like this
function play(audioUrl){
}
and change the href like this in the play function
If you are using jquery
$('#someId').attr("href", audioUrl);
sometimes the above does not works. Can't remember why but if that does not works try this
$('#someId').href = audioUrl
If you are using javascript
document.getElementById('abcd').href = audioUrl

So I tried many things but I had many issues with the player it's js file using the same id's and so on.
The new logic I tried out seems to work:
<form action="" method="POST">
<input type="submit" value="Play" name="Play">
</form>
<?php
if (isset($_POST["Play"]))
{
echo $tracks['demo'];
}else{
echo ' ';
}
?>
There is more going on but I tried to write it down as simple as this to show the logic. All Track url's are hidden and when the page loads there is an empty $audiourl by default loaded in the a href from my audioplayer. By clicking the button play I show the url in the source but not on the site.
Then the latest $audiourl variable changes to this value.

Dynamic pages in Wordpress, using database

I'm making by myself a site and I need some help because I'm not so good... All things I learned just by google, forums and blogs. Now I'm stucked in a part of my site very hard for me.
I will ask you step by step and see if I can complete the site with your help.
Sorry if my english is not perfect, I'm Italian.
So, let's go.
I created the site with WordPress, using a theme. I changed the font (directly in the css and not using the guide because my font was not listed), i customized every part by the panel, plugin and by edit directly the code of pages.
I tell you this so you can understand my level.
If i digit "www.mysite.com/xx" (where "xx" is a page that not exist) it go on the 404 page error.
Well, I edited that page too (404.php in the editor of WordPress) with my personal text. I didn't touch htaccess file.
So now my first purpose come.
I want use the page error for create dynamic pages.
In this page i want to write my text and the "xx" word, so i must get it from the link "www.mysite.com/xx".
It should be easy with Java script but I don't know from where to start...
I need to put that word in a Variable because i will need to process it in a second moment.
This is my 404.php code:
<?php
/**
* The template for displaying 404 pages (Not Found)
*/
?>
<?php get_header(); ?>
<div class="row">
<div class="col-md-9">
<section class="content">
<article>
<h2><?php esc_html_e( 'Attenzione', 'iamsocial' ); ?></h2>
<p><?php
$url1 = 'http://www.example.com';
esc_html_e( 'Correttore in fase di ultimazione.', 'iamsocial' ); ?></p><p><?php esc_html_e( 'Vai alla ', 'iamsocial' ); ?> <?php esc_html_e( 'home page.', 'iamsocial' ); ?></p>
</article>
</section>
</div>
<aside class="col-md-3">
<?php get_sidebar(); ?>
</aside>
</div>
<?php get_footer(); ?>
The part of the database is on the next question.
Thank you for your attention.

You don't need Javascript for this. You can do it in PHP with:
$path = $_SERVER["REQUEST_URI"]
That will return the "xx" part of the URL.
If you only need the last part of the URL, like Steven says, you can explode by / and get the last element:
// URL = site.com/page/xx
$page = explode("/", $_SERVER["REQUEST_URI"]); // = /page/xx
$lastEl = end($page); // = xx

WordPress: how to open the_content() in a lightbox or new window?

I´m trying to open the_content (just pictures) in a lightbox.
I´d like a page like a Christmas-calendar so that you can see the posts (and the planned too) and if you click the published post, the image (the_content) should be shown in a shadowbox, lightbox or whatever, I think you´ll know what I mean. Right now my code looks like:
<header class="entry-header" rel="shadowbox" onclick="location.href='<?php the_permalink();?>';" style="cursor:pointer;">
<?php if ( ! post_password_required() && ! is_attachment() ) :
the_post_thumbnail();
endif; ?>
<?php if ( is_single() ) : ?>
<h1 class="entry-title"><?php the_title(); ?></h1>
<?php else : ?>
<?php endif; // is_single() ?>
<?php if ( comments_open() ) : ?>
<div class="kalender">
<p1> <?php the_field('nummer'); ?> </p1>
<br>
<p2><?php the_time('j. F Y'); ?> </p2>
<p3><?php the_title(); ?></p3>
</div>
<!-- .comments-link -->
<?php endif; // comments_open() ?>
</header>
I think the easiest way would be to handle the_content like a read_more link and just say onclick show in an shadowbox. But right now I just don't know how to. You can have a look here (right now just in Firefox or Safari, don't know why Chrome hates me:-))

Consider using the Fancybox plugin: http://fancybox.net/howto
Then include an anchor tag in each of your posts, like 'read more', with the content's unique ID:
<a class="fancybox" href="#content">Read More - This shows content of element who has id="content"</a>
Just ensure that each post's #content DIV has a unique ID, increment a variable in your loop and append it to read something along the lines of:
#content-01, content-02, etc.
Then just hide the content DIV's with CSS.
.fancybox { display: none; }
P.S. seems fine in Chrome 34.0.1847.131

Here's a useful pattern to pass server-side data to the client-side:
1. Use wp_localize_script to output a script fragment to the DOM.
2. Inside that script fragment, assign the value of the_content to a
JavaScript global string variable.
3. Use this JavaScript global from
inside your JavaScript to read the value of the_content

Swipe.js - prev/next issue

I have a single page with multiple instances of Swipe.js running. They are loaded dynamically through the CMS so hard coding values isn't really possible.
I have followed the steps outlined in this other post:
Generate Swipe JS slider for each slider DIV
I can get everything working except the last part where they talk about dynamically loading the prev/next controls for each player.
I create multiple sliders with:
var swipes = []
$('.slider').each(function(i, obj) {
swipes[i] = new Swipe(obj);
});
Then in the template code that structures each slider I have the following:
<?php $counter = 1; ?>
<div id="swipes<?php echo $counter; ?>" class='slider swipe gallery'>
<div class='swipe-wrap'>
//Images go here
</div>
<div>
<button onclick='swipes<?php echo $counter; ?>.prev()'>prev</button>
<button onclick='swipes<?php echo $counter; ?>.next()'>next</button>
</div>
<?php $counter++; ?>
</div>
The PHP counter does it's job perfectly, but for some reason when I click on a prev/next button I get the follow Console error:
Uncaught TypeError: Object # has no method 'next'
Thanks in advance!