Develop Reference

How to dynamically load Content in Div with Jquery? (Code given)

I want to have a overlay over my content site. So if somebody clicks on a link a article is loaded into the covering overlay Div
Everything is working fine except the output is not working properly.
<script language="javascript">
$( ".iddd" ).click(function() {
var aid = $(this).prop('id');
$('#overlaycontent').load('http://www.example.com/overlay.php', { id: aid });
});
Test PHP Script:
<?php
include ("config.php");
$ID = $_POST['id'];
echo $ID;
?>
That´s how my links are placed:
<a class="iddd" href="#overlay" id="6337cab172">
The id should be loaded into the script so I can access my articles but i guess the Jquery is not working properly.
I looked at this overlay with dynamic php content the right way?
but still it doesnt post the ID properly!

Not sure what is in config.php and if missing that could cause your problem, but to include a file, you don't use parenthesis, but only quotes, so, instead of
include ("config.php");
just
include "config.php";

I am getting the image url in alert box . I need to use that url in <img src=""> in php

[enter image description here][1]
[1]: https://i.stack.imgur.com/VvuXB.png how to use that alert box url in php

There is no way of displaying alert messages through PHP using PHP alone, you must use JavaScript, you may do so in the following way:
echo '<script language="javascript">;
alert("https://i.stack.imgur.com/VvuXB.png");
</script>';
You can use echo to also add HTML or in-line CSS code too.

How to put php content into javascript markup?

