We Keep Coding

How to dynamicaly replace part of a facebook share link with ajax

I have the following interesting situation... im trying to create a modification in the share button link of facebook so that a small part is replaced by a userid number in such manner that when the person click in the shared link it goes to the respective user that shared the data load from my website php file.
i managed to make it work with a user number... but im not being able to substitute it using
this is in my script
document.getElementById("cliente").innerHTML = myObj.cliente;
and this is the working version where user id is 22
<div class="fb-share-button" data-href="https://energycycle.com.br/minhaeconomia.php?userid=22#" data-layout="button_count" data-size="large">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fenergycycle.com.br%2Fminhaeconomia.php%3Fuserid%3D22%23&src=sdkpreparse" class="fb-xfbml-parse-ignore">Compartilhar</a>
</div>
so basically i need to substitute the 22 the two times it appear in this code... by the client number that i receive from the microcontroler esp8266.
if you visit this page https://www.energycycle.com.br/minhaeconomia.php?userid=22 you can see the output that the pearson that clicked the shared link will see. is a php page that takes the userid and show the values from a database..
i tried the following but gives errors
<div class="fb-share-button" data-href="https://energycycle.com.br/minhaeconomia.php?userid=id=" cliente "#" data-layout="button_count" data-size="large">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fenergycycle.com.br%2Fminhaeconomia.php%3Fuserid%3Did=" cliente "%23&src=sdkpreparse" class="fb-xfbml-parse-ignore">Compartilhar</a>
</div>
how i can make this replace by id work in this case please help
on the website side its working with inline
<?php echo $client?>
as you see here
<div class="fb-share-button" data-href="https://energycycle.com.br/minhaeconomia.php?userid=<?php echo $userid ?>#" data-layout="button_count" data-size="large" data-mobile-iframe="true">
<a target="_blank" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fenergycycle.com.br%2Fminhaeconomia.php%3Fuserid%3D<?php echo $userid ?>%23&src=sdkpreparse" class="fb-xfbml-parse-ignore">Compartilhar</a>
</div>
But i didnt manage to make the php work on the controller..
Thanks in advance. Hope you like the question

I solved the problem but still have another problem but open another question to try to solve it.
the solution to this question i made here i found by using this:
document.getElementById("cliente").innerHTML = '<div class="fb-share-button" data-href="https://energycycle.com.br/minhaeconomia.php?userid=' + myObj.cliente + '#" + data-layout="button_count" data-size="large" ><a target="_blank" data-layout="button_count" data-size="large" href="https://www.facebook.com/sharer/sharer.php?u=https%3A%2F%2Fenergycycle.com.br%2Fminhaeconomia.php%3Fuserid%3D' + myObj.cliente + '%23&src=sdkpreparse" class="fb-xfbml-parse-ignore">Compartilhar</a></div>';
and having this where the button must appear
<div class="fb-share-button" id="cliente" data-layout="button_count" data-size="large" ></div>
however in my case it still need some tweek because im getting this values from a get request and it takes a while to receive the numbers and after the numbers are received and populate the fields the button disappear and become a simple underlined word with link.. thats because the button is loading before the innerhtml can act..
now i need to know how to solve this.. how to reload the button after the info is received from the get request.
thanks in advance

reCaptcha not shows on my singlepage website

