How to create dynamic share popup - javascript

I have some post which are fetch by php while loop & each of the post has a link of share this post for e.g
Post 1 - share this post
Post 2 - share this post
Post 3 - share this post
there are many more post
I read out an jquery article and i got this->
jquery part
$('body').on('click','.js_share',function(){
var post=$(this).parents('.post');
var id=post.attr('data-id');
confirm(__['Share Post'],__['Are you sure you want to share this post?'],function(){
$.post(api['posts/reaction'],{'do':'share','id':id},function(response){if(response.callback){eval(response.callback);}
else{modal('#modal-success',{title:__['Success'],message:__['This has been shared to your Timeline']});}}).fail(function(){modal('#modal-message',{title:__['Error'],message:__['There is some thing went worng!']});});});});
html Part
<script id="modal-success" type="text/template">
<div class="modal-body text-center">
<div class="big-icon success">
<i class="fa fa-thumbs-o-up fa-3x"></i>
</div>
<h4>{{title}}</h4>
<p class="mt20">{{message}}</p>
</div>
</script>
The above script doesn't work in console it shows nothing
I have added the reference __ by
<script type="text/javascript">var __=[];__["Follow"]='Follow';__["Share Post"]='Share Post';__["Remove"]='Remove';__["Error"]='Error';__["Success"]='Success';__["Loading"]='Loading';__["Like"]='Like';__["Unlike"]='Unlike';__["Delete Comment"]='Delete Comment';__["There is some thing went worng!"]='There is some thing went worng!';__["This has been shared to your Timeline"]='This has been shared to your Timeline';</script>

Related

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

Return multiple templates

I am currently trying open multiple pages on a POST request. Basically, what I am doing is searching for a job number in the database by sending a POST request and then (trying) opening the multiple pages that correspond with that job number (ex.: a webpage for job location, one for material, etc.) However, I can only return one template for the browser to open. I have looked at many, many questions like this one:
Render multiple templates at once in Flask
However, I am not finding the answer to my question (most likely because I am asking the wrong question...)
Anyway, my code so far is something like this:
HTML:
<form action="/testing" method="POST" id="existBidFormOne" name="existBidFormOne" autocomplete="off">
<!-- Row one holds Title-->
<div class="center row" style="width: 100%;">
<h1>Enter a Job Number or a Project Name:</h1>
</div>
<!-- Row two holds job number-->
<div class="row">
<!-- Column one holds Job number-->
<div class="col-m-6">
<div class="row centerInput">
<div class="col-m-4 inputPad"><b>Job Number:</b></div>
<div class="col-m-8 noPad">
<input type="text" id="exb_jobNumber" name="exb_jobNumber" class="input maxWidth" />
</div>
</div>
</div>
</div>
<div class="centerInput row">
<span>
<button type="submit" id="exb_searchOne" class="srchBtn">Search</button>
</span>
</div>
</form>
FLASK:
#app.route('/testing', methods=["GET", "POST"])
def testing():
if request.method == 'POST':
job_num = request.form.getlist('exb_jobNumber')
if job_num:
session = Session()
results = ds.get_job_info(session, job_num) # returns dict
results2 = ds.get_job_material(session, job_num) #returns dict
session.close()
# open page one
return render_template('pageOne.html', **results)
The above code works well opening one page, however I would also like to open:
render_template('pageTwo.html', **results2)
Thank you!
opening the multiple pages If you want to open multiple pages on a single webpage (i.e. in a single browser tab), then you can combine and render as many separate templates as you want with template inheritance. You can have single base page and nest many sub-pages with any content you want.
If you want to open multiple pages in multiple browser tabs, then you should return only a single main HTML page (i.e. single template), but set variable in that webpage with links of all pages you want to open in new browser tabs. Then, with the help of JavaScript and browser API method window.open() you can open those pages.

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

Firebase/Angular: Messages not showing in HTML, but contain the message objects

