It is a widely asked question to help with this error but I have spent all day reading other answers and creating various versions for my code and still can not get anything else then this error. So I ask for your help.
My view:
<html>
<head>
<title></title>
<?=$head?>
<script type="text/javascript" src="http://maps.google.com/maps/api/js?key=AIzaSyAhiKwDjhm1ZXS1jHBHErJf6pxT2TUCMM4"></script>
<script src="<?php echo base_url() ?>scripts/jquery.colorbox-min.js"></script>
<script src="<?php echo base_url() ?>scripts/gmaps.js"></script>
<link rel="stylesheet" href="<?php echo base_url() ?>css/colorbox.css">
<style type="text/css">
#map {
width: 700px;
height: 700px;
}
</style>
</head>
<body>
<button id="go-button" type="button">Click Me!</button>
<div class="multiselect">
<label><input type="checkbox" value="all" />All</label>
<label><input type="checkbox" name="filtrs1[]" value="manufacturer1" />manufacturer1</label>
<label><input type="checkbox" name="filtrs1[]" value="manufacturer2" />manufacturer2</label>
<label><input type="checkbox" name="filtrs1[]" value="manufacturer3" />manufacturer3</label>
<label><input type="checkbox" name="filtrs1[]" value="manufacturer4" />manufacturer4</label>
</div>
<div id="map"></div>
<script type="text/javascript">
var products= <?= json_encode($products);?>;
var allMap;
$(document).ready(function(){
var allMap = new GMaps({
el: '#map',
zoom: 7,
lat: 37.4419,
lng: -122.1419
});
loadJsonMap(allMap, products);
$('#go-button').click(function(){
var chb = $("input[name='filtrs1[]']:checked");
var filtrs1values = [];
$.each(chb,function(){
filtrs1values.push($(this).val());
});
$.post('<?php echo base_url() ?>index.php/products/filter', {
filtrs1 : filtrs1values
}, function(response){
allMap.removeMarkers();
loadJsonMap(allMap, response);
});
});
});
function loadJsonMap(map, data){
var markers_data = [];
$.each(data, function(key, val){
if (val.latitude != undefined && val.longitude != undefined) {
markers_data.push({
lat : val.latitude,
lng : val.longitude,
details : {
holder_id : val.holder_id
},
click : function(e){
if(e.details.holder_id !== undefined){
var url = '<?php echo base_url() ?>index.php/products/colorbox/' + e.details.holder_id;
$.colorbox({
open : true,
href : url,
iframe : false,
innerWidth : 400,
innerHeight : 400,
close : 'Aizvert'
});
}
}
});
}
});
map.addMarkers(markers_data);
}
</script>
</body>
</html>
where $.post calls for controller products:
public function filter()
{
$data['manufacturer'] = $this->input->post('filtrs1');
$result = $this->products_model->get_productsByManufacturer($data);
// $result = $this->security->get_csrf_token_name();
// $result = $this->security->get_csrf_hash();
header('Cache-Control: no-cache, must-revalidate');
header('Content-Type: application/json');
echo json_encode($result);
}
where in products_model:
function get_productsByManufacturer($data)
{
if(empty($data['manufacturer']){
$this->db->select("latitude,longitude, holder_id");
$query = $this->db->get('products');
return $query->result_array();
}else{
$this->db->select("latitude,longitude, holder_id");
$this->db->where_in('manufacturer', $data['manufacturer']);
$query = $this->db->get('products');
return $query->result_array();
}
}
I get error on $.post line. I checked filtrs1values array using consule.log and got ["manufacturer3", "manufacturer4"]. Also I have changed my controller and model code multiple times but always get the same error.
Related
I am making a product displaying page of an ecommerce website. The products are to be filtered by brands on the basis of brands that are checked by the customer. For this I have used an ajax request everytime a brand is checked. The problem is that the page cannot receive the get variables that i am sending to the same page. The ajax request is not giving any errors and also the chrome debugger side is also not showing any error at all. This is the page:
snapshot of the products page
And this is the code of the page:
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
"http://www.w3.org/TR/html4/strict.dtd">
<?php
session_start();
include('includes/pdo_connect.php');
include('includes/pdo_functions.php');
$logged_in;
$user_first_name;
if(isset($_SESSION['user'])){ //Determining if the user is logged in or not.
if($_SESSION['user']=='user'){
$user_id = $_SESSION['user_id'];
global $logged_in;
$logged_in = true;
global $user_first_name;
$user_first_name = $_SESSION['user_first_name'];
}
} else {
$_SESSION['user'] = 'guest';
$user_id = $_SERVER['REMOTE_ADDR'];
}
$cat;
if(isset($_GET['cat'])){
global $cat;
$cat = $_GET['cat'];
}
include('includes/logged_in.php');
if(isset($_GET['brand_list'])){
$brand_list = $_GET['brand_list'];
} else {
echo "<script>alert('value not received');</script>";
}
?>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="styles/list_style.css?<?php echo time(); ?>">
<link rel="stylesheet" type="text/css" href="styles/thickbox.css" media="screen">
<script type="text/javascript" src="js/jquery-3.1.1.js"></script>
<script type="text/javascript" src="js/thickbox.js"></script>
<?php
$where = array();
if(!empty($brand_list)){
echo "ajax working";
if(strpos($brand_list, ',')!==false){
$brand_choices = explode(',', $brand_list);
$barray = array();
foreach($brand_choices as $value) {
$barray[] = "brand_id = $value";
}
$where[] = '('.implode(' OR ', $barray).')';
} else {
$where[] = '(brand_id= '.$brand_list.')';
}
} else {
//echo "ajax not working ";
}
$w = implode(' AND ', $where);
$w = "where product_cat=$cat ".$w;
$filter_query = "select * from products $w ";
echo "filter query: ".$filter_query;
$first_load = 'filter';
function show_filtered(){
//echo "<script>alert('filter query working');</script>";
global $filter_query;
global $con;
global $brand_name;
try{
$stmt = $con->prepare($filter_query);
$stmt->execute();
$result = $stmt->fetchAll();
foreach ($result as $data) {
$product_id = $data['product_id'];
$product_cat = $data['product_cat'];
$product_brand = $data['product_brand'];
$product_title = $data['product_title'];
$product_price = $data['product_price'];
$product_desc = $data['product_desc'];
$product_image = $data['product_image'];
echo "
<div class='product_container $brand_name'>
<a href='details.php?pid=".$product_id."' alt='".$product_title."'>
<div class='img_div'>
<img src='admin/product_images/".$product_image."?".time()."' alt='".$product_title."'/>
</div>
<div class='index_product_desc'>".$product_title."</div>
<div class='index_product_price'>₹".$product_price."</div>
</a>
</div>
";
}
} catch(PDOException $e){
echo "Error in show_list(): ".$e->getMessage();
}
}
function show_brands(){
global $con;
global $cat;
global $brand_name;
try{
$query = "select * from cat_brand where cat_id = $cat";
$stmt = $con->prepare($query);
$stmt->execute();
$result = $stmt->fetchAll();
//$brand = array();
foreach ($result as $data) {
$brand_id = $data['brand_id'];
//echo "<script>alert('$brand_id');</script>";
$query1 = "select * from brands where brand_id = $brand_id";
$stmt1 = $con->prepare($query1);
$stmt1->execute();
$result1 = $stmt1->fetchAll();
echo "<ul>";
foreach ($result1 as $data1) {
$brand_name = $data1['brand_title'];
echo "<li><input type='checkbox' value='$brand_id' id='$brand_name' class='brand_check' name='brandchoice'> $brand_name</li>";
}
echo "</ul>";
}
} catch(PDOException $e){
echo "Error in show_brands: ".$e->getMessage();
}
}
function show_price(){
}
?>
</head>
<body>
<div class="wrapper">
<header>
<div class="home_logo">
<a href="index.php">
<img src="images/skyshop_sumopaint.png" alt="Site Home">
</a>
</div>
<div class="login">
<?php user();?> |
<?php login_status(); ?>
</div>
<div class="form">
<form method="get" target="" name="searchbar_form">
<input type="text" name="searchbar" id="searchbar">
<input type="submit" id="search_button" value="Search">
</form>
</div>
</header>
<div class="menubar">
<div class="dropdown">
<button onclick="dropdownToggle()" class="dropdown-button">Shop By Category</button>
<ul class="dropdown-content" id="dropdownContent">
Categories
<?php getcats(); ?>
</ul>
</div>
<div class="menubar-div">
<ul class="menu-items">
<?php getcats(); ?>
</ul>
</div>
<div class="cart">
Cart (0)
</div>
</div>
<div class="content">
<div class="nav">
</div>
<div class="list_wrapper">
<!--/////////////////////////////////////////////// Filter div /////////////////////////////////////////////////////-->
<div class="filter">
<span class="filter_heading">Select Brands</span>
<a href="" class="clear" id="clear_brands">Clear<a>
<div class="brand_div">
<?php
show_brands();
?>
</div>
<div class="price_div">
</div>
</div>
<!--/////////////////////////////////////////////// List div ///////////////////////////////////////////////////////-->
<div class="list">
<div class="loading">
<img src="images/loadingAnimation.gif">
</div>
<?php
show_filtered();
?>
</div>
</div>
<div class="footer">
FOOTER
</div>
</div>
</div>
<?php
?>
<script type="text/javascript">
$(window).on('load', function(){
function filter(){
//alert("filter called");
$('.filter .list').css('opacity', 0.5);
$('.loading').css('visibility', 'visible');
var brandchoice = new Array();
$('input[name="brandchoice"]:checked').each(function(){
brandchoice.push($(this).val());
$('#clear_brands').css('visibility', 'visible');
});
if(brandchoice==""){
$('#clear_brands').css('visibility', 'hidden');
}
var brand_list = '&brand_list='+brandchoice;
var data = brand_list.substring(1, brand_list.length);
//alert(data);
$.ajax({
url: "list.php",
type: "GET",
data: data,
cache: false,
success: function(result){
$(".filter .list").css("opacity", 1);
$(".loading").css("visibility", "hidden");
},
error: function(jqxhr, exception){
console.log(jqxhr);
},
beforeSend: function(){
console.log("before send: "+data); //This is showing "brand_list=1" which is correct.
}
});
}
$('input[type="checkbox"]').on('change', filter);
$('#clear_brands').on('click', function(){
$('.brand_check').removeAttr('checked');
filter();
$('#clear_brands').css('visibility', 'hidden');
});
}); //end of jquery
</script>
</body>
</html>
I am using alert() in the beforeSend in the ajax request and it returns the correct data as expected. But the PHP section of the page does not received the values. There are no errors on the PHP side or the browser debug window.
I checked your code line by line. and figure out that you have code for ajax inside the function named "filter" function filter().
Now you are calling this filter function on by onclick event of the element with id clear_brands
$('#clear_brands').on('click', function(){
$('.brand_check').removeAttr('checked');
filter();
$('#clear_brands').css('visibility', 'hidden');
});
and by this code i came to know that at the end your ajax call is not being made because you click event was not triggered,
So either you should trigger this event on your document get ready or you have to do it by clicking on that element.
Just think about the flow once.
i was testing your script in my local and
with some modification i have made it working.
did some changes like
at the end of the script i just putted this code below.
$(document).ready(function(){
$('#clear_brands').trigger("click");
});
And ajax call was executed..
check out my entire HTML
<!DOCTYPE html>
<html>
<head>
<title></title>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
</head>
<body>
<a href="" class="clear" id="clear_brands">Clear<a>
<script type="text/javascript">
$(window).on('load', function(){
function filter(){
//alert("filter called");
$('.filter .list').css('opacity', 0.5);
$('.loading').css('visibility', 'visible');
var brandchoice = new Array();
$('input[name="brandchoice"]:checked').each(function(){
brandchoice.push($(this).val());
$('#clear_brands').css('visibility', 'visible');
});
if(brandchoice==""){
$('#clear_brands').css('visibility', 'hidden');
}
var brand_list = '&brand_list='+brandchoice;
var data = brand_list.substring(1, brand_list.length);
//alert(data);
$.ajax({
url: "list.php",
type: "GET",
data: data,
cache: false,
success: function(result){
$(".filter .list").css("opacity", 1);
$(".loading").css("visibility", "hidden");
},
error: function(jqxhr, exception){
console.log(jqxhr);
},
beforeSend: function(){
console.log("before send: "+data); //This is showing "brand_list=1" which is correct.
}
});
}
$('input[type="checkbox"]').on('change', filter);
$('#clear_brands').on('click', function(){
$('.brand_check').removeAttr('checked');
filter();
$('#clear_brands').css('visibility', 'hidden');
});
}); //end of jquery
$(document).ready(function(){
$('#clear_brands').trigger("click");
});
</script>
</body>
</html>
In Chrome do Ctrl+Shift+I to open Developer Tools and check Console for errors and Network tab to see if the data is passed in request.
I am trying to generate shopping kart kind of application, but i found similar kind of functionality. in PHP. in this they are fetching some data from db, and binding to div in PHP code.Similar kind of functionality
<BODY>
<div id="product-grid">
<div class="txt-heading">Products</div>
<?php
$product_array = $db_handle->runQuery("SELECT * FROM tblproduct ORDER BY id ASC");
if (!empty($product_array)) {
foreach($product_array as $key=>$value){
?>
<div class="product-item" data-name="<?php echo $product_array[$key]["name"]; ?>" data-price="<?php echo "$".$product_array[$key]["price"]; ?>">
<div class="product-image"><img class="draggable" src="<?php echo $product_array[$key]["image"]; ?>" id="<?php echo $product_array[$key]["code"]; ?>"></div>
<div><strong><?php echo $product_array[$key]["name"]; ?></strong></div>
<div class="product-price"><?php echo "$".$product_array[$key]["price"]; ?></div>
</div>
<?php
}
}
?>
</div>
<div class="clear-float"></div>
<div id="shopping-cart">
<div class="txt-heading">Shopping Cart <a id="btnEmpty" onClick="cartAction('empty','');">Empty Cart</a></div>
<div id="cart-item"></div>
</div>
<script>
$(document).ready(function () {
cartAction('', '');
})
</script>
</BODY>
.txt-heading{padding: 5px 10px;font-size:1.1em;font-weight:bold;color:#999;}
a.btnRemoveAction{color:#D60202;border:0;padding:2px 10px;font-size:0.9em;}
#btnEmpty{background-color:#E27E7E;border:0;padding:2px 10px;color:#333; font-size:0.8em;font-weight:normal;float:right;text-decoration:none;cursor:pointer;}
#shopping-cart .txt-heading{border-top: #79b946 2px solid;margin:30px 0px;background-color: #D3F5B8;}
#cart-item{height: 200px;background-color: #FFFFFF;}
#product-grid .txt-heading{border-top: #F08426 2px solid;background-color: #FFD0A6;}
.product-item { float:left; background:#F0F0F0; margin:15px; padding:5px;}
.product-item div{text-align:center; margin:2px;}
.product-price {color:#F08426;}
.product-image {height:100px;background-color:#FFF;cursor:move;}
.clear-float{clear:both;margin-bottom:40px;}
body{width:610px;}
<HTML>
<HEAD>
<TITLE>PHP Shopping Cart with jQuery AJAX</TITLE>
<link href="style.css" type="text/css" rel="stylesheet" />
<script src="https://code.jquery.com/jquery-2.1.1.min.js" type="text/javascript"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script>
$(document).ready(function () {
$('.draggable').on('dragstart', function (e) {
var source_id = $(this).attr('id');
e.originalEvent.dataTransfer.setData("source_id", source_id);
});
$("#cart-item").on('dragenter', function (e) {
e.preventDefault();
$(this).css('background', '#BBD5B8');
});
$("#cart-item").on('dragover', function (e) {
e.preventDefault();
});
$("#cart-item").on('drop', function (e) {
e.preventDefault();
$(this).css('background', '#FFFFFF');
var product_code = e.originalEvent.dataTransfer.getData('source_id');
cartAction('add', product_code);
});
});
function cartAction(action, product_code) {
var queryString = "";
if (action != "") {
switch (action) {
case "add":
queryString = 'action=' + action + '&code=' + product_code;
break;
case "remove":
queryString = 'action=' + action + '&code=' + product_code;
break;
case "empty":
queryString = 'action=' + action;
break;
}
}
jQuery.ajax({
url: "AddToCart.aspx",
data: queryString,
type: "POST",
success: function (data) {
$("#cart-item").html(data);
},
error: function () { }
});
}
function calculateTotal(qty, qty_new, price) {
var total = $('#totalAmount').html();
total = parseInt(total) - (parseInt(qty) * parseInt(price));
total = parseInt(total) + (parseInt(qty_new) * parseInt(price));
$('#totalAmount').html(total);
}
</script>
This is the code i am looking to convert into .net , for this i can get the data from the database, but i am not getting how to generate the div part , could any body help me on this?
runQuery("SELECT * FROM tblproduct
ORDER BY id ASC"); if (!empty($product_array)) {
foreach($product_array as $key=>$value){ ?> " data-price=""> " id="">
I'm trying to do AJAX search for my application but I have some problems.
I have table posts with fields id, title, summary, content. I want to make posts search by title.
In my controller I load model posts and my index function look like this
function index()
{
$search= $this->input->post('search');
$query = $this->posts->search_posts($search);
echo json_encode ($query);
}
in my model posts.php I put this function
function search_posts($search){
$this->db->select("id,title,summary,content");
$whereCondition = array('title' =>$search);
$this->db->where($whereCondition);
$this->db->from('posts');
$query = $this->db->get();
return $query->result();
}
and my view look like this
<!DOCTYPE html>
<head>
<link rel="stylesheet" type="text/css" href="<?php echo base_url('css/style.css');?>">
<script type="text/javascript" language="javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/jquery.js"></script>
<script type="text/javascript" src="http://www.technicalkeeda.com/js/javascripts/plugin/json2.js"></script>
<script>
$(document).ready(function(){
$("#search").keyup(function(){
if($("#search").val().length>3){
$.ajax({
type: "post",
url: "http://localhost/blogFinal/index.php/blog",
cache: false,
dataType: 'json';
data:'search='+$("#search").val(),
success: function(response){
$('#finalResult').html("");
var obj = JSON.parse(response);
if(obj.length>0){
try{
var items=[];
$.each(obj, function(i,val){
items.push($('<li/>').text(val.title + " " + val.summary));
});
$('#finalResult').append.apply($('#finalResult'), items);
}catch(e) {
alert('Exception while request..');
}
}else{
$('#finalResult').html($('<li/>').text("No Data Found"));
}
},
error: function(){
alert('Error while request..');
}
});
}
return false;
});
});
</script>
</head>
<body>
<div id="wrap">
<header>
<h1><?php echo anchor('','My Blog'); ?></h1>
</header>
<div id="container">
<div id="loginDiv"><?php echo anchor('admin/logout','Logout'); ?></div>
<hr/>
<input type="text" name="search" id="search" />
<ul id="finalResult"></ul>
</div>
<div style="clear: both;"> </div>
I make this by following tutorial but it doesn't work for me.
Can somebody help me please? Thanks!
In my website I am using Flot pie charts in tabs. In every tab the legends are coming on to the pie chart. I am not understanding where I was wrong. Could anyone please help me. I attached the screen shot.
My code:
<script src="assets/plugins/jquery-1.10.1.min.js" type="text/javascript"></script>
<script src="assets/plugins/flot/jquery.flot.js"></script>
<script src="assets/plugins/flot/jquery.flot.pie.js"></script>
<script src="assets/plugins/flot/jquery.flot.resize.js"></script>
<script src="assets/plugins/flot/jquery.flot.stack.js"></script>
<script src="assets/plugins/flot/jquery.flot.crosshair.js"></script>
<?php
mysql_select_db($database_finalkms, $finalkms);
$query_getdata2 = "SELECT ComplianceStatus,count FROM indexonboard WHERE zone='PZ' and country is NULL";
$getdata2 = mysql_query($query_getdata2, $finalkms) or die(mysql_error());
$row_getdata2 = mysql_fetch_assoc($getdata2);
$totalRows_getdata2 = mysql_num_rows($getdata2);
?>
<script>
jQuery(document).ready(function() {
Charts1.initPieCharts();
});
</script>
<?php $m=0;do {?>
<input name="grptst5<?php echo $m; ?>" id="grptst5<?php echo $m; ?>" type="hidden" value="<?php echo $row_getdata2['ComplianceStatus']; ?>" />
<input name="datatst5<?php echo $m; ?>" id="datatst5<?php echo $m; ?>" type="hidden" value="<?php echo $row_getdata2['count']; ?>" />
<?php $m++;} while($row_getdata2 = mysql_fetch_assoc($getdata2));?>
<input name="totali5" id="totali5" type="hidden" value="<?php echo $totalRows_getdata2; ?>" />
<?php
mysql_free_result($getdata2);
?>
<div id="interactive5" class="chart" style="
width:400px;height: 400px;;float:right;"></div>
<script>
var Charts1 = function () { //1st
return { //2nd
//main function to initiate the module
init: function () { //3rd
App.addResponsiveHandler(function () { //4th
Charts1.initPieCharts();
}); //4th
}, //3rd
initPieCharts: function () {
var totalid5=$("#totalid5").val();
var data4 =[];
for (var n = 0; n < totali5; n++) {
var one4=document.getElementById("grptst5" + n).value;
var two4 =document.getElementById("datatst5" + n).value;
data4[n] = {
label: one4,
data: two4
}
}
$.plot($("#interactive"), data, {
series: {
pie: {
show: true,
label: {
show: true,
formatter: function(label,point){
return(point.percent.toFixed(2) + '%');
}
}
}
},
colors: ["#00FF00","#FF9933","#6495ED","#B0B0B0"],
legend: {show: true,
backgroundOpacity:0,
sorted:"comparator"
}
});
$("#interactive").bind("plothover", pieHover);
function pieHover(event, pos, obj) {
if (!obj)
return;
percent = parseFloat(obj.series.percent).toFixed(2);
$("#hover").html('<span style="font-weight: bold; color: ' + obj.series.color + '">' + obj.series.label + ' </span>');
}
}
}; //2nd
}(); //1st
I believe the issue is with your labels being to long and/or the width being to small. Try extending the div width.
<div id="placeholder" style="width:500px;height:300px;"></div>
fiddle -http://jsfiddle.net/Rnusy/46/
I've just started using Gigya to allow users to connect to my site. I already have a login system so I just want to connect existing users to the Gigya service.
To do this I have called the "gigya.services.socialize.notifyLogin" function which returns a Gigya User object with the UID provided by my site. [fig 1]
Do I need to do anything with this User object, like add it to a cookie or is it just for reference.
The problem that Im having is on another page, I want to allow users to connect to their social media accounts. I use the "showAddConnectionsUI" function passing my api key, but the returned object does NOT have the User object in, although the documentation says it should. How do I get the users conenctions and the key information from this function. Do I need to send any additional information along with my api key. [fig 2]
I have spent several days reading the wiki, documentation and forum for advice but I am still stuck. Any help would be greatly appreciated. Thanks in advance, Ben
[fig 1]
<script type="text/javascript" src="http://cdn.gigya.com/js/socialize.js?apiKey=<?php echo $key; ?>"></script>
<script type="text/javascript">
var gigyaConf = { APIKey: "<?php echo $key; ?>", signIDs: "true" }
var signature = "<?php echo $signature; ?>";
var siteUID = "<?php echo $userId; ?>";
var timestamp = "<?php echo $timestamp; ?>";
var gigyaParams =
{
siteUID:siteUID,
timestamp:timestamp,
signature:signature,
callback:gigyaNotifyLoginCallback
};
gigya.services.socialize.notifyLogin(gigyaConf, gigyaParams);
function gigyaNotifyLoginCallback(eventObj) {
if ( eventObj.errorCode != 0 ) {
alert('Gigya Error: ' + eventObj.errorMessage);
}
}
</script>
[fig 2]
<script type="text/javascript" lang="javascript" src="http://cdn.gigya.com/JS/socialize.js?apikey=<?php echo $key; ?>"></script>
<script>
var conf = { APIKey: '<?php echo $key; ?>', signIDs: 'true' };
$(document).ready(function(){
gigya.services.socialize.getUserInfo(conf, { callback: renderUI });
gigya.services.socialize.addEventHandlers(conf,
{
onConnectionAdded: renderUI,
onConnectionRemoved: renderUI
});
});
</script>
<script>
function renderUI(res) {
if (res.user != null && res.user.isConnected) {
document.getElementById("name").innerHTML = res.user.nickname;
if (res.user.thumbnailURL.length > 0)
document.getElementById("photo").src = res.user.thumbnailURL;
else
document.getElementById("photo").src = "http://cdn.gigya.com/site/images/bsAPI/Placeholder.gif";
document.getElementById("profile").style.display = "block";
} else {
document.getElementById("profile").style.display = "none";
}
}
</script>
<div id="content">
<h5>Step 1: Connect</h5>
<div id="divConnect"></div>
<script type="text/javascript">
gigya.services.socialize.showAddConnectionsUI(conf, {
height:65,
width:175,
showTermsLink:false,
hideGigyaLink:true,
useHTML:true,
containerID: "divConnect"
});
</script>
<br />
<h5>Step 2: See User Info</h5><br />
<div id=profile style="display:none;">
<img id="photo" src="" width="60" />
<br />
<span id="name" ></span>
</div>
</div>
Any help, advice, code snippits that would help will be greatly appreciated
Re: your first question, not required to do anything special with the Gigya User object. It's for your reference.
Re: your code, I can't tell if you're using JQuery but I was getting an error with your $(document).ready function. I modified your code slightly by adding body onLoad and everything worked. This assumes you have connected with a provider. Here's my code... hope it helps:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<script type="text/javascript" lang="javascript" src="http://cdn.gigya.com/JS/socialize.js?apikey=<?php echo $key; ?>"></script>
<script>
var conf = { APIKey: '<?php echo $key; ?>', signIDs: 'true' };
function onLoad() {
gigya.services.socialize.getUserInfo(conf, { callback: renderUI });
gigya.services.socialize.addEventHandlers(conf,
{
onConnectionAdded: renderUI,
onConnectionRemoved: renderUI
});
}
</script>
<script>
function renderUI(res) {
if (res.user != null && res.user.isConnected) {
document.getElementById("name").innerHTML = res.user.nickname;
if (res.user.thumbnailURL.length > 0)
document.getElementById("photo").src = res.user.thumbnailURL;
else
document.getElementById("photo").src = "http://cdn.gigya.com/site/images/bsAPI/Placeholder.gif";
document.getElementById("profile").style.display = "block";
} else {
document.getElementById("profile").style.display = "none";
}
}
</script>
<body onload="onLoad()">
<div id="content">
<h5>Step 1: Connect</h5>
<div id="divConnect"></div>
<script type="text/javascript">
gigya.services.socialize.showAddConnectionsUI(conf, {
height:65,
width:175,
showTermsLink:false,
hideGigyaLink:true,
useHTML:true,
containerID: "divConnect"
});
</script>
<br />
<h5>Step 2: See User Info</h5><br />
<div id=profile style="display:none;">
<img id="photo" src="" width="60" />
<br />
<span id="name" ></span>
</div>
</div>
</body>
</html>