Search jQuery

jQuery Forum

Screen name:
barbalex

barbalex's Profile

15 Posts

43 Responses

0 Followers

Activity Trend

Last 30 days

Loading Chart...

Show:

Expanded view
List view

how to check type of value in input
[1Reply]
- 24-May-2012 09:53 AM
- Forum: jQuery Mobile
I am trying to preserve the type of values written into a text input when saving them to the Database.

So far I have set the type of the input to number (<input id="x" type="number" />) and chequed for $("#x").attr("type").
When I parseInt the value, this is o.k. for Integers. But what to do with Floats?

Simple. Test for typeof $("#x").(). If it is number, check if parseFloat($("#x").()) !== parseInt($("#x").()).

Unfortunately typeof $("#x").() ALWAYS returns string.

What am i missing?

Cheers, Alex

Solved: Trouble using ajax. Same page transition?
[10Replies]
- 12-Apr-2012 10:54 AM
- Forum: jQuery Mobile
Hi

I have trouble getting ajax to work. I want to get it working to speed things up and reduce calls to the database.

I have a document BeobEdit.html. It contains a page (data-role="page") with id="BeobEditPage" and a url, for example http://barbalex.iriscouch.com/evab/_design/evab/_show/BeobEdit/8c3c2f45fd2560a0f9b2fa9d2b001990.

When the user swipes right (or left) the same document is shown with the same page but a different url and data, for example http://barbalex.iriscouch.com/evab/_design/evab/_show/BeobEdit/5ce10d6c6376b4d4b9bd38f1f80159aa.

When I change pages using "window.open(url, target='_self')" it works perfectly.

When I use "$.mobile.changePage(url)" the first page works fine but if I swipe on then in the next pages lots of stuff does not work. Seems like event listeners dont work. They work after a refresh of the page.

