Using Javascript to send an invite to facebook friend - facebook-javascript-sdk

I'm trying inviting facebook friends to our application since from 2 days. Still not yet got the solution.
I have tried the following code and its sending request to friends but those are not getting any timeline or notification or anything.
<ul id="fcbklist">
<?php foreach($facebook_friends as $key => $friend): ?>
<li> <img src="https://graph.facebook.com/<?php echo $key; ?>/picture"/><strong><?php echo $friend;?></strong><br />
<input type="checkbox" name="friendids[]" class="checkbox" value="<?php echo $key;?>" />
</li>
<?php endforeach; ?>
</ul>
<div id="fb-root"></div>
<script type="text/javascript" src="http://connect.facebook.net/en_US/all.js"></script>
<script type="text/javascript">
FB.init({
appId : '259234574212521',
frictionlessRequests: true
});
function sendRequestToRecipients() {
var ids = [];
$('.checkbox').each(function() {
if($(this).is(':checked')) {
ids.push($(this).val());
}
})
alert(ids);
var user_ids = ids;
FB.ui({method: 'apprequests',
message: 'Request to StoryTag',
to: user_ids
}, requestCallback);
}
function sendRequestViaMultiFriendSelector() {
FB.ui({method: 'apprequests',
message: 'Request to StoryTag'
}, requestCallback);
}
function requestCallback(response) {
// Handle callback here
if(response){
///SUCCESS HERE
alert('successful');
} else {
///FALIURE COMES HERE
alert('failure');
}
}
</script>
Please help me get rid of it. The work is more appreciated.

Paremeter "to" of apprequest should be a String, not an Array, so you need to change
var user_ids = ids;
to
var user_ids = ids.join(',');
Documentation: http://developers.facebook.com/docs/reference/dialogs/requests/#direct_request

Related

Autocomplete cannot search in table with two foreign key Laravel

and i want make autosearch from local database, but in other case with table in detail cannot be get, but in just manual search is successfully:
Image of table with two foreign key
code in my controller for method index is (this is just manual search) :
public function index(Request $request)
{
$filterKeyword = $request->get('keyword');
$data['course'] = Course::paginate(5);
if ($filterKeyword) {
$data['course'] = Course::where('title', 'LIKE', "%$filterKeyword%")->paginate(5);
}
return view('course.index', $data);
}
code in my routes/web is
Route::get('course.search', function (Request $request) {
$query = $request->get('query');
$filterResult = Course::where('title', 'LIKE', '%' . $query . '%')->get();
return response()->json($filterResult);
});
my code in view(interface) is :
<div class="col-8">
<input type="search" class="typeahead form-control" value="{{ Request::get('keyword') }}"id="keyword" name="keyword">
</div>
<div class="col-2">
<button type="submit" class="btn btn-outline-info"><span class="fas fa-search"></span></button>
</div>
my javascript for get query when input :
<script src="https://cdnjs.cloudflare.com/ajax/libs/bootstrap-3-typeahead/4.0.2/bootstrap3-typeahead.min.js"></script>
<script type="text/javascript">
var route = "{{ url('course.search') }}";
$('#keyword').typeahead({
source: function(query, process) {
return $.get(route, {
query: query
}, function(data) {
return process(data);
});
}
});
</script>
is there a certain way to anticipate from foreign field?

how to count review per product and show in product listing in big commerce?

