Develop Reference

Issue with window.location.href and page reload

I've got some code to redirect to a certain page if a certain condition is true
if(value.match(/^<?php echo $javascriptArray; ?>$/))
{
window.location.href = '/postcode-success/?pc='+value;
}
On the page that the user is redirected to I've got a php if statement that will show a topbanner:
<?php if ($_SESSION['pc_valid'] !=null) :?>
<div class="row" style="margin:0px;">
<div class="success-container" id="success-top">
<p>Success! <?php echo $_SESSION['pc']; ?> </p>
</div>
</div>
<?php endif?>
Now this all works but the problem is that you need to refresh the page in order for the pc_valid if statement to work and the banner to show.
I'm not sure why this is or how to fix it?
I guess I need to somehow reload the page on redirect?

re-write with AJAX type solution?
Here's a jQuery option: .load()
$('#success-top').load(document.URL + ' #newBanner');
if(value.match(/^<?php echo $javascriptArray; ?>$/)) {
$('#success-top').load(document.URL + ' #newBanner');
}

Download pictures in modal ONLY when modal is displayed

Okay, so I want to have a LOT of buttons on a page, which each open a different modal, populated with a gif with php. As you may have guesse, downloading a lot of quite big gifs takes a ton of time.
Solution: load the gifs only when the modal containing them is actually displayed. I was advised to use the following jQuery snippet:
echo '<script>' . "\r\n";
echo '$("#btn_'.$id.'").click(function(){' . "\r\n";
echo '$("#img_'.$id.'").attr("src", "'.$id.".gif" . '"); });';
echo '</script>' . "\r\n" . "\r\n";
More readable clean, PHP-free version:
<script>
$("#btn_id").click(function(){
$("#img_id").attr("src", "id.gif"); });
</script>
The id is replaced with an actual id in php of course.
Now this snippet doesn't actually PULL the gif from the server, so in the end nothing gets displayed at all...
edit: more code
<button id="img_id" class="modalbutton" style="background-image: url(thumbs/id.gif); cursor:pointer;" onclick="document.getElementById('modal_id').style.display='block'"></button>
<div id="modal_id" class="w3-modal w3-animate-zoom" onclick="this.style.display = 'none'">
<span id="span_id" class="w3-closebtn w3-hover-red w3-container w3-padding-16 w3-display-topright">×</span>
<div class="modal-content" onclick="this.style.display='none'"><img id="img_id" src=""></div>
</div>
<script>
$("#btn_id").click(function(){
$("#img_id").attr("src", "id.gif"); });</script>
Demo

$(document).ready(function() {
$("button").click(function(event){
var $id = event.target.id;
document.getElementById('modal_'+$id).style.display='block';
var $image = $('#img_'+$id);
var $downloadingImage = $('#imagehelper_'+$id);
$downloadingImage.attr('src', $id+'.gif');
$downloadingImage.on('load', function() {
$image.attr('src', $id+'.gif');
}).each(function() {
if(this.complete) $(this).load();
});
});
});
The script gets the id of the calling element, so I don't need a lot of different snippets.

PHP echo through Ajax doesn't give style?

Got blocked.
Created a php page with normal html, css, js and php.
Inside of that file, wanted for the user to be able to see events accordingly to the selected date.
In order to do that, once the date was selected, the value associated that date would get posted into a php script.
Inside of that php script, the posted variable was going through some conditions and echoing the results.
Then, the result of this php script, would be displayed in the initial php page.
Ok, so far so good.
Thing is,
Want the text to appear styled, which means, want it to allow styling classes.
Did some research but can't seem to find any problem like that.
When you go to the page and write, for example, the following in input: 12/22/2016, you can see data being displayed. Problem is, it doesn't come anywhere close to styled.
This makes sense, somehow, because the php script doesn't have mentioned anywhere to use those styles.
The styles are being used in the initial php page (html/css/js/php), where the results will be displayed.
Initially I thought the style in the results would be recognized because it is called in the exact same page where those style files are mentioned.
What am I doing wrong?
This it the result of the php script:
<h1 class="hero-header-otro">It works! dfgdfgdfg</h1>
As you can see, it has the class called inside of the h1
This is the javascript code that posts in the php script and displays the results in a specific div of the same page where this js code is, which is the php page mentioned all the way through this message:
jQuery(function($) {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
}).on("change", function() {
display("Got change event from field");
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
The CSS:
.hero-content > h1.hero-header-otro {
font-size: 4rem;
margin-bottom: 20px;
font-weight: bold;
color: #ffffff;
}

Try using datatype html in ajax request:
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});

