I am new to phonegap and and trying to build a basic app that is pulling data from a rails app using ajax. Here are the relevant files...
#www/index.html
<body>
<h1>Task List</h1>
<div class="page current" id="tasks">
<header>
<h1>Open Tasks</h1>
</header>
<ul></ul>
</div>
<script type="text/javascript" src="phonegap.js"></script>
<script type="text/javascript" src="js/zepto.min.js"></script>
<script type="text/javascript" src="js/tasks.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script type="text/javascript">
app.initialize();
</script>
</body>
</html>
#www/js/tasks.js
function loadTasks() {
var tasks = $('#tasks ul');
$.ajax({
type: 'GET',
url: 'http://limitless-chamber-2009.herokuapp.com/tasks.json',
dataType: 'JSON',
timeout: 5000,
success: function(data) {
$.each(JSON.parse(data), function(i,item){
tasks.append('<li>'+item.name+'</li>')
});
},
error: function(data) {
tasks.append('<li>There was an error loading the tasks');
}
});
}
loadTasks();
When I loaded index.html in my web browser I get the error "There was an error loading the tasks". I know there are sophisticated ways to debug this, but I'm a js and ajax noob, so not sure what to check, but I am open to suggestions. Any help appreciated.
To make this work in a Cordova/PhoneGap app, try setting your whitelist.
In ./www/config.xml, set your whitelist to:
<access origin="limitless-chamber-2009.herokuapp.com" />
or even
<access origin="*" />
To make this work in your web browser, you will need to start Chrome with web-security disabled: https://stackoverflow.com/a/6083677/878602
Related
I'm just trying to run this code I got from Vtk.js documentation examples:
<!DOCTYPE html>
<html>
<head>
<title>vtk</title>
</head>
<body>
<script type="text/javascript" src="https://unpkg.com/#babel/polyfill#7.0.0/dist/polyfill.js"></script>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">
import 'vtk.js/Sources/favicon';
import vtkActor from 'vtk.js/Sources/Rendering/Core/Actor';
import vtkFullScreenRenderWindow from 'vtk.js/Sources/Rendering/Misc/FullScreenRenderWindow';
import vtkMapper from 'vtk.js/Sources/Rendering/Core/Mapper';
import vtkSTLReader from 'vtk.js/Sources/IO/Geometry/STLReader';
</script>
</body>
</html>
But I got a blank page and the console shows me the error:
SyntaxError: Unexpected string literal 'vtk.js/Sources/favicon.'
import call expects exactly one argument. I think my error comes from the my first import.
Thanks in advance
You can run vtk.js on a html page like this:
<!DOCTYPE html>
<html>
<body>
<script type="text/javascript" src="https://unpkg.com/#babel/polyfill#7.0.0/dist/polyfill.js"></script>
<script type="text/javascript" src="https://unpkg.com/vtk.js"></script>
<script type="text/javascript">
var fullScreenRenderer = vtk.Rendering.Misc.vtkFullScreenRenderWindow.newInstance();
var actor = vtk.Rendering.Core.vtkActor.newInstance();
var mapper = vtk.Rendering.Core.vtkMapper.newInstance();
var stlReader = vtk.IO.Geometry.vtkSTLReader.newInstance();
</script>
</body>
</html>
I am using the type ahead address picker given here
1) Have included google map and typeahead. Jquery is added through a gem and referenced in application.js
<script type="text/javascript" src="http://maps.google.com/maps/api/js?sensor=false&libraries=places&language=en-US"></script>
<script type="text/javascript" src="//cdnjs.cloudflare.com/ajax/libs/typeahead.js/0.9.3/typeahead.min.js"></script>
<script type="text/javascript" src="https://rawgithub.com/sgruhier/typeahead-addresspicker/master/dist/typeahead-addresspicker.js"></script>
2)Have added input text
<input id="address" type="text" placeholder="Enter an address">
3)Have instantiated address picker and typeahead.
$(document).on('ready page:load', function () {
var addressPicker = new AddressPicker();
$('#address').typeahead(null, {
displayKey: 'description',
source: addressPicker.ttAdapter()
});
});
Issue was resolved here
Should have included https://twitter.github.io/typeahead.js/releases/latest/typeahead.bundle.js
for typeahead + bloodhound
I have installed:
compile ":jquery-ui:1.8.24"
compile ":jqgrid:3.8.0.1"
I got the next error:
| Error 2013-06-03 15:20:33,892 [http-bio-8080-exec-7] ERROR resource.ResourceMeta - While processing /plugins/jqgrid-3.8.0.1/css/jqgrid/ui.jqgrid.css, a resource was required but not found: /plugins/jqgrid-3.8.0.1/css/jqgrid/ellipsis-xbl.xml
I opened the file C:\Users\user\.grails\ivy-cache\org.grails.plugins\jqgrid\zips\jqgrid-3.8.0.1.zip. There is not any: css/jqgrid/ellipsis-xbl.xml
The latest version of JQGrid (4.5.2) has the file ellipsis-xbl.xml included. But I'm using the latest Grails plugin which uses that older version.
How could I tell Grails to look for ellipsis-xbl.xml in another location (let's say web-app/css/jqgrid-additions/ellipsis-xbl.xml).
I did a research on Google and it is what could be related:
taglib: <jqgrid:resources /> (according with the documentation, it
includes the required javascript and css for the plugin)
Add a configurationmapping in BuildConfig.groovy (I didn't find any
Grails documentation about that!)
I added to the GSP the next code to check if it looked at a different
location (and it check in the same location, at /plugins...):
<style>
.ui-jqgrid tr.jqgrow td {text-overflow:ellipsis; -moz-binding:url('ellipsis-xbl.xml#ellipsis');}
</style>
I end up by removing all css/js plugins except for jQuery (which is built-in). Just extract css/js files in /web-app directory. Then include them in /grails-app/conf/ApplicationResources.groovy like this:
modules = {
ui {
dependsOn 'jquery'
resource url: 'css/default.css'
resource url: 'css/print.css', attrs:[media:'print']
}
bootstrap {
dependsOn 'jquery'
resource url: 'css/bootstrap.css'
resource url: 'css/bootstrap-responsive.css'
resource url: 'js/bootstrap.js'
}
choice {
resource url: 'js/choice.js'
}
application {
dependsOn 'jquery,choice'
resource url: 'js/application.js'
}
}
Choice and application are application specific. Include here as an example. Then, call them in layout:
<!doctype html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title><g:layoutTitle default="My Application" /></title>
<g:layoutHead />
<r:require modules="jquery,ui,bootstrap,choice,application" />
<r:layoutResources />
</head>
<body>
<div id="wrapper">
<div id="main" class="container-fluid">
<div class="row-fluid">
<div class="span12">
<g:layoutBody/>
</div>
</div>
</div>
</div>
<r:layoutResources />
</body>
</html>
This way, I can manage css/js library myself.
I have the following markup in an MVC 3 Razor view. As is, the ComboBox renders properly, but doesn't drop down when I click the dropdown arrow. If I remove the jQuery validate script references that are added to the view by the create view template, all works. What could be wrong here?
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script type="text/javascript">
function provinceChanged() {
var cityCombo = $('#Cities').data('tComboBox');
cityCombo.loader.showBusy();
$.get(url, { provinceId: e.value }, function (data) {
cityCombo.dataBind(data);
cityCombo.loader.hideBusy();
cityCombo.enable();
});
}
</script>
...
<div class="editor-field">
#(Html.Telerik().ComboBox()
.Name("Provinces")
.SelectedIndex(1)
.BindTo(new SelectList(Model.ProvinceList, "ProvinceId", "Name"))
.ClientEvents(events => events.OnChange("provinceChanged"))
)
</div>
Here is how reference jQuery, in my master layout:
<head>
<title>#ViewBag.Title</title>
<link href="#Url.Content("~/Styles/Blueprint/screen.css") rel="stylesheet" type="text/css" />
<link href="#Url.Content("~/Content/Site.css")" rel="stylesheet" type="text/css" />
#Html.Telerik().StyleSheetRegistrar().DefaultGroup(group => group.Add("telerik.common.css").Add("telerik.vista.css"))
<script src="#Url.Content("~/Scripts/jquery-1.4.4.min.js")" type="text/javascript"></script>
</head>
RESOLVED: I have no idea what else changed, but after putting the jQuery Validate references back just for a code sample, my code now works with them as well.
Check this. You are probably using an older version of jquery.validate.js which conflicts with jQuery.fn.delegate.
I use inplacericheditor plugin and tiny_mce
Before asset_packager usage, this is how I include the files and they work well
<script src="/javascripts/patch_inplaceeditor_1-8-2.js" type="text/javascript">
</script>
<script src="/javascripts/patch_inplaceeditor_editonblank_1-8-2.js" type="text/javascript" </script>
<script src="/javascripts/tiny_mce/tiny_mce.js" type="text/javascript"></script>
<script src="/javascripts/tiny_mce_init.js" type="text/javascript"></script>
<script src="/javascripts/inplacericheditor.js" type="text/javascript"></script>
My asset_packager.yml section looks like this for the above files:
tinyeditor:
patch_inplaceeditor_1-8-2
patch_inplaceeditor_editonblank_1-8-2
tiny_mce/tiny_mce
tiny_mce_init
tiny_mce/langs/en
tiny_mce/themes/advanced/editor_template
tiny_mce/themes/advanced/langs/en
tiny_mce/plugins/save/editor_plugin
tiny_mce/plugins/autoresize/editor_plugin
tiny_mce/plugins/paste/editor_plugin
tiny_mce/plugins/preview/editor_plugin
tiny_mce/plugins/table/editor_plugin
tiny_mce/plugins/contextmenu/editor_plugin
tiny_mce/plugins/emotions/editor_plugin
inplacericheditor
When I include the asset_packaged file and load the page (in production)
I get the following errors:
"Ajax.InPlaceEditor is undefined"
"Ajax.InPlaceRichEditor is not a constructor"
Can anyone shed some light on where I am going wrong or share a better way to asset_package tinymce?
Thanks!
Ajax required prototype.js
try Following just after tiny_mce_init.js
<%= javascript_include_tag :defaults %>
<script src="/javascripts/inplacericheditor.js" type="text/javascript"></script>