I would like to open a window with a 5 second delay when a button is clicked. I'm trying:
<script type="text/javascript">
function sample() {
setTimeout(function() {
window.open('<?php echo esc_attr(wpcoupon_coupon()->get_go_out_url()); ?>', '_self');
}, 5000);
}
</script>
which I call in the onclick attribute of the <button>:
<button class="ui right labeled icon button btn btn_secondary" onClick="sample();">
<i class="copy icon"></i>
<span><?php esc_html_e('Copy', 'wp-coupon'); ?></span>
</button>
The problem is that <?php echo esc_attr(wpcoupon_coupon()->get_go_out_url()); ?> doesn't return the correct value, and correct URL doesn't open.
What could be going wrong?
You need ajax to read that php variable asynchronously from javascript. Otherwise i think your question is better answered here:
Get variable from PHP file using JQuery/AJAX
Is the page address correct?
esc_attr(wpcoupon_coupon()->get_go_out_url())
For test your script in php file use construction:
<?php
//php code
?>
<script>
function sample() {
setTimeout(function() {
window.open('<?php echo('https://google.com'); ?>', '_self');
}, 5000);
}
</script>
<button class="ui right labeled icon button btn btn_secondary" onClick="sample();">test</button>
<?php
//php code
?>
Related
I am trying to make a login form, when you log in then the Login in button disappears and gets replaced with a My account button.
So far i have made it that when you login the login hides however i need to show a different div when logged in.
This is so far what i have :
<?php
if (!isset($_SESSION['user'])) {
?>
<script>
jQuery(function ($) {
$('#pre_header_content_right').remove();
});
</script>
<?php
} else {
?>
<script>
</script>
<?php
}
?>
I am looking for a piece of code similar to this however instead or removes a div it shows it.
jQuery(function ($) {
$('#pre_header_content_right').remove();
});
I have dried .show instead of .remove however this does not work
Thanks for any help
you can try this
<script>
<?php
if (!isset($_SESSION['user'])) {
?>
$(document).ready(function(){
$('#button_login').show();
$('#button_my_account').hide();
});
<?php
} else {
?>
$(document).ready(function(){
$('#button_login').hide();
$('#button_my_account').show();
});
<?php
}
?>
</script>
I have a web page in PHP that shows blog posts/ articles that were posted from 2015-2008. basically at the top of the page I have buttons that have the year on it, and below all the blog posts and articles correlatin to the years. I want to have a feature so that if the user clicks 2013, all other posts with years not matching 2013 will dissapear and the correct year posts/articles will move up to the top of the page, so the user doesn't have to scroll.
Here is my code, the content is loaded through a controller so the page is basically created by grabbing data from an array.
<div class="calendar-key">
<div class="cd-timeline2-img cd-2015" id="btn" >'15</div>
<div class="cd-timeline2-img cd-2014" >'14</div>
<div class="cd-timeline2-img cd-2013" >'13</div>
<div class="cd-timeline2-img cd-2012">'12</div>
<div class="cd-timeline2-img cd-2011" >'11</div>
<div class="cd-timeline2-img cd-2010" >'10</div>
<div class="cd-timeline2-img cd-2009" >'09</div>
<div class="cd-timeline2-img cd-2008" >'08</div>
<div class="cd-timeline2-img cd-2007" >'07</div>
<?php foreach ($article as $slug => $article): ?>
<div class="cd-timeline-block">
<div class="cd-timeline-img cd-<?php echo $article['year'] ?>">
<span class="timelinedate"><?php echo $article['month'] ?><?php echo $article['day'] ?></span>
</div>
<div class="cd-timeline-content">
<a href="<?php echo $article['link'] ?>">
<h3 class="press_title" id="<?php echo $article['year'] ?>-<?php echo $article['first'] ?>"><?php echo $article['title'] ?></h3>
<img src="<?php echo $article['image'] ?>" width="100%" height="auto" />
</a>
<p><?php echo $article['description'] ?> </p>
<div class="social-share-buttons article-share-buttons pull-left">
<a class='social-email' href='<?php echo SocialShareLink::email("", "Check out this article, ".$article['title']." \n\n" .$article['link']); ?>'</a>
<a class='social-facebook' href='<?php echo SocialShareLink::facebook($article['link']); ?>' target='_blank'></a>
<a class='social-twitter' href='<?php echo SocialShareLink::twitter("", $article['link']); ?>' target='_blank'></a>
<a class='social-google' href='<?php echo SocialShareLink::googleplus($article['link']); ?>' target='_blank'></a>
</div>
Read more
</div>
</div>
<?php endforeach; ?>
the for each basically takes an array I have in a config file with data, and populates the articles on the page for however many there are in the array.
'articles' => [
'article#1 example' => [
'description' => "exampletextblablabla",
'title' => 'article title',
'link' => '//www.google.com',
'year' => '2015',
'month' => 'Jul ',
'day' => '25',
'first' => '1', //first article of that year
'image' => '../../images/example.jpg'
],
//more articles in this format
and then my failed attempt at js
<script type="javascript">
$('.cd-timeline2-img a').on('click',function(){
var eq = $(this).index();
$('cd-timeline-img cd-<?php echo $article['year'] ?>').removeClass('show');
$('cd-timeline-img cd-<?php echo $article['year'] ?>').eq(eq).addClass('show');
});
</script>
I am not very good at javascript, so I tried something like this but nothing works. I feel like this is an easy little script to right, any help would be great! thanks.
Woohoo! Finally, I got it working and 100% where I want it. So I used your code and threw it into a Fiddle: https://jsfiddle.net/rockmandew/4Lyofmkh/44/
You will see that I went with my approach - by default, the articles are display none and have a class of 'show' on them to begin with - you will also notice I changed where you had your 'cd-(year)' - I did this because you needed to identify the entire article container since that is what you would be hiding/showing.
I also added a 'Show All' button, so the user can view all if desired.
So like I said I changed your HTML markup right here:
<div class="cd-timeline-block cd-2015 show">
<!-- Article Year in Div Class below -->
<div class="cd-timeline-img">
It was "cd-timeline-img cd-2015" previously. That is the only change you need to make to your markup, besides adding the "show all" button (if you want it):
<div class="show-all">Show All</div>
Furthermore, I applied the display:none css property to the ".cd-timeline-block"
.cd-timeline-block {
margin-top:35px;
display:none;
}
Which is why we initialize the page with the "show" class on there:
<div class="cd-timeline-block cd-2015 show">
Which has the following styles:
.show {
display:block;
}
Finally, we get to the meat of it all, the jQuery. I will post the working code that I used and then explain it. The following code is to toggle articles based on the year clicked:
$('.calendar-key a').each(function() {
$(this).on('click', function() {
var x = 'cd-' + $(this).attr('rel');
$('.cd-timeline-block').each(function() {
if($(this).hasClass(x)) {
$('.cd-timeline-block').not(this).each(function() {
if($(this).hasClass('show')) {
$(this).toggleClass('show');
}
});
$(this).each(function() {
if(!$(this).hasClass('show')) {
$(this).toggleClass('show');
}
});
}
});
})
});
As you will see, when a ".calendar-key" link is clicked, the clicked link will produce a variable based on the links "rel" - the variable adds the "cd-" prefix onto the "rel" value. Then for each ".cd-timeline-block" if it has the class that was created from clicking (the variable just discussed), it will cycle through all of the ".cd-timeline-block" elements that isn't "this" (meaning all elements that don't match the selected year.) - for all of those elements, if it has the "show" class, it will be toggled. Then the last part, it takes the "this" and cycles through each of them, if it doesn't have the class "show", then it toggles the class "show", thus displaying the desired elements.
Finally, the show all button is controlled with the following function:
$('.show-all a').on('click', function() {
$('.cd-timeline-block').each(function() {
if(!$(this).hasClass('show')) {
$(this).toggleClass('show');
}
});
});
Its a fairly simple function. When the ".show-all" link is clicked, it cycles through all of the ".cd-timeline-block" elements, again, if they don't have the "show" class, the function will toggle the "show" class.
I know that was a lot but hopefully it all made sense. Again, here is the associated Fiddle I made to help you.
https://jsfiddle.net/rockmandew/4Lyofmkh/44/
Let me know if you need any further help.
Latest Update:
https://jsfiddle.net/rockmandew/4Lyofmkh/46/
Fiddle now contains new mark-up for easiest solution to updated issue marked in comments below.
It finally dawned on me that I was filtering your list of years not your posts. For future reference post a snippet of actual code, now bits with php all over them. Now the script looks for the rel attribute in your year list for the year, matches that year to the class "cd-year" in each post and filters as necessary. I stripped out all of the superfluous parts of the post like the social links as they're not needed for this exercise.
http://jsfiddle.net/1dyocexe/2/
//this is where you'd have your <?php echo $article['year'] ?> set the current year
var year = 2014;
getPosts(year);
function getPosts(year) {
$(".cd-timeline-block").find("div").each(function (i) {
var elm = $(this);
var cdYear = "cd-" + year;
var use = elm.hasClass(cdYear);
if (use === true) {
elm.show();
} else {
elm.hide();
}
});
}
$(".calendar-key div a").on("click", function () {
var year = $(this).attr("rel");
getPosts(year);
});
I am trying to get some jquery to click on a div.
I've got the ID of the div that I need to be clicked and it's inside some php code:
if(isset($_GET['something'])) {
echo "<script> $('#huge_it_dots_3_20').click(); </script>";
}
The div I'm targetting looks like this:
<div id="huge_it_dots_3_20" class="huge_it_slideshow_dots_20 huge_it_slideshow_dots_deactive_20" image_key="3" image_id="33" onclick="huge_it_change_image_20(parseInt(jQuery('#huge_it_current_image_key_20').val()), '3', data_20,false,true);return false;"></div>
My issue is that for some reason it's not clicking on the div.
And ideas why?
Try with this:
echo "<script> $('#huge_it_dots_3_20').trigger('click'); </script>";
warp the code with dom ready function.. then it should work
if(isset($_GET['something'])) {
echo "<script> $(document).ready(function(){$('#huge_it_dots_3_20').click();}) </script>";
}
Do something like
<?php if(isset($_GET['something'])) { ?>
<script>
$('#huge_it_dots_3_20').click();
</script>
<?php } ?>
The JS code will run before your DOM will be ready so.. here's a readyState.
<?php if(isset($_GET['something'])) { ?>
<script type="text/javascript">
$(function(){
$("#huge_it_dots_3_20").click()
});
</script>
<?php } ?>
I want to redirect to a PHP file when a button on my initial screen is pressed.
$stmt->bind_result($app_id, $user_id, $app_name, $app_desc,$api_key);
while ($stmt->fetch()) {
echo '<form class="appFragmentForm" id="'.$app_id.'" action="appDetails.php" method="POST">
<div class="col-sm-6 col-md-3"><div class="thumbnail">
<img class="img-rounded appIcon" src="img/icon_app_placeholder.png">
<div class="caption text-center">
<h3>'.$app_name.'</h3>
<p>'.$app_desc.'</p>
<p>Delete App View Details</p>
</div>
</div>
</div>
</form>';
}
}
Javascript function:
$(".appDeatilsButton").click(function (event) {
$.ajax({
type: "POST",
url: "appDetails.php",
data: { ID: this.id}
})
.done(function( msg ) {
window.location(appDetails.php);
});
});
appDetails.php
<?php
include_once 'includes/db_connect.php';
include_once 'includes/functions.php';
sec_session_start();
$appID = $_POST["appID"];
echo '<script language="javascript">alert('.$appID.')</script>';
?>
I know I am completely wrong, please help me in doing this in a eaiser way. FYI I am a mobile developer with little insight on web programming so web experts please excuse my newbie language.
Put this.form.submit(); instead of window.location(appDetails.php); in your JavaScript event handler (your javascript function).
And check errors in your code.
in the first code you posted on 9th line you give appDeatilsButton (maybe appDetailsButton...I don't know if it is a mis-spell) class to the "Delete" button.. the event handler $(".appDeatilsButton").click() runs the script whenever an element with class appDeatilsButton is clicked and it submits the form even if "Delete" button is clicked.
I'm setting up some sort of small form to determine whenether my users want to submit a form anonymously or not, and whenether the content they're submitting is original or not.
The first AJAX call seems to work fine, but then when the new content is loaded from a PHP file through AJAX, then the jQuery function doesn't seem to work.
It is supposed to work like this.
They are presented with 2 options, submit with username, or submit anonymously (clicking either of these calls an AJAX request to the specified PHP file)
The PHP file contains another 2 options (see example below) called Original and Existing. (Clicking any of these doesn't seem to do anything!)
Finally, they should be presented with the specific submission form for their choices.
Here is my code:
jQuery
// User
$('#user-submission').on( "click", function() {
$.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/user-submission.php',success:function(result) {
$("#submit-section").html(result).fadeIn('slow');
}});
});
// Anonymous
$('#anonymous-submission').on( "click", function() {
$.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/anonymous-submission.php',success:function(result) {
$("#submit-section").html(result).fadeIn('slow');
}});
});
// User -> Original
$('#original-submission-user').on( "click", function() {
$.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/original-user-submission.php',success:function(result) {
$("#submit-section").html(result).fadeIn('slow');
}});
});
// User -> Existing
$('#original-submission-anonymous').on( "click", function() {
$.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/original-anonymous-submission.php',success:function(result) {
$("#submit-section").html(result).fadeIn('slow');
}});
});
// Anonymous -> Original
$('#existing-submission-user').on( "click", function() {
$.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/existing-user-submission.php',success:function(result) {
$("#submit-section").html(result).fadeIn('slow');
}});
});
// Anonymous -> Existing
$('#existing-submission-anonymous').on( "click", function() {
$.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/existing-anonymous-submission.php',success:function(result) {
$("#submit-section").html(result).fadeIn('slow');
}});
});
Main HTML
<section id="submit-section">
<div class="anonymous-or-credited">
<a href="#" id="user-submission" class="submit-url">
<div class="transition">
<h2><?php echo $current_user->display_name; ?></h2>
<h3>Submit a as <?php echo $current_user->display_name; ?></h3>
</div>
</a>
<a href="#" id="anonymous-submission" class="submit-url">
<div class="transition">
<h2>Anonymous</h2>
<h3>Submit a Creepypasta Anonymously</h3>
</div>
</a>
</div>
</section>
PHP file containments
<div class="anonymous-or-credited">
<a href="#" id="original-submission-user" class="submit-url">
<div class="transition">
<h2>Original</h2>
<h3>I wrote this myself</h3>
</div>
</a>
<a href="#" id="exisiting-submission-user" class="submit-url">
<div class="transition">
<h2>Existing</h2>
<h3>I found this elsewhere</h3>
</div>
</a>
</div>
If the elements are added dynamically, selecting for the ID of the dynamically-added element will not work. You will have to instead listen for event to bubble up in a location higher up (in terms of hierarchy) on the DOM tree, like document.
I assume that both #user-submission and #anonymous-submission are already present on the page when it is initially loaded, but the rest are not. Therefore, you need to listen to the click event bubbling up to document (or any parent that is already present on the page when JS is executed):
$(document).on('click', '#original-submission-user', function() {
$.ajax({url:'<?php echo get_template_directory_uri(); ?>/submission/original-user-submission.php',success:function(result) {
$("#submit-section").html(result).fadeIn('slow');
}});
});
Remember to repeat this for all dynamically-added elements which you want to bind events to.
If I'm understanding correctly, you have JS bindings to HTML that exists on page load -- but when you dynamically load more HTML, your existing JS isn't bound to it. One solution would be to add your click bindings to the ajax callback, after the HTML is loaded.
You need to enter the second parameter of the .on() function (delegated event):
$('#submit-section').on('click','#original-submission-user', function() {
});