Got it fixed. This it the result of the php script:
<div class="tab-pane" role="tabpanel">
<div class="container day-events">
<div class="row event-list">
<div class="event-list-time col-md-3 col-sm-3 center" style="background-image: url(/lascruces_styles/img/events-img/event.jpg);">
<p class="event-list-start-time">2016-12-22 00:00:00</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">2016-12-22 00:00:00</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">dfgdfgdfg</h2>
<p>Organized by <span class="event-list-organizer">yyyyyyy</span></p>
<p class="event-list-description"><p>dffghfghgfhf</p></p>
<button type="button" class="btn more-info-list">More Information</button>
</div>
</div>
</div>
This is the javascript code that posts in the php script and displays the results in a specific div of the same page where this js code is, which is the php page mentioned all the way through this message:
jQuery(function($) {
$(".date").datepicker({
onSelect: function(dateText) {
display("Selected date: " + dateText + "; input's current value: " + this.value);
$(this).change();
}
}).on("change", function() {
display("Got change event from field");
$.ajax({
type: "POST",
url: 'events_script.php',
data: ({dates: this.value}),
dataType : 'html',
success: function(data) {
$('.results-ajax').html(data);
alert(data);
}
});
});
function display(msg) {
$("<p>").html(msg).appendTo(document.body);
}
});
The PHP:
$result = mysqli_query($conn, $sql);
if (mysqli_num_rows($result) > 0) {
while ($row = mysqli_fetch_assoc($result)) {
echo '<div class="tab-pane" role="tabpanel">
<div class="container day-events">
<div class="row event-list">
<div class="event-list-time col-md-3 col-sm-3 center" style="background-image: url(/lascruces_styles/img/events-img/event.jpg);">
<p class="event-list-start-time">'.$row['Start_Date'].'</p>
<hr class="event-list-time-divider">
<p class="event-list-end-time">'.$row['End_Date'].'</p>
</div>
<div class="event-list-info col-md-9 col-sm-9">
<h2 class="event-list-name">'.$row['Event_Name'].'</h2>
<p>Organized by <span class="event-list-organizer">'.$row['Company_Name'].'</span></p>
<p class="event-list-description">'.$row['Event_Description'].'</p>
<button type="button" class="btn more-info-list">More Information</button>
</div>
</div>
</div>
</div>';
}} else { echo 'No results found.'; }

PHP echo statement within getElementByID div tag

I've currently got a form which i use from Gravity forms, here is my html code
<div class="dropdown">
<button onclick="myFunction()" class="dropbtn">SPECIFY PRODUCT</button>
<div id="myDropdown_<?php echo get_the_ID(); ?>" class="dropdown-content">
<?php gravity_form( 1, false, false, false, '', true ); ?>
</div>
</div>
as you can see i'm echoing the product ID from woocommerce to give a different div id dependent on which product the user clicks on. This works fine.
Although, now when i create javascript function :
function myFunction() {
document.getElementById("myDropdown_<?php echo get_the_ID(); ?>").classList.toggle("show");
}
how can I pull through 'get_the_ID' like i have in the html code so it can dropdown my form in accordance to the product selected?
You can take a look at it here : http://www.ctagroup.com.au/cta-group-home/products/tactile-guidance/suresteel/suresteel-classic/
Any help would be greatly appreciated.
Regards

It is because the "myDropdown_<?php echo get_the_ID(); ?>" part is treated as string not PHP code.
Try this way:
<script>
var theId = "<?php echo get_the_ID(); ?>";
function myFunction() {
document.getElementById("myDropdown_" + theId).classList.toggle("show");
}
</script>

You always can try to generate JS code by PHP instead.
Of course in case, if the attempts to solve the problem have been unsuccessful.
Don't see any problems with this "technique".

html, js, php - Image disappear after click

I'm really new here. Hopefully this title makes sense.
My problem is: after I clicked either good.png or bad.png as a button, the js works well, but after I click the OK in the alert window, the image will disappear. It will show up again after I refreshed the page.
Here is real page for code: http://bit.ly/1iUjnlW
How could I fix this? Thank you very much !
(sorry for my bad language)
This is part of my code:
=========js function========
<script type="text/javascript">
$(function() {
$(".rate").click(function() {
var id = $(this).attr("id");
var name = $(this).attr("name");
var dataString = 'id='+ id ;
var parent = $(this);
if(name=='up'){
//$(this).fadeIn(200);
$.ajax({
type: "POST",
url: "../data/rate_up.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
} });
}
else
{
//$(this).fadeIn(200);
$.ajax({
type: "POST",
url: "../data/rate_down.php",
data: dataString,
cache: false,
success: function(html)
{
parent.html(html);
} });
}
return false;
});
});
</script>
========img buttons in a table===========
<p class="p1">
<fieldset>
<legend>Sighting Detail</legend>
<div id="scroll_detail" style="overflow-y:auto; height:600px;">
<table>
<td>Rate this sighting: </td>
<td>
<div class="box">
<img src="../images/rating/good.png"><?php echo $up; ?>
</div>
<div class="box">
<img src="../images/rating/bad.png"><?php echo $down; ?>
</div>
</td>
</tr>
</table>
</div>
</fieldset>
</p>
</div>
</div>
<!-- Above is the website main files -->
<?php include ('../footer.php');

You are replacing your anchor tag's (which holds yiur image) inner html with html from AJAX response
parent.html(html);
try to alert the html returned from your AJAX before you replace the content and see what it contains
try appending the html returned
parent.append(html);