I'm trying to create a lightbox effect for a self-made WordPress Theme. But I'm trying to include a WordPress page in the body through jQuery.
For example, in my js file.
$('.button').Click(function(){
$(body).append('`<div><?php get_template_part('content','thing'); ?></div>`');
});
I've tryed that and then my php file doesn't reproduce the php bit.
Thanks.
try
$('.button').Click(function(){
$(body).append("<div><?php get_template_part('content','thing'); ?></div>");
});
Remember to use this jquery in a php file not in JS file.
it might help you
You can call a ajax functions that returns your php result.
Like (Seems you're using jQuery):
$.get("templatepart.php", function(data) {
$(body).append("<div>"+ data +"</div>");
})
And in your php file ("templatepart.php"):
<?php
// after includes/requires/etc functions
get_template_part('content','thing');
?>
Related
I have some code on a main page (index.php) that calls a php script (access.php) with javascript, as seen below.
The php (access.php) also has javascript but when I load it into the current page (index.php) then the javascript content in (access.php) is not working. Maybe this can't be done. Any thoughts?
The javascript does fire when I load access.php in a browser by itself.
$.post("access.php",
{FullName : response.name,ID: response.id,Email:response.email,UD:userDevice},
function(data)
{
document.getElementById('Container').innerHTML = data;
});
Perhaps I should have stated this before but it's using the Facebook Java SDK. MY END GOAL: I want to SEND VARS to a php that also has more/new Facebook-Java script that I can run from within the index.php.
This method worked. :)
$( "#Container" ).load( "access.php",
{FullName : response.name,ID: response.id,
Email:response.email,UD:userDevice} );
I'm having a bit of trouble understanding how to put javascript into a wordpress theme.
I know I have to save this javascript:
http://ajax.googleapis.com/ajax/libs/jquery/1.11.2/jquery.min.js
and put it in a folder on the server under "js" but what do I do with the functions javascript?
$(document).ready(function(){
$('#contactButton').click(function(){
$('#contactDropDown').show("fast");
$('#contactDropDown').animate({height:'500px'}, 200);
});
$('#closeBox').click(function(){
$('#contactDropDown').hide("fast");
$('#contactDropDown').animate({height:'0px'}, 200);
});
});
Do I save this as a different document but save it to the same "js" folder?
What is the exact code that I need to put into the functions.php of the theme?
i also created a fiddle for a little more understanding: http://jsfiddle.net/ptemyw52/
(the javascript is for the drop down contact box)
You use the WordPress wp_enqueue_script function to tell WordPress what to load.
It has jQuery builtin, so you can just tell it:
wp_enqueue_script('jquery');
to get that. For your own code, put it in a file somewhere (e.g. js/scripts.js) and then tell WordPress to load it with:
wp_enqueue_script(
'myscript',
get_stylesheet_directory_uri() . '/js/scripts.js',
array('jquery')
);
The final argument array('jquery') tells WP that your scripts depend on having jquery.
Wordpress Already has JQuery included.
http://codex.wordpress.org/Function_Reference/wp_enqueue_script
You have to make sure is it enqued somewhere. If JQuery is not running either in your functions.php or your head.php enqueue it like so:
wp_enqueue_script('jquery');
Wordpress loads JQuery in no-conflict mode so the bling ($) is not going to work you need to atually type in the jQuery. You can actually just type it out and pass it in through your document ready, like so:
<script>
jQuery(document).ready(function($){
$('#contactButton').click(function(){
$('#contactDropDown').show("fast");
$('#contactDropDown').animate({height:'500px'}, 200);
});
$('#closeBox').click(function(){
$('#contactDropDown').hide("fast");
$('#contactDropDown').animate({height:'0px'}, 200);
});
});
</script>
You can actually just add this to your footer.php if this the only code you have.. If you end up having more javascript you might want to make it's own file and enqueue as well.
in: wp-content/themes/your-template/js you put your js file.
Then in head of document (it could be header, index etc.)
<script src="<?php echo get_template_directory_uri(); ?>/js/your.js"></script>
I have Wordpress 2 instances: local and remote (remote should be very similar, it was mainly uploaded from local except from a few plugins). Code is using jQuery.noConflict method, because without it it was not working locally after adding a lot of plugins. Now when it's uploaded to remote Wordpress, it's still not starting there, but it works locally :). JS method is just not started. For sure file is attached with proper path in HEAD section of HTML file. No errors displayed in console.
Expected behaviour is: JS alert should appear but it not.
JS code is here:
var jQueryAlias = jQuery.noConflict();
function customizeWebUIForEmailSubscriberPlugin() {
alert("customizeWebUIForEmailSubscriberPlugin");
//format input button
jQueryAlias('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format input button
jQueryAlias('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format message text
//jQuery('.elp_msg').removeClass('elp_msg').addClass('post-body');
jQueryAlias('#elp_msg').addClass('message-format');
//hide submit button
jQueryAlias('#elp_txt_button').addClass('hide');
//hide email label
jQueryAlias('.elp_lablebox').addClass('hide');
}
jQueryAlias(customizeWebUIForEmailSubscriberPlugin);
Try the following. The function should fire on document.ready, but you can also call it whenever you like.
jQuery(function ($) {
function customizeWebUIForEmailSubscriberPlugin() {
alert("customizeWebUIForEmailSubscriberPlugin");
//format input button
$('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format input button
$('#elp_txt_email').removeClass('elp_textbox_class').addClass('form-control').addClass('full-width');
//format message text
//jQuery('.elp_msg').removeClass('elp_msg').addClass('post-body');
$('#elp_msg').addClass('message-format');
//hide submit button
$('#elp_txt_button').addClass('hide');
//hide email label
$('.elp_lablebox').addClass('hide');
}
$(document).ready(function() {
customizeWebUIForEmailSubscriberPlugin();
});
});
Edit:
In order to add jquery in WP, add this code to the bottom of your theme's functions.php file, before the closing php tag tat looks like this: ?>:
function pk_enqueue_scripts() {
wp_enqueue_script('jquery');
}
add_action('pk_enqueue_scripts', 'wp_enqueue_scripts');
The problem is that on both servers (local and remote) jQuery lib is attached in HEAD tag in different sequence. On my local machine: jQuery was attached after script.js and that worked. For remote: jQuery was attached after my script.js. I am not sure why it works in such way on my remote machine.
Solution:
After adding code
<?php wp_enqueue_script("jquery"); ?>
right after HEAD tag, it works:).
I'm working on a plugin that uses jquery (already loaded in the head). I can't get my plugin's javascript to load:
function add_my_js(){
echo 'joy joy joy';
wp_register_script('hdjs',plugins_url('/css/homedepotslider.js', __FILE__));
wp_enqueue_script('hdjs');
}
add_action('wp_print_scripts','add_my_js');
It will run the function (I see the "joy joy joy") but not load the script. Note: the "joy" text was being used to see if the function even runs.
I loaded my plugin css the same way (using _style) and have no issues.
Thanks!
You are looking in the wrong directory; I doubt the js file is in the css directory.
Always be careful when copy and pasting.
I imagine it should look like:
function add_my_js(){
echo 'joy joy joy';
wp_register_script('hdjs',plugins_url('/js/homedepotslider.js', __FILE__));
wp_enqueue_script('hdjs');
}
add_action('wp_print_scripts','add_my_js');
I've been struggling with query for some time. I have a CMS that I want to use on my site, but I cant use PHP includes so I decided to use jquery. I have made all the necessary includes and when I open the webpage it doesn't load all the files... Rarely does load() function load every file. Any ideas to solve the problem or alternatives? thanks.
<script type="text/javascript">
$(document).ready(function () {
// find element with ID of "target" and put file contents into it
$('#welcome-container').load('admin/data/blocks/Slider/Text.html');
$('#slides').load('admin/data/blocks/Slider/Imagini.html');
$('#acasa-continut').load('admin/data/blocks/Acasa/Continut.html');
$('#sidebar').load('admin/data/blocks/Sidebar/Continut.html');
$('#sidebar-v1').load('admin/data/blocks/Sidebar/Video-1.html');
$('#sidebar-v2').load('admin/data/blocks/Sidebar/Video-2.html');
$('#principii').load('admin/data/blocks/Despre/Principii.html');
$('#echipa').load('admin/data/blocks/Despre/Echipa.html');
$('#echipament').load('admin/data/blocks/Despre/Echipament.html');
$('#contact-t').load('admin/data/blocks/Contact/Contact.html');
});
</script>