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

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

Related

When a link is clicked, I want to show a value/price on the next page

I have this code on page 1. All a tags have the same link. If the user clicks on one link, the next page 2 is loaded. I want to display the price of that id specific to that link to show on page 2.
example: If the user clicks a link with id="saloon_price", the price on page 2 should appear Saloon: £50.
If the user clicks the link with id="mpv_price", the price on page 2 should appear MPV: £70.
Please help me to achieve this on page 2.
I am very new to coding. And using Javascript. Kindly help me with a simpler solution. Thanks
<a id="saloon_price" href="/quotes/details"> Saloon: £50</a>
<a id="estate_price" href="/quotes/details">Estate: £60</a>
<a id="mpv_price" href="/quotes/details">MPV: £70</a>
In the web, we pass values mainly using the URL, and read them again in the loaded page.
<a id="saloon_price" href="/quotes/details?label=Saloon&value=£50"> Saloon: £50</a>
<a id="estate_price" href="/quotes/details?label=Estate&value=£60">Estate: £60</a>
<a id="mpv_price" href="/quotes/details?label=MPV&value=£70">MPV: £70</a>
And read this post for more details:
How to get the value from the GET parameters?
You will propably need to use PHP or other server-side languages. You can do this easily with forms. But you will need to run this on some kind of server.
This will echo (type to document) the value of value attribute on the button...
index.php:
<form action="/quotes/details.php" method="post">
<button type="submit" name="price" value="£50" id="saloon_price"> Saloon: £50 </button>
...other buttons...
</form>
/quotes/details.php:
...
<?php
$price = $_POST["price"];
echo "MPV: " . $price;
?>
...
You can use method="get" and $_GET["price"] if you want to see these values in url.

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
}
}
?>

Anchor tag update div without page reload

I have this div which includes an anchor tag that loads a php script that essentially adds information to a database and returns back to this page. I want to use this achor tag to run that php script update the database and refresh this div without reloading the page. The php script need those two variables title and vote which used with the php $_GET[] function. Can this be done, and if so how? I have searched everywhere and no script seems to work. Will provide more information if needed. Thanks so much will give credit to everyone who helps.
<div class='like_box'>
<a href='#' class='counter' ><img src='img/like.png' class='vote'></a><p class='vote_text'>$like_num</p>
<p style='color: #fff;'>$like_username</p>
</div>
I've tried something like this
<script>
$('a.counter').click( function(e) {
e.preventDefault();
vote.php?vote=like&title=$title
});
</script>
Use this:
<div class='like_box'>
<a href='#' class='counter' ><img src='img/like.png' class='vote'></a><p class='vote_text'>$like_num</p>
<p class="vote_text1" style='color: #fff;'>$like_username</p>
</div>
In the javascript side (jquery)
$(".like_box a").click(function(event){
event.preventDefault();
$.ajax({
url: 'vote.php?vote=like&title=$title',
success: function(result){
// update $like_num and $like_username here
// if you do not have them binded use this
$('.like_box p.vote_text').text('<value from result>');
$('.like_box p.vote_text1').text('<value from result>');
}});
});

Issue with multiple links from anchor tag - php

Greetings for the day.
I am in the middle of a coupon based website development. As part of it, once the user clicks on the get coupon button, I need to display to the user the coupon code as well as redirect them to the merchant website. To achieve this I am fetching all the details from the database and storing them in php variables, then displaying it in the web page.
echo '
<div class="col-sm-3 feature" >
<div class="panel" id="bar">
<div id="propost">
<a href="', $LINK, '">
<img src="', $IMG, '" class="img-responsive" alt=""/></a>
<div class="special-info grid_1 simpleCart_shelfItem">
<h5>', $POSTDESC, '</h5>
<div id="btnstyle"> </div>
', $text, '
</div>
</div>
</div><!-- end panel -->
</div><!-- end feature -->';
Everything is working as expected apart from the multiple links which I mentioned in the anchor tag. How do I do this?
You might try this:
Click
Updated:
echo 'Click';
Also: don't put block elements like divs into anchors. Thats not valid html :)
Here is an example of different approach using non-obstrusive javascript :
HTML
This is my link
JAVASCRIPT (jQuery)
$('a[data-secondlink]').on('click',function(){
window.open($(this).data("secondlink'));
});
EXPLANATION
Unobstrusive javascript is just a best-practice and the many reasons why you should prefer this can easily be found online. The main I would point in this case is that in case requirements change (let's say you need to use a lightbox instead of a new tab/window for example), you just have to update 1 JS file instead of all your PHP/HTML files.
As of the line of code, on click it executes this line, and afterwards it executes the default action of an anchor : requesting the URL in the hrefattribute.
You are doing concatenating string via ,
replace , with .
in Anchor tag and window.location()

Facebook Like button not working properly

I am using the XFBML version of the Like button because I need the Send button.
Here is the code I use:
<div id="fb-root"></div>
<script src="http://connect.facebook.net/en_US/all.js#appId=178223665570391345&xfbml=1"></script>
<fb:like href="<?php echo current_url(); ?>" send="true" layout="button_count" width="150" show_faces="false" font="trebuchet ms"></fb:like>
I use so that it will Like the page it shows up on.
The Send button works fine but the Like button does't work. I've tried liking it a few times, I get this in the JS response:
for (;;);{"__ar":1,"payload":{"requires_login":false,"success":false,"already_connected":false,"is_admin":false,"show_error":false,"error_info":null}}
You can see the page here: http://www.salemarked.com/share/152/
The Send button doesn't work either and here is the error it gives me - http://d.pr/VPO1
Thanks for your help!
I got it to work now. Removed current_url() since by default, href is going to be the current page if left blank.

Categories