.get() method in jquery mobile doesn't load when changing pages - performance

I have a mobile application built with phonegap and I'm using jquery mobile. On the first page I have link to another, href="page2.html".
When the second page loads, I am using .get() to retrieve xml data and convert it to json using xml2json.js. The page works properly if I make this page the index and load it up when the application is opened, so I know the script is working. However, when loading it via link from another page, the .get() method doesn't seem to load up any data.
<script type="text/javascript" src="cordova-2.4.0.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<script src="http://code.jquery.com/jquery-1.8.2.min.js"></script>
<script src="http://code.jquery.com/mobile/1.3.0/jquery.mobile-1.3.0.min.js"></script>
<script type="text/javascript" src="js/jquery.xml2json.js"></script>
<script type="text/javascript">
$.get('http://domain.com/app/getfacilities/?org=mysite', function(xml){
var facilities = $.xml2json(xml);
for (i=0; i<=facilities.facility.length; i++){
var locName = facilities.facility[i].name;
var id = facilities.facility[i].id;
$("#fieldList").append("<li><a href='#'>" + locName + "</a></li>").listview('refresh');
}
});
</script>
<script type="text/javascript">
app.initialize();
</script>

You need to place your <script> tag inside of your <div data-role="page"> tag. <script> tags that reside outside of your <div data-role="page"> tag will only be loaded on your first/initial page load which seems consistent with what your are experiencing.
<div data-role="page">
<script>
// js script here
</script>
</div>

Related

Kendo UI error when setting up Date Picker

I am trying to get Kendo Ui (Free Version working). I am trying to implement the date picker with the below code but alls I get is an empty input field. Does anyone have any suggestions on how to resolve this?
<!DOCTYPE html>
<html>
<head>
<link href="/Content/kendo/2015.3.1111/kendo.common.min.css" rel="stylesheet" />
<link href="/Content/kendo/2015.3.1111/kendo.default.min.css" rel="stylesheet" />
</head>
<body>
<script src="/Scripts/jquery-1.10.2.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.core.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.calendar.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.popup.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.datepicker.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.data.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.list.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.combobox.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.dropdownlist.min.js></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.multiselect.min.js"></script>
<script src="/Scripts/kendo/2015.3.1111/kendo.validator.min.js"></script>
<input id="TimeSlot" name="TimeSlot" type="datetime" />
<script type="text/javascript">
$(document).ready(function () {
debugger;
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#datepicker").data("kendoDatePicker");
});
</script>
</body>
</html>
You need to reference all these javascript files in order for the DatePicker to work. You can use the Kendo UI Custom Download tool to find out which javascript files you need to reference and to download a custom javascript file that contains everything you need:
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.core.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.calendar.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.popup.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.datepicker.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.data.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.list.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.combobox.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.dropdownlist.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.multiselect.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.validator.min.js"></script>
<script src="http://kendo.cdn.telerik.com/2015.3.1111/js/kendo.aspnetmvc.min.js"></script>
UPDATE:
Your text-box's id is "TimeSlot", but in your script you're referring to #datepicker which doesn't even exist. Change your script to this:
<script type="text/javascript">
$(document).ready(function () {
$("#TimeSlot").kendoDatePicker();
//var datepicker = $("#TimeSlot").data("kendoDatePicker");
});
</script>
By the way, you won't need kendo.aspnetmvc.min.js if you don't want to use Kendo's Html Helpers, which is not something that I would recommend if you are using asp.net MVC. With kendo.aspnetmvc.min.js, you wouldn't even need the script, you could just replace your text-box (input tag) with this:
#(Html.Kendo().DatePicker().Name("TimeSlot"))

Polymer 1.0 Auto binding template with iron-ajax

I am trying to request a service via iron-ajax using the following in my index.html:
<body class="fullbleed">
<template is="dom-bind" id="mainTemplate">
<paper-material class="todo" elevation="1">
<span>Mohammed</span>
</paper-material>
<br/>
<iron-ajax id="requestGeoname" auto url="http://api.geonames.org/findNearbyPlaceNameJSON" params='{{input}}' handle-as="json" last-response="{{data}}"></iron-ajax>
<span>{{data.geonames.0.countryName}}</span>
<br/>
<span>{{data.geonames.0.name}}</span>
</template>
<p id="geolocation">Finding geolocation...</p>
</body>
In my JS code, I would like to read {{data}} but could not do it. I tried to do it using the following:
<script type="text/javascript" charset="utf-8">
...
console.log(document.querySelector('#requestGeoname').data);
...
</script>
The code gives me undefined when I log {{data}}.
This should work:
<script type="text/javascript" charset="utf-8">
...
var template = Polymer.dom(this).querySelector('template[is=dom-bind]');
console.log(template.data);
...
</script>
As Dogs pointed out, the data property doesn't belong to requestGeoname-element, it belongs to the "template" item that is binded with dom-bind. Dogs solution should also work, but if you have other variables to use in your application, this is probably the better solution since they are now accesible through the template-object. For example:
...
template.myOthervariable = "derpherp";
...
You have to wait until the request is finished. It's better to use the event response (More info: https://elements.polymer-project.org/elements/iron-ajax#response).
<script>
document.getElementById('requestGeoname').addEventListener('response', function(event){
console.log(event.detail.response)
});
</script>
or declaratively:
<script>
var mainTemplate = document.getElementById('mainTemplate');
mainTemplate.onPlacesResponse = function(event){
console.log(event.detail.response);
};
</script>
<iron-ajax … on-response="onPlacesResponse"

