Render 'like' button after ajax call - ajax

there were a few question similar to mine on the stack but none that answered my question, so...
An ajax call returns the standard html code for creating the like button:
<div class="fb-like" data-href="http://www.website.com" data-send="true" data-width="450" data-show-faces="true"></div>
This html does show up in the source when looked at with 'inspect element', but it is not rendered, i.e. the space where the button should be is blank. Is there some rendering function that I should be using?
Any hints would be greatly appreciated!
EDIT: Here's the ajax request and parseing - the 'like' button is put in '#thequestion' along with some other text (it is echoed from question.php).
$("#thequestion").load("/thought/question.php", { ans: choice, id: questionId } );
$("#graph").load("/thought/graph.php", { id: questionId } );
$("#fbCommentsPlaceholder").html("<div class='fb-comments' data-href='http://qanai.com/thought/#" + questionId + "' data-num-posts='2' data-width='470'></div>");
FB.XFBML.parse();
eval(document.getElementById('thequestion').innerHTML);
eval(document.getElementById('graph').innerHTML);
(I know eval is evil)
EDIT 2: The like button appears if FB.XFBML.parse(); is executed manually (in the console) after the ajax call.
Thanks

You have to call FB.XFBML.parse(); after the ajax call.
Documentation: https://developers.facebook.com/docs/reference/javascript/FB.XFBML.parse/
Edit: now I see that you're trying to load content into $('#thequestion'). .load takes a callback that runs after the request completes. You should do something like:
$('#thequestion').load('/my/url', { my: 'params' }, function() {
FB.XFBML.parse();
});
Documentation: http://api.jquery.com/load/

