last day (16 days later) » 

9:09 PM
0
Q: Adding id to pages in jquery mobile

Abu LamarFor internal linking in jquery mobile, I seem to need adding unique id to each page div so that I can handle each page separately. Since the page div itself is being generated by jquery mobile dynamically, what is the best practice to add dynamic id to those divs? Edit: Currently I am requesting...

 
Well the divs are dynamic and I can't define all divs that I might need. Currently by default jqm creates those divs for me.
 
How do you dynamically create the pages?
 
Please check my edit.
 
This code is to navigate to a page, how do you inject the page dynamically into DOM? Is the page an external file.html?
 
Actually I invoke it by swiping, sorry for not adding the whole function please check it now.
That code itself navigate and injects the new page in DOM.
 
9:09 PM
ok, what does GetNextPage() do exactly? Does it create a page dynamically and append into DOM? Can show us that fucntion?
 
GetNextPage returns a url only. Please check the method here: api.jquerymobile.com/pagecontainer/#method-change
hello
 
Hi
do you speak arabic?
 
yes
 
دوختني يا زلمة
 
هههه ليش
رح خبرك المسألة من اول
 
9:10 PM
مش عم بتجاوب على سؤالي هههه
هات لنشوف
 
أنا أحاول أتنقل بين الأصناف عن طريق السوايب
 
احكي انجليزي اذا بدك
 
Thank you!!
 
;)
 
ok so I am trying to navigate between categories by swiping
I have a big number of categories so I don't want to create pages divs manually
as a matter of fact I need to paginate between items the same way
so I have no idea how many divs I am going to need
I am trying to copy the following example:
if you click on the button you will be able to swipe between different pages
these pages are being created dynamically
not hard coded in the source html
now the swiping functions are in the following js script:
I had to tweak the script because I am using a newer version of jqm
 
9:15 PM
That code loads external pages.
 
yes
 
So this is what you're doing, loading external pages
 
yes but without refreshing the dom
these are called internal linking according to jqm documentation
 
Any external pages is removed once hidden, so your DON is clean
 
no
 
9:17 PM
forget about JQM docs, they will get you no where
 
what I am getting is additional page div
on swipe
so I start with one page div
when I swipe, I have now two
 
0
A: Pages not being unloaded from DOM when using index.html

OmarThis is the default behavior of jQuery Mobile, first landing page is always kept in DOM. It only removes external pages which aren't cached data-dom-cache="true". You will always have two pages in DOM, landing page and active external page. Nevertheless, if you wish to remove landing page once y...

Ahhhhh, got you now
 
as a matter of fact I don't mind this behaviour
 
Your swipe listener is duplicated then
 
it cashes the pages when the user swipes back in the opposite direction
so that is just fine with me
 
9:19 PM
first swipe, normal behavior
 
I only need to be able to distinguish between pages
by giving them unique ids
 
second swipe, you get the function executed twice
 
well yes difinitely
 
3 times, 4 times and so on
 
but with different url
which is fine
 
9:21 PM
Even with a different url, same pages will be loaded several times
 
what do you mean by same pages
 
where do you place swipe function? In head of index page?
 
on each swipe I am supposed to pass a new url
ah no
it's inside pageinit event
 
Got ya ;)
 
to be honest I'm just beginner with jqm
 
9:23 PM
pageinit or pagecreate fires once per page
 
I might be messing up
I am trying to copy an example
and work my way through
 
No problems, we are here to assist, learn and teach
 
if you have a better way for paging with swipe I would appreciate it
 
Read more about JQM events, I wrote that article for JQM 1.4
 
are you one of the contributors to jqm?
or just advanced user?
 
9:25 PM
it you use $(document).on("swipe", there's no need to wrap it in pageinit
 
this article seems very informative
 
try it without it
no, I'm not a programmer even
or developer
i just like coding
 
then how do you know all this?
ok so apart from that advice, which I don't see how its going to fix my issue
 
trial and error :)
 
what is the best way to give dynamic id to auto generated pages
 
9:27 PM
In Arabic بعبصة
 
lol
 
Why do you need an ID?
جد و الله هههه
 