Good day SO,
I am trying to incorporate a basic firebase chat module into my system via angular js (I am honestly not proficient at all..)
I am facing a problem whereby my items are not showing in my HTML element although my firebase messages are being retrieved from my firebase database.
Here is my HTML code:
<html lang="en" ng-app="chatApp">
...
<section id="content3" class="tab-content">
<div class="card mb-3">
<div class="card-header">
<i class="fa fa-comments-o"></i>
Instant Chat Messenger – Crisis Management Office
</div>
<div class="card-body" ng-controller="ChatController">
<p ng-repeat="m in messages">{{m.message}}- </p>
<div class="form-row">
<div class="form-group col-md-11">
<input type="text" class="form-control" id="chatEntry" rows="14" placeholder="Type your message here" ng-model="messageText">
</div>
<div class="form-group col-md-1">
<button type="submit" class="btn btn-primary btn-block" id="sendBtn" ng-click="send()">Send</button>
</div>
</div>
</div>
</div>
</section>
And here is the angular.js code:
var app = angular.module('chatApp', ['firebase']);
app.controller('ChatController', function($scope, $firebaseArray) {
var crisis = "Crisis1";
//Query
var ref = firebase.database().ref().child(crisis).child('CMO-PMO');
$scope.messages = $firebaseArray(ref);
$scope.send = function() {
$scope.messages.$add({
sender: "PMO",
message: $scope.messageText,
date: Date.now()
})
}
})
And now, here is the funny thing.. My messages are being retrieved (I put a dash '-' behind {{ m.messages }} so that a dash will print for each message in my firebase database (To show that they are being retrieved), but my messages are not being shown.
Here is a screenshot of my firebase (Note: has 7 messages currently):
And here is a screenshot of my HTML page (It shows 7 dashes for 7 items in my firebase):
Although I have checked my scope in the javascript code, as well as the namings in my firebase database, my messages are still unable to show.. But I am able to send messages via my page to the firebase database. (The button and send functions are working!) The only problem now is showing the messages..
I am at a loss.. Please help me SO! I will promptly reply to any posts here :) Thank you so much!
Edit: If i use {{m|json}}:
I have solved the rendering problem using the {%verbatim%} tag.

Creating simple pages through variables

I'm trying to create a page that can allow users to customize there own specific pages, these pages will only have a few customization options such as text, color and layout of blocks. I haven't started a configuration page but i have began creating a template that the user will modify to suit their needs.
I would like to somehow get the information given by the user on the configuration page and then display it into parts of the other page. At the moment i don't know the best way to get that information and display in tags on the other page such as these tags.
<p><i class="fa fa-certificate fa-fw w3-margin-right w3-large" style="color: #582d37"></i>
<?php $GLOBALS['event1'] ?>
</p>
<p><i class="fa fa-globe fa-fw w3-margin-right w3-large " style="color: #582d37"></i>
<script>
document.write(venue1)
</script>
</p>
<p><i class="fa fa-calendar fa-fw w3-margin-right w3-large" style="color: #582d37"></i>
<script>
document.write(date1)
</script>
</p><br>
This is a snippet of code of a few ways I've tried to display the information sadly i haven't had any luck in getting the information and displaying it at the same time.
I was thinking about trying to get information from the PHP configuration form and then turn it into a java script variable and display it into the page.
I would like your views on how to do this and whether there is a better way and how to do that.
Zahir,
First, you have to store the information...
assuming you have this information already stored and have written the code that fetches the user information from the database:
You will need to echo out the values like so:
<p><i class="fa fa-certificate fa-fw w3-margin-right w3-large" style="color: #582d37"></i><?php echo $cert; ?></p>
IF you have yet to write the code for storing the information:
On the page where user fills out the form, have the form go to some page (could be the same page)--this page is specified in form tag's ACTION attribute.
All form data will be in $_POST; prior to making the call to the database for storing the form data, you must sanitize/validate it! (otherwise, your application will be vulnerable to attacks such as SQL Injection.
And then follow the step above.
Just some pointers to get you going... if you get more stuck write back.
Hope this helps,
-Rush

Categories