I have put all the page specific code inside a $(":jqmData(role='page')").on("pageinit", function() callback inside the page div to make sure it is called every time the page is showed. I have also tried the pagebeforeshow event and others. I also use the same page headers on all pages.

I have tried a lot of stuff and read through many similar problems but I can't get my page to work using changepage.

Then I realized that while changing pages, both pages are the same .html file and the same data-role=page although a different url (calling different data from couchdb). Could this be the reason for my problems? I have tried using { allowSamePageTransition: 'true', reloadPage: 'true' } in changepage but that does not solve the problem.

I am not sure what the docs mean with same page. Is it same .html file, same data-role=page or same url?

If you look at the links, please log in using user = z and password = z (the site uses window.open now, so it works).

I am using jQuery mobile 1.1.0 RC2. Had the same issues with prior versions.

I am also using mustache for templates (https://github.com/janl/mustache.js).
Does this maybe influence the behaviour?

Thanks for any hints

Alex

input elements not aligned, not same width
[2Replies]
- 17-Feb-2012 03:12 AM
- Forum: jQuery Mobile
Hi

I am using many input element types in the same form.
Unfortunately they are not all rendered aligned and they don't have the exact same width.
Specifically:
- input elements are broader than radio, checkbox or select.
- radio and checkbox align slightly farther left than input
- select align slightly farther right than input
See attachment.

How can I get them to exactly align and have the exact same width?

Thanks for help

Alex
Attachments
- form.PNG
  
  Size: 43.79 KB Downloads: 1675

how to use pageInit()?
[11Replies]
- 14-Feb-2012 04:35 PM
- Forum: jQuery Mobile
Hi

The docs say very prominently not to use "$(document).ready()" any more but to use "pageInit()" instead.
So I am trying to change to pageInit() and also change from "window.open" to "pageChange".

I understand that to do this all pages should have the same header that references all the sources needed by any of the pages.
And I understand the page specific code has to be in the <div data-role="page"> element.

So far hopefully so good.

Here is my problem: What is the correct call for pageInit? I have tried all of these:
- $(document).ready(function(){
- $(document).delegate("#FeldEditPage", "pagecreate", function() {
- $(document).delegate("#FeldEditPage", "pagebeforecreate", function() {
- $(document).bind("pageInit", function(){
- $("#FeldEditPage").bind("pageInit", function(){
- jQuery("div:jqmData(role='page'):last").bind('pageInit', function() {
- plus variations using live instead of bind.
The first three work only on the first document - not after changePage was executed. They work perfectly when I use window.open istead of changePage.

With the others no code is executed at all.

My page is here: https://github.com/barbalex/EvabMobile/blob/master/templates/FeldEdit.html

Thanks in advance for help!

Alex

minimal swipe length
[1Reply]
- 20-Jan-2012 10:40 AM
- Forum: jQuery Mobile
Hi
I have implemented swiping. It works nicely.
There is a little problem though: When a user marks a word mith the mouse, this provokes the swipe event. To provent this I am looking for a way to call the swipe event only if the user swipes a minimum of x pixels (maybe 150).
Is this possible?
Thanks for help.
Alex

how prevent swipe when moving slider?
[2Replies]
- 10-Jan-2012 09:34 AM
- Forum: jQuery Mobile
Hi

On my page I have sliders and also swipe events:
- On the change event of the slider I save the value of the slider.
- On the swipe event (bound to the content-div) the next page opens.

My problem is that moving the slider also calls the swipe event.

What happens is that the next page opens and the value of the slider is not saved.

How can I prevent the swipe event from being called when a slider is moved?

Help is much appreciated.

Alex

solved: form background color differs from content background color
[3Replies]
- 30-Nov-2011 12:20 PM
- Forum: jQuery Mobile
Forms have a slightly darker background color than the rest of the page. See here: http://barbalex.iriscouch.com/evab/_design/evab/index.html
Weird enough, this does not seem to happen on the demos.
So far I haven't tweaked the css.
Can anyone help?
Here's the html I use on above page:
2. <body>
3. <div data-role="page">
4. <div data-role="header" data-backbtn="false">
5. <h1>anmelden</h1>
6. </div>
7. <div data-role="content">
8. <p style="text-align: center"><b>EvAB</b> = <b>E</b>rfassung <b>v</b>on <b>A</b>rt-<b>B</b>eobachtungen</p>
9. <form id="LoginForm" action="#" method="get" autocomplete="on">
10. <div data-role="fieldcontain">
11. <label for="UserName">Name:</label>
12. <input id="UserName" name="UserName" type="text" autofocus required/>
13. </div>
14. <div data-role="fieldcontain">
15. <label for="Passwort">Passwort:</label>
16. <input id="Passwort" name="Passwort" type="password" required/>
17. </div>
18. </form>
19. <p style="text-align: center">Sie sehen nur die eigenen Beobachtungen. Darum brauchen Sie ein Konto.</p>
20. <p style="text-align: center">Diese App ist in Entwicklung. Vorläufig können Sie gerne mit Name "z" und Passwort "z" anmelden und alles ausprobieren.<br>Ihre Daten werden aber vor der Veröffentlichung gelöscht!</p>
21. <p style="text-align: center">Ich freue mich über Rückmeldungen: <a href="mailto:alex.barbalex@gmail.com">email senden</a></p>
22. <p style="text-align: center"><a href="http://www.barbalex.ch/news/latest/evabmobile/">mehr Infos hier</a></p>
23. </div>
24. <div data-role="footer">
25. <div data-role="navbar">
26. <ul>
27. <li><a href="#" id="SubmitButton" data-icon="check" class="ui-btn-active">anmelden</a></li>
28. <li><a href="Signup.html" id="SignupButton" data-icon="plus" rel="external">Konto erstellen</a></li>
29. </ul>
30. </div>
31. </div>
32. </div>
33. </body>

listviews show no data in IE8
[1Reply]
- 29-Aug-2011 04:00 PM
- Forum: jQuery Mobile
Hi

My page includes some lists.
It works very well on: Chrome, Firefox6, IE9.
On IE8 the lists remain empty, see attachment. Seems like the content does not make it into the DOM.

Here is my page: http://barbalex.iriscouch.com/evab-ch_barbalex_evab/_design/evab/index.html
Log in using user z and password z - never mind mingling in the data, it is only a still incomplete development version.

The listview is built up with this code:
2. function refreshBeobListe(Pfad) {
3. $("#beobachtungen").empty();
4. $db.view("evab/BeobListe",
5. {success: function(data) {
6. var i;
7. var anzBeob = 0;
8. var beob;
9. var ListItemContainer = "";
10. for(i in data.rows) { //Beobachtungen zählen. Wenn noch keine: darauf hinweisen
11. key = data.rows[i].key;
12. if (key[0] == User) { //nur eigene Beobachtungen zählen!
13. anzBeob = anzBeob + 1;
14. }
15. }
17. //Im Titel der Seite die Anzahl Beobachtungen anzeigen
18. var Titel2 = " Beobachtungen";
19. if (anzBeob==1){
20. Titel2 = " Beobachtung";
21. }
22. $("#BeobListePageHeader .BeobListePageTitel").text(anzBeob + Titel2);
24. if (anzBeob == 0) {
25. $("#beobachtungen").append("<li>Sie haben noch keine Beobachtung erfasst</li>");
26. } else {
27. data.rows.reverse(); //zuletzt erfasste sind zuoberst
28. for(i in data.rows) //Liste aufbauen
29. {
30. beob = data.rows[i].value;
31. key = data.rows[i].key;
32. if (key[0] == User) { //nur eigene Beobachtungen anzeigen!
33. var Datum = beob.zDatum;
34. var Zeit = beob.zZeit;
35. var ArtGruppe = beob.aArtGruppe;
36. ImageLink = Pfad + "Artgruppenbilder/" + ArtGruppe + ".png";
37. var ArtName = beob.aArtName;
38. var externalPage = "_show/BeobEdit/" + beob._id;
39. var listItem = "<li class=\"beob ui-li-has-thumb\" id=\"" + beob._id + "\">" +
40. "<a href=\"" + externalPage + "\" rel=\"external\">" +
41. "<img class=\"ui-li-thumb\" src=\"" + ImageLink + "\" />" +
42. "<h3 class=\"aArtName\">" + ArtName + "<\/h3>" +
43. "<p class=\"zZeit\">" + Datum + "   " + Zeit + "<\/p>" +
44. "<\/a> <\/li>";
45. ListItemContainer = ListItemContainer + listItem;
46. }
47. }
48. }
49. ListItemContainer = ListItemContainer + "<\/ul>";
50. $("#beobachtungen").append(ListItemContainer);
51. $("#beobachtungen").listview();
52. $("#beobachtungen").listview("refresh");
53. }
54. });
55. }
I have added this in the header to make it work in IE7 and IE8 but it does not help:
2. <script type="text/javascript">
3. //customize jQuery Mobile to let IE7+ in (Mobile IE)
4. //run this script after jQuery loads, but before jQuery Mobile loads
5. $(document).bind("mobileinit", function(){
6. $.extend( $.mobile , {
7. //extend gradeA qualifier to include IE7+
8. gradeA: function(){
9. //IE version check by James Padolsey, modified by jdalton - from http://gist.github.com/527683
10. var ie = (function() {
11. var v = 3, div = document.createElement('div'), a = div.all || [];
12. while (div.innerHTML = '', a[0]);
13. return v > 4 ? v : !v;
14. }());
16. //must either support media queries or be IE7+
17. return $.support.mediaquery || (ie && ie >= 7);
18. }
19. });
20. });
21. </script>
Thanks for help!
Alex
Attachments
- BeobListe.txt
  
  Size: 9.74 KB Downloads: 2226

solved: latest nightly > select menu blank
[6Replies]
- 29-Aug-2011 03:12 PM
- Forum: jQuery Mobile
Hi
When I use beta 2 my select menus work like a charm, as they did with several previous versions.
When I use the latest nightly, they stay blanc and show no data.

When loading the page, document ready calls this code to refresh the select menus that get their data (in this case "aArtGruppe") from the show function:
2. function refreshArtGruppe(aArtGruppe)
3. {
4. $("select#aArtGruppe").selectmenu();
5. $("select#aArtGruppe").empty();
6. var startoption = "<option value='" + aArtGruppe + "'>" + aArtGruppe + "</option>";
7. $("select#aArtGruppe").append(startoption);
8. $("select#aArtGruppe").val(aArtGruppe);
9. $("select#aArtGruppe").selectmenu("refresh");
I've tried using create instead of refresh. But the code works well in beta 2 plus I am refreshing widgets that were there before (they are in the template), so I believe refresh is the right method.

Thanks for Help!
Alex

one more widget refresh problem (checkboxradio)
[2Replies]
- 16-Jul-2011 10:55 AM
- Forum: jQuery Mobile
I know the forum is full of these problems. But I haven't found an answer that answers mine.

I hav a checkboxradio like this:
1. <div data-role="fieldcontain">
2. <fieldset data-role="controlgroup">
3. <legend>Typ der Meldung:</legend>
4. <input type="radio" name="aMeldungTyp" id="Feldbeobachtung" value="Feldbeobachtung"/>
5. <label for="Feldbeobachtung">Feldbeobachtung</label>
6. <input type="radio" name="aMeldungTyp" id="Herbarbeleg" value="Herbarbeleg" />
7. <label for="Herbarbeleg">Herbarbeleg</label>
8. <input type="radio" name="aMeldungTyp" id="Literaturangabe" value="Literaturangabe" />
9. <label for="Literaturangabe">Literaturangabe</label>
10. </fieldset>
11. </div>
In function handleDocumentReady() I am trying to manage it with this code:
1. //aMeldungTyp managen
2. $("input[name='aMeldungTyp']").checkboxradio();
3. if ("{{aMeldungTyp}}"!=""){
4. aMeldungTyp = "{{aMeldungTyp}}";
5. } else {
6. aMeldungTyp = "Feldbeobachtung";
7. }
8. $("input#{{aMeldungTyp}}").attr("checked",true).checkboxradio("refresh");
9. $("input[name='aMeldungTyp']").change(function(){
10. aMeldungTyp = $(this).attr("id");
11. });
Later I save the data like this:
1. $("#SpeichernButton").tap(function(event) {
2. var docId = "{{id}}";
3. $db.openDoc(docId, {
4. success: function(doc) {
5. (saving done)
6. if ($("[id='aArtNameBemerkungen']").val()!=""){
7. doc.aArtNameBemerkungen = $("[id='aArtNameBemerkungen']").val();
8. } else if (doc.aArtNameBemerkungen!=null){
9. delete doc.aArtNameBemerkungen;
10. }
11. doc.aMeldungTyp = aMeldungTyp;
12. (more saving done)
13. $db.saveDoc(doc, {
14. success: function(data) {
15. MeldungEinzeilig("Art gespeichert");
16. },
17. error: function() {
18. MeldungEinzeilig("Die Art konnte nicht gespeichert werden.");
19. }
20. });
21. }
22. });
23. });
First this worked like a charm. And it does still work on a different page. After several test with data I suddenly keep getting this error: "uncaught exception: cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'".

I don't understand this: Am I not initializing it correctly with this line?:
1. $("input[name='aMeldungTyp']").checkboxradio();
Fiddling around with the same problem with other widgets too (selectboxes) I found out that it seems to matter, where in handleDocumentReady you initialize and maybe how often. Are there any rules, where this should happen and how often it may happen?

I have also tried .page(). But then I really start getting into deep water... (lots of other issues).
Help is much appreciated.

Alex

solved: Error in Beta 1: uncaught exception: cannot call methods on selectmenu prior to initialization; attempted to call method 'refresh'
[7Replies]
- 21-Jun-2011 05:07 PM
- Forum: jQuery Mobile
My site (http://barbalex.couchone.com/evab-ch_barbalex_evab/_design/evab/index.html) works well with 1a4.1. With 1 beta 1 when it loads the appended page I get the mentioned error and the page remains white.

Is there something I can do about it or is this a bug?

The page is loaded with this code:
2. function refreshBeobListe()
3. {
4. $("#beobachtungen").empty();
5. $db.view("evab/BeobListe",
6. {success: function(data) {
7. var i;
8. var anzBeob = 0;
9. var user;
10. var beob;
11. var zDatum;
12. var zZeit;
13. var bArtName;
14. var externalPage;
15. var listItem;
16. var ListItemContainer = "";
17. var UserZeit;
18. for(i in data.rows) { //Beobachtungen zählen. Wenn noch keine: darauf hinweisen
19. key = data.rows[i].key;
20. User = userCtx.name;
21. if (key[0] == User) { //nur eigene Beobachtungen zählen!
22. anzBeob = anzBeob + 1;
23. }
24. }
26. //$("#BeobListeHeader").text(anzBeob + " Beobachtungen"); //Header soll anzeigen, wieviele Beobachtungen erfasst wurden. Breaks jquery mobile style!
28. if (anzBeob == 0) {
29. $("#beobachtungen").append("<li>Sie haben noch keine Beobachtung erfasst</li>");
30. } else {
31. data.rows.reverse(); //zuletzt erfasste sind zuoberst
32. for(i in data.rows) //Liste aufbauen
33. {
34. beob = data.rows[i].value;
35. key = data.rows[i].key;
36. User = userCtx.name;
37. if (key[0] == User) { //nur eigene Beobachtungen anzeigen!
38. zDatum = beob.zDatum;
39. zZeit = beob.zZeit;
40. bArtGruppe = beob.bArtGruppe;
41. ImageLink = "Artgruppenbilder/" + bArtGruppe + ".png";
42. bArtName = beob.bArtName;
43. externalPage = "_show/BeobEdit/" + beob._id;
44. listItem = "<li class=\"beob ui-li-has-thumb\" id=\"" + beob._id + "\">" +
45. "<a href=\"" + externalPage + "\" rel=\"external\">" +
46. "<img class=\"ui-li-thumb\" src=\"" + ImageLink + "\" />" +
47. "<h3 class=\"bArtName\">" + bArtName + "<\/h3>" +
48. "<p class=\"zZeit\">" + zDatum + "   " + zZeit + "<\/p>" +
49. "<\/a> <\/li>";
50. ListItemContainer = ListItemContainer + listItem;
51. }
52. }
53. }
54. ListItemContainer = ListItemContainer + "<\/ul>";
55. $("#beobachtungen").append(ListItemContainer);
56. $("#beobachtungen").listview("refresh");
57. }
58. });

solved: bind to taphold: "this" does not reference as expected
[4Replies]
- 02-Mar-2011 10:11 PM
- Forum: jQuery Mobile
Hi

I have a listview where every li-element has an href with an id:
1. $.getJSON("Projektliste.php?callback=?", function(data) {
2. $.each(data, function(key, value) {
3. $("<li><a href='Projekt.html?id=" + value.id +"' rel='external' id=" + value.id + ">" + value.PrName + "</a><span class='ui-li-count'>" + value.AnzBeob + "</span></li>").appendTo("#Projektlisteneintraege");
4. });
5. $("#Projektlisteneintraege").listview("refresh");
6. });
I try to open a menu when the user tapholds a list-item:
2. $('div').bind('taphold', function(event){
3. var PrId = $(this).attr('id');
4. alert("Die ID lautet: " + PrId);
5. $.mobile.changePage("Projektliste_menu.html?id=" + PrId);
6. });
I want to pass an id of the list-item that was tapheld. With this, it is possible to alter or delete list-items (and their data) in the menu.

The problem is: although every list-item has "id=" with a value, $(this).attr('id') does not fetch it.

This puzzles me, because I know that every list-item has a value in the id. And on another page I use the .change event which uses $(this).attr('id') too and that works perfectly:
1. $("input").change(function() {
2. var Feldname = $(this).attr("id");
Here's the page: http://evab.barbalex.ch/

Help is very much appreciated!

how to open a popup menu (with a taphold)
[5Replies]
- 02-Mar-2011 05:59 PM
- Forum: jQuery Mobile
Hi
In many apps tapholding an item opens a popup menu. I need this functionality too.
So far I could not find out how to do this in jquery mobile.

This is my state of knowledge:
1. $('.aBunchOfTapholds').bind('taphold', function(e){
  
  var elem = $(this); //get's tapped object
  
  // now open a popup menu. How?
  
  });
I've seen dialogs. But it seems that they always fill the width of the page.
Is it possible to set the width of a dialog?

solved: data in select menu not shown
[1Reply]
- 21-Feb-2011 07:10 PM
- Forum: jQuery Mobile
I get data with this:

$.getJSON("Personen.php", function(data) {
                $.each(data, function(key, value) {
                    $("<option value='" + key + "'>" + value.Person + "</option>").appendTo("#projekt_autor");
                    });
                });

and append it to a select menu:
<div data-role="fieldcontain">
                    <label for="projekt_autor" class="select">Autor:</label>
                    <select name="projekt_autor" id="projekt_autor">
                        <option>Autor wählen...</option>
                    </select>
                </div>

Firebug shows the data to be in the page:

<label for="projekt_autor" class="select ui-select">Autor:</label>
      <div class="ui-select">
      <a class="ui-btn ui-btn-icon-right ui-btn-corner-all ui-shadow ui-btn-up-c" data-theme="c" aria-haspopup="true" role="button" href="#">
      <span class="ui-btn-inner ui-btn-corner-all">
      <span class="ui-btn-text">Autor wählen...</span>
      <span class="ui-icon ui-icon-arrow-d ui-icon-shadow"></span></span></a>
      <select tabindex="-1" name="projekt_autor" id="projekt_autor">
          <option>Autor wählen...</option>
            <option value="0">Affolter Theo, -</option>
            <option value="1">AGEO -, -</option>
            <option value="2">BACHMANN P., -</option>
            etc.
</select></div>

But when I click the select menu, only the null option is shown (<option>Autor wählen...</option>).
How can I get all the data to show?
Here's the page: http://evab.barbalex.ch/Projekt.html

Very grateful for help!
here's the script: Projekt.txt
Attachments
- Projekt.txt
  
  Size: 8.8 KB Downloads: 2233

solved: html is not structurally styled
[11Replies]
- 21-Feb-2011 07:00 PM
- Forum: jQuery Mobile
I get data like this:

$.getJSON("Projektliste.php", function(data) {
                $.each(data, function(key, value) {
                    $("<li><a href='Projekt.html' rel='external' id=" + key + ">" + value.PrName + "</a></li>").appendTo("#Projektlisteneintraege");
                    });
                });

and append it to this listview: <ul data-role='listview' data-theme='g' id="Projektlisteneintraege"></ul>

The resulting page (http://evab.barbalex.ch) shows the data but it is not styled.

Firebug shows no errors.

How can I get jquery to style the listview?

Thanks for help!

«Prev
Next »

Response title

Attachments

jQuery Forum

Activity Trend