alright, I need to access the data attributes that store the next and previous urls
that is what the function getnextpage does actually
 
Simple, you don't need an ID for that
$.mobile.pageContainer.pagecontainer("getActivePage") returns active page
 
nice
 
9:32 PM
you need to access next/prev data from active page where the swipe event is fired.
 
does it return a reference to the div?
 
it returns the whole page object
 
not familiar with the page object
I am working with the divs
 
var nextPage = $.mobile.pageContainer.pagecontainer("getActivePage").attr("next");
 
cool, I will try it now
 
9:35 PM
Assuming your page <div data-role="page" next="hala">
 
yes exactly
it's returning object
not string
sorry in fact it returns undefined
 
Show me the function pls, can you create a fiddle? Do you have a live page?
it shouldn't return undefined unless you're calling it on the wrong moment
 
i'm calling it on pageinit
 
wrong moment
call it inside swipe
 
really
anyway it gave the same result inside swipe
 
9:43 PM
Yep, pageinit fires before page is shown, which means it isn't active still
Let me check my old answers, I'm sure I have something similar to your issue
1
A: Swipeleft or Swiperight not changing page

OmarBind swipe events to document, and then check whether active page has a page before .prev() or .after() it. $(document).on('swipeleft swiperight', function (event) { if (event.type == 'swipeleft') { var activePage = $.mobile.pageContainer.pagecontainer("getActivePage"), n...

With some minor changes, as follows
nextPage = activePage.attr("next");
and then change using your changePage code
 
well it worked for now thanks
I guess there was some typo or something
 
You're welcome :)
Remove pageinit/pagecreate to avoid duplication
 
yet... that did not resolve my problem :(
 
:/
😓
 
I mean I still need to dynamically add next and previous attrs
this is what I needed the id for anyway :D
you see, the problem itself comes from dynamically creating the page
 
9:54 PM
How does next attribute value looks like?
 
it's the id of the next category
I append it to the page name as a query string
 
number, string, etc?
 
and I get it from server side
yes
 
show me a simple pls
 
so the point is, I get the next id from server, and need to pass it to page with js
$('[data-role=\"page\"]').attr('data-prev', 'category.aspx?categoryid=' + previd);
previd is the previous category id
I get it like this:
$('#hdnNextPage').val()
and using c# I fill the hidden field
not sure if I over complicating the problem
 
9:57 PM
So current page's next value depends on previous page's category ID?
 
or it is indeed complicated
yes
so every time I load a page
 
so far, it's a bit complicated because I don't have all details
 
I get with it the next page id
sorry, but I assumed it's pretty much straight
 
its okay bro
it can be fixed
 
I load a page, I need to open the next page so I retrieve the next page url along with the current page
 
9:59 PM
I'm think ing of a solution
 
when I swipe, I need to pass the next page url to the change page function
 
ok, if you navigate to category.apsx?categoryid=12
Can you retrieve prev and next page from id 12?
prev 11 next 13 for example?
 
well when I know 12, I can query the db to retrieve the next and previous ids
so 12 itself doesn't do much
I use it to get the next id, then I need to add that value to attribute next
 
12 doesnt help?
 
12 helps to get content of the current page
and helps in getting the next id
 
10:04 PM
great
 
but I can't load next page directly from 12
 
it means that current page's category id is helpful
as you can retrieve next page out of it
 
definitetly, I am able to get next page id
but I have one problem
 
which is?
 
is setting the next value of page div with js
 
10:06 PM
simple
 
in other words
the following line
$('[data-role=\"page\"]').attr('data-next', 'category.aspx?categoryid=' + nextid);
can't work with more than one page in DMO
 
Let me login from PC, iPad is bad for coding and chatting
the auto correct دبحني
 
that leads us to my original question about identifying the pages with unique ids
 
No need for ids
 
alright then
 
10:08 PM
half of the problem is solved with knowing that you can retrieve next page I'd from current page
id
 
yeah that wasn't even part of the problem :)
I already got that covered
 
محلولة
حول ١٠٠ يورو لحسابي، مشكلتك محلولة
ههههه
 
but I really appreciate your efforts and patience
 
It's a pleasure :)
not to mention that الدم بحن
:)
 
thanks man, but I really can't affor that 100 euro
i'm not living in europe you know
:)
but seriously, you make me feel that my approach is one of a kind
 
10:17 PM
I was kidding wallah
It's unique to be honest
 
haha I know you are, I just went with it
 
hahaha nice one ;)
i want you to run the below code and tell me what you get
 
why it's unique
 
dont place in pageinit or any other function
 
I thought this is basic usage for jqm
 
10:19 PM
It's unique because it's extremely dynamic
now copy the code below and show me the outcome
 
I'll send you the whole code
 
$(document).on("pagecontainerbeforechange, function (e, data) {
 
$(document).on("pageinit", "[data-role='page']", function () {

nextid = $.mobile.pageContainer.pagecontainer("getActivePage").data("next");
alert("from object: " + nextid);

nextid = $('#hdnNextPage').val();
previd = $('#hdnPrevPage').val();

$('[data-role=\"page\"]').attr('data-prev', 'category.aspx?categoryid=' + previd);
$('[data-role=\"page\"]').attr('data-next', 'category.aspx?categoryid=' + nextid);

// Get the filename of the next page that we stored in the data-next attribute
nextpage = $('[data-role=\"page\"]').data("next");
 
Wait, don't post any msg
 
10:23 PM
I'm writing a code for you
 
ok
 
$(document).on("pagecontainerbeforechange, function (e, data) {
 if (typeof data.toPage == "string" && typeof data.absUrl != "undefined") {
console.log(data.absUrl);
}
});
I'll use js fiddle and send you a link, better than sending each code in a separate line
anyway you can test this now and let me know what you get
you should get url of the page you're navigating to
sorry
 
yes but missing the query string since I can't get access to next page id
 
console.log(data.toPage)
test it with static data for now
are'nt you getting category.aspx?catid=1626
Aren't
 
yes
correct for the first time since
because it's hard coded
now every time I swipe more
nothing changes
I get the same
 
10:31 PM
You get the same id? Although url is changing?
 
yes yes because I am getting multiple pages
oh wait let me double check
 
ok then let me fix your code above first
Ok
 
so yes it's giving me the same url in the next swipe
and so it stays in the next page and can't move forward
 
10:54 PM
@AbuLamar
 
hey
 
sorry i was afk
 
no worries
 
let me fix the code above
 
I think I'll have to use data-url as unique id for each page
and skip the id
 
10:55 PM
it's possible too
 
to be honest I thought I'd ask a common question that might provoke several options and I take the best one
never thought it would be that complicated
 
sorry is that different from the code I sent?
 
remove this $.mobile.loadPage(prevpage) you dont need it
yup
your code is fixed, because $("[data-role=page]") will always return first page in DOM not current page
$(this) means the page that emitted pageinit event
nextid = $('#hdnNextPage', this).val();
previd = $('#hdnPrevPage', this).val();
 
yes that's good tip
 
11:01 PM
if you have same ID in all pages, it will also return first element with id hdnNextPage in DOM
 
yes that was my original problem
let me check now please
 
run the code in fiddle and let know what you get
 
I did
after two swipes
when I swipe one more, it goes to the third page
but then redirect to the second one
as if something is pulling it back
 
check your console, have you got any url printed?
swipe is being duplicated
fixed again and added pagecontainerbeforechange
 
11:19 PM
nice!
what does the update do?
 
working well?
 
trying it now, one sec please
 
ok
 
well still after few swipes it goes back
 
grrrrr
 
11:26 PM
hahaha
 
you cache the pages right?
 
man I really appreciate your help
 
haha
 
but I am afraid you might need to go to bed
 
your problem isn't fixed yet, dont thank me ;)
ok bro
if you manage to get it online, let me know
so i can check it
 
11:28 PM
yes thanks any way
I will work on it till it's fixed
 
you're welcome
you can contact me anytime on this place
just @Omar me
 
thank you very much :)
 
anytime :)
goodnight buddy
 
good night
 

  last day (16 days later) »