I have a video gallery, and all the titles are generated by php. The lightbox for these videos, however, is customized in javascript. How can I put the php titles inside the iframe markup?
See here:
$('.video').Lightbox({
type: 'iframe'
iframe: {
markup: '<div class="lightbox_container">'+
'<iframe class="iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="title"> <?php the_title();?> </div>'+
'</div>',
callbacks: {
markupParse: function(template, values, item) {
values.title = item.el.attr('title');
}
});
EDIT
For reference, I need the attachment title below ($attachment_data['title']) in the javascript section mentioned (the markup).
<?php
$the_query = new WP_Query(array(
'post_type' => 'attachment',
'category_name' => 'video'
));
while ( $the_query->have_posts() ) :
$the_query->the_post();
?>
<?php
$attachment_data = wp_prepare_attachment_for_js( $attachment->ID );
echo'<figure><a class="video" href="'.get_post_meta($post->ID, 'credit_url', true).'">';
echo''.the_post_thumbnail ('medium').'';
echo'<div class="photo-title"><h2>'.$attachment_data['title'].'</h2></div></a></figure>';?>
<?php
endwhile;
wp_reset_postdata();
?>

Try this:
$('.video').Lightbox({
type: 'iframe'
iframe: {
markup: '<div class="lightbox_container">'+
'<iframe class="iframe" frameborder="0" allowfullscreen></iframe>'+
'<div class="title"> <?=the_title()?> </div>'+
'</div>',
callbacks: {
markupParse: function(template, values, item) {
values.title = item.el.attr('title');
}
});
Notice the use of the <?= shorthand for echo. (read more about it)

There are a few ways to get javascript and PHP to interact. You could pull from the client using an ajax call. If you need to get a bunch of data asynchronously, that might be the thing. If you're going to have 20 copies of this iframe, you might consider using an AJAX call to pull a whole array of values/objects with JSON and then you can do with them whatever you'd like.
But... I suspect that you'll just use this iframe once per page. Rigging up some ajax for a once-per-page thing is probably a little overkill.
If you are putting your javascript right on your page, you could do as IzzEps suggested and simply echo your php values right into the iFrame. But I know most folks like to keep their javascript separate from their html content in a .js file. This makes it more maintainable. While not impossible, php most easily puts content onto .php files rather than others like js. I don't have any experience with getting a browser to use a php file for a script source.
What I've found easiest and cleanest is to write my javascript in my .js file as normal, then I'll add the variable(s) to my .php file as minimally as possible at the top in a script tag.
So, at the top of your page, you could do something like any of these:
<script>
ObjectYoureWorkingWith.Title = '<?php echo $the_title(); ?>';
var TitleObjectList = <?php echo json_encode($list_of_titles); ?>;
</script>
Basically, you feed input from your php into whatever module, object, array, or variable you're working with and then you can refer to that in your javascript wherever you need it. That way you're not forced into putting all your javascript right in with your html. You can even do this with a whole object or collection of object using json_encode (which is javascript's native object notation anyway).
Update:
I was typing the above on my cell (not the best way to respond to this sort of thing). Let me demonstrate what I'm describing:
Let's say in your php you have 20 titles you want to work with. You could make an associative array. Use an Id or whatever identifier you want to call it with.
$titleArray = [ 123 => 'Title1', 456 => 'Title2']; //(and so on....)
Then, on the php page you're wanting that data, do this:
<script>
var titleArray = <?php echo json_encode($titleArray); ?>;
</script>
This will now allow you to access it on that page (or in a js file loaded on that page) by doing this:
var myFirstTitle = titleArray["123"]; //This will return "Title1"
json_encode will take a PHP object and translate the public variables into a javascript object. Simply echoing this to a javascript variable will give javascript the object to work with.

The developer of the lightbox has a solution that I was already partly implementing. For the title to appear in the lightbox, I needed this callback from my original code:
callbacks: {
markupParse: function(template, values, item) {
values.title = item.el.attr('title');
}
But I had neglected to include the title in my PHP loop, corrected here:
echo'<figure><a class="video" title="'.$attachment_data['title'].'" href="'.get_post_meta($post->ID, 'credit_url', true).'">';
There's a similar post that also covers this answer, for reference:
Title for iframe/video in magnific popup
Thanks again for all your help!

target iframe from different page in php or javascript

I am creating a template demo bar, where people can view my created web themes. User will click preview button on one page and will be able to see theme in iframe in another page.
Below is the code for link page
<html>
<head></head>
<body>
preview
</body>
</html>
and then on demo page I get the iframe
<iframe src="<?php echo $_GET['theme']; ?>" style="width:100vw; height:100vh;"></iframe>
This works ok, but my problem is in returning url which displays the URL:
http://site/demobar/?theme=http://www.template.com
I want template name instead of template address in URL
http://site/demobar/?theme=themeName
How can I achieve this!!, is there any other alternative with javascript!

First of all, set up an array with possible themes, and pick the appropriate one based on the theme parameter...
<?php
$themes = array(
"theme" => "http://www.theme.com/",
"othertheme" => "http://www.some-other-theme.com/",
);
$themeAddress = $themes[$_GET['theme']];
?>
Next, generate the iframe with reference to the url...
<iframe src="<?php echo $themeAddress; ?>" style="width:100vw; height:100vh;"></iframe>
Then call the url with the appropriate theme name:
http://site/demobar/?theme=othertheme

Woocommerce All JS And Jquery elements are not loading

I had made my theme to be compatible with woocommerce, by creating woocommerce.php, and adding a custom function in my functions.php file which is
add_theme_support( 'woocommerce' );
And this is how my woocommerce.php file looks like :
<?php
global $mandigo_options, $dirs;
get_header();
// heading level for page title (h1, h2, div, ...)
$tag_post_title_single = $mandigo_options['heading_level_post_title_single'];
?>
<td id="content" class="<?php echo ($mandigo_options['sidebar_always_show'] ? 'narrow' : 'wide'); ?>column"<?php if (mandigo_sidebox_conditions($single = true)) { ?> rowspan="2"<?php } ?>>
<div class="woocommerce">
<?php woocommerce_content(); ?>
</div>
</td>
<?php
// if we have at least one sidebar to display
if ($mandigo_options['sidebar_always_show'] && $mandigo_options['sidebar_count']) {
if (mandigo_sidebox_conditions($single = true))
include (TEMPLATEPATH . '/sidebox.php');
include (TEMPLATEPATH . '/sidebar.php');
// if this is a 3-column layout
if ($mandigo_options['layout_width'] == 1024 && $mandigo_options['sidebar_count'] == 2)
include (TEMPLATEPATH . '/sidebar2.php');
}
get_footer();
?>
Everything is appearing fine now, but I can't find the add to cart button and also all the elements that uses javascript or jquery are not loading.
I had tried :
To use wordpress JQuery updater
To put the jquery library reference in the header.php
Deactivating all plugins
I had all the fields of the necessary elements in woocommerce field like the price, but its obvious that this is a JS or JQuery error.
And here is a link to the site is product page :
http://www.doctor-detail.com/product/gift-card-product-2
Any help would be much appreciated!

When I inspected the site and checked the console I found that although I was linking to the latest jquery in the header of my site, it was using the main jquery of the theme.
So, all I needed to do is to remove the theme is Jquery file from the JS folder.
After that woocommerce was working fine.

You should use wp_enqueue_script() in functions.php instead of linking in a header.php, Plese keep in mind JQuery in enqueued by default. If you need to change version, fist you have to deregister the default one.