Develop Reference

Javascript SyntaxError: missing

I'm trying to put 2 scripts in 1 js file and i'm getting:
SyntaxError: missing } after property list
note: { opened at line 9, column 19
But as far as I check all the curly brackets are closed, not sure what the real issue is.
Code
// country
jQuery( document ).ready( function( $ ) {
$('select[name="country"]').on('change', function() {
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
var CountryId = $(this).val();
if(CountryId) {
$.ajax({
url: '{{ url('getprovinces') }}/'+encodeURI(CountryId),
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="province"]').empty();
var options = data.map(function(state) {
return $("<option class='form-control'>").val(state.id)
.text(state.name);
});
$('select[name="province"]').empty().append(options);
}
});
}else{
$('select[name="province"]').empty().append("<option class='form-control' value='' selected>Select</option>");
}
});
});
error comes from this line:
url: '{{ url('getprovinces') }}/'+encodeURI(CountryId),
Any idea?

You need to escape the quotes or use a double-quoted string. Otherwise JS thinks the string ends on the quote after url(' then gets confused when a variable name pops up.

Try like that:
// country
jQuery( document ).ready( function( $ ) {
$('select[name="country"]').on('change', function() {
$.ajaxSetup({
headers: { 'X-CSRF-TOKEN': $('meta[name="_token"]').attr('content') }
});
var CountryId = $(this).val();
if(CountryId) {
$.ajax({
url: '{{' + url('getprovinces') + '}}/' + encodeURI(CountryId),
type: "GET",
dataType: "json",
success:function(data) {
$('select[name="province"]').empty();
var options = data.map(function(state) {
return $("<option class='form-control'>").val(state.id)
.text(state.name);
});
$('select[name="province"]').empty().append(options);
}
});
}else{
$('select[name="province"]').empty().append("<option class='form-control' value='' selected>Select</option>");
}
});
});

Try
url: url('getprovinces') + '/' + encodeURI(CountryId),

Consume REST Service with Javascript/HTML

Below is code I use to get data from a SharePoint List with Javascript. What would I need to do to get it work on a site like JS Bin or JS Fiddle with an open/free REST service? (Like iextrading.com?)
<script type="text/javascript">
function getCompanies () {
var call = $.ajax({
url: _spPageContextInfo.webAbsoluteUrl + "/_api/web/lists/GetByTitle('Bills')/items?$select=AccountNumber&$orderby=AccountNumber&$filter=(PackageID eq '" + pid + "')",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.success(function (data,textStatus, jqXHR){
$("#ResultsDiv").empty();
for (var i = 0; i < data.d.results.length; i++)
{
var item = data.d.results[i];
$("#ResultsDiv").append(item.AccountNumber + "<br/>");
}
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving Account Numbers: " + jqXHR.responseText);
});
}
</script>
<button onclick="getCompanies(); return false;" type="button">Get Item</button>
<hr width="50px" />
<div id="ResultsDiv"></div>
I looked at several examples on SO, but I couldn't get them to work on JS Bin or JS Fiddle.

I guess I worded my question poorly, because my original code was close to the answer.
function getMovies () {
var call = $.ajax({
url: "https://www.omdbapi.com/?i=tt3896198&apikey=[yourKeyHere]",
type: "GET",
dataType: "json",
headers: {
Accept: "application/json;odata=verbose"
}
});
call.success(function (data,textStatus, jqXHR){
$("#ResultsDiv").empty();
$("#ResultsDiv").append(data.Title);
});
call.fail(function (jqXHR,textStatus,errorThrown){
alert("Error retrieving data: " + jqXHR.responseText);
});
}

How can i load data from ajax to Chosen jquery?

I have use chosen at http://harvesthq.github.io/chosen/ . Ok, i testing it load data from ajax . I founding anywhere, maybe no someone success with them.
<script src="theme/js/jQuery-2.1.3.min.js"></script>
<link href="theme/chosen_v1.4.2/chosen.css" rel="stylesheet" />
<script src="theme/chosen_v1.4.2/chosen.jquery.js"></script>
<script type="text/javascript" charset="utf-8">
$(document).ready(function () {
$(".cb_bu_info").chosen({
width: "95%",
source: function (data) {
$.ajax({
type: "POST",
url: "../BUS/WebService.asmx/LIST_BU",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#cb_info").html('');
//$.each($.parseJSON(data.d), function (idx, obj) {
$.each(data, function (idx, obj) {
$("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
});
//$("#cb_info").trigger("liszt:updated");
},
error: function (data) {
console.log(data.d);
}
});
}
});
$("#cb_info").trigger("liszt:updated");
});
</script>
<select id="cb_info" class="cb_bu_info"></select>
The data form ajax as
[{"BU_ID":"B01","BU_NAME":"Agro Feed","BU_DES":"Agro Feed","EDIT_DATE":"2015-05-05T00:00:00","EDIT_BY":"","FLAG":false},{"BU_ID":"B02","BU_NAME":"Agro Farm","BU_DES":"Agro Farm","EDIT_DATE":"2015-05-05T00:00:00","EDIT_BY":"","FLAG":false}]
Well , it's look ok , but when i run it , result not show in select option, see browser dev tool , I've not seen error. Anything is ok.What's the problem happen in here? Notes: only use Chosen Jquery

After checking out the Chosen docs, there seems to not be a "source" option. What you need to do is first run your Ajax call, then fill your select options. Once the select is all filled, then run Chosen on that select element.
I would use the following JS code:
var url = "../BUS/WebService.asmx/LIST_BU";
$.getJSON(url, function(json){
var $select_elem = $("#cb_info");
$select_elem.empty();
$.each(json, function (idx, obj) {
$select_elem.append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
});
$select_elem.chosen({ width: "95%" });
})

Ok, After some time with the help of suggestions from everybody, I have done
function load_cb_info() {
$.ajax({
type: "POST",
url: "../BUS/WebService.asmx/LIST_BU",
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$("#cb_info").html('');
$.each($.parseJSON(data.d), function (idx, obj) {
//$.each(data, function (idx, obj) {
$("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
});
$("#cb_info").trigger("liszt:updated");
$("#cb_info").chosen({ width: "95%" });
},
error: function (data) {
console.log(data.d);
}
});
}
And , I think this is an answer and everyone else can find it .Thank you.

I have changed your jsfiddle. Try this out http://jsfiddle.net/GaganJaura/by4d528c/2/
I have moved the chosen() to bottom.
$("#cb_info").empty();
$.each(data, function (idx, obj) {
$("#cb_info").append('<option value="' + obj.BU_ID + '">' + obj.BU_NAME + '</option>');
});
$("#cb_info").trigger("liszt:updated");
$("#cb_info").chosen();

You can try as follows it works for me
$.ajax({
type: "POST",
url: url,
data: formData,
processData: false,
contentType: false,
success:function(data){
if($.trim(data) != "no"){
$("#PROGRAM_ID").html(data);
$("#PROGRAM_ID").trigger("chosen:updated");
}
}
});

try this. it works for me. please pay attention to the bold text
Ext.Ajax.request({
url:'<?php echo base_url()."index.php/";?>ttemuan31a/cari_divisi',
method:'post',
params:{
divisi:vdivisi
},
success:function(data)
{
$("#divisi").chosen();
//document.getElementById('detail_divisi').innerHTML=response.responseText;
$('#divisi').empty();
$.each(JSON.parse(**data.responseText**), function(i, item) {
$('#divisi').append('<option value="'+item.id+'">'+item.namadivisi+'</option>');
$("#divisi").trigger("chosen:updated");
});
}
});
}

Display data in dynamically created div using jquery

I want to display data function name and function description from database and display it in div which will be created dynamically using jquery. How can I display data with dynamic div using jquery...
code for dynamically created div is:
$(document).ready(function () {
$.ajax({
type: "POST",
url: 'FunctionListing.aspx/CountFunction',
data: "{}",
contentType: 'application/json; charset=utf-8',
datatype: 'json',
success: function (result) {
//alert(result.d);
for (var i = 1; i <= result.d; i++) {
$('body').append("<div id='div" + i + "' />");
}
},
error: function (result) {
alert(result);
}
});
});

dataType :"json"
Not datatype :"json"
Hope, it'll helps you.

Can I use a concatenated string for the url in my .ajax() request

I'm doing cross-domain requests and once the first request is made I need to retrieve the ID (and do some other stuff) and then use the ID for the next request.
So far the hang-up is that the next request doesn't like the concatenation. Here's my code, and yes I know document.write should be changed to console.log() however console.log doesn't work and I was probably going to ask that question after get help with my current problem. the problem starts at the second .ajax() request.
<!DOCTYPE html>
<html>
<head>
<script src="http://code.jquery.com/jquery-1.6.4.min.js"></script>
<script >
$(document).ready(function($) {
// First link out of three
var url = 'https://www.sciencebase.gov/catalo
/items?parentId=504108e5e4b07a90c5ec62d4&max=60&offset=0&format=jsonp';
$.ajax({
type: 'GET',
url: url,
jsonpCallback: 'getSBJSON',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
for (var i = 36; i < 37; i++) {
document.write(json.items[i].id);
var urlId = json.items[i].id;
}
var deferUrl = 'https://www.sciencebase.gov/catalog/itemLink/" + urlId
+"?format=json&max=10';
$.ajax({
type: 'GET',
url: deferUrl,
jsonpCallback: 'getSBJSON',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
// Get the next id to use for the next url
document.write(deferUrl);
$.ajax({
type: 'GET',
url: 'https://www.sciencebase.gov/catalog
/item/4f4e4b19e4b07f02db6a7f04?format=jsonp',
jsonpCallback: 'getSBJSON',
contentType: "application/json",
dataType: 'jsonp',
success: function(json) {
document.write(json.title);
},
error: function(e) {
console.log(e.message);
}
});
},
error: function(e) {
console.log(e.message);
}
});
},
error: function(e) {
console.log(e.message);
}
});
});
</script>
</head>
<body>
</body>
</html>
Thanks for the help

