I know this has been discussed before, but with no results for me.
The problem is that deviceready() is only fired once, the first time on "list" page. I can´t get it to work on article pages. And when I go back from a "article" page to "articlelist" the event is still out of work. I need the menubutton operative in every data-role="page".
The js:
<script type='text/javascript'>
function onLoad() {
document.addEventListener("deviceready", onDeviceReady, false);
}
function onDeviceReady() {
document.addEventListener("menubutton", onMenuKeyDown, false);
}
function onMenuKeyDown() {
alert('Menu pressed');
}
</script>
The HTML:
<body onload="onLoad()">
<div id="list" data-role="page">
<ul id="articleList" data-role="listview">
<li id="list1"><a id="link1" href="#article1"></li>
<li id="list2"><a id="link1" href="#article2"></li>
</ul>
</div>
<div id="article1" data-role="page">Content</div>
<div id="article2" data-role="page">Content</div>
I'm with: cordova-1.5.0 /jquery.mobile-1.1.0-rc.2 /jquery-1.7.1 /Android
Any help please?
I just quickly tested this in the app I'm working on right now and it works. Phonegap-1.6.1 and jquery.mobile-1.1.0 final
Perhaps you should try upgrading your phonegap and jquery.mobile
Related
I'm using backbone jquery mobile and coffee script to develop a simple twitter application. My problem is the jquery mobile styles are failing to render. My View is
class HomeView extends Backbone.View
constructor: ->
super
initialize: ->
#Twitter= new TwitterCollection
template: _.template($('#home').html())
render: ->
#loadResults()
loadResults: ->
#Twitter.fetch({
success: (data) =>
$(#.el).html(#template({data: data.models, _:_}))
error: ->
alert('Error!')
})
This works fine in terms of pulling information from Twitter, however when
$(#.el).html(#template({data: data.models, _:_}))
is within the fetch function, jquerys styles do not render. Can anyone show me how to refresh the styles? Help would be much appreciated!
For reference, the html template is:
<script type="text/template" id="home">
<div data-role="header" data-position="fixed">
<h1>TWITTER DATA</h1>
</div>
<div data-role="content">
<ul data-role="listview" data-inset="true">
<% _.each(data, function (row) { %>
<li><%= row.get('text') %></li>
<% }); %>
</ul>
</ul>
</div>
Ok, I fixed it by adding ".listview('refresh').trigger('create');" to the end of
$(#.el).html(#template({data: data.models, _:_}))
When the fix is applied afterwards (after the view page has been rendered and displayed by $.mobile.changePage()) the user gets an unpleasant side-effect: the view flickers due to the change of style applied by jquery mobile.
My solution to the problem was to trigger custom event from the view once the dynamic rendering is complete and bind the $.mobile.changePage() to that event. This causes the output to be "buffered" until complete and then styled altogether.
Here's an example:
In the initialize function of my view I have code waiting for an event to be fired by the model/collection when fetched and a function to render the dynamic part of the html:
window.MyView = Backbone.View.extend({
// some other code here
initialize: function() {
this.listenTo(this.collection, "fetchCompleted:CollectionName", this.renderRows);
},
renderRows: function (eventName) {
$(this.el).find('div[class="content-primary"]').html(this.template_ul({data: this.collection}));
this.trigger( 'view:ready' );
},
//...
... then in the router I have the following code for the changePage():
myViewObject.on( 'view:ready', function() {
$.mobile.changePage($(next.el), {changeHash:false, transition: transition});
});
I am trying to build a JQuery Mobile UI which uses upshot for getting data from the service and then uses Knockout.js to bind the values to a list. I am able to populate the data however, the JQuery mobile styles are not getting rendered.
Here is my code. Any help in this regard would be really appreciated.
<h2>Projects (<span data-bind="text: projects().length"></span>)</h2>
<ul data-inset="true" data-bind="foreach: projects" data-role="listview" data-theme="e" data-dividertheme="c" data-filter="true">
<li>
Project Type : <label data-bind="text: ProjectType"></label>
Description : <label data-bind="text: Description"></label>
</li>
</ul>
<p></p>
#(Html.UpshotContext(bufferChanges: true).DataSource<ProjectServiceController>(x => x.GetProjects()))
<script type="text/javascript">
$(function () {
var dataSource = upshot.dataSources.Projects.refresh();
var ProjectsViewModel = {
projects: dataSource.getEntities()
};
ko.applyBindings(ProjectsViewModel);
});
</script>
The refresh() call is asynchronous, so you can provide a callback function that is executed after the refresh. jQueryMobile docs say that if you add items you need to refresh the listview after the items are created: http://jquerymobile.com/demos/1.0.1/docs/lists/docs-lists.html
Here's an example of how you might do that:
var dataSource = upshot.dataSources.Projects.refresh(function() {
$("ul").listview('refresh');
});
I am developing an app having UI which is used for mapping fields (Source => Destination).
These fields would appear in UL -> LI -> DIV
The lists are going to be created dynamically by PHP.
Source fields are draggable with revert:true, where as Destination fields (droppable) would accept source field. I know the accept : "#divsource"
I am able to make many div's draggable, but my problem is how to define many LI->Div as droppable.
At then end the drop event would call ajax and that I can handle as well.
I am new to jQuery and whatever I have learned till now is with this task is all I know. But, my quick learning ability is not a problem.
Please help with some example.
thanks
Wikki
Below code is something I have been playing with. I know it's bit far off from what eventually it should look like:
<script type="text/javascript">
$(document).ready(function(){
$('.srcfield').draggable({
revert: true,
helper: "clone"
});
$('#destinationfeilds').droppable({
accept : ".srcfield",
over: function(){
$(this).removeClass('out').addClass('over');
},
out: function(){
$(this).removeClass('over').addClass('out');
},
drop: function(ev, ui){
//var answer = confirm('Delete this item?');
var theTitle = $(ui.draggable).attr("title");
$(this).html("<u>"+theTitle+"</u><br/> is mapped!");
//$(this).removeClass('over').addClass('out');
//alert(theTitle);
}
});
});
</script>
</head>
<body>
<div id="destinationfeilds" class="out">
<span>Destination</span>
</div>
<div id="destinationfeilds" class="out">
<span>Destination</span>
</div>
<div id="sourcefields">
<div class="srcfield" title="First Name"><span>First Name</span></div>
<div class="srcfield" title="Last Name"><span>Last Name</span></div>
<div class="srcfield" title="Age"><span>Age</span></div>
</div>
</body>
On a jQuery Mobile site I have elements of a <ul> being populated by jQuery Templates, filling out <li> items so something like this:
<ul>
</ul>
<button>Fill</button>
<script type="text/x-jquery-tmpl" id="tmpl-items">
<li><input type="checkbox" name="guys" /> ${FirstName} ${LastName}</li>
</script>
<script type="text/javascipt">
$('this-page-id').live('pageinit', function() {
$('button').click(function() {
$('#tmpl-items').tmpl(MyApp.Model)
.appendTo('ul')
});
})
</script>
Everything works, except the checkbox renders as a normal checkbox, not a cool jquery-mobilized checkbox. I know that the trick is to call "refresh" on the widget but I have no idea what widget I should be using - there is no data-role here. Does anybody know?
Can you triggering a create on the ul,like this $('ul').trigger('create');
I am using cucumber/capybara/selenium/firefox on Mac. All working great except for d&d. Drag and drop is available via drag_node.drag_to(drop_node). When called, it does not raise any errors but the actual drag and drop just never happens.
Now rather than copy pasting bits and pieces, I've found this sample app (written by a guy who apparently had similar problems) that demonstrates the issue.
Google however isn't aware of drag_to() being broken. As far as I could see. That gives a hope that it is me missing something rather than a bug. So what is it? What am I missing? A bug?
For me, #drag_to did work, however, its powers seem to be limited.
In order to move a UI-sortable table row down, I had to create a table with three rows, then run this code (in a Cucumber step):
element = find('tbody tr:nth-child(1)')
target = find('tbody tr:nth-child(3)')
element.drag_to target
This would swap the first with the second row. My interpretation is that Capybara does not drag far enough, so I gave it a target beyond my actual target.
Note: I have configured UI-sortable with tolerance: 'pointer'.
I have had the same proble and solved it by going directly to the selenium-webdriver.
I an using selenium-webdriver 2.20.0 and Capybara 1.1.2
this works with this HTML
<!DOCTYPE html>
<html>
<head>
<title>Cabybara Drag And Drop</title>
</style>
<style type="text/css" media="screen">
#list_1 { background:#2C4999; }
#list_2 { background:#99752A; }
.list { padding:10px; width:200px; }
.item { background:#FFF; margin:10px; }
</style>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/jquery-ui.js"></script>
<script type="text/javascript">
$().ready(function(){
$( "#list_1" ).sortable({ connectWith:"#list_2" });
$( "#list_2" ).sortable({ connectWith:"#list_1" });
});
</script>
</head>
<body>
<ol id='list_1' class='list'>
<li id='item_1' class='item'>Item 1</li>
<li id='item_2' class='item'>Item 2</li>
<li id='item_3' class='item'>Item 3</li>
<li id='item_4' class='item'>Item 4</li>
<li id='item_5' class='item'>Item 5</li>
</ol>
<ol id='list_2' class='list'>
<li id='item_6' class='item'>Item 6</li>
<li id='item_7' class='item'>Item 7</li>
<li id='item_8' class='item'>Item 8</li>
<li id='item_9' class='item'>Item 9</li>
<li id='item_10' class='item'>Item 10</li>
</ol>
</body>
</html>
Now fore the Ruby code.
Getting at the selenium-webdriver from capybara call page.driver.browser
require 'test_helper'
class DragDropTest < ActionDispatch::IntegrationTest
setup do
Capybara.current_driver = Capybara.javascript_driver # :selenium by default
end
def test_drag_item_1_to_list_2
visit '/drag_drop'
element = page.find(:id, 'item_1')
target = page.find(:id, 'list_2')
selenium_webdriver = page.driver.browser
selenium_webdriver.mouse.down(element.native)
selenium_webdriver.mouse.move_to(target.native, 0, 10)
selenium_webdriver.mouse.up
sleep 2
end
end
It is selenium-webdriver having problem with sortable lists. This post covers the workaround: http://www.dixis.com/?p=626
#drag_to does not work on sortable lists, presumably since you aren't dragging "to" an element as much as dragging a set distance and direction. Selenium's #drag_by is what you're looking for but is not currently supported by Capybara.
See also:
https://github.com/jnicklas/capybara/issues/222
https://github.com/jnicklas/capybara/issues/119