So I can get a single query with, for example:
`http://www.omdbapi.com/?t=inception`
How do I get all the movies from the api?
You can't get all the movies from OMDb API, even if you use * it will return an error Too many results.
But you can return multiple results using s parameter. Look at the code sample below using jQuery.
<!DOCTYPE html>
<html>
<head>
<title>Ajax Request</title>
</head>
<body>
<script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
$.get("http://www.omdbapi.com/?s=inception&apikey=[yourkey]", function(data) {
console.table(data);
});
</script>
</body>
</html>
Check your browser console to view the result.
I have a simple page which uses the mediaelement.js audioplayer plugin. The player attaches and functions correctly when loaded normally. However, when the page is loaded via ajax, the mediaelementplayer does not attach to the audio tag.
I use this code to call the file via ajax and jquery:
<html>
<head>
<link href="/test-vocabulary.css" rel="stylesheet" type="text/css">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<script>
$(document).ready(function(){
$(".ajax_vocab_link").click(function(evento){
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", {chrisSearch: searchTerm}
);
});
})
</script>
</head>
<body>
<p><button class='ajax_vocab_link' id='ajaxlink_1' title='clothes'>Link to load ajax doc</button></p>
<div class='ajax_vocab_container' id='ajaxcontainer_1'>This is div id ajaxcontainer_1</div>
</body>
</html>
The audioplayer page is:
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN"
"http://www.w3.org/TR/html4/loose.dtd">
<html xmlns="http://www.w3.org/1999/xhtml" lang="es" xml:lang="es">
<head><meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5/jquery.min.js"></script>
<!-- Audio Player CSS & Scripts -->
<script src="http://www.ingles23.com/audioplayer/js/mediaelement-and-player.min.js"></script>
<link rel="stylesheet" href="http://www.ingles23.com/audioplayer/css/style4.css" media="screen">
<!-- end Audio Player CSS & Scripts -->
<script>
$(document).ready(function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
</script>
</head>
<body>
<div class='display_vocab_container' >
<div class='display_vocab_text' >
<div class='audio-player-slim'>
<audio controls='controls' type='audio/mp3' src='/sound/mp3/i23-crear-frases-ingles-5.mp3' id='audio-player-vocab0'></audio>
</div>
</div>
</div>
</body>
</html>
I've tried many combinations including using on, live, success and moving the css/js links between the documents, but these have all made the situation worse.
What can i do get the file to attach medaielementplayer when loaded via ajax?
Try to put the mediaelementplayer() function call in the ajax success function, that worked for me. So unless you want to use .ajax instead of .load you'll need to pass it as the second argument to the load function. Or use http://api.jquery.com/ajaxSuccess/
$(".ajax_vocab_link").click(function(evento) {
evento.preventDefault();
var ajaxDivNum = $(this).attr('id').split('_')[1];
var searchTerm = $(this).attr('title');
$("#ajaxcontainer_"+ajaxDivNum).load("test-audioplayer-se.php", function() {
$('#audio-player-vocab0').mediaelementplayer({
alwaysShowControls: true,
features: ['playpause'],
audioVolume: 'horizontal',
audioWidth: 400,
audioHeight: 120
});
});
});
I cannot get my data to show in jqgrid. I am using exactly the same code from this working example:
jqgrid won't load json data
My data is different, but not substantially so:
{"records":95,"page":1,"total":1,"rows":[{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"},{"Report":"f_cn_08","File":"F_CONTR.PBL"}]}
I hate to re-open the same issue, but this is very frustrating to me.
EDIT: Here is my code:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html lang="en" xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>InfoMaker Monitor</title>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge" />
<link rel="stylesheet" type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/themes/redmond/jquery-ui.css" />
<link rel="stylesheet" type="text/css" href="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/css/ui.jqgrid.css" />
<style type="text/css">
html, body { font-size: 75%; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/i18n/grid.locale-en.js"></script>
<script type="text/javascript" src="http://www.ok-soft-gmbh.com/jqGrid/jquery.jqGrid-4.3.1/js/jquery.jqGrid.src.js"></script>
<script type="text/javascript">
//<!CDATA[
jQuery(function () {
'use strict';
jQuery("#jsonmap").jqGrid({
url: 'http://localhost:8888/nancy/readasjson'
,datatype: 'json'
,ajaxGridOptions: { contentType: 'application/json; charset=utf-8' }
// see http://www.trirand.com/jqgridwiki/doku.php?id=wiki:retrieving_data
,jsonReader : {
page: "page"
, total: "total"
, records: "records"
, rows: "rows"
,cell: "cell"
,id: "id",
}
,colNames: ['Report','File']
,colModel :[
{name:'Report' ,index:'Report', width:55}
,{name:'File',index:'File', width:55}
]
,rowNum:10
,rowList:[10,20,30]
,viewrecords: true
,loadComplete: function() {
console.log("Load Complete");
//console.log("URI: " + jQuery("#jsonmap").jqGrid.datatype );
}
,loadError: function(xhr,st,err) {
console.log(xhr.statusText);
//$("#jsonmapMessage").html("Type: "+st+"; Response: "+ xhr.status + " "+xhr.statusText);
}
,width: '900'
,height: 'auto'//'300'
,caption: 'My first grid'
});
jQuery("#jsonmap").jqGrid('navGrid','#pjmap',{edit:true,add:false,del:false});
});
//]]>
</script>
</head>
<body>
<table id="jsonmap"><tr><td></td></tr></table>
<div id="pjmap"></div>
</body>
</html>
And here is how the data looks now:
{"records":10,"page":1,"total":1,"rows":[{"id":61,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":62,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":63,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":64,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":65,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":68,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":77,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":79,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":80,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}},{"id":81,"cell":{"Report":"f_cn_08","File":"F_CONTR.PBL"}}]}
I am tempted to fork the jqgrid source and add some console.log messages to it! Because failing mysteriously with no message is a great barrier to adoption.
The JSON data which you use has another format as in the referenced question, so jqGrid is, of cause, not able to read your data. jsonReader option describes the format of input data for jqGrig. If rows array contains object with named properties one should use jsonReader: {repeatitems: false}. In the case the colModel parameter should have columns with name: "Report" and name: "File".
The next problem of your JSON data - it has no id information for items of the rows. In the case jqGrid will use integer values 1, 2, 3... as rowids. Such automatical generation of ids will work good only for one grid per page. The second grid will have id duplicates. So it's recommended to include additional property id in every item of the array rows of the JSON input.
I am trying to develop a phonegap app that will call to my coldfusion server and return data to the phone app. I have seen a couple of tutorials that do not explain the code on the server side(the .cfc file). Like this one...
http://blog.ryanvikander.com/index.cfm/2012/3/28/Returning-Dynamic-Content-In-A-PhoneGap-App
I was hoping someone could provide some sample code of what the .cfc on my server would look like when it is receiving the request for data.
Here's the example code from that link:
<!doctype html>
<html>
<head>
<meta name="viewport" content="initial-scale=1.0, user-scalable=no, width=device-width" />
<title>My App</title>
<script src="phonegap.js" type="text/javascript" charset="utf-8"></script>
<script src="jquery.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">
jQuery(document).ready(function() {
$.ajax({
url:"http://www.ryanvikander.com/test.cfc?method=getdata",
success: function(data){
var content = $("#content");
content.html(data);
},
error: function(e){
console.log(e);
}
});
});
</script>
</head>
<body>
<div id="title_bar">Test</div>
This is a test
<div id="content"></div>
</body>
</html>
The url http://www.ryanvikander.com/test.cfc?method=getdata doesn't have to be anything more than this:
<cfcomponent>
<cffunction name="getdata" access="remote" output="false">
<cfreturn "Hello World!" />
</cffunction>
</cfcomponent>
Here, the success callback function will put the string "Hello World!" into <div id="content"></div>
If the function renderdata() returned a query, you could pass the querystring parameters returnformat=json and optionally queryFormat=column to have ColdFusion convert the query data into JSON. If the returned data is formatted in JSON, then you could iterate over that data to render HTML as in any website.
Maybe I am working with it wrong. I don't know. All I know is its something to do specifically with the XHR.js that comes with appMobi. I have the latest build as of what ever was on there site 2 days ago. I am developing on a Macbook Pro. I am attempting to Test locally with the XDK and via Local Wifi/Test anywhere with an HTC Evo 3D using the Android platform. As well as I am using an iPhone 4S and iPad2. Its the same result every time.
I see no errors in the console debug window. All I see is the words "RemoteBridge" or "RemoteBridge2". My script is simple over all. Just a plain jQuery based $.ajax post and a little html to go with it. The URL though I will be changing it when I post it as I don't want it visible via public forum is a valid URL and drops a valid JSON object as its output. So I need input, I have no idea where to go from here as my app requires a lot of dynamic data that updates on the fly. And allegedly all I had to do was include xhr.js and my standard jQuery should have worked.
Anyway here is my code.
index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<link rel="stylesheet" media="all" href="./src/global.css">
</head>
<body>
<div id="header">
<div id="logo"></div>
<div id="coname">COMPANY</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="advert"></div>
</div>
<script type="text/javascript" charset="utf-8" src="./src/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/xhr.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="./src/global.js"></script>
</body>
</html>
and the contents of global.js
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
$(document).ready(function()
{
/*
var request = $.ajax({
url: "http://this.url-has-been-changed.net/geo/suggest",
type: "POST",
data: {"entry" : "951"},
dataType: "json"
});
request.done(function(data){$('#advert').append('done');});
request.fail(function(data){$('#advert').append('fail');})
request.error(function(data){$('#advert').append('error');})
request.complete(function(data){$('#advert').append('complete');})
request.success(function(data){$('#advert').append('success');})
*/
$.ajax({
type: 'POST',
url: "http://this.url-has-been-changed.net/geo/suggest?entry=951",
success: function(data){$('#advert').html('success');},
error : function(data){$('#advert').html('failed');},
complete : function(data){$('#advert').html('complete');},
dataType: "json"
});
});
all other files found to be included are stock from appmobi
Chris,
Just a couple of things to help you figure this one out.
Make sure you reference appMobi.js and XHR.js from
http://localhost:58888/_appMobi
in order to take advantage of JavaScript API bridge commands (http://www.appmobi.com/documentation/jsAPI.html).
Wait until the "appMobi.device.ready" event has fired before using those JavaScript API bridge commands. In your case, the XHR.js library is actually translating XMLHttp calls to native AppMobi.device.getRemoteData calls.
Try this index.html
<!DOCTYPE HTML>
<html>
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title>Untitled Document</title>
<!--
<link rel="stylesheet" media="all" href="./src/global.css">
-->
</head>
<body style="background-color:white;">
<div id="header">
<div id="logo"></div>
<div id="coname">COMPANY</div>
</div>
<div id="content"></div>
<div id="footer">
<div id="advert"></div>
</div>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/appmobi.js"></script>
<script type="text/javascript" charset="utf-8" src="http://localhost:58888/_appMobi/xhr.js"></script>
<script type="text/javascript" charset="utf-8" src="http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.7.2.min.js"></script>
<script type="text/javascript" charset="utf-8" src="global.js"></script>
</body>
</html>
Along with this global.js
// This event handler is fired once the AppMobi libraries are ready
function onDeviceReady() {
//use AppMobi viewport to handle device resolution differences if you want
//AppMobi.display.useViewport(768,1024);
//hide splash screen now that our app is ready to run
AppMobi.device.hideSplashScreen();
$.ajax({
type: 'POST',
url: "http://this.url-has-been-changed.net/geo/suggest?entry=951",
success: function(data){$('#advert').html('success');},
error : function(data){$('#advert').html('failed');},
complete : function(data){$('#advert').html('complete');},
dataType: "json"
});
}
//initial event handler to detect when appMobi is ready to roll
document.addEventListener("appMobi.device.ready",onDeviceReady,false);
The XHR.js and appMobi.js libraries are provided by the wrapping application itself in order to "listen" for JavaScript calls that would require native-level functionality. For example, the AppMobi.device.getRemoteData command that would allow you to make a cross-domain data request. For convenience, the XHR.js library translates XmlHTTP calls into the AppMobi.device.getRemoteData command.
For more information on the JavaScript API, check out the documentation at:
http://www.appmobi.com/documentation