'https://www.sciencebase.gov/catalog/itemLink/" + urlId
+"?format=json&max=10';
should be
'https://www.sciencebase.gov/catalog/itemLink/' + urlId
+'?format=json&max=10';
You mix simples and doubles quotes. use 'srting' + var + 'string' or "string" + var + "string" but don't mix them

To address your concatenation issue only.. you have a mix of single and double quotes there. They should all be consistent.
ex:
var deferUrl = 'https://www.sciencebase.gov/catalog/itemLink/' + urlId + '?format=json&max=10';

I made a slight change from
for (var i = 36; i < 37; i++) {
var urlId = json.items[i].id;
}
var deferUrl = 'https://www.sciencebase.gov/catalog/itemLink/' +
urlId + '?format=jsonp&max=10';
$.ajax({
type: 'GET',
url: deferUrl,
jsonpCallback: 'getSBJSON',
contentType: 'application/json',
dataType: 'jsonp',
to
for (var i = 36; i < 37; i++) {
var urlId = json.items[i].id;
}
var deferUrl = urlId;
$.ajax({
type: 'GET',
url: 'https://www.sciencebase.gov/catalog/itemLink/' +
deferUrl + '?format=jsonp&max=10',
jsonpCallback: 'getSBJSON',
contentType: 'application/json',
dataType: 'jsonp',
and that seemed to do the trick. It didn't like having the concatenation done completely before assigning it to the url.