I created a facebook app recently that posts some content to the user group. If the user posts to multiple groups then I would like to display a progress bar. The HTML part of it I created a form that has got a text area and the form redirects to a post.php file. And I post to the user groups in that post.php page. As I said I use a progress bar to show the progress. But the message gets posted first and only then the progress bar works. I'm pretty sure about the progress bar that it works.
To put it short the PHP part gets executed first before the JS or the HTML. So please do help me out in overcoming this problem.
This is what I have in the post.php file :
<body style = "background-color: #4ea6e6;">
<center>
<div style = "width: 50%; margin-top: 5%; padding: 50px; background-color: #fff;">
<div class="input-group" style = "height: 30px;">
<progress min = "0" max = "100" value = "50" style = "height: 30px;">
</progress>
<span class="input-group-addon">
0%
</span>
</div>
<br>
<div class = "message">
</div>
<br>
<div class = "alert alert-success success" style = "font-size: 18px; font-family: Muli; visibility: hidden;"><b>Great !</b> Your message was successfully posted !</div>
</div>
</center>
</body> <?php
require_once 'libs/facebook.php';
$config = array(
'appId' => 'My app id',
'secret' => 'my app secret',
'fileUpload' => false, // optional
'allowSignedRequest' => false, // optional, but should be set to false for non-canvas apps
);
$facebook = new Facebook($config);
$groups = $_POST['groups'];
$link = $_POST['link'];
$message = $_POST['message'];
$count = count($groups);
for($i=1; $i<count($groups); $i++){
$api = $facebook->api($groups[$i] . '/feed', 'post', array(
link => $link,
message => $message
));
$api = $facebook->api($groups[$i]);
$name = $api['name'];
$j = ($i/(count($groups)-1))*100;
?>
<script type = "text/javascript">
var timeout = setTimeout(post, 0);
function post(){
$('progress').attr("value" , "<?php echo $j; ?>");
$('.message').html("Posting to <?php echo $name; ?>");
$('.input-group-addon').html("<?php echo $j; ?> %");
if(<?php echo ($i/count($groups)); ?> != 1){
var timeout = setTimeout(post, 0);
}
else{
clearTimeout(timeout);
}
}
</script>
<?php
}
You can't execute sync PHP after html and js are loaded.
BUT you can execute an XHR call to a PHP script so that once js is loaded the AJAX call starts and PHP script is executed in background
Here is how to use AJAX with jQuery
You can execute a separate PHP file after the page has loaded, without JS, like this.
Notice that the "background image" is actually a PHP file. The PHP file will execute when it is called at the bottom of the body, after the html file and all elements above it.
You can send data to the PHP file via GET in the CSS property...
<!DOCTYPE html>
<html>
<head>
<title></title>
<style>
#runPHP
{
background-image:url(script.php);
display:none;
}
</style>
</head>
<body>
<div id="runPHP"></div>
</body>
</html>
Related
After the user submits a form the .php file is supposed to display only certain parts of the forum depending on if cc_owner has a value of personal or something else. I have the contents to be displayed in two separate div elements one called CreditContent_ID and the other called BillContent_ID the inline css sets both div display elements to 'none'. I am trying to use php to check whether the value of cc_owner is personal or something else. If it's personal I want it to change the CreditContent_ID display to block.
I think the problem is with this line:
echo 'document.getElementById("CreditContent_ID").style.display="block"';
Here is my code:
<style>
.CreditContent{
display:none;
}
.BillContent{
display:none;
}
</style>
<body>
<?php
if($_POST['cc_owner']=='personal'){
echo '<script language="javascript">';
echo 'document.getElementById("CreditContent_ID").style.display="block"';
echo '</script>';
}else{
echo '<script language="javascript">';
echo 'document.getElementById("BillContent_ID").style.display="block"';
echo '</script>';
}
?>
<div class=CreditContent id="CreditContent_ID">
//I have other code here.
</div>
<div class=BillContent id="BillContent_ID">
//more code here
</div>
</body>
<style>
.hideContent {
display: none;
}
</style>
<body>
<div class="CreditContent <?php echo $_POST['cc_owner'] != 'personal'? 'hideContent': ''; ?>"
id="CreditContent_ID">
//I have other code here.
</div>
<div class="BillContent <?php echo $_POST['cc_owner'] == 'personal'? 'hideContent': ''; ?>"
id="BillContent_ID">
//more code here
</div>
</body>
Add css class hideContent to div based on cc_owner value.
I am checking if there is a Thumbnail image in a blog post using has_post_thumbnail(), if no thumbnail image, a JavaScript script function is called to change the layout of .blog-post to display from flex to block.
To do this: I am using a JavaScript function with the conditional statement. Like below:
content.php
<div class="blog-post">
<?php /* POST FEATURED THUMBNAIL*/
if(has_post_thumbnail()) { ?>
<div class="post-thumbnail">
<?php the_post_thumbnail('feature-image'); ?>
</div>
<?php } else { ?>
<script type="text/javascript"> alert("asdsas"); xfullWidthPostWithThumbnail(); </script>
<?php } ?>
<article class="post-article para-text">
<p id="blog-title"><?php the_title(); ?></p>
<p id="blog-info-text"><?php the_time('F jS, Y'); ?> | By <?php the_author();?> | Posted In
<?php
$categories = get_the_category();
$seperator = ", ";
$output = '';
if($categories) {
foreach ($categories as $category) {
$output .= '' . $category->cat_name . '' . $seperator;
}
echo trim($output, $seperator);
}
?></p>
<p><?php echo get_the_excerpt(); ?> Read more ยป</p>
<p></p>
</article>
</div>
JavaScript function
/* INDEX PAGE -- ADD DISPLAY BLOCK FOR FULL WIDTH OF POST EXCERPT IF NOT POST THUMBNAIL */
function xfullWidthPostWithThumbnail() {
alert("hhhhhhhhhhhhhhhh");
jQuery(".blog-post").css("display","block !important");
jQuery(".blog-post").css("color","red !important");
}
The problem: Currently the error I am getting:
Uncaught ReferenceError: xfullWidthPostWithThumbnail is not defined
at (index):155
Why is the function not defined? Any ideas??
There is no need to use Javascript to do this - its adding unnecessary processing on the client side.
All you want to do is change the CSS for .blog-post, so create a separate CSS class, and apply it if there is no thumbnail.
Create a new CSS class for the rules you want to apply
Check if the thumbnail exists.
If it doesn't, add your new class to the div
If it does, display as normal
CSS:
Create a class called no_thumbnail to add your styles. FYI You should avoid using !important.
.blog-post.no_thumbnail{
display: block !important;
color: red !important;
}
PHP:
/* declare a variable for your extra class */
$blogpostclass = "";
/* If thumbnail doesn't exist, add your 'no_thumbnail' class */
if(!has_post_thumbnail()) $blogpostclass = "no_thumbnail"; ?>
/* add the class variable to your blog-post div */
<div class="blog-post <?php echo $blogpostclass; ?>">
/* If there is a thumbnail, add it as usual */
<?php
if(has_post_thumbnail()) { ?>
<div class="post-thumbnail">
<?php the_post_thumbnail('feature-image'); ?>
</div>
<?php } ?>
[...]
</div>
you should do in this way
$("".blog-post"").css("display","block !important");
I recently download this Slideshow with jmpress.js for a website. I'm using PHP and a database in MYSQL. I used a recordset in Dreamweaver to get the data from database to the site. Then I tried to create a Repeat Region to show the latests posts in the slider.
Headings, images and text are working fine. The problem is on the href (links), which are not changed and remain the same (the ID of the latest post) for all records.
In the head I have these files:
SlideshowJmpress/css/style.css
http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js
SlideshowJmpress/js/jmpress.min.js
SlideshowJmpress/js/jquery.jmslideshow.js
SlideshowJmpress/js/modernizr.custom.48780.js
Here is the HTML Code:
<section id="jms-slideshow" class="jms-slideshow">
<?php do { ?>
<div class="step" data-color="color-1">
<div class="jms-content">
<h3><?php echo $row_slider['packageTitle']; ?></h3>
<p><?php echo $row_slider['packageDescription']; ?></p>
<a class="jms-link" href="article.php?ID=<?php echo $row_slider['ID']; ?>">Read more</a>
</div>
<img src="<?php echo $row_slider['packageGraphic']; ?>" width="300px;" height="300px;" />
</div>
<?php } while ($row_slider = mysql_fetch_assoc($slider)); ?>
</section>
<script type="text/javascript">
$(function() {
$( '#jms-slideshow' ).jmslideshow({
});
});
</script>
Here is the php code for the recordset:
$maxRows_slider = 4;
$pageNum_slider = 0;
if (isset($_GET['pageNum_slider'])) {
$pageNum_slider = $_GET['pageNum_slider'];
}
$startRow_slider = $pageNum_slider * $maxRows_slider;
mysql_select_db($database_nipvlach, $nipvlach);
$query_slider = "SELECT * FROM pages ORDER BY `date` DESC";
$query_limit_slider = sprintf("%s LIMIT %d, %d", $query_slider, $startRow_slider, $maxRows_slider);
$slider = mysql_query($query_limit_slider, $nipvlach) or die(mysql_error());
$row_slider = mysql_fetch_assoc($slider);
if (isset($_GET['totalRows_slider'])) {
$totalRows_slider = $_GET['totalRows_slider'];
} else {
$all_slider = mysql_query($query_slider);
$totalRows_slider = mysql_num_rows($all_slider);
}
$totalPages_slider = ceil($totalRows_slider/$maxRows_slider)-0;
Error is either in IDs in your DB or in the slideshow script i think.
Look at source of your page. Are the links right ?
I think that the problem is in the script or in the jmpress.min.js
When I changed slider, everything worked fine!
<?php
$query="SELECT * FROM `notification` where `Status`='1' && `ownerid`='$userid' ";
$result = mysql_query($query);
$count=0;
while($row=mysql_fetch_array($result))
{
$nid=$row['notifid'];
$pr="select * from `Swap` where `notifid`='$nid'";
$prm=mysql_query($pr);
$prow=mysql_fetch_assoc($prm);
$rid=$prow['Requesterid'];
$query1="select * from `myuser` where `Userid`='$rid'";
//echo $query1;
$result1=mysql_query($query1);
$row1=mysql_fetch_assoc($result1);
$rname=$row1['Firstname'];
//echo $rname;
?>
<div style="width:100%; background: rgb(228, 228, 228);margin: 20px;padding: 20px;">
<h1>A New Swapping Request from <?php echo $rname; ?></h1>
Your sweater is choose for swapping.....you want to give permission??
<div onclick="clicked(this);" id="<?php echo $nid; ?>">VIEW REQUEST</div>
</div>
<?php
$count++;
}
?>
<div id="light" class="white_content" style=" height: auto;">
X
<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
<script type="text/javascript">
function clicked(item) {
document.getElementById('light').style.display='block';
document.getElementById('fade').style.display='block';
var a = $(item).attr("id");
}
</script>
<div id="stylized" class="myform">
<iframe width="100%" height="400px" frameborder="0" scrolling="no" marginheight="0" marginwidth="0" src="confirmed.php?x="+a> </iframe>
</div>
</div>
hi,
here i want to pass unique php variable via href/anything else into for i frame src to pass.after see numbers of tutorials i get the value of $nid in $(item).attr("id"); but how to pass this value to i try u can see in my code..but its not working plz help
If js is in separate file (.js), then it's not parsed by PHP and therefore PHP tags won't work there.
In this case You could solve this by 2 scenarios:
1) Move function declaration to file that is parsed by PHP (like second block of Your code, where this function is called)
2) Add input parameter to "confirmno" function. Parameter sets "nid" value and it is given by PHP file (instead of 'onclick="confirmno()' You would use 'onclick="confirmno()'.
Code:
<script type="text/javascript">
function confirmno(nid) {
var con=confirm('You want keep this?');
if (con == true) {
window.location="notification.php";
} else {
window.location="confirmed1.php?nid=" + nid;
}
}
</script>
X
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