I am using polymer 1.0's iron-jsonp-library component to fire a cross domain call to get data. My below component's code fires the jsonp request successfully and i get the expected json data in the response. But the event specified in the "on-data" attribute of iron-jsonp-library doesn't fire. There are no javascript errors prompted in the console. Hence could not figure out what is wrong. The on-data attribute works successfully in the sample application posted by angular team member at https://github.com/surma/polymer-reddit-api. But for my cross domain call the iron-jsonp-lib component is not working as expected.
Am i doing anything wrong?
<link rel="import" href="bower_components/iron-jsonp-library/iron-jsonp-library.html">
<dom-module id="galpicker-api">
<template>
<iron-jsonp-library on-data="_loadNewData" library-url="[[_requestUrl]]" callbackName="_ajaxLoad"></iron-jsonp-library>
</template>
<script>
Polymer({
is: 'galpicker-api',
properties: {
searchtext: {
type: String,
reflectToAttribute: true,
notify: true
},
employees: {
type: Array,
readOnly: true,
value: function() {
return [];
},
notify: true
},
baseUrl: {
type: String,
reflectToAttribute: true,
value: 'https://example.com'
},
_requestUrl: {
type: String,
readOnly: true,
computed: '_computeUrl(baseUrl, searchtext)',
notify: true
}
},
_computeUrl: function(baseUrl, searchtext) {
return baseUrl + '/api/v1/Employees/search?q=' + searchtext + '&jsonp=%%callback%%';
},
_loadNewData: function(ev) {
alert(ev);
this._setEmployees(
ev.detail[0].map(function(employee) {
return {
firstName: employee.firstName,
lastName: employee.lastName,
department: employee.department
};
}));
},
_data: function(ev) {
alert(ev);
},
_ajaxLoad: function(data){
alert(data);
}
});
</script>
</dom-module>
One error is found: callbackName="_ajaxLoad" should be written callback-name=(...). If it is still usefull...
Related
I found that only when I break out a observer into a behavior, no change will be detected. Are observers not able to be used in behaviors?
<iron-ajax
auto="[[activated]]"
url="[[HOST]][[LISTINGS]]/[[listingNumber]]"
handle-as="json"
verbose="true"
with-credentials="true"
on-error="_error"
loading="{{loading}}"
last-error="{{apiError}}"
last-response="{{listing}}"></iron-ajax>
</template>
<script>
Polymer({
is: 'single-listing',
behaviors: [ApiConstants, IronAjaxHelpers],
<script>
IronAjaxHelpers = {
listingNumber: {
type: Number,
value: 0,
notify: true
},
activated: {
type: Boolean,
value: false,
observer: 'setListingNumber'
},
setListingNumber: function(newValue, oldValue) {
console.log(newValue);
//this.listingNumber = id;
if (newValue === true) {
this.listingNumber = app.listingNumber;
}
}
};
</script>
Your behavior's properties should be defined inside the properties field, but it's currently at the top-level of the behavior object.
You should declare the properties inside the behavior like this:
IronAjaxHelpers = {
properties: {
/** PROPERTIES GO HERE **/
listingNumber: {
type: Number,
value: 0,
notify: true
},
activated: {
type: Boolean,
value: false,
observer: "setListingNumber"
}
},
setListingNumber: function(newValue, oldValue) {
console.log(newValue);
}
};
codepen
I am new to ExtJS so please excuse if this is very basic. I googled but couldn't find any useful answer.
I have a Store with proxy type AJAX:
tableStore = Ext.create('Ext.data.Store', {
model: 'TableData',
pageSize: 20,
proxy: {
type: 'ajax',
url: url
}
});
The call to url returns a JSON object. I want to get this JSON object in some local variable to do some processing.
Is this possible?
Thanks.
You can refer to the data obtained in the method transform:
Ext.define('MyModel', {
extend: 'Ext.data.Model',
fields: [
{name: 'id', type: 'int'}
, {name: 'title', type: 'string'}
]
, proxy: {
type: 'rest'
, reader: {
type: 'json'
, transform: {
fn: function (data) {
//you code here
return data;
}
, scope: this
}
}
}});
try with this
tableStore.getProxy().getReader().rawData
My problem is the json I am getting doesn't have a root. I can get the store to load the URL and I get the JSON back but the store data is empty and nothing shows in the callback.
Json:
[
{
"symbol": "GM"
},
{
"symbol": "GA"
}
]
Model and Store:
Ext.define('Symbol', {
extend: 'Ext.data.Model',
fields: ['symbol']
});
Ext.define('Doc.store.symbol', {
extend: 'Ext.data.Store',
model: 'Symbol',
proxy: {
type: 'jsonp',
url: 'datasource/symbol',
reader: {
type: 'json',
model: 'symbol'
},
}
});
I tried removing the root as well but nothing came back in the store or the callback. My googlefu is turning up nothing good on json without root.
the root should be defined as blank root:''
Here is a code demonstrating the proper setup:
Ext.define('boomer', {
extend:'Ext.data.Model',
fields: ['symbol'],
proxy: {
type: "ajax",
url: "data.json",
extraParams: {
},
reader: {
type: "json",
root: "",
successProperty: "success"
}
}
});
var store = Ext.create('Ext.data.Store',{
model: 'boomer',
});
store.load({
callback:function(){
Ext.Msg.alert('Store Items', store.data.items.length);
console.log(store.data.items);
}
});
Here is a fiddle demonstrating working code.
extend Ext.data.reader.Json to adjust your response.Later use it inside proxy reader.
there is a answer here
When I pass the URL I am getting a no response from the url otherwise if I specify the corresponding WCF service page which is included in my project it is working is it any cross domain issue what would be the possible issue
<form id="sform" runat="server">
<table id="flex2" style="display:none"></table>
<script type="text/javascript">
$(document).ready(function () {
var user_id = 1;
var data = { UserID: user_id };
$("#flex2").flexigrid({
useInlineEditor: true,
//singleSelect: true,
rowClick: function (row) {
//var r=this.DataSource.rows[row.rowIndex];
//var p=$(row).offset();
//alert(r[this.DataSource.key]+" "+r.Name+" offset:"+p.top+","+p.left);
//this.grid.inlineEditor.edit(row);
},
url: 'http://192.168.10.91:5001/Service.svc/GetStates',
method: 'POST',
dataType: 'json',
colModel: [
{ display: 'Hours', name: 'hours', width: 40, sortable: true, align: 'center' },
{ display: 'DOC', name: 'doc', width: 180, sortable: true, align: 'left' },
],
searchitems: [
{ display: 'Type', name: 'cmetype' }
],
onError: function (jqXHR, textStatus, errorThrown) {
alert("flexigrid failed " + errorThrown + jqXHR + textStatus);
},
sortname: "type",
sortorder: "asc",
usepager: true,
title: 'States',
useRp: true,
rp: 15,
showTableToggleBtn: true,
width: 800,
height: 200
});
});
//This function adds paramaters to the post of flexigrid. You can add a verification as well by return to false if you don't want flexigrid to submit
function addFormData() {
//passing a form object to serializeArray will get the valid data from all the objects, but, if the you pass a non-form object, you have to specify the input elements that the data will come from
var dt = $('#sform').serializeArray();
$("#flex2").flexOptions({ params: dt });
return true;
}
$('#sform').submit(function () {
$('#flex2').flexOptions({ newp: 1 }).flexReload();
return false;
});
</script>
</form>
Make sure that the svc service is accesibile and that it can accept post requests.
If all works well, check that the response is JSON and is valid.
I am using Jquery validation in a form and also an Ajax function in a .on(submit) code.
The problem is even when the validation is wrong the .on(submit) function still runs.
Is there any type of "if validation success" code to add to the validation code to put the .on(submit) code in so it will only run when the form is correct and validated?
this is the .on(submit) function
$('#valform').on('submit', function (e){
e.preventDefault();
$.ajax({
type: "POST",
url: "<?php echo MAXINBOUND_PLUGIN_URL ?>/php/localProxy.php",
data: $('#valform').serialize(),
success: function (response) {
alert('Great!');
// do something!
},
error: function () {
alert('There was a problem!'); // handle error
}
});
});
and this is the validation code
$("#valform").validate({
invalidHandler: function(form, validator) {
success: function (response) {
var errors = validator.numberOfInvalids();
if (errors) {
$("#error-message").show().text("Please correct the required field(s)");
} else {
$("#error-message").hide();
}
},
messages: {
agree: {
required: ""
},
phone1: {
required: ""
},
address1: {
required: ""
},
},
rules: {
agree: {
required: true,
},
phone1: {
required: true,
phoneUS: true
},
Address1: {
required: true,
addr: true,
},
},
});
You can use submitHandler to do ajax calls. So it will call only after passing all validations.
$("#valform").validate({
submitHandler: function(form) {
//do ajax call
}
})
You can use the jquery valid() method to check if the submitted form is valid. Something like this...
if ($("#valform").valid()) {
// do your ajax stuff
}
Please note that valid() will work only when the validate() is called on the form prior to it.
Hope this helps!