Issue with window.location.href and page reload - javascript

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');
}

Related

How to make a div refresh?

So this is my button div inside a PHP function called getDetails().
<div class='detail_cart'>
<a href='detail.php?add_cart=$prod_id'>
<button id='detail_button_add'>Add to cart</button>
</a>
</div>
Based on ip address, it counts how many products you've added in the cart and display them to my shop cart icon.
Every time the button is pressed it adds the product into a database but i need refresh page in order to see the updated count.
echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
echo "</div>";
I tried to fix but no chance..
<script type= "text/javascript">
$(document).ready(function(){
$("#detail_button_add").bind("click",function(){
$("#total_cart").load("header.php");
});
});
</script>
"header.php" is the header section of my PHP.
You need to add an clear div with an span inside. You will get the data from an API in this case your header.php that returns 1,2 or any number and that will be displayed.
Your header.php
echo mysqli_num_rows($run_cart);
http_response_code(200);
exit;
<div id="total_cart">
<span id="total_cart_num"></span>
</div>
<div>
<a href="detail.php?add_cart=<?=$prod_id ?>">
<button id="detail_button_add">Add to cart</button>
</a>
</div>
<script>
document.querySelector("#detail_button_add").addEventListener("click", function(){
refreshCart();
});
function refreshCart(){
const xhr = new XMLHttpRequest();
// Add link to your Site that returns the count
xhr.open("GET", "header.php"); // Header returns Like 1,2,3 or any Number
xhr.addEventListener("load", function(){
if(this.status == 200){
document.querySelector("#total_cart_num").innerHTML = this.responseText;
} else {
alert("An error as been triggered!");
}
});
xhr.send();
}
</script>
If you mean that this is header.php:
echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
echo "</div>";
and you do this:
$("#total_cart").load("header.php");
the result would be:
<div id ='total_cart'>
{content from header.php}
</div>
e.g.
<div id ='total_cart'>
<div id ='total_cart'>
{count of cart}
</div>
</div>
The solution is to skip the creation of div in the header.php:
(create that div elsewhere)
//remove echo "<div id ='total_cart'>";
echo $count_cart =mysqli_num_rows($run_cart);
//remove echo "</div>";
If you don't get your click event to work, you might need to use on("click"... instead of bind("click"...
(on also works on dynamically created html elements (with content))
$(document).ready(function(){
$("#detail_button_add").on("click",function(){
//This header.php should NOT include the actual html-element (div) jsut the
//content you want INSIDE the htm-element with id #total_cart
$("#total_cart").load("header.php");
});
});
Another thing with your first code-snippet is that your link won't work:
<a href='detail.php?add_cart=$prod_id'>
It should be (taking for granted you have the code in a php-file)
<a href='detail.php?add_cart=<?php echo $prod_id;?>'>

Auto scroll a webpage with rss-feed, item by item

I'm making a wallboard (monitor with a newsfeed on it). I'm new to javascript but managed to find a few sources that helped me to put an RSS-feed on a PHP-page and format it with CSS.
So far so good!
To turn this page into a wallboard, I'd like to show one feed-item for a few seconds and then have to page automatically scroll to the next item. Each feed-item is in a <div class="post">.
Could someone please help me with some sample autoscroll code?
I've tried to scroll continuously through the page, but that is not the effect that I'm looking for.
This is the code of a <div> that shows a post:
<div class="post">
<div class="post-head">
<h2><a class="feed_title" href="<?php echo $link; ?>"><?php echo $title; ?></a></h2>
<span><?php echo $pubDate; ?></span>
</div>
<div class="post-content">
<?php echo implode(' ', array_slice(explode(' ', $description), 0, 20)) . "..."; ?> Read more
</div>
</div>
To scroll, I currently use a script from javascriptkit.com:
<script language="JavaScript1.2">
var currentpos=0,alt=1,curpos1=0,curpos2=-1
function initialize(){
startit()
}
function scrollwindow(){
if (document.all)
temp=document.body.scrollTop
else
temp=window.pageYOffset
if (alt==0)
alt=1
else
alt=0
if (alt==0)
curpos1=temp
else
curpos2=temp
if (curpos1!=curpos2){
if (document.all)
currentpos=document.body.scrollTop+1
else
currentpos=window.pageYOffset+1
window.scroll(0,currentpos)
}
else{
currentpos=0
window.scroll(0,currentpos)
}
}
function startit(){
setInterval("scrollwindow()",100)
}
window.onload=initialize
</script>
The page that I have now is available here:
https://app-storage.org/mrm/rsstest.php
The effect I'm looking for is:
1. Show the first news item
2. wait a few seconds
3. smoothly scroll to the second news item
4. at the end of the page, return to the first item
Any help is greatly appreciated!!!

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 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".

Ajax WordPress post popup with SimpleModal and jQuery

I tried to implement this mode here http://wordpressthemescollection.com/ajax-wordpress-post-popup-with-simplemodal-and-jquery-488.html but nothing seems to work.
This is what I do.
1 / Include in header
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script type="text/javascript" src="<?php bloginfo("template_url"); ?>/js/jquery.simplemodal.js"></script>`
The links are goods cause I checked them both.
2 / Include in header this script
<script>
jQuery(document).ready(function() {
jQuery('a.postpopup').live('click', function(){
var id = jQuery(this).attr('rel');
jQuery('<div id="ajax-popup"></div>').hide().appendTo('body').load('<?php bloginfo('url')?>/ajax/?id='+id).modal({
opacity:90,
position: ["0%"],
overlayClose:true
});
return false;
});
});
</script>
3 / Make a custom template with this code
<?php
/*
Template Name: Ajax
*/
?>
<?php
$post = get_post($_GET['id']);
?>
<?php if ($post) : ?>
<?php setup_postdata($post); ?>
<div class="whatever">
<h2 class="entry-title"><?php the_title() ?></h2>
<div class="entry-content">
<?php the_content(); ?>
</div>
</div>
<?php endif; ?>
And after that made a page named Ajax and assign the template Ajax.
4 / Implement a link
this link
If i click on the link nothing happens.
What did I do wrong cause I did not have a clue about it?
Thanks.
jQuery .load() is ajax and so you need to do any subsequent things in a callback like this:
var $ajax-div = jQuery('<div id="ajax-popup"></div>').hide().appendTo('body');
var url = '<?php bloginfo('url')?>/ajax/?id=' + id;
$ajax-div.load(url), function() {
// the callback
jQuery('#ajax-popup').modal({
opacity: 90,
position: ["0%"],
overlayClose:true
});
});
when you create an new post or page content on wordpress admin, select the "Ajax" template for your page

Categories

Resources