I m using FB.ui method in facebook to show stream publish box as follows:
function showfeed()
{
var publish = {
method: 'stream.publish',
attachment: {
name: 'XYZ',
caption: 'caption here',
description: ('description'),
href: 'url',
media: [{
type: 'image',
href: 'url',
src: 'xyz.gif'
}]
},
action_links: [{ text: 'XYZ', href: 'url' }]
};
FB.ui(publish,null);
}
This works fine but my page is very long in height so when i click button to show this dialog it appears at center of page not at top so even dialog is display at center it's not display to me as i m at top. Is there any away to position dialog at top so any one can see it.
add the code below to <style>. [got that from other forums) hope that helps
div.fb_dialog_advanced+div.fb_dialog_advanced {
top:50px !important;
}
div.fb_dialog_advanced+div.fb_dialog_advanced { top:50px !important; } does not work any longer. See this:
1:
But I've worked around the issue with jQuery. It's kinda hacky but it works:
function move_to_top( value )
{
$(".fb_dialog").each(function(index) {
if($(this).css("top")!='-10000px') {
$(this).css("top", value + 'px' );
}
});
setTimeout( ('move_to_top("'+value+'");'), 1250);
}
function send_request()
{
FB.Canvas.scrollTo(0,0);
FB.ui({method: 'apprequests', message: 'Press accept to see this request.', data: 'tracking information for the user'},
function(response) {
if(response!=null)
{
alert('You are boss')
}
});
$(".fbProfileBrowserResult").ready( function(){
t = setTimeout ( ('move_to_top("'+50+'")'), 1250 );
});
}
Related
I'm creating page in PHP but when I use AJAX to send data, echo function start to printing data in console instead in DOM elements.
I want to add Quagga barcode reader to my page. Quagga is write in JS but my page is in php. So I have to use Ajax to send barcode result to my php code. And there is a problem. After sending data (POST) and using echo to display that on the screen, every data that echo should display are showing up in console. Not only data I send but whole page html code too. Even header('Location: ') doesn't work correctly. Because I'm sending readed code to barcodereaded.php where I put POST data inside SESSION var, and I try to echo that on the screen in different file barcoderesult.php but everytime data is printed in console log in barcode.php (which code is below). On every other subpage php echo and header functions works fine, only this one case causing troubles.
<div id="scanner-container"></div>
<input type="button" id="btn" value="Start/Stop" />
<script src="js/quagga.min.js"></script>
<script>
var _scannerIsRunning = false;
function startScanner() {
var barcode = {};
Quagga.init({
inputStream: {
name: "Live",
type: "LiveStream",
numOfWorkers: navigator.hardwareConcurrency,
target: document.querySelector('#scanner-container'),
constraints: {
size: 1920,
width: 200,
height: 480,
facingMode: "environment"
},
},
config: {
frequency: 5,
},
locator: {
patchSize: "x-large",
},
decoder: {
readers: [
"code_128_reader",
"ean_reader",
"ean_8_reader",
"code_39_reader",
"code_39_vin_reader",
"codabar_reader",
"upc_reader",
"upc_e_reader",
"i2of5_reader"
],
debug: {
showCanvas: true,
showPatches: true,
showFoundPatches: true,
showSkeleton: true,
showLabels: true,
showPatchLabels: true,
showRemainingPatchLabels: true,
boxFromPatches: {
showTransformed: true,
showTransformedBox: true,
showBB: true
}
}
},
}, function (err) {
if (err) {
console.log(err);
return
}
console.log("Initialization finished. Ready to start");
Quagga.start();
// Set flag to is running
_scannerIsRunning = true;
});
Quagga.onProcessed(function (result) {
var drawingCtx = Quagga.canvas.ctx.overlay,
drawingCanvas = Quagga.canvas.dom.overlay;
if (result) {
if (result.boxes) {
drawingCtx.clearRect(0, 0, parseInt(drawingCanvas.getAttribute("width")), parseInt(drawingCanvas.getAttribute("height")));
result.boxes.filter(function (box) {
return box !== result.box;
}).forEach(function (box) {
Quagga.ImageDebug.drawPath(box, { x: 0, y: 1 }, drawingCtx, { color: "green", lineWidth: 2 });
});
}
if (result.box) {
Quagga.ImageDebug.drawPath(result.box, { x: 0, y: 1 }, drawingCtx, { color: "#00F", lineWidth: 2 });
}
if (result.codeResult && result.codeResult.code) {
Quagga.ImageDebug.drawPath(result.line, { x: 'x', y: 'y' }, drawingCtx, { color: 'red', lineWidth: 3 });
}
}
});
Quagga.onDetected(function (result) {
Quagga.stop();
barcode.code = result.codeResult.code;
$.ajax({
url: "barcodereaded.php",
method: "POST",
data: barcode,
success: function(res){
console.log(res);
}
});
});
}
// Start/stop scanner
document.getElementById("btn").addEventListener("click", function () {
if (_scannerIsRunning) {
Quagga.stop();
_scannerIsRunning = false;
} else {
startScanner();
}
}, false);
</script>
I just want to send readed barcode to other file to convert it into data I want to add to database (quantity of elements on the pallet, production date, etc.)
Look at this part of your code :
$.ajax({
url: "barcodereaded.php",
method: "POST",
data: barcode,
success: function(res){
console.log(res);
}
});
The success method tells what to do with the result of your ajax code.
And here you specifically tell to log the response (res) to the console.
Instead you can use the content of res to append it to your dom via your preferred Javascript solution (vanilla, jQuery,...).
With jQuery you could (if the result from your php code is some text):
$('#my-return-container').text(res)
I have a problem with PayPal Express Checkout integration : https://developer.paypal.com/docs/classic/express-checkout/in-context/javascript_advanced_settings/#color
If I close the pop-up before it loads completely, the pop-up won't show up anymore until I refresh!
This does occur on all browsers. The error on Chrome console is:
ppxo_paypal_legacy_gettoken_initxo Object
print # logger.js:65
Here is my code :
window.paypalCheckoutReady = function() {
paypal.checkout.setup("{$PayPal_in_context_checkout_merchant_id}", {
environment: {if $PAYPAL_SANDBOX}"sandbox"{else}"production"{/if},
click: function(event) {
event.preventDefault();
paypal.checkout.initXO();
updateFormDatas();
var str = '';
if($('.paypal_payment_form input[name="id_product"]').length > 0)
str += '&id_product='+$('.paypal_payment_form input[name="id_product"]').val();
if($('.paypal_payment_form input[name="quantity"]').length > 0)
str += '&quantity='+$('.paypal_payment_form input[name="quantity"]').val();
if($('.paypal_payment_form input[name="id_p_attr"]').length > 0)
str += '&id_p_attr='+$('.paypal_payment_form input[name="id_p_attr"]').val();
$.support.cors = true;
$.ajax({
url: "{$base_dir_ssl}modules/paypal/express_checkout/payment.php",
type: "GET",
data: '&ajax=1&onlytoken=1&express_checkout='+$('input[name="express_checkout"]').val()+'¤t_shop_url='+$('input[name="current_shop_url"]').val()+'&bn='+$('input[name="bn"]').val()+str,
async: true,
crossDomain: true,
success: function (token) {
var url = paypal.checkout.urlPrefix +token;
paypal.checkout.startFlow(url);
},
error: function (responseData, textStatus, errorThrown) {
alert("Error in ajax post"+responseData.statusText);
paypal.checkout.closeFlow();
}
});
},
buttons: [
{
container: 'paypal_process_payment',
type: 'checkout',
color: 'blue',
size: 'small',
shape: 'pill'
},
{
container: 'payment_paypal_express_checkout',
type: 'checkout',
color: 'gold',
size: 'small',
shape: 'pill'
}
]
});
};
I ran into the same issue,
After looking into the source code, it turns out that when paypal.checkout.initXO(); the paypal.checkout.startFlow function is wrapped in a once function, which means you can only call startFlow once. and paypal.checkout.initXO is overwritten to show a warning in the console.
Inside, paypal.checkout.closeFlow there is a call to paypal.checkout.reset which is important to resetting these functions.
The problem was happening when the user clicks the close button too early, where the startFlow promise wasn't being resolved (which means when the user closes the modal it will redirect to the canceled url) nor the paypal.checkout.closeFlow catch wasn't being hit either.
I was able to resolve the issue, by keeping track of how many times the user clicked the button, if it was more than once, I called paypal.checkout.closeFlow (which will reset) beforepaypal.checkout.initXO();
Dear fellow EXT enthusiasts,
I'm working on a project where I need an admin panel to edit job functions.
The grid is communicating to a MySQL database using Ext.Direct. It loads the data fine.
The grid shows the id and the function name
I added a RowEditing plugin to my grid for editting the function settings.
The problem is, when I try to commit the changes I get a tiny red triangle in the upper left corner of the grid without any error code in the console. The changes don't commit to the MySQL database.
The way my program works and loads the data:
This is my functionStore:
Ext.direct.Manager.addProvider(Ext.app.REMOTING_API);
Ext.define("MCS.store.FunctionStore",
{
extend: "Ext.data.Store",
requires: "MCS.model.Functions",
model: "MCS.model.Functions",
id: "FunctionStore",
proxy:
{
type: "direct",
api:
{
read: QueryDatabase.getFunctions,
create: QueryDatabase.createFunction,
update: QueryDatabase.updateFunction,
destroy: QueryDatabase.removeFunction,
}
},
});
In the controller: when the admin panel is rendered, the store gets loaded with the following function:
loadStore: function()
{
functionStore.load();
}
This is the grid where the functions are displayed:
var rowEditingFunctions = Ext.create("Ext.grid.plugin.RowEditing",
{
clicksToMoveEditor: 1,
autoCancel: false,
listeners: {
edit: function(editor,e,opt)
{
var grid = e.grid;
var record = e.record;
console.log(record.data.functionName);
var editedrecords = grid.getStore().getUpdatedRecords();
console.log(editedrecords);
}
}
});
var functionGrid = Ext.create("Ext.grid.Panel",
{
height: 500,
width: 800,
store: functionStore,
title:"List of Job Functions - double click to edit",
columns: [
{
dataIndex: "id",
width: 50,
text: "ID"
},{
dataIndex: "functionName",
flex: 1,
text: "Function",
field:
{
type: "textfield",
allowBlank: false
}
}],
plugins: [
rowEditingFunctions
],
dockedItems: [
{
xtype: "toolbar",
store: functionStore,
dock: "bottom",
items: [
{
iconCls: "add",
text: "Add",
handler: function()
{
rowEditingFunctions.cancelEdit();
var newRecord = Ext.create("App.model.Functions");
functionStore.insert(0, newRecord);
rowEditingFunctions.startEdit(0, 0);
var sm = functionGrid.getSelectionModel();
functionGrid.on("edit", function() {
var record = sm.getSelection()
functionStore.sync();
functionStore.remove(record);
functionStore.load();
});
}
}, {
iconCls: "delete",
text: "Delete",
handler: function()
{
rowEditingFunctions.cancelEdit();
var sm = functionGrid.getSelectionModel();
Ext.Msg.show(
{
title:"Delete Record?",
msg: "You are deleting a function permanently, this cannot be undone. Proceed?",
buttons: Ext.Msg.YESNO,
icon: Ext.Msg.QUESTION,
fn: function(btn)
{
if(btn === "yes")
{
functionStore.remove(sm.getSelection());
functionStore.sync();
}
}
});
}
}]
}]
});
As u can see I added a listener to the edit event of the RowEditing plugin, this displays the array of the edited record in console like it should.
4. And finally, this is the PHP code that updates the database:
public function updateFunction(stdClass $params)
{
$db = $this->__construct();
if ($stmt = $db->prepare("UPDATE functions SET functionName=? WHERE id=?"))
{
$stmt->bind_param('si', $functionName, $id);
$functionName = $params->functionName;
$id = (int) $params->id;
$stmt->execute();
$stmt->close();
}
return $this;
}
5. The weird part: once I've added one job function, I can edit all the other functions and those changes are committed to the database...
As a side note: I'm just a beginner in EXT, trying to learn it on my own, but I have been breaking my head on this issue for the last few days so I decided to ask you guys.
Thanks for your answers in advance!
I left the bug for what it was for a few weeks and started to look into it again this week.
I found a work around solution.
I've added the following code to my controller that controls the grids:
functionGrid.on('edit', function(editor, e)
{
e.store.sync();
});
Now when I update a record, the tiny red triangle still appears but after the e.store.sync() function is completed it disappears and the database table is updated.
Not a 100% clean solution, but it does the trick
If anyone has a better solution, please let me know
I am currently trying to call the PHP script upon clicking OK button on EXTJS message alert box.
For some reason it doesn't even display the Alert box when I use handler. However when I used Listener it displays the Alert box but doesn't call the php script upon clicking OK button. I read on different blogs and come to know Handler is the best way to go forward
I will appreciate if somebody can help me or point me to the right direction. I am using the latest release of EXTJS4
Below is the EXTJS tree panel code I've written using handler;
var treePanel = Ext.create('Ext.tree.Panel', {
id: 'tree-panel',
title: 'Available Database',
region: 'north',
split: true,
height: 360,
minSize: 150,
rootVisible: false,
autoScroll: true,
store: store,
handler: function() {
if (treePanel.getSelectionModel().hasSelection()) {
var selValue = treePanel.getSelectionModel().getSelection();
Ext.MessageBox.alert('Press OK to confirm your subscription <br>' + selValue[0].data.text,
function(btn, text) {
if (btn == 'ok') {
Ext.Ajax.request({
url: 'addSubscription.php',
params: {
nodetext: text,
parentid: selectedNode[0].data.id
},
success: function(response) {
var id = response.responseText;
grid.getView().refresh();
}
})
} else {
Ext.MessageBox.alert('Record already subscribed');
}
});
}
}
});
Ext.tree.Panel have not 'handler' property in config.
Handler is a function that is executed when you click on some of the components - such as buttons.
You can add button on your treePanel toolbar, and use button handler:
...
tbar: [{
xtype: 'button',
text: 'Subscribe',
handler: function(button) {
...
}
}],
...
See on jsfiddle: http://jsfiddle.net/FFvLa/
but doesn't call the php script upon clicking OK button.
The function must be passed as the third argument in Ext.Msg.alert:
http://jsfiddle.net/FFvLa/2/
1)I have a json file which I want to display in view.
{
"contents": [
{
"title":'JWorld',
"image":'image/e-learning/elearning.png',
"subtitle":[
{
"categories":'Aus',
},
{
"categories":'England',
}
]
},
{
"title":'JIndia',
"image":'image/Content/History_of_India.jpg',
"subtitle":[
{
"categories":'History',
},
{
"categories":'India palace',
}
]
},
{
"title":'JMaharastra',
"image":'image/Content/Geography.jpg',
"subtitle":[
{
"categories":'History Maharastra',
},
{
"categories":'Maharastra Heros',
}
]
}
]
}
2)My view file :--
Ext.define('Balaee.view.kp.dnycontentcategories.ContentcategoriesView',
{
extend:'Ext.view.View',
id:'contentcategoriesViewId',
alias:'widget.ContentcategoriesView',
store:'kp.DnycontentcategoriesStore',
config:
{
tpl:'<tpl for="0">'+
'<div class="main">'+
'</br>'+
'<b>{title}</b></br>'+
'<img src={image} hight="50" width="100"></br>'+
'</div>'+
'</tpl>',
itemSelector:'div.main',
}
});// End of class
3) i am using tab panel and dynamically adding tabs in it using json file.
Ext.define('Balaee.view.kp.dnycontentcategories.Contentcategories',{
extend:'Ext.tab.Panel',
requires:[
'Balaee.view.kp.dnycontentcategories.ContentcategoriesView','Balaee.view.kp.dnycontentcategories.ContentcategoriesView1'
],
id:'contentcategoriesId',
alias:'widget.Contentcategories',
height:500,
items:[
],//end of items square
});// End of login class
4) My store file:--
Ext.define('Balaee.store.kp.DnycontentcategoriesStore',{
extend: 'Ext.data.Store',
model: 'Balaee.model.kp.DnycontentcategoriesModel',
autoLoad:true,
// filters: [{
// property: 'title',
// }],
proxy:
{
type:'ajax',
api:
{
read:'data/content.json',
//create: ,
//update: ,
//destroy: ,
},//End of api
reader:
{
type:'json',
root:'contents',
//successProperty: ,
}//End of reader
}//End of proxy
});//End
5) My Controller file some code
here I am dynamically adding some tabs from json file.And selecting particular tab I want different particular values from json file. But I get same view of first tab. How can I solve this problem.
init: function(){
console.log("inside content controller");
this.control({
'Contentcategories':
{
render:this.renderFunction,
}
});//End of control
},//End of init() function
renderFunction:function(){
console.log("Inside render function");
var tabPanel = Ext.getCmp('contentcategoriesId'); // tabpanel
var tabPanelView = Ext.getCmp('contentcategoriesViewId'); // tabpanel view
var storeObject= this.getStore('kp.DnycontentcategoriesStore'); // store
storeObject.on('load',function(){
storeObject.each(function(model){
//tabPanelView.store().filter('title',model.get('title')),
console.log(model.get('title'));
console.log(model.get('categories'));
tabPanel.add({title:model.get('title'),
id:model.get('title'),
//html:"<image src=model.get('image')>",
xtype:'ContentcategoriesView',
}); //End of add function
});// End of storeObject function
tabPanel.setActiveTab(0);
});
},// End of render function
please give me some suggestion.
There are a few issues with your code.
You define ContentcategoriesView - its a a component you have extended; but you give it an id (contentcategoriesId) yet you are creating more than one of these components - it makes no sense as an id has to be unique per component instance.
Then, you attach a store to this view, which means all components will render the same.
If I understand correctly you want each entry in your json to become a different tab.
I would take this direction (code not tested, but should give you a direction):
Ext.define('Balaee.view.kp.dnycontentcategories.ContentcategoriesView',
{
extend:'Ext.panel.Panel', // Notice it's a panel.
alias:'widget.ContentcategoriesView',
config:
{
tpl: '<div class="main">' +
'</br>' +
'<b>{title}</b></br>' +
'<img src={image} hight="50" width="100"></br>' +
'</div>'
itemSelector:'div.main',
}
});
And then:
storeObject.on( 'load',function() {
storeObject.each( function( model ) {
tabPanel.add({
xtype: 'ContentcategoriesView',
title: model.get( 'title' ),
id: model.get( 'title' ),
data: model
});
});
tabPanel.setActiveTab(0);
});