How to insert PHP snip into a Javascript script - javascript

The variable in $pieces[12] is the url of an image on my server, some times when the page loads there is a broken image. My script is suppose to find the broken image error if there is one and replace it with $pieces[12] again. If that sounds right. But I don't know how to do it with my code.
<div class="right_ad" id="right_ad">
<script>
<img src="<?php echo $pieces[12]; ?>"
onError="this.onerror=null;this.src='<?php echo $pieces[12]; ?>';"
style="width: 100%;max-height: 100%"/>
</script>
</div>

You should urlencode those values. My tip is that there are special values in your filenames.

function onError_run_this_func(){
//get your new image url with ajax function
//or if you already have it in $pieces[12] then use it.
$.('.image-class).attr('src', '<?php echo $pieces[12]; ?>');
}
<div class="right_ad" id="right_ad"><script><img class="image-class" src="`<?php echo $pieces[12]; ?>" onError="onError_run_this_func()" style="width: 100%;max-height: 100%"/></script> </div>`

Related

Swap image src after ajax request using jQuery

I need to swap the image src of an img element using jQuery. I fetch the images using $.getJSON() and this is a different one every time. I've chained this swap to the hover of an <li> element using jQuery, but sometimes it will lag a bit when the image is changed or the image isn't loaded correctly on the first hover. I need a valid solution that can help me to do the trick. Here is the code:
HTML:
<div class="col-md-2 col-lg-2 text-right portfolio-thumb">
// here I used a static img tag, but I've opted to append it everytime.
<img class="img-fluid portfolio-nav-thumb" width="80" src="">
</div>
<div class="col-md-4 col-lg-4 portfolio-nav">
<ul class="navbar-nav ml-auto">
<?php if( $portfolio->have_posts() ): while( $portfolio->have_posts() ): $portfolio->the_post(); ?>
<li class="nav-item portfolio-nav-el"><a data-id="<?php echo get_post_thumbnail_id(); ?>" class="nav-link portfolio-nav-link" href="<?php the_permalink(); ?>"><?php the_title('<h4>', '</h4>'); ?></a></li>
<?php endwhile; ?>
<?php endif; wp_reset_postdata(); ?>
</ul>
</div>
JS:
$('.portfolio-nav-el').on('hover', function(e){
e.preventDefault();
// here I empty the img container div
$('.portfolio-thumb').empty();
var id = $(this).children('.portfolio-nav-link').attr('data-id');
//console.log(id);
$.getJSON('https://localhost/wordpress/wp-json/wp/v2/media/'+id, function(response){
// here I'm adding the img element to the parent container div
$('.portfolio-thumb').html('<img class="img-fluid portfolio-nav-thumb" src="'+ response.source_url +'" width="80">');
});
});
A preload or a fade solution can be fine?
$(document).on('hover', '.portfolio-nav-el', function() {
//Enter your code here...
});
This code will work on the elements that are created after ajax
I think you answered yourself. The preload is the best solution imo. I would probably load thumbnails for all items in the list. Maybe in base64 form, store it in propriate data attribute of each item and then, on hover, use it in src of your '.portfolio-thumb' element.

Pass the value when a <div> has onclick function and the data inside is changing dynamically

enter image description hereThis is my index_category.php.
<?php
include("db.php");
$sql="SELECT * from tcategory";
$conect= mysqli_query($conn, $sql) or die ("Failed To Connect.");
while($rows= mysqli_fetch_array($conect, MYSQLI_ASSOC)){ ?>
<div class="dialog-outer" data="<?php echo $rows['cat_id']; ?>" onclick="openNav()">
<div class="dialog-inner">
<?php echo $rows['cat_nm'];?>
</div>
</div>
<?php }
?>
This is the side nav to which I want to pass the data of div
<div id="mySidenav" class="sidenav">
<h3 class="sub"><i class="fa fa-arrow-right" aria-hidden="true"></i><strong> Sub Category</strong></h3>
×
<div id="result">
<?php include("functions/sub_category.php")?>
</div>
</div>
<script>
function openNav() {
$("#mySidenav").attr("style","width:250px");
var id=$(".dialog-outer").attr("data");
alert(id);
$.post('functions/sub_category.php',{id: id},function(data){
$('#result').html(data);
});
}
function closeNav() {
$("#mySidenav").attr("style","width:0px");
}
</script>
The problem is it is taking data=1 only but in network it showing as data=1 data=2 data=3 so on...
How to pass all the values from div in index_category.php to script in index.php
as u can see in the image i want to filter the sub category based on category. But when i click on any of the category it is taking only first value.But when u look in the image(inspect element) it is taking all the values as data=1 data=2 so on...when i click on category i want to get their respective id's.
If I understand correctly your your outer nav is repeated, that means that your $(".outer-nav") will return an array of elements not just one. You will need to iterate over them to read their data attributes. If you are looking to get just one specific one I would recommend using JQuery(since you are using it) selector for the click detection and from there working out the .outer-nav that you need.
Sorry if I did not understand your question correctly, but you use a weird mixture of pure JS and JQuery so it is a bit stange to read the code.
as #Aurus told, it is not only one element. You should modify like this:
===== 1st method =====
.... onclick="openNav(this)">
and the function too:
function openNav(element) {
...
var id=$(element).attr("data");
.....
}
===== 2nd method =====
<div class="dialog-outer" data="<?php echo $rows['cat_id']; ?>" onclick="openNav('oid_<?php echo $rows['cat_id']; ?>')" id="oid_<?php echo $rows['cat_id']; ?>">
and the function too:
function openNav(id) {
...
var id=$("#"+id).attr("data");
.....
}

Refresh to show new/random taxonomy

I have an area on my Wordpress theme where I am showing info about a random taxonomy. Basically, the taxonomy is "playwrights" and I am featuring a random one on the home page. Here is the HTML:
<div id="home-top-right">
<?php
$allpw = get_terms( 'playwrights', 'hide_empty=0' );
$randpw = $allpw[ array_rand( $allpw ) ];
$randpw = get_term($randpw->term_id, 'playwrights');
$pwlink = get_term_link($randpw->term_id, 'playwrights');
?>
<div class="title">
Playwright Spotlight
<li class="fa fa-refresh refresh"></li>
</div>
<div class="content" id="p-spotlight">
<?php if (get_field('image', 'playwrights_'.$randpw->term_id)) { ?>
<div class="thumb">
<?php $imageid = get_field('image', 'playwrights_'.$randpw->term_id); ?>
<a href="<?php echo $pwlink; ?>">
<?php echo wp_get_attachment_image($imageid, 'pwthumb'); ?>
</a>
</div>
<?php } ?>
<div class="text">
<div class="sub-title">
<?php echo $randpw->name; ?>
</div>
<?php echo print_excerpt('', '200'); ?>
</div>
</div>
</div>
I want to be able to click a button (in the code, it is the <i> tag) and reload just that section (not the whole page) with a new random taxonomy term (playwright). I'm not great at JS/jquery and I'm not able to find a tutorial online that gets me where I need to go, especially considering the exchange between post data and the js function.
How should I go about this?
By default, WordPress has an admin-ajax.php file which you can send AJAX calls to. You can create a hook that is linked to your own custom function in which you can do the stuff you want, like getting the random term and send it back to the client.
Then you can pass a value to your AJAX call, called 'action'. When admin-ajax.php is getting a POST request with the action you 'hooked', your custom function is being executed.
Have a look at the links below for a more detailed explanation:
http://premium.wpmudev.org/blog/how-to-use-ajax-with-php-on-your-wp-site-without-a-plugin/
http://codex.wordpress.org/AJAX_in_Plugins

javascript foreach loop values

I am new to this and I am struggling with one thing for such a long time...
I use foreach loop to show all images in a list, that works fine.
<?php
foreach($listImages as $image) {
?>
<a href="#" class="show_hide" title="<?php echo $image; ?>" >
<img src="foto.php?file=<?php echo $image; ?>" alt="building thumb"/>
</a>
<?php
}
Then I use simple show and hide script that looks like this:
<script type="text/javascript">
$(document).ready(function(){
$(".slidingDiv").hide();
$(".show_hide").show();
$('.show_hide').click(function(){
$(".slidingDiv").slideToggle();
});
});
</script>
Finally, when I use div slidingDiv, it works as I expect, but I also need to know name of the image I clicked on but I really don't know how to do that.
<div class="slidingDiv">
!!! I need to know $image from the foreach loop here !!!
</div>
Thank you for your help!

Dynamical Image loaded from php after javascript need to run

I have page with image loading Dynamical from php.The image height is
various px size(70,130,100,60).my need is how can get the image size currently viewed in page automatically in alertbox i try same code is not working.please help
code
<?php
foreach ($images as $image) {
?>
<img src="<?php echo $image['url']; ?>" class="img_test" id="<?php echo $image['url']; ?>" width="70" style="max-height:70px" onclick="imagesize(this)" />
<?php
}?>
<script>
$( window ).load(function() {
$( ".img_test" ).each(function( index ) {
alert('Height: '+$(this).height());
});
});
function imagesize(obj){
alert($(obj).height());
}
</script>
if we click the image the height will display.in page load after automatically can't be display
It's important to understand that it's navigator (client) which load image and PHP is running into your server and send text to client.
Use a listener .on to get event 'click'.
Moreover, use $(document).ready and not .load to wait that images are loading
<?php foreach ($images as $image) { ?>
<img src="<?php echo $image['url']; ?>" class="img_test" id="<?php echo $image['url']; ?>" width="70" style="max-height:70px" />
<?php } ?>
$(document).ready(function(){
$( ".img_test" ).each(function(){
alert('Height: '+$(this).height());
});
$(".img_test").on("click", function(){
alert($(this).height());
});
});
http://jsfiddle.net/3c9CN/

Categories