mootools Scrollable not working

I used mootools scrollable(http://mootools.net/forge/p/scrollable) on my page,but it is not working.
my page: http://neyriz.net/moo/
I used it for div with id="right"
why it's not work?
You are making 2 mistakes. The first is that you try to instanciate the Scrollable before the DOM is ready and so your element doesn't exist. So you have to move your script tag either to the end of the body or you wrap it in an event listener. I.E:
window.addEvent('domready', function() {
var myScrollable = new Scrollable($('right'));
});
The second problem is that the plugin has some dependencies. In this case you need to include Slider, Element.Measure, Element.Shortcuts from MooTools more. You can go to http://mootools.net/more/ and select those 3 modules. Download the file and include it into your head between mootools-core and scrollable:
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script> INSERT MOOTOOLS MORE HERE!
<script type="text/javascript" src="scrollable.js"></script>
In general it's better when you define and load your JS files before the body. So it looks like:
<html>
<head><title>My awesome page</title></head>
<body>
<h1>My awesome page</h1>
<p>Some text</p>
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script> INSERT MOOTOOLS MORE HERE!
<script type="text/javascript" src="scrollable.js"></script>
</body>
</html>

Add image to page onclick

I want a button to add an image to the current page on each click. For example, the first time you open the page, there is one picture. Then you click the button and the same picture appears on the page and now you have two same pictures. Then you keep on pressing on the button and more and more same pictures appear. This is the code I tried that didn't work:
<script type="text/javascript">
function addimage() {<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
Please help! Thanks.
You should probably know that javascript can create html elements, but you cannot directly embed html inside javascript (they are two completely separate things with different grammars and keywords). So it's not valid to have a function that only contains html -- you need to create the elements you want, and then append them to the dom elements that you want them to. In this case, you create a new image and then append it to the body.
<html>
<body>
<script type="text/javascript">
function addimage() {
var img = document.createElement("img");
img.src = "http://bricksplayground.webs.com/brick.PNG";
img.height = 50;
img.width = 100;
//optionally set a css class on the image
var class_name = "foo";
img.setAttribute("class", class_name);
document.body.appendChild(img);
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>
</html>
All you're missing is a method to write the element on the page
<script type="text/javascript">
function addimage() {
document.write('<img src="http://bricksplayground.webs.com/brick.PNG" height="50" width="100">')
}
</script>
</head>
<body>
<button onclick="addimage();">Click</button>
</body>

jquery lazy load

Im trying to create a div that will use jquery's lazy load to load images coming in from linkedIn. When I look at the examples found online, they seem to work fine with my browser, but when i try to add it, it doesnt seem to work. I'm not sure if it matters, but i'm developing in Groovy/grails. here is the code i have so far, before rendering:
<html>
<head>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
....
<script type="text/javascript">
$("img").lazyload({
placeholder : "/mgr/images/spinner.gif"
});
</script>
....
</head>
<body>
<div style="width: 150px; height:200px; border:1px solid red; overflow:auto;">
<g:each in="${Friends}" status="i" var="Friends">
<img original=${Friends[3]} src="/mgr/images/spinner.gif">
</g:each>
</div>
This code will only draw the div and display the /mgr/images/spinner.gif image but not the original image. Is there something i'm missing?
thanks for your help
jason
Normally you include the plugin file after the jQuery core file. That way the plugin can extend the jQuery core.
Change:
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}">
</script>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
To:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript" src="${resource(dir:'js',file:'jquery.lazyload.js')}"></script>
I would also recommend trying to use the newest jQuery core file you can. It may break old plugins but it's well worth attempting as with each update to jQuery come performance enhancements.
jQuery 1.6.4 from Google CDN.
jQuery 1.6.4 from jQuery's CDN.
Also if you want to load some html not just for images using lazy loading plugin you can do easy like that on lazy callbacks
this option "enableThrottle: false", is to ensure your callback is always executed, I had some issues because of this ... sometimes lazy loading wasn't working..
to html add "class="lazy" data-src=" " to an element to section/div/img to call when is displayed to add new html
> $('.lazy').Lazy({
> chainable: false,
> enableThrottle: false,
> onFinishedAll: function () {
> // do what you need ajax call or other
> },
> beforeLoad: function () {
> // do what you need ajax call or other
> },
> afterLoad: function () {
> // do what you need ajax call or other
> },
> onError: function () {
> console.log('could not be loaded');
> }
> });

Resources