Please find attached image which is gives you idea
i want to count review per product
Please find attache code
<li class="%%GLOBAL_AlternateClass%%">
<div class="inner">
<div class="ProductImage QuickView" data-product="%%GLOBAL_ProductId%%">
%%GLOBAL_ProductThumb%%
</div>
<div class="ProductDetails">
%%GLOBAL_ProductName%%
</div>
<em class="p-price">%%GLOBAL_ProductPrice%%</em>
<div class="ProductPriceRating">
<span class="Rating Rating%%GLOBAL_ProductRating%%">
<img src="%%GLOBAL_IMG_PATH%%/IcoRating%%GLOBAL_ProductRating%%.png" alt="" style="%%GLOBAL_HideProductRating%%"/>
</span>
</div>
<div>
<div class="ProductCompareButton" style="display:%%GLOBAL_HideCompareItems%%">
<input type="checkbox" class="CheckBox" name="compare_product_ids" id="compare_%%GLOBAL_ProductId%%" value="%%GLOBAL_ProductId%%" onclick="product_comparison_box_changed(this.checked)"/> <label for="compare_%%GLOBAL_ProductId%%">%%LNG_Compare%%</label> <br>
</div>
<div class="ProductActionAdd" style="display:%%GLOBAL_HideActionAdd%%;">
%%GLOBAL_ProductAddText%%
</div>
</div>
</li>
This jQuery snippet can be inserted on the category page to asynchronously access each product, and determine the number of reviews on the page.
// For each product on the category page...
$('.ProductDetails').each(function(index) {
var $self = $(this); // Make local reference to 'this'.
// Parse the URL from the individual product, and retrieve its Reviews Count:
getProductPageReviewCount($self.find('>:first-child').attr('href')).then(function(count) {
// Insert the number of reviews below the Product Name:
$self.find('>:first-child').after("<a>" +count +" Reviews</a>");
}).catch(function(err) {
// Catch any Ajax Errors:
console.log('Error - ', err);
});
});
/**
* Determines the total number of reviews for a particular
* external product page, according to its URL.
* #param url <string> - The product page's URL.
* #return Promise\<int> - The number of reviews on the page, or error on failed request.
*/
function getProductPageReviewCount(url) {
return new Promise(function(fulfill, reject) {
$.ajax({
method: 'GET',
url: url,
success: function(res) {
fulfill($(res).find('.ProductReviewList > li').length);
},
error: function(err) {
reject(err);
}
});
});
}
$(document).ready(function(){
$('.ProductList').each(function(){
$(this).find('li').each(function(){
var current = $(this);
var mainURL = window.location.href;
var productUrl = current.find('div div a').attr('href');
if(mainURL.indexOf('https')!==-1){
productUrl = current.find('div div a').attr('href').replace('http','https');
}
$.ajax({
url: productUrl,
type: "POST",
dataType: "html",
success: function (data) {
var ht = $(data);
var review = ht.find('#productTotalReview').text();
current.find('div span').append("<br>&nbsp"+review);//.replace('product reviews','Reviews'));
}
});
});
});
});

vue.js proper way to determine empty object

Classic scenario: I want to display a list, but when it's empty I want to display "No data".
The fact that it is somewhat complicated to do something I would expect to be simple makes me think I'm probably doing it wrong.
Here is my current solution.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="element">
<div v-if="empty">No item in inventory</div>
<div v-for="(index, item) in inventory">
{{item.key}}<button onclick="remove('{{index}}')">remove</button>
</div>
</div>
<script type="text/javascript">
"use strict";
var vm;
$(function() {
vm = new Vue({
el: '#element',
data: {
inventory: {"id1" : {"key" : "val1"}, "id2" : {"key" : "val2"}},
empty: false
},
watch: {
inventory: function() {
vm.empty = $.isEmptyObject(vm.inventory);
}
}
});
});
function remove(key) {
Vue.delete(vm.inventory, key);
}
</script>
Is there a better solution than this?
You can just use length of inventory in v-if, like following:
<div id="element">
<div v-if="!inventory.length">No item in inventory</div>
<div v-for="(index, item) in inventory">
{{item.key}}
<button v-on:click="remove(index)">remove</button>
</div>
</div>
Given that inventory variable is a hash and not an array, you can use any of the following to find it is empty and use that in v-if:
ECMA 5+:
Object.keys(inventory).length === 0
Pre-ECMA 5:
function isEmpty(obj) {
for(var prop in obj) {
if(obj.hasOwnProperty(prop))
return false;
}
return JSON.stringify(obj) === JSON.stringify({});
}
As you are already using jquery, you can also do:
jQuery.isEmptyObject({}); // true
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://cdn.jsdelivr.net/vue/1.0.16/vue.js"></script>
<div id="element">
<div v-if="isEmpty">No item in inventory</div>
<div v-for="(index, item) in inventory">
{{item.key}}<button #click="remove(index)">remove</button>
</div>
</div>
<script type="text/javascript">
"use strict";
var vm;
$(function() {
vm = new Vue({
el: '#element',
data: {
inventory: {"id1" : {"key" : "val1"}, "id2" : {"key" : "val2"}},
empty: false
},
methods: {
remove: function(index) {
Vue.delete(this.inventory, index);
}
},
computed: {
isEmpty: function () {
return jQuery.isEmptyObject(this.inventory)
}
}
});
});
</script>
After searching for a few minutes, I come up with a better solution to check whether the object is empty or not.
Object.keys( YOUR_OBJECT ).length == 0 // Check if it's empty.
It will return 0 if it's empty. If you want to check whether the array is empty or not you can definitely go for this solution below,
YOUR_ARRAY.length == 0 // Check if it's empty.
In my case it's an object, not array. So, it may also help. Happy coding :)
If it's an array, you can use
v-if="!array.length"
Worked Great for me...
v-if="array.length == 0"
<div v-if="Object.length > 0 ">
//Write your logic here
</div>
<div v-else>
No Records found
</div>
You can just use this
v-if="(YOUR_OBJECT).total == 0"

