I want to use session in an external js file, but it's not working. I know that it's not possible to access a session in an external AJAX file, but does anyone have solution for it?
When I insert code in my view it runs correctly, moreover I think the URL is incorrect too! I use CodeIgniter for the back-end.
function show_msg() {
$.ajax({
type: 'ajax',
url: '<?php echo base_url(); ?>index.php/chat/showmsg',
async: false,
dataType: 'json',
success: function (data) {
var user = '<?php echo $this->session->userdata('username'); ?>';
var html = '';
var i;
for (i = 14; i >= 0; i--) {
if (data[i].user !== user) {
html +=
'<span style="color:green;font-size:12px;">' + data[i].user + '</span>' + ' ' + '<span style="color:dimgrey;font-size:10px;">' + data[i].date + '</span>' + '<div style="margin-right:25px;margin-bottom:25px;border:0px solid grey; border-radius: 0px 12px 12px 12px; padding:10px;width:auto;background-color:white;;box-shadow:0px 0px 0px 0px grey;direction:rtl;">' + data[i].msg + '</div>';
} else {
html +=
'<span style="color:green;font-size:12px;">' + "" + '</span>' + ' ' + '<span style="color:dimgrey;font-size:10px;">' + data[i].date + '</span>' + '<div style="margin-left:30px;margin-bottom:25px;border:0px solid grey; border-radius: 8px 0px 8px 8px; padding:10px;width:auto;background-color:#bbf490;box-shadow:0px 0px 0px grey;direction:rtl;">' + data[i].msg + '</div>';
}
}
$('#show_data').html(html);
}
});
}
There is no direct way of inserting PHP variables in the external .js files. Because PHP does not parse js files. A quick and dirty way is to declare a JS variable(declare the variable carefully because of global variable pollution, use descriptive name) in the php view file like this.
<script type="text/javascript">
var session_user_id = '<?php echo $this->session->userdata('username'); ?>';
var base_url = '<?php echo base_url(); ?>';
</script>
and use this variable in your external js file
function show_msg() {
$.ajax({
type: 'ajax',
url: base_url + 'index.php/chat/showmsg',
async: false,
dataType: 'json',
success: function (data) {
var user = session_user_id;
var html = '';
var i;
for (i = 14; i >= 0; i--) {
if (data[i].user !== user) {
html +=
'<span style="color:green;font-size:12px;">' + data[i].user + '</span>' + ' ' + '<span style="color:dimgrey;font-size:10px;">' + data[i].date + '</span>' + '<div style="margin-right:25px;margin-bottom:25px;border:0px solid grey; border-radius: 0px 12px 12px 12px; padding:10px;width:auto;background-color:white;;box-shadow:0px 0px 0px 0px grey;direction:rtl;">' + data[i].msg + '</div>';
} else {
html +=
'<span style="color:green;font-size:12px;">' + "" + '</span>' + ' ' + '<span style="color:dimgrey;font-size:10px;">' + data[i].date + '</span>' + '<div style="margin-left:30px;margin-bottom:25px;border:0px solid grey; border-radius: 8px 0px 8px 8px; padding:10px;width:auto;background-color:#bbf490;box-shadow:0px 0px 0px grey;direction:rtl;">' + data[i].msg + '</div>';
}
}
$('#show_data').html(html);
}
});
}
Related
The InActive button in the top of the picture, gets displayed properly when it is outside the datatable but doesn't work inside the datatable.
I have added the same code for status column inside the datatable but it displays only a checkbox. How do I get the InActive button inside datatable?
<script type="text/javascript">
$(document).ready(function() {
$.noConflict();
fill_datatable();
function fill_datatable(collegeID = '') {
var table = $('.user_datatable1').DataTable({
order: [
[0, 'desc']
],
processing: true,
serverSide: true,
ajax: {
url: "{{ route('alumni.datatable1') }}",
data: {
collegeID: collegeID
}
},
columns: [{
data: 'id',
name: 'id'
},
{
data: 'name',
name: 'name'
},
{
data: 'status',
name: 'status',
mRender: function(data) {
return ' <input data-id="{{$colleges->id}}" class="toggle-class" type="checkbox" data-onstyle="success" data-offstyle="danger" data-toggle="toggle" data-on="Active" data-off="InActive" {{ $colleges->status ? "checked" : "" }}>'
}
}
},
{
data: 'action',
name: 'action',
orderable: false,
searchable: false
},
]
});
}
});
$(function() {
$('.toggle-class').change(function() {
var status = $(this).prop('checked') == true ? 1 : 0;
var user_id = $(this).data('id');
$.ajax({
type: "GET",
dataType: "json",
url: '/changeStatus',
data: {'status': status, 'id': id},
success: function(data){
console.log(data.success)
}
});
})
})
</script>
Please Add css.....
CSS
<style>
.switch {
position: relative;
display: inline-block;
width: 60px;
height: 34px;
}
.switch input {
opacity: 0;
width: 0;
height: 0;
}
.slider {
position: absolute;
cursor: pointer;
top: 0;
left: 0;
right: 0;
bottom: 0;
background-color: #ccc;
-webkit-transition: .4s;
transition: .4s;
}
.slider:before {
position: absolute;
content: "";
height: 26px;
width: 26px;
left: 4px;
bottom: 4px;
background-color: white;
-webkit-transition: .4s;
transition: .4s;
}
input:checked + .slider {
background-color: #2196F3;
}
input:focus + .slider {
box-shadow: 0 0 1px #2196F3;
}
input:checked + .slider:before {
-webkit-transform: translateX(26px);
-ms-transform: translateX(26px);
transform: translateX(26px);
}
/* Rounded sliders */
.slider.round {
border-radius: 34px;
}
.slider.round:before {
border-radius: 50%;
}
</style>
You can simple put after status....
Toggle switch
{
"data": "id",
render: function(data, type, row, meta) {
$html = '<label class="switch"> <input type="checkbox">
<span class="slider round"></span></label>';
return $html;
}
},
i am a beginner in the JS, Vue and D3 programming but already managed to understand the basics, i think :).
So currently i am trying to implement a program which renders a phylogenetical tree using Vue.js and D3.js. Using this example as a start up:
https://bl.ocks.org/lorenzopub/02ccce43d708919ca7c0b242fe1c93f2
So far i managed to get my program to open a tree file and to render it properly. Also i can select certain nodes and change their color accordingly. But my problem now is how to select a subtree and change the color of the children nodes.
Any help and or hints will be appreciated!
Thank you!
Here is my code so far:
<!DOCTYPE html>
<head>
<script type="text/javascript" src="VUE/vue.min.js"></script>
<script type="text/javascript" src="D3/d3.js"></script>
<script>function parseNewick(s) {
var ancestors = [];
var tree = {};
var tokens = s.split(/\s*(;|\(|\)|,|:)\s*/);
for (var i=0; i<tokens.length; i++) {
var token = tokens[i];
switch (token) {
case '(': // new branchset
var subtree = {};
tree.branchset = [subtree];
ancestors.push(tree);
tree = subtree;
break;
case ',': // another branch
var subtree = {};
ancestors[ancestors.length-1].branchset.push(subtree);
tree = subtree;
break;
case ')': // optional name next
tree = ancestors.pop();
break;
case ':': // optional length next
break;
default:
var x = tokens[i-1];
if (x == ')' || x == '(' || x == ',') {
tree.name = token;
} else if (x == ':') {
tree.length = parseFloat(token);
}
}
}
return tree;
};
</script>
<style>
.node {
opacity: 1;
}
.node circle {
fill: #999;
cursor: pointer;
}
.node text {
font: 12px sans-serif;
cursor: pointer;
}
.node--internal circle {
fill: #555;
}
.node--leaf circle {
fill: blue;
}
.node--selected circle {
fill: blue
}
.node--internal text {
text-shadow: 0 1px 0 #fff, 0 -1px 0 #fff, 1px 0 0 #fff, -1px 0 0 #fff;
}
.link {
fill: none;
stroke: #555;
stroke-opacity: 0.4;
stroke-width: 1.5px;
stroke-dasharray: 1000;
}
.node:hover {
pointer-events: all;
stroke: #ff0000;
}
.node.highlight {
fill: red;
}
.controls {
position: fixed;
top: 16px;
left: 16px;
background: #f8f8f8;
padding: 0.5rem;
display: flex;
flex-direction: column;
}
.controls > * + * {
margin-top: 1rem;
}
label {
display: block;
}
.list-enter-active, .list-leave-active {
transition: all 1s;
}
.list-enter, .list-leave-to /* .list-leave-active for <2.1.8 */ {
opacity: 0;
transform: translateY(30px);
}
.line-enter-active, .line-leave-active {
transition: all 2s;
stroke-dashoffset: 0;
}
.line-enter, .line-leave-to /* .list-leave-active for <2.1.8 */ {
stroke-dashoffset: 1000;
}
</style>
</head>
<body>
<div id="app">
<div class='controls'>
<input type="file" #change="onFileChange">
<label>Search...</label>
<input type="text" v-model="search" />
</div>
<svg v-bind:width="settings.width" v-bind:height="settings.height">
<!-- LINKS BETWEEN NODES -->
<transition-group tag="g" name="line">
<g v-for="link in links" v-bind:key="link.id">
<path class="link" v-bind:style="link.style" v-bind:d="link.d"></path>
</g>
</transition-group>
<!-- LINKS BETWEEN NODES -->
<transition-group tag="g" name="list">
<g class="node" v-on:dblclick="selectSubTree(node,index)" v-on:mouseover="mouseOver(node,index)" v-on:click="select(node,index)" v-for="(node, index) in nodes" v-bind:key="node.id" v-bind:style="node.style" v-bind:class="[node.className, {'highlight': node.highlight}]">
<!-- Circles for each node -->
<circle v-bind:r="node.r" v-bind:style="node.selCol"></circle>
<!-- Finally, text labels -->
<text v-bind:dx="node.textpos.x" v-bind:dy="node.textpos.y" v-bind:style="node.textStyle">{{ node.text }}</text>
</g>
</transition-group>
</svg>
</div>
<script type="text/javascript">
var app = new Vue({
el: '#app',
data: function (){
return {
treeFile: '',
search: '',
selected: [],
settings: {
strokeColor: "#19B5FF",
width: 1000,
height: 1000
}
}
},
computed: {
root: function(){
var vm = this;
if(vm.treeFile){
return vm.tree(
d3.hierarchy(parseNewick(vm.treeFile),function(d) { return d.branchset; })
.sum(function(d) { return d.branchset ? 0 : 1; })
.sort(function(a, b) { return (a.value - b.value) || d3.ascending(a.data.length, b.data.length); }));
}
},
tree: function(){
return d3.tree().size([this.settings.height, this.settings.width - 160]);
},
nodes: function(){
var vm = this;
if(this.root){
return vm.root.descendants().map(function(d,i) {
vm.selected[i]=0;
return{
id: d.data.name,
index: i,
r: 7,
className: "node" + (d.children ? " node--internal" : " node--leaf"),
text: d.data.name.substring(d.data.name.lastIndexOf(".") +1),
highlight: d.data.name.toLowerCase().indexOf(vm.search.toLowerCase()) != -1 && vm.search != "",
style: {
transform: "translate(" + d.y + "px," + d.x + "px)",
},
textpos: {
x: d.children ? -10 : 10,
y: 3
},
textStyle: {
textAnchor: d.children ? "end" : "start"
},
children: d.children,
selCol: {fill: '#bfbfbf'}
};
});
}
},
links: function() {
var vm = this;
if (vm.root) {
// here we'll calculate the "d" attribute for each path that is then used in the template where we use "v-for" to loop through all of the links to create <path> elements
return vm.root.descendants().slice(1).map(function(d) {
return {
id: d.data.name,
d: "M" + d.y + "," + d.x + "C" + (d.parent.y + 100) + "," + d.x + " " + (d.parent.y + 100) + "," + d.parent.x + " " + d.parent.y + "," + d.parent.x,
// here we could of course calculate colors depending on data but for now all links share the same color from the settings object that we can manipulate using UI controls and v-model
style: {
stroke: vm.settings.strokeColor
}
};
});
}
}
},
methods: {
onFileChange(e) {
var file = e.target.files[0];
var reader = new FileReader();
var vm = this;
reader.onloadend = function(e) {
vm.treeFile = e.target.result;
};
reader.readAsText(file);
},
select: function(node, index) {
var vm = this;
if(this.selected[index] == 0){
this.selected[index]=1;
vm.nodes[index].selCol='fill: green';
}else{
this.selected[index]=0;
vm.nodes[index].selCol='fill: #bfbfbf';
}
vm.$forceUpdate();
},
mouseOver: function (node,index){
// console.log(node.id + " " + node.isSelected);
},
selectSubTree: function(node,index){
var vm=this;
if(this.selected[index] == 0){
this.selected[index]=1;
vm.nodes[index].selCol='fill: green';
}else{
this.selected[index]=0;
vm.nodes[index].selCol='fill: #bfbfbf';
}
if(node.children){
// console.log(node.id + " HAVE CHILDREN");
// console.log("NC: " + node.children);
node.children.forEach(function (d,i){
// this.selected=i;
vm.selected[i]=1;
vm.nodes[index].selCol='fill: green';
console.log("SELECTING: " + d.data.name + " " + i);
console.log(vm.$refs.A);
// if(d.isSelected){
// this.selected=i;
// console.log("CS :" + this.selected);
// }
});
}else{
// console.log(node.id + " DONT HAVE CHILDREN");
}
vm.$forceUpdate();
}
}
})
</script>
</body>
I'm trying to create a parallax effect whereby an absolutely positioned child element should move at a rate slower than it's parent on scroll.
The child will always be 130% height of the parent but the parent can be any height:
HTML:
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window">
<div class="parallax-image image-2"></div>
<div class="parallax-content">Hello World</div>
</div>
CSS:
.parallax-window {
min-height: 300px;
position: relative;
overflow: hidden;
}
.parallax-window.lg {
min-height: 600px;
}
.parallax-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.image-1 {
background-image: url(https://i.ytimg.com/vi/TbC-vUPMR7k/maxresdefault.jpg);
}
.image-2 {
background-image: url(https://i.ytimg.com/vi/xi5-YrAEChc/maxresdefault.jpg);
}
I have a formula to move the image but my maths is clearly way off:
var win = $(window),
win_h = win.height(),
parallaxers = $('.parallax-window');
function scroll_events() {
var win_top = win.scrollTop(),
win_btm = win_top + win_h;
parallaxers.each(function() {
var cont = $(this),
cont_top = cont.offset().top,
cont_h = cont.height(),
cont_btm = cont_top + cont_h,
para = cont.find('.parallax-image'),
para_h = Math.round(cont_h * 1.3);
if (cont_btm > win_top && cont_top <= win_btm) {
var diff = (win_h - cont_h) / (win_h - para_h),
value = -Math.round((win_top * diff));
// para.css('transform', 'translate3d(0,' + value*-1 + 'px, 0)');
para.css('top', value + 'px');
}
});
}
The images move but not at the correct rate.
The image should be in line with the top of the parent when the element first comes into the viewport. Then after scrolling, the bottom of the image should be in line with the bottom of the parent when it reaches the top of the viewport.
Any help would be massively appreciated!
FIDDLE (https://jsfiddle.net/8dwLwgy7/1/)
I figured this out.
For anyone stumbling on this in the future - the trick was to replace the window scrolled value with the remainder of the window scrolled amount minus the element's offset top, minus the height of the element.
Then calculate the speed by dividing the difference between the container height and the element height with largest of either the window and the container:
// Wrong:
// value = -Math.round((win_top * diff));
// Right:
var diff = elem_h - cont_h,
max = Math.max(cont_h, win_h),
speed = diff / max,
cont_scrolled = win_top - cont_top - cont_h,
value = Math.round(cont_scrolled * speed);
para.css('top', value + 'px');
Full working code:
(function() {
var lastTime = 0;
var vendors = ['ms', 'moz', 'webkit', 'o'];
for (var x = 0; x < vendors.length && !window.requestAnimationFrame; ++x) {
window.requestAnimationFrame = window[vendors[x] + 'RequestAnimationFrame'];
window.cancelAnimationFrame = window[vendors[x] + 'CancelAnimationFrame'] || window[vendors[x] + 'CancelRequestAnimationFrame'];
}
if (!window.requestAnimationFrame)
window.requestAnimationFrame = function(callback, element) {
var currTime = new Date().getTime();
var timeToCall = Math.max(0, 16 - (currTime - lastTime));
var id = window.setTimeout(function() {
callback(currTime + timeToCall);
},
timeToCall);
lastTime = currTime + timeToCall;
return id;
};
if (!window.cancelAnimationFrame)
window.cancelAnimationFrame = function(id) {
clearTimeout(id);
};
}());
(function($) {
var win = $(window),
win_h = win.height();
parallaxers = $('.parallax-window'),
parallax_objs = [],
scroll_busy = false;
function init_parallax() {
win_h = win.height();
parallax_objs = [];
parallaxers.each(function() {
var cont = $(this),
elem = cont.find('.parallax-image'),
cont_top = cont.offset().top,
cont_h = cont.height(),
elem_h = Math.round(cont_h * 1.3),
diff = elem_h - cont_h,
max = Math.max(cont_h, win_h),
speed = diff / max,
parallaxer = {
cont_top: cont_top,
cont_h: cont_h,
elem: elem,
speed: speed
};
parallax_objs.push(parallaxer);
});
}
function on_scroll() {
if (!scroll_busy) {
scroll_busy = true;
window.requestAnimationFrame(init_scroll);
}
}
function init_scroll() {
scroll_events()
scroll_busy = false;
}
function scroll_events() {
var win_top = win.scrollTop(),
win_btm = win_top + win_h;
$.each(parallax_objs, function(i, para) {
cont_btm = para.cont_top + para.cont_h;
if( cont_btm > win_top && para.cont_top <= win_btm ) {
var cont_scrolled = win_top - para.cont_top - para.cont_h,
value = Math.round(cont_scrolled * para.speed);
para.elem.css('top', value + 'px');
}
});
}
$(document).ready(function() {
init_parallax();
win.resize(init_parallax);
scroll_events();
win.scroll(on_scroll);
});
})(jQuery);
.parallax-window {
min-height: 300px;
position: relative;
overflow: hidden;
}
.parallax-window.lg {
min-height: 600px;
}
.parallax-image {
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 130%;
background-size: cover;
background-repeat: no-repeat;
background-position: 50% 50%;
transform: translate3d(0, 0, 0);
z-index: -1;
}
.image-1 {
background-image: url(https://i.ytimg.com/vi/TbC-vUPMR7k/maxresdefault.jpg);
}
.image-2 {
background-image: url(https://i.ytimg.com/vi/xi5-YrAEChc/maxresdefault.jpg);
}
.parallax-content {
position: absolute;
top: 50%;
left: 0;
width: 100%;
text-align: center;
font-family: arial, sans-serif;
font-size: 60px;
color: #fff;
transform: translateY(-50%);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window">
<div class="parallax-image image-2"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window">
<div class="parallax-image image-2"></div>
<div class="parallax-content">Hello World</div>
</div>
<div class="parallax-window lg">
<div class="parallax-image image-1"></div>
<div class="parallax-content">Hello World</div>
</div>
Updated Fiddle: https://jsfiddle.net/8dwLwgy7/2/
i want to sorting data and display the result in the view. I'm using codeigniter framework. What i want is to sorting data using ajax when dropdown values change.
Can someone give me the example code ?
my ajax
<script>
$(document).ready(function() {
$("#selectBerdasar").change(function() {
var key = $(this).val();
console.log(key);
var postdata = {key: key};
var url = '<?php echo site_url('produk/filter/GetFilterJson');?>';
$.post(url, postdata, function(result) {
console.log(result);
if (result) {
var obj = JSON.parse(result);
$('.col-item').empty();
$.each(obj, function(key, line) {
});
} else {
}
});
});
});
my controller
public function doFilter($key) {
$this->load->helper('url');
$this->load->model('filter_model', 'filter');
if ($key == 'termahal') {
$data = $this->filter->getDataMahal($key);
} elseif ($key == 'termurah') {
$data = $this->filter->getDataMurah($key);
} else {
$data = $this->filter->getDataAlfabet($key);
}
return $data;
}
public function GetFilterJson() {
$key = $this->input->post('key');
$data = $this->doFilter($key);
echo json_encode($data);
}
my model
public function getDataMahal($key) {
$this->db->select("*");
$this->db->from("produk");
$this->db->order_by("harga_produk", "desc");
$data = $this->db->get();
return $data->result_array();
}
public function getDataMurah($key) {
$this->db->select("*");
$this->db->from("produk");
$this->db->order_by("harga_produk", "asc");
$data = $this->db->get();
return $data->result_array();
}
public function getDataAlfabet($key) {
$this->db->select("*");
$this->db->from("produk");
$this->db->order_by("nama_produk", "asc");
$data = $this->db->get();
return $data->result_array();
}
here is a simple example. hope this helps..
Ajax
var phone_number = $(this).find('div.number').text();
$("#recipentno").val(phone_number);
$.ajax({
type:"POST",
dataType: 'json',
url:"<?php echo base_url('administrator/get_all_sms/'); ?>",
data: {number: phone_number},
success: function(data) {
//console.log(data);
$(".smsmessage").html("");
console.log(data.total);
for (var i = 0; i < data.total.length; i++) {
if(data.total[i].message_type==1){
$('<div class="col-lg-8 col-lg">'+
'<div class="media">'+
'<div class="" style="border-radius: 25px; background: #4CC1ED; padding: 1px; width: 100%; margin-top: 10px;">'+
'<p style="color: #000000; padding-top: 10px; padding-left: 10px;padding-right: 10px; font-size: 18px;">'+ data.total[i].body+'<i style="font-size: 9px;">'+data.total[i].date_time+'</i></p>'+
'</div>'+
'</div>'+
'</div>').appendTo (".smsmessage");
} else{
$('<div class="col-lg-offset-4 col-lg-8">'+
'<div class="media">'+
'<div class="" style="border-radius: 25px; background: #65CFBF; padding: 1px; width: 100%; height: 50px; margin-top: 10px;">'+
'<p class="sender-img pull-right" style="color: #000000; padding-top: 10px; padding-left: 10px;padding-right: 10px; font-size: 18px;">'+data.total[i].body+'<i style="font-size: 9px;">'+data.total[i].date_time+'</i></p>'+
'</div>'+
'</div>'+
'</div>').appendTo (".smsmessage");
}
}
}
});
Controller
function get_all_sms(){
$pon_number = $this->input->post('number');
$single_sms= $this->admin->get_all_sms_for_number($pon_number);
echo json_encode(array( 'total'=> $single_sms));
}
Hi All below is the code which i use.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:fb="http://www.facebook.com/2008/fbml">
<head>
<meta http-equiv="content-type" content="text/html; charset=utf-8"/>
<title>ABI SocialWebConnect</title>
<style type="text/css" media="screen">
body {
font-family : arial, sans-serif;
}
#spacer { width : 10px; }
#friendWrapperCanvas {
border : 2px solid #979797;
width : 85%;
height : 100px;
}
#mapWrapperCanvas {
border : 2px solid #979797;
width : 85%;
height : 380px;
padding-top: 10%;
}
#mapCanvas {
border : 2px solid #979797;
height : 380px;
width : 100%;
}
#resultsCanvas {
position : relative;
top : 15px;
left : 0px;
height : 370px;
width : 280px;
}
#mapSearch {
position: relative;
top : 0px;
left : 0px;
}
.mapcanvastable td {
padding : 0px;
}
.mapcanvastable {
border-width : 0px;
border-spacing : 0px;
border-collapse : collapse;
border : none;
padding-top: 10%;
}
/* canvas view css over-rides */
#mapCanvas .gels {
width : 280px;
background-color: #ddeeff;
}
#mapCanvas .gels-form {
background-color: #ddeeff;
}
#mapWrapperCanvas .gels-controls {
position : absolute;
bottom : -2px;
left : 0px;
}
#mapWrapperCanvas .gels-app,
#mapWrapperCanvas .gels-extresults-active {
border : none;
}
#mapWrapperCanvas .gels-list-item {
margin-bottom : 2px;
}
#mapWrapperCanvas .gels-list-wrapper {
padding-left : 0px;
}
</style>
</head>
<body style="font-family: Arial;border: 0 none;">
<div id="friendWrapperCanvas">
<h3>Connect with Facebook</h3>
<form name="comment_form" method="post">
<div id="user">
<fb:login-button length='long' onlogin="update_user_box();" autologoutlink='true'>Logout</fb:login-button>
</div>
</form>
</div>
<script type="text/javascript">
function update_user_box() {
var user_box = document.getElementById("user");
user_box.innerHTML =
"<span>" +
"<table><tr>" +
"<td>" +
"<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>" +
"</td>" +
"<td><fb:login-button length='long' autologoutlink='true'>Logout</fb:login-button></td>"+
"<td >" +
"<fb:name uid='loggedinuser' useyou='false'></fb:name>" +
"<input type=\"button\" onclick=\"submitComment();\" value=\"Post to Your Wall\"> ." +
"</td></tr><tr>" +
"<td colspan='3'>" +
"<fb:comments xid='user_comments' canpost='true' showform='true'>"+
"</fb:comments>"+
"</td>"+
"</tr></table></span>";
FB.XFBML.Host.parseDomTree();
}
function submitComment() {
FB.Connect.streamPublish(null, null, null, null, "Share your Search...", null, false, null);
}
</script>
<script type="text/javascript" src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php" mce_src="http://static.ak.connect.facebook.com/js/api_lib/v0.4/FeatureLoader.js.php"> </script>
<script type="text/javascript">
var api_key = "389895527688846";
var channel_path = "xd_receiver.htm";
FB.init(api_key, channel_path);
</script>
</body>
<script>
validateUserStatus();
var uid;
var accessToken;
function validateUserStatus(){
alert('called before getting login status');
FB.getLoginStatus(function(response) {
var user = document.getElementById("user");
if (response.status === 'connected') {
alert('called before getting login status : connected');
user.innerHTML =
"<span>" +
"<table> <tr>" +
"<td>" +
"<fb:profile-pic uid='loggedinuser' facebook-logo='true'></fb:profile-pic>" +
"</td>" +
"<td >" +
"<fb:name uid='loggedinuser' useyou='false'></fb:name>" +
" <input type=\"button\" onclick=\"submitComment();\" value=\"Post to Your Wall\"> ." +
"</td></tr><tr>" +
"<td colspan='2'>" +
"<fb:comments xid='user_comments' canpost='true' showform='true'>"+
" </fb:comments>"
+ "</td>"
"</tr></table>" +
+ "</span>";
uid = response.authResponse.userID;
accessToken = response.authResponse.accessToken;
} else if (response.status === 'not_authorized') {
alert('called before getting login status : not-connected');
user.innerHTML =
"<span>" +
"<table> <tr>" +
"<td>" +
"<fb:login-button length='long' onlogin='update_user_box();' autologoutlink='true'>Logout></fb:login-button>" +
"</td></tr></table>"+"</span>";
} else {
// the user isn't logged in to Facebook.
}
FB.XFBML.Host.parseDomTree();
});
}
</script>
</html>
i have two questions here.
FB.loginStatus is not giving me me the status
i get the user profile image with the name when i click on the user's image it goes to facebook but i don't want that go to facebook because i integrated this in my own application. so it should remain in the same window or application.
Please advise me how to go about.
To answer your second question, to prevent the user's image from linking out to Facebook, you can use jQuery to remove the href attribute of the anchor tag that is generated.
$(".fb_profile_pic_rendered .fb_link").removeAttr("href");