I can not figure this out.
I have a Controller that loads my main.php:
<div id="container"></div>
<script>$('#container').load('index.php?path=wizard&wizard_id=<?php echo $_GET['wizard_id']; ?> #wizard');</script>
"index.php?path=wizard&wizard_id=1" loads: view/module/wizard.php'
view/module/wizard.php looks like this:
<div id="wizard" data-wizard_id="<?php echo $groups_in_set['wizard_id']; ?>" data-total_sets="<?php echo $groups_in_set['total_sets']; ?>">
<div id="set" name="<?php echo $groups_in_set['wand_set']; ?>">
<?php foreach ($groups_in_set['groups'] as $group){ ?>
<!--Step Text -->
<h1><?php echo $group['group']; ?></h1>
<!--Step Detail -->
<div data-group="<?php echo $group['group']; ?>">
<script>alert("group");</script> // No script tags pass to main.php
<?php foreach($group['wands'] as $wand){ ?>
<span id="prompt_elements_<?php echo $wand->wand_id; ?>"></span>
<script>
// Load Wand
// Script not executing on ajax load
loadPromptElements('<?php echo $wand->prompt_type; ?>', <?php echo $wand->wand_id; ?>);
</script>
<?php } // End Wand Loop ?>
</div> <!-- End Group -->
<?php } // End Group Loop ?>
</div> <!-- End Set -->
</div> <!-- End Wizard -->
As you can see from my comments everything loads correctly except the "loadPromptElements" function. The entire script tag does not display in my rendered HTML. I can not figure this one out and need some help. Thanks community!!!
Regarding jQuery .load() handling of scripts:
If .load() is called with a selector expression appended to the URL [like #wizard], however, the scripts are stripped out prior to the DOM being updated, and thus are not executed.
jQuery Reference Page
$('#container').load('index.php?...stuff... #wizard'); // <--- THAT
So you have a couple of options. Either find another way around using the #wizard selector after the URL in your .load() call or you can put it all (that one function) into a separate JS file and load it at the same time with .getScript(). You'll probably have to make it a PHP file so you can utilize the foreach() loop and whatnot.
Related
I have question if is it even possible.
I have contact.php home.php and porfolio.php .
In every single site I have exacly same header (include "header.php") and only what I need is change one h1. I mean on every site have different title of h1. Is there any possible way, to change on every site html code differently ?
Like every site have same header.php but every time different h1..
Or should I make like "one half of code.php" .. CHANGEABLE CONTENT .. "second half of code.php.
Or should I do it in javascript ? like onload function and if site is contact.php then change h1.innerHTML on "".. ?
<body>
<?php include "./components/header.php"; ?>
</body>
I'm pretty sure someone on stackoverflow have answered a similar question but you can do something like
<body>
<?php
$h1Content = "put your desired h1 content here";
include "./components/header.php";
?>
</body>
Then in your header.php, do
<h1><?php echo $h1Content ?></h1>
You can also use an isset to check or set a default value
<h1><?php echo isset($h1Content)? $h1Content : 'Default Value' ?></h1>
you can achieve this easily. All you have to do is to assign header value to an variable and then use that variable in your header file.
//header.php file
<h1><?php echo $mainHeader; ?></h1>
and then before you inject the header you have to init that value on each site
<?php $mainHeader = 'Hello world'; ?>
<body>
<?php include "./components/header.php"; ?>
</body>
I created a website in WordPress (Website: Link) using this theme.
I would like to know, how can I add a [timeline-express] widget after the image slider?
(I tried to modify idyllic-functions.php, using:
...
</div> <!-- end .main-slider -->';
echo $idyllic_category_sliders_display;
echo add_filter( 'widget_text', 'timeline-express');
...
,but the site crashes.)
Open this file: idyllic/inc/front-page/front-page-features.php and add this following line on line 34:
<?php echo do_shortcode('[timeline-express]'); ?>
Just above this line:
<div class="our-feature-box <?php echo esc_attr($feature_box_class); ?>">
So, your updated code will be also follows:
<?php echo do_shortcode('[timeline-express]'); ?>
<div class="our-feature-box <?php echo esc_attr($feature_box_class); ?>">
Note that, it's always a good practice to create a child theme, copy file/template to the child theme directory, and then modify your codes. Otherwise, you will lose your modified codes once the theme is updated.
PS: please try to follow what #tacoshy mentioned in his comment while asking questions in stackoverflow.
I tried to do a ajax call in my wordpress loop, basically i would like to load the content of the post in the home page in a div, after the click on the title.
the call ajax seems work, but i have the problem that load whole the page, and i would like to load only the content of a div with specific id.
this is my code: index.php
<?php if (have_posts()) : while (have_posts()) : the_post(); ?>
<a class="post-link" rel="<?php the_ID(); ?>" href="<?php the_permalink(); ?>">
<?php the_title(); ?>
</a>
<?php endwhile; endif; ?>
<div id="single-post-container"></div>
this is the single.php
<?php $post = get_post($_POST['id']); ?>
<div id="single-post post-<?php the_ID(); ?>">
<?php while (have_posts()) : the_post(); ?>
<?php the_title();?>
<?php the_content();?>
<?php endwhile;?>
</div>
and this is the js
jQuery(document).ready(function(){
jQuery.ajaxSetup({cache:false});
jQuery(".post-link").click(function(){
var post_link = jQuery(this).attr("href");
jQuery("#single-post-container").html("content loading");
jQuery("#single-post-container").load(post_link);
return false;
});
});
i tried to add the id #single-post after post_link like this:
jQuery("#single-post-container").load(post_link #single-post);
but when i run gulp i have an error that block me.
how can i achieve this scope?
someone could give me an help or suggestion?
I think this may be the answer but only if I have correctly understood the problem:
What is post_link? What actual url is your AJAX call calling? If you are just calling single.php the first thing that does is call header() - hence you might get the whole page. Looking at your index.php i think this may be what is happening.
If so. You need to look up how to do AJAX calls in WordPress. You have to add an AJAX callback with something like add_action('wp_ajax_my_action', mycallback). Then your callback can just get the single post with get_post(). The actual url your AJAX call should be calling is something like:
yourdomain/wp-admin/admin-ajax.php?action=my_action&post_id=THEPOSTID. You can use admin_url() to help you build the correct url.
You may need to inject THEPOSTID into your JavaScript. Using wp_localize_script. Or you could add it as an attribute in index.php and get it in your JavaScript.
Then your callback - mycallback() - can use get_post() to get just the post and return it without all the page fluff. E.g.:
function mycallback()
{
$postId = $_GET['post_id'];
$postRow = get_post($postId);
echo $postRow->post_content;
wp_die();
}
Maybe look for a few examples on how to do AJAX with WordPress? e.g. http://wptheming.com/2013/07/simple-ajax-example/
UPDATE:
added wp_die(); at the end of the AJAX call-back. You need to do this to stop WordPress spitting out a lot of page bumf as well. In fact this may be the part that is missing from your single.php. Stil, probably better to do to it using admin-ajax.php anyway perhaps.
if this can help someone, i solved with this code
//take the permalink of the single post
var post_permalink = locations[i].post_url + " #single-post";
// load post in the div
jQuery("#single-post-container").html("content loading");
jQuery('#single-post-container').load(post_permalink);
thanks you all anyway
I have custom post type "members", which stores their details within custom-post-meta. I am currently working in it's custom-post-type-archive page named "archive-members.php" which lists all these members, with their details.
Now, I needed to display a meta-data related to each member into a simple js popup-box, so I used the code below and now each of these posts have a link which opens up a popup-box, when clicked.
I am able to display the post-meta-values in the popup-box but the problem is it shows the custom-field-value of the first post only. What I am expecting is that it should load individual custom-field-values of each of these posts, as they all have different values.
Here is a Simplified PHP
<?php get_header();?>
<h1><?php echo post_type_archive_title(); ?></h1>
<?php if(have_posts()) : while(have_posts()) : the_post();?>
<?php if(has_post_thumbnail()) { .......... }?>
<?php echo get_post_meta(............);?>
CLICK TO POPUP
<div id="light" class="white_content">
<div class="close-button">CLOSE</div>
<?php echo get_post_meta($post->ID, "account_number", true);?>
</div>
<div id="fade" class="black_overlay"></div>
<?php endwhile; endif; ?>
Here, what is happening is I am getting the same account number (which is the meta-value of the meta-key "account_number" of the First Post in the loop), whenever I am clicking on "CLICK TO POPUP" link of any of these posts. I guess the popup does not load content according to individual post IDs. What is the mistake in the loop ?
Note : I am using basic java-script for the popup and it works pretty well. I do not see the need of providing its css here. Anyways, if needed will provide it promptly.
It's happening because you are creating a popup for each member, but they all have the same id. That is incorrect syntax and as such JavaScript will not behave as you expect it to. (If you want the ID to recur for all for styling or other scripts, use a class).
Try this:
<?php get_header();?>
<h1><?php echo post_type_archive_title(); ?></h1>
<?php if(have_posts()) : $i = 0; while(have_posts()) : the_post();?>
<?php if(has_post_thumbnail()) { .......... }?>
<?php echo get_post_meta(............);?>
CLICK TO POPUP
<div id="light-<?php echo $i;?>" class="white_content">
<div class="close-button">CLOSE</div>
<?php echo get_post_meta($post->ID, "account_number", true);?> </div>
<div id="fade" class="black_overlay"></div>
<?php $i++; ?>
<?php endwhile; endif; ?>
This will give each popup box a unique ID and the relevant member button will be only targeting said popup
On form submit, I want to give the user a message.
Originally, I was doing
if(isset($_POST['submit'])) {
echo "submitted";
}
But this would appear randomly at the top of the page.
I want control where the message is output, so I wanted to append the message to a DOM element... to do that, I thought I could use JavaScript as so:
if(isset($_POST['submit'])) {
echo "<script type=\"text/javascript\">
document.getElementById(\"submitmsg\").innerHTML = \"submitted\";
</script>";
}
The HTML shows that the PHP seems to output the JS correctly, but submitmsg is empty.
Any thoughts?
HTML form: calls itself so it can run the PHP code at the top of the page:
<form role="form" action="" method='post' accept-charset='UTF-8'>
<div class="row">
<div class="form-group col-xs-12 floating-label-form-group">
<input class="form-control" type="text" name="name" placeholder="Name">
</div>
</div>
<div class="row">
<div class="form-group col-xs-12">
<button type="submit" name="submit" class="btn btn-lg btn-success">Send</button>
</div>
</div>
</form>
Not sure what you really do since you didn't post all the code, but I see 2 options.
First : On submit, you use an ajax query and don't refresh the page. If that's the case you should use the oncomplete() callback to do the javascript stuff (php should not return javascript code).
Second : The page is reloaded, then you should use PHP to directly echo html wherever you want in your code :
<nav ... >...</nav>
<p id='submitted><?= isset($_POST['submit']) ? "Submitted" : "" ?></p>
Note that you can put php tags where you want really :
<html>
<head>
<title><?php echo "Today is " . date('Y-m-d');?></title>
</head>
<body>
<?= "My Cool Body" ?>
</body>
<html>
I want control where the message is output
Why don't you store the submit status in a PHP variable and output it where required:
<?php
$is_submitted = isset($_POST['submit']);
?>
<html>
<body>
<!-- your page -->
<nav></nav>
<?php if($is_submitted) : ?>
<p id="submitmsg">Submitted</p>
<? endif; ?>
Or even just put your isset() check inline further down your page.
But this would appear randomly at the top of the page.
There is no point in echoing out a Javascript call to display this message, you can put PHP where ever you want to in a document.
the other answers are pretty much the right way.. if you wanna stick with the way you're doing things now, just switch your php output to:
window.onLoad = document.getElementById("submitmsg").innerHTML = "submitted";
if the Page is reloaded anyway you can echo submitted where you need it.