meteor dynamic meta tags

Well, i need some way to have a dynamic meta tags for my app, im creating a cms-blog so ill need to change the meta desc/keywords/title etc at every post,im using iron-router.
i have an idea how to do so using not completely sure:
<template name="post">
{{metaTitle}}
</template>
Template.post.metaTitle = function (this) {
document.title = this;
}
(iron-router version)
this.route('post', {
path: '/',
....
data: function () {
return Posts.findOne({_id: this.params._id});
}
//Posts holds post documents with a fields like: "metaTitle" "metaKeywords" etc
});
so if a client routes to "/" and the Posts collection holds a post with id of "/"
and the document holds metaTitle:"Post 1"
will this proceed to the template.post.metaTitle helper
and the title will be "Post 1"?
is there a better way?
and doing similar stuff to the keywords etc.
ok , i have manged to do this, here is what i'v done:
html:
<template name="posts">
{{metaTitle}}
{{metaDesc}}
{{metaKeywords}}
{{>home}}
{{#each posts}}
</div>
<a href="{{pathFor 'post'}}">
<div class="small-12 medium-12 large-12 columns">
<div class="post">
<div class="small-12 medium-12 large-12 columns">
<h4 class="left">{{author}}</h4>
<h4 class="right">{{date}}</h4>
</div>
<h2>{{title}}</h2>
<p>{{desc}}</p>
</div>
</div>
</a>
<hr/>
{{/each}}
</template>
router (iron-router):
this.route('posts', {
path: '/',
waitOn:function(){
NProgress.start();
Meteor.subscribe("Teams");
},
before: function () {
Session.set("adding_group", false);
NProgress.done();
/*
causes problems when phonegap mode
*/
},
fastRender:true,
unload: function () {
Session.set("adding_group", true);
Session.set("group_name", false);
Session.set("group_date", false);
Session.set("group_friends", false);
Session.set("group_location", false);
Session.set("group_rules", false);
Session.set("group_desc", false);
Session.set("group_save", false);
},
yieldTemplates: {
'nav': {to: 'header'}
},
data:{
posts:Posts.find({}),
metaTitle:function(){
var one = Posts.findOne({}); //just for the example
return document.title = one.title; //just for the example
}
}
});
this will insert a document.title of the posts if ill do this dynamic path segments
( findOne by ID ) it will return the current post title,
i think ill make this simple thing a package, i haven't seen similar package at atmosphere.
hope it helps you guys.

Creating dynamic view from a controller in MVC

I have this controller and view:
public ActionResult DynamicView()
{
return View();
}
_
#model ChatProj.Models.GroupNumber
#{
ViewBag.Title = "DynamicView";
}
<h2>DynamicView</h2>
<fieldset>
<legend>Create a room</legend>
<div class="editor-label">
#Html.LabelFor(model => model.GroupId)
</div>
<div class="editor-field">
#Html.EditorFor(model => model.GroupId)
#Html.ValidationMessageFor(model => model.GroupId)
</div>
<input type="submit" value="DynamicView" />
</fieldset>
This is what it looks like on the page.
That's fine and dandy, but I would like to pass that number to a controller, which then passes it to a view. I would like to pass it to this view:
#using PagedList.Mvc;
#using ChatProj.App_Code;
<link href="~/Content/PagedList.css" rel="stylesheet" type="text/css" />
#{
ViewBag.Title = "Grupprum 1";
}
<h2>Grupprum 1</h2>
<style>
ul {list-style-type:circle;}
</style>
<div class="container">
<div class="nano chat">
<div class="content">
<ul id="discussion">
</ul>
</div>
</div>
<input type="text" id="message" />
<input type="button" id="sendmessage" value="Send" disabled="disabled" />
<input type="hidden" id="displayname" />
</div>
#section scripts {
<!--Script references. -->
<!--The jQuery library is required and is referenced by default in _Layout.cshtml. -->
<!--Reference the SignalR library. -->
<script src="~/Scripts/jquery.signalR-1.1.3.js"></script>
<script src="~/Scripts/jquery.nanoscroller.min.js"></script>
<!--Reference the autogenerated SignalR hub script. -->
<script src="~/signalr/hubs"></script>
<!--SignalR script to update the chat page and send messages.-->
<script>
$(function () {
// Reference the auto-generated proxy for the hub.
var chat = $.connection.chatHub;
$(".nano").nanoScroller();
// Create a function that the hub can call back to display messages.
chat.client.addNewMessageToPage = function (name, message) {
// Add the message to the page.
$('#discussion').append('<li><strong>' + htmlEncode(name)
+ '</strong>: ' + htmlEncode(message) + '</li>');
};
$(document).ready(function () {
$("#sendmessage").removeAttr("disabled");
$('#message').keypress(function (e) {
if (e.keyCode == 13)
$('#sendmessage').click();
});
});
// Get the user name and store it to prepend to messages.
// Set initial focus to message input box.
$('#message').focus();
$.connection.hub.qs = { "room": "Grupprum 1" };
// Start the connection.
$.connection.hub.start().done(function () {
$('#sendmessage').click(function () {
// Call the Send method on the hub.
chat.server.send($('#message').val());
// Clear text box and reset focus for next comment.
$('#message').val('').focus();
});
});
});
// This optional function html-encodes messages for display in the page.
function htmlEncode(value) {
var encodedValue = $('<div />').text(value).html();
return encodedValue;
}
</script>
}
Specifically I would want it at $.connection.hub.qs = { "room": "Grupprum 1" }; to replace the 1.
So I've created these controllers which are faulty and incomplete:
[HttpPost]
public ActionResult DynamicView(int? roomNumber)
{
return View(GroupRoom(roomNumber));
}
public ActionResult GroupRoom(int roomNumber)
{
return View();
}
Does anyone know how I should change my controllers and views so that I'm able to insert a number in my DynamicGroup view, and get a view back based on the inserted number and the lastly mentioned view?
You could pass the number from the model to the new action just how #Matt Bodily did. But if you want to use a different model on your new view, you can use the below code instead:
public ActionResult GroupRoom(int roomNumber)
{
ViewBag.RoomNumber = roomNumber;
return View();
}
This way, you can use a different model for this page, if you want to. To display this ViewBag on the page, use this code anywhere you want:
#ViewBag.RoomNumber
I hope that helps you out.
How you have it set up the Model.GroupID will be set on the first view so change your controller like this
[HttpPost]
public ActionResult DynamicView(GroupNumber model)
{
//model.GroupId here will be what was selected on the first view
return RedirectToAction("GroupRoom", "Controller", new { GroupId = model.GroupId });
}
public ActionResult GroupRoom(int GroupId)
{
var model = //build your model based on the selected GroupId
return View(model);
}