Not sure anyone needs it, but my complete code looks like this now and renders both FB page and Like button appropriatelly (LikeLink button created with material icon):
<i id="LikeLink" class="material-icons actionButton"></i>
var fbloaded = false; // if SDK is loaded, no need to do it again (though cache should do this?
var fbpageid = "myPageId"; // FB page id
// ajax call to FB SDK script
if (!fbloaded) {
$.ajax({
type: "GET",
url: "//connect.facebook.net/en_US/sdk.js",
dataType: "script",
cache: true,
success: function () {
fbloaded = true;
FB.init({
appId: '{myAppId}',
version: 'v2.3' // or v2.0, v2.1, v2.0
});
// parse button after success
FB.XFBML.parse();
}
});
}
var FBDivAppended = false; // if already done, do not call and render again
PostUrl = window.location.href; // like button needs this... or not :)
// when LikeLink is clicked, add the divs needed and at the end fire the FB script ajax call (resetFB)
$("#LikeLink").click(function () {
if (!FBDivAppended) {
var $pagediv = $("<div class=\"fb-page\" data-href=\"https://www.facebook.com/" + fbpageid + "\" />");
var $fblikediv = $("<div class=\"fb-like\" data-href=\"" + PostUrl + "\" />");
var $fbdiv = $("<div id=\"fbDiv\" />");
var $fbroot = $("<div id=\"fb-root\" />");
$fbdiv.append($pagediv).append($fblikediv);
$(".Header").append($fbdiv).append($fbroot);
FBDivAppended = true;
}
resetFB();
}

Related

Why is this ajax post request executing a GET request with the data right before the post request is executed in Nodejs express?

I have an interesting problem here. Here is the form where I want to use ajax to execute a post request on to the server.
replyPrefix = "<div id='addCommentContainer'><form class='addCommentForm' name='addcomment' id='addCommentForm'>" +
"<div class='input-group'>" +
"<input class='form-control' class='commentContent' type='text' placeholder='Comment!' name='commentContent'>" +
"<input class='form-control' class='commentParent' type='hidden' name='parent' value='";
replySuffix = "'>" +
"<span class='input-group-btn'>" +
"<button class='btn btn-danger' type='submit' class='submitButton'>submit</button>" +
"</span>" +
"</div></form></div>";
(The value for the reply is inserted inbetween this form's prefix/suffix. Note that this form and code was executing post requests fine before I tried moving to ajax)
Here is the jquery where I execute the ajax post request
$('.addCommentForm').submit(function() {
$.ajax({
type: "POST",
url: "/addcomment",
data: $(this).serialize(),
success: function(data) {
console.log("success:");
//alert(data);
},
error: function(e) {
console.log("error:");
}
});
});
And here is the nodejs express code.
// handle add comment call
router.post('/addcomment', function(req, res) {
//var obj = {};
console.log('body: ' + JSON.stringify(req.body));
//res.send(req.body);
//return;
var db = req.db;
var collection = db.get('comments');
// grab parent id if available
var parent = req.body.parent;
var content = req.body.commentContent;
console.log("parent: " + parent);
console.log("content: " + content);
// if no parent available, add new bubble
if (!parent || parent == "") {
console.log("Adding a bubble...");
addBubble(db, collection, content);
}
// otherwise, add comment to tree
else {
console.log("Adding a comment...");
addComment(db, collection, content, parent);
}
// DEBUG
//console.log(parent);
//console.log(req.body.commentContent);
//res.redirect('/');
});
The post request via ajax is being executed properly, and the reply gets added to the database and everything, however the page is constantly being reloaded when the post request is executed because of this get request that gets sent right before it everytime the form is submitted.
body: {"commentContent":"asdf","parent":"55f778aab671e4b41d05c6a7"}
parent: 55f778aab671e4b41d05c6a7
content: asdf
Adding a comment...
GET /?commentContent=asdf&parent=55f778aab671e4b41d05c6a7 200 65.626 ms - 53620
POST /addcomment - - ms - -
(Above is the console output, the question I have is why this get request with the data I submitted is being executed? How do I prevent that from happening?)
Thanks for the help.
It looks like you are submitting the form and the ajax request. Try adding the following to prevent the default submit action (GET).
.submit(function(e) {
e.preventDefault();
//ajax code
}

Ajax loaded content div class is not applied

I have a page that has a few divs connected in a flowchart via JS-Graph.It. When you click one of the divs, I want it to 1) generate text in a special div 2) generate a popup via click functions attached to the two classes "block" and "channel" in each div. This works when the page is static.
When I add ajax so on click of a button and add more divs, only one of the two classes appears in the HTML source. "Channel" is no longer visible and the function to generate a pop-up on click of a channel class div does not work anymore...
AJAX call:
$("#trace").bind('click', $.proxy(function(event) {
var button2 = $('#combo').val();
if(button2 == 'default') {
var trans = 'Default View';
}
if(button2 == 'abc') {
var trans = 'abc';
}
$.ajax({ // ajax call starts
url: 'serverside.php', // JQuery loads serverside.php
data: 'button2=' + $('#combo').val(), // Send value of the clicked button
dataType: 'json', // Choosing a JSON datatype
success: function(data) // Variable data constains the data we get from serverside
{
JSGraphIt.delCanvas('mainCanvas');
$('.test').html('<h1>' + trans + '</h1>'); // Clear #content div
$('#mainCanvas').html(''); // Clear #content div
$('#mainCanvas').append(data);
JSGraphIt.initPageObjects();
}
});
return false; // keeps the page from not refreshing
}, this));
DIV class: (works in index.php but not transactions.php)
// Boxes
while($row = sqlsrv_fetch_array($result))
{
echo '<div id="'.$row['id'].'_block" class="block channel" style="background:';
Functions:
$(document).on('click', '.block', $.proxy(function(event) {
var input = $(event.target).attr('id');
var lines = input.split('_');
var button = lines[0];
$.ajax({
url: 'srv.php',
data: 'button=' + button,
dataType: 'json',
success: function(data)
{
$('#content').html('');
$('#content').append(data);
}
});
return false;
}, this)); // End Application Details
$(".channel").click(function () {
alert('channel');
});
Something about registering with pages, I'm not sure exactly how it works. The fix should be to change your channel click function to be the same as your first and use the .on('click') option.
found some related reading material. https://learn.jquery.com/events/event-delegation/

Loading Content Via Ajax

Ok, so I'm pretty new to ajax and loading content externally and would appreciate any insight to my problem.
I currently have a hidden div that is empty where the ajax content should load in after a link is clicked.
<div id="#ajax-wrap"></div>
I currently have a list of links that all have the same class and I'd like to have, when clicked, the blank div do a slide toggle and then load in the content from the page that the link was to.
Link:
Current jQuery:
$("a.home-right").click(function () {
$('#ajax-wrap').slideToggle();
});
Being as I'm new to Ajax and loading the external content, I'd like to know how to load content from the linked page that's house in the #content tag. So essentially, I'd like a .home-right link, #ajax-wrap would slide toggle, and then Ajax would pull content from the linked page (which is always going to be a different random link) and it's #content div, placing that content in #ajax-wrap.
Thanks in advance for any help folks!
You want to set the ajax for the links. Requirements:
Writing a handler for links.
We must cancel the default behaviour of browser when somebody click on a link (that redirect to the page).
Removing old data ajax recieved from server and make the #ajax-wrap fresh.
Load the remote page via ajax and set it to #ajax-wrap.
Now slide it down.
// Document Ready
$(function () {
// attaching click handler to links
$("a.home-right").click(function (e) {
// cancel the default behaviour
e.preventDefault();
// get the address of the link
var href = $(this).attr('href');
// getting the desired element for working with it later
var $wrap = $('#ajax-wrap');
$wrap
// removing old data
.html('')
// slide it up
.slideUp()
// load the remote page
.load(href + ' #content', function () {
// now slide it down
$wrap.slideDown();
});
});
});
You can simply use the ajax like this:
$("a.home-right").click(function () {
$.ajax({
type: "get",
url: "YOUR URL HERE",
success: function(data){
$('#ajax-wrap').html(data);
$('#ajax-wrap').slideToggle();
},
error: function(){
alert("An error occured");
}
});
});
try this:
$(function(){
$("a.home-right").click(function () {
$('#ajax-wrap').slideUp();
var url = $(this).attr("href")
$.ajax({
type: "get",
url: url,
success: function(msg){
$('#ajax-wrap').html(msg)
$('#ajax-wrap').slideDown();
},
error: function(){
alert("An error occured");
}
});
})
})
Use get:
// Inside click handler
$.get('url_that_returns_data')
.done(function(response){
var $response = $(response);
$('#ajax-wrap').html($response.find('#content')).slideToggle();
});

How do I perform a jQuery ajax request in CakePHP?

I'm trying to use Ajax in CakePHP, and not really getting anywhere!
I have a page with a series of buttons - clicking one of these should show specific content on the current page. It's important that the page doesn't reload, because it'll be displaying a movie, and I don't want the movie to reset.
There are a few different buttons with different content for each; this content is potentially quite large, so I don't want to have to load it in until it's needed.
Normally I would do this via jQuery, but I can't get it to work in CakePHP.
So far I have:
In the view, the button control is like this:
$this->Html->link($this->Html->image('FilmViewer/notes_link.png', array('alt' => __('LinkNotes', true), 'onclick' => 'showNotebook("filmNotebook");')), array(), array('escape' => false));
Below this there is a div called "filmNotebook" which is where I'd like the new content to show.
In my functions.js file (in webroot/scripts) I have this function:
function showNotebook(divId) {
// Find div to load content to
var bookDiv = document.getElementById(divId);
if(!bookDiv) return false;
$.ajax({
url: "ajax/getgrammar",
type: "POST",
success: function(data) {
bookDiv.innerHTML = data;
}
});
return true;
}
In order to generate plain content which would get shown in the div, I set the following in routes.php:
Router::connect('/ajax/getgrammar', array('controller' => 'films', 'action' => 'getgrammar'));
In films_controller.php, the function getgrammar is:
function getgrammar() {
$this->layout = 'ajax';
$this->render('ajax');
}
The layout file just has:
and currently the view ajax.ctp is just:
<div id="grammarBook">
Here's the result
</div>
The problem is that when I click the button, I get the default layout (so it's like a page appears within my page), with the films index page in it. It's as if it's not finding the correct action in films_controller.php
I've done everything suggested in the CakePHP manual (http://book.cakephp.org/view/1594/Using-a-specific-Javascript-engine).
What am I doing wrong? I'm open to suggestions of better ways to do this, but I'd also like to know how the Ajax should work, for future reference.
everything you show seems fine. Double check that the ajax layout is there, because if it's not there, the default layout will be used. Use firebug and log function in cake to check if things go as you plan.
A few more suggestions: why do you need to POST to 'ajax/getgrammar' then redirect it to 'films/getgrammar'? And then render ajax.ctp view? It seems redundant to me. You can make the ajax call to 'films/getgrammar', and you don't need the Router rule. You can change ajax.ctp to getgrammar.ctp, and you won't need $this->render('ajax');
this is ajax call
$(function() {
$( "#element", this ).keyup(function( event ) {
if( $(this).val().length >= 4 ) {
$.ajax({
url: '/clients/index/' + escape( $(this).val() ),
cache: false,
type: 'GET',
dataType: 'HTML',
success: function (clients) {
$('#clients').html(clients);
}
});
}
});
});
This the action called by ajax
public function index($searchterm=NULL) {
if ( $this->RequestHandler->isAjax() ) {
$clients=$this->Client->find('list', array(
'conditions'=>array('LOWER(Client.lname) LIKE \''.$searchterm.'%\''),
'limit'=>500
));
$this->set('clients', $clients);
}
}
This is a function I use to submit forms in cakephp 3.x it uses sweet alerts but that can be changed to a normal alert. It's very variable simply put an action in your controller to catch the form submission. Also the location reload will reload the data to give the user immediate feedback. That can be taken out.
$('#myForm').submit(function(e) {
// Catch form submit
e.preventDefault();
$form = $(this);
// console.log($form);
// Get form data
$form_data = $form.serialize();
$form_action = $form.attr('action') + '.json';
// Do ajax post to cake add function instead
$.ajax({
type : "PUT",
url : $form_action,
data : $form_data,
success: function(data) {
swal({
title: "Updated!",
text: "Your entity was updated successfully",
type: "success"
},
function(){
location.reload(true);
});
}
});
});

Google Maps: openInfoWindowTabsHtml + GDownloadUrl (Ajax call) question

I am facing the following problem.
On an Google Map I want to add info windows with tabs, where content is loaded from an external file using the GDownloadUrl method.
The code works about fine, but with two problems.
a) The first time I click on a marker, nothing hapens. I need to click twice to get an info box. After that it works ok.
b) When I close an info box and open it again, the tabs repeat themselves. Every time I reopen the info box, those tabs get repeated. So, if using the code below and open the info box 3 times, I get 6 tabs (Info, Photos, Info, Photos, Info, Photos). Any idea of what I am doing wrong here?
I have also tried this with JQuery's $.get method, but the results are exactly the same.
function createREMarker(lat,long,reID)
{
var reMarker = new GMarker(rePoint,iconRE);
GEvent.addListener(reMarker, "click", function()
{
GDownloadUrl('testcontent.php?reID='+reID+'&what=info', function(data) {
content1 = data;
});
GDownloadUrl('testcontent.php?reID='+reID+'&what=photos', function(data) {
content2 = data;
});
tabs.push(new GInfoWindowTab('Info', '<div id="mapOverlayContent" style="width:375px; height:220px; overflow:auto;">'+content1+'</div>'));
tabs.push(new GInfoWindowTab('Photos', '<div id="mapOverlayContent" style="width:375px; height:220px; overflow:auto;">'+content2+'</div>'));
reMarker.openInfoWindowTabsHtml(tabs);
});
return reMarker;
};
Firstly you are using v2 of the API which is now officially deprecated. For a site I maintain I do the following (this is v3 of the API and uses jQuery):
function createMarker(point, id, markerOptions) {
var marker = new google.maps.Marker(point,markerOptions);
var Lat = point.lat();
var Lng = point.lng();
google.maps.Event.addListener(marker, "click", function() {
$.ajax({
type: "GET",
url: "/data/specific.xml?id=" + id,
dataType: "xml",
success: function(xml) {
var this_marker = $(xml).find('marker');
var name = $(this_marker).attr("name");
details_tab = details_tab + "ID: " + id + "<br />Name: " + name + "<br />";
var infowindow = new google.maps.InfoWindow({
content: details_tab,
});
infowindow.open(map, marker);
}
});
}
return marker;
}
From what I can see tabs are no longer supported in v3 of the API? :( But this example uses tabs from jQuery UI:
http://gmaps-samples-v3.googlecode.com/svn-history/r78/trunk/infowindow/tabs.html
http://code.google.com/p/gmaps-samples-v3/source/browse/trunk/infowindow/tabs.html?r=78

Resources