I have some problem with the recaptcha loading.
I trying to remake and modernize one of old my website to a singlepage one with php, javascript and ajax (no jquery!).
Everyting is fine yet, but the recaptca. I use the following method.
index.php contains the "main frame" and the target divs to the HTTPRequest function.
With AJAX I load the PHP page templates to the main target divs.
BUT when my PHP template file looks the following to show the registration last page with the captcha:
<?php
$template = '
.../ some code sits here /...
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage(\'registration_page_2.php\')">« Back</button>
<button class="button btn-reg" onclick="validatePage(\'registration_validate.php\')">Submit your registration</button>
</div>
';
echo $template;
and I load it into one of my divs, the reCaptcha has not been shown. I tried some ways and tricks, but it's not working.
There is no form and submit section at all on my page. I do it with javascript and ajax.
Why I cannot make it works?
Is that possible to bypass form->submit->post method to get reCaptcha alive?
Or is the singlepage the wrong way?

I don't quite understand you but since i can't post a comment, i will attempt to answer anyway.
You don't have to use php to echo the html code, just in-case you didn't know, you can do it like this.
<?php
//php code
?>
<div class="w80">
<div class="g-recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
</div>
<div class="flex-row fr-c mt50a">
<button class="button btn-reg" onclick="switchPage('registration_page_2.php')">« Back</button>
<button class="button btn-reg" onclick="validatePage('registration_validate.php')">Submit your registration</button>
</div>
<?php //continue code here ?>
and I load it into one of my divs, the reCaptcha has not been shown. I
tried some ways and tricks, but its not works :(
It's hard to tell from the information you have given why it is not being shown
There is no form and submit section at all on my page. I do it with
javascript and ajax.
If your registration_page_2.php and registration_validate.php does not echo the template in your current .php shown, then it certainly wouldn't appear on your page
Why I cannot make it works? Is that possible to bypass
form->submit->post method to get reCaptcha alive? Or is the singlepage
the wrong way?
I think you just did something wrong in the middle. The way you have said is 'form->submit->post' is the right way to go about this
Can you help me to get the solution please?
Using your browser, inspect or view the source code of your page. (For google chrome the hotkey is CTRL+SHIFT+I) Try to find the elements in your page to see if they are loaded, but hidden due to css or the likes. After which, you should give more details.

update your captcha block with adding id recaptcha
<div class="g-recaptcha" id="recaptcha" data-sitekey=".../ my sitekey sits here /..."></div>
add following code in your page load
<script src='https://www.google.com/recaptcha/api.js?hl=en&render=explicit&onload=onReCaptchaLoad'></script>
<script type="text/javascript">
var recaptcha;
var onReCaptchaLoad = function(){
recaptcha = grecaptcha.render('recaptcha',{
'sitekey' : 'YOUR_RECAPTCHA_PUBLIC_KEY',
'theme' : 'white'
});
};
</script>

You can do it with php request
<?php
if(isset($_POST['g-recaptcha-response']) && !empty($_POST['g-recaptcha-response'])){
$recaptcha = $_POST['g-recaptcha-response'];
$recaptcha_secret = 'YOUR_RECAPTCHA_SECRET_KEY'
$verify = file_get_contents("https://www.google.com/recaptcha/api/siteverify?secret={$recaptcha_secret}&response={$recaptcha}");
$captcha_success = json_decode($verify);
if($captcha_success->success){
// success
}else{
// error
}
}
?>

Show featherlightbox pop up on page load

I'm going to be totally honest. I have zero experience in wordpress php coding but I can do simple adjustments using the wordpress admin. Now I'm facing a problem. I used the feather lightbox js. I have a code below which shows the part of the footer.
<?php if ( is_front_page() ) : ?>
<script>
jQuery(document).ready(function() {
$.featherlight("#mylightbox");
//console.log("hi");
});
</script>
<?php endif; ?>
<?php wp_footer(); ?>
Open element in lightbox
<div id="mylightbox">This div will be opened in a lightbox</div>
</body>
With this the featherlightbo pops up when i clicked the anchor tag. But what i want to do is to have the feather lightbox to open it on page load. As you can see in my code there's a part there says if front_page which has also ready function. It returns an error
Uncaught TypeError: Cannot read property 'featherlight' of undefined
Please I need your help anyone.
Thanks.

<div id="mylightbox">Text to display in box</div>
For this popup use the script
$.featherlight($('#mylightbox'), {});
This will work

It seems like jQuery isn't defined using the $-sign, since jQuery.(document) works.
Change $.featherlight to jQuery.featherlight and it should work.
As you asked in your comment, you can initially hide the div by adding the css property: display: none on that div.

Setting DIV Content With JS Not Working, So Close

I'm trying to replace a div's content with a sourceURL and it works in just a flat html setup, but when I try to incorporate it into a php page it doesn't want to work and I can't figure out why.
..and yes I'm loading jquery.
<script type="text/javascript">
function loadContent(elementSelector, sourceURL) {
$(""+elementSelector+"").load("http://forexfbi.com/"+sourceURL+"");
}
</script>
and
echo "<tr class=\"expand-child\"><td colspan=\"11\" height=\"100px\">$name1<br>"; ?> Link 1 <?php echo"<div id=\"content\"></div></td></tr>";

start with checking browser console to see the error. It may be a possible jquery confict in your php file.
Please state the error you found on console. press f12 and click on console.

Need help to resolve a slider javascript conflict with Safari

I'm facing a problem with a slider that I'm using on a website.
(www.cloosedesign.com)
The website is a portfolio I made for a friend. So there are severals works to show.
Each work is listed as a link, and when you click on the link it shows you the corresponding picture with the slider. (I've put some PHP to get the right pictures from the database Mysql).
It works fine, except on SAFARI. Indeed sometimes when I click on a link the text of the footer (white text on the black box) desappear and re-appear, like if the page was refreshing.
This pb appear sometimes after the 3rd click, or sometimes after more clicks.
here is my code :
in the <head> :
I'm calling jquery :
<script type="text/javascript" src="http://code.jquery.com/jquery-latest.min.js"></script>
And I'm calling the javascript file for the slider :
<script type="text/javascript" src="js/slides.min.jquery.js"></script>
then in the portfolio_english page I'm checking the images corresponding to the work selected (= $contenu):
<?
$images_sql = "SELECT * FROM `a_fichier`
WHERE id_fiche=".$contenu."
ORDER BY tri";
$images = mysql_query($images_sql);
echo'<div id="slides">';
echo '<div class="slides_container">';
while ($image=mysql_fetch_array($images))
{
echo "<img src='Images/PorteDoc2/".$image['nom']."' width='540' height='600' alt='".$image['titre']."' />";
}
echo '</div>';
echo '</div>'; ?>
And just after the php code I write the following javascript :
<script type="text/javascript">
$(document).ready(function() {
$('#slides').slides({
preload: true,
preloadImage:'Images/img/loading.gif',
pagination: true,
fadeSpeed: 0,
slideSpeed: 0,
effect: 'slide, slide',
});
});
</script>
And then I call the footer.php file.
Thanks

This http://jsfiddle.net/NNSqw/ is the code that does what I mean, it uses jquery and ajax, now, to explain the html bit is pretty straight forward the div with the id="content" will be where your content will get loaded into.
Now to the JS/JQuery, everytime a user presses a link the content of the div with the id="content" gets changed, you will have to make a page named get_images.php and make it use the php code $_GET['realisation']; to get the number of the link clicked and from there it will work like your current page :).
Sorry I'm not brilliant at explaining but, if you wish me to try and clarify it more just say :)
Edit:
Right in your portfolio_english.php file the following code should exists (I'm using the english version of your site):
<span class="link" onClick="javascript: show_image('1')">Entreprise internationale 1</span><br>
<span class="link" onClick="javascript: show_image('2')">Entreprise internationale 2</span><br>
<span class="link" onClick="javascript: show_image('3')">Entreprise internationale 3</span><br>
<span class="link" onClick="javascript: show_image('4')">Entreprise internationale 4</span>
You should have your links that the side, which have an onClick event leading them to the javascript function which should be in the head of the page:
<html>
<head>
<script src="http://code.jquery.com/jquery-latest.js"></script>
<script type="text/javascript">
show_image(no){
$.ajax({
url: 'get_images.php?realisation='+no,
success: function(data) {
$('#content').html(data);
}
});
}
</script>
[... rest of header ...]
</head>
Also in that file you should have the div where the images currently appear
<div id="content">
</div>​
get_image.php
In your get_image.php you need to have what you currently use to get your images, so to get the number e.g. 41 into the php code you are using use:
<?php
$number = $_GET['realisation'];
[... Rest of php code to retrieve images ...]
?>
Also, if you still don't understand where I'm going try reading the jquery documentation to see if you understand it more then: http://api.jquery.com/jQuery.ajax/

OK, before any real investigation let's get a few things out of the way.
Update jQuery to the newest version (http://jquery.com/), then you don't need the easing plugin as it's built in nowadays.
Rather than bind to window.onload, use the proper syntax for using jQuery:
$(document).ready(function() {
$('#slides').slides({
preload: true,
preloadImage:'Images/img/loading.gif',
pagination: true,
fadeSpeed: 0,
slideSpeed: 0,
effect: 'slide, slide',
});
});
If that isn't any good, make a really small test page that only has the code you are using with the slider, and check if it's still a problem.
To be honest, I don't really know why people use these massive slider plugins, making a slider is an easy little job that requires less than 10 lines of jQuery.