Get Parameters of Link Clicked jQuery Mobile - jquery-mobile

I've been looking to find a way to get the url parameters of the link that was clicked in my pagebeforeshow event
$(document).on('pagebeforeshow', '#category',function(e,data){
})
With the link looking like this (you can also see I added a data attribute)
Dairy
I've read a bunch of different answers on here and tried lots of them, but I've discovered that they are looking to use the current url of the page to get the parameters. However the current page url does not have the parameters in it (as I'm using pagebeforeshow)
And then I've seen other examples where people are manually changing pages using jQuery.mobile.changePage but to me it seems like overkill having to add click listeners to my buttons and then manually pass in parameters using changePage for each of them
I have also looked at this plugin which probably would work, but I am reluctant to use a plugin for something which to me seems so simple
I just need to be able to access the url or the data-cat attribute that was clicked, but I can't seem to find an efficient way to do it without having to a click listener and then manually changing the page, surely there's a better way?
Update: jQuery Mobile 1.4.2

Related

Analytics - Where do the parameters come from

Google Analytics provides me a list of called links of my website.
I wonder where these requests came from and what they effect.
e.g.
www.mywebsite.com/subpage/?ls=1
www.mywebsite.com/subpage/?q=keyword
www.mywebsite.com/subpage/?q=13123sdd
What does ?ls=1 and ?q=keyworddo? And where do they came from? Especially the keywords
Those are GET parameters, and most commonly they come as a result of posting forms (or just by clicking on links with such URLs).
For (the most well-known) example, if you go to https://www.google.com and enter "test" and press Enter, you will go to a page http://google.com/search?q=test (with likely a bunch of other parameters as well). In a very simplified scenario, it would be because the box where you input your search string is an input element with name="q" contained in a form element with method="GET" action="/search"; when you submit the form (by pressing Enter), the browser will make the url by adding all the parameter to the form's action like this:
action?param1=value1&param2=value2...
or in this case, /search?q=test.
(In Google's specific case, this is not actually what is happening, because of various kinds of JavaScript magic that is normally going on; but that magic in the end does the same thing. But it could: if you turned off JavaScript on Google, then what I described would be exactly what would happen.)
As I said, you can submit that same URL literally, without having to go through a form. For example, you can click directly on this link to find some kittens: https://google.com/search?q=kittens
Parameters submitted with other methods than GET do not appear in URLs, and cannot be submitted merely by clicking a link, only through forms (which also support POST method) or JavaScript (which can submit any kind of method: GET, POST, or other methods not available to forms or links, like PUT, DELETE...)
As to what they do, nothing by themselves. They are interpreted by the www.mywebsite.com server, in any way they want. In Google's case, q is the query to search from, and what they do is give you (hopefully) relevant results to it. In www.mywebsite.com's case? No idea. Could be anything.

Show disclaimer site when opening external link

I'm running a typo3 v. 7.6.4
I alredy looked into existing plugins an even how to write my own... but i can't find a solution.
My goal is pretty simple:
Show a simple disclaimer page whenever the user clicks a link to any external page.
Is there any easy ways to accomplish this?
The easiest way would in fact be to add a on('click') eventHandler on all links. This would be additional JavaScript and work with all existing content. Figuring out if a link refers to an external site should be easy (exclude relative urls and match absolute urls against your baseUrl).
However, if this is a legal requirement, you should decide if JavaScript works for you, because with disabled JS the disclaimer would not be triggered.

jQuery mobile: URL query string does not change

I'm playing around with jQuery Mobile and ran into some (for me) strange behavior.
I have a bunch of links each pointing to the same jQM page, #otherpage, but with different values for the URL query string, like #otherpage?q=foo, #otherpage?q=bar, and so on. The change to the other page works fine but the query string sticks between clicks, so if I first click the link to #otherpage?q=foo, and then goes back to the first page, all subsequent page changes to #otherpage will have q=foo, no matter what the currently clicked link's href says.
jsFiddle didn't seem to have support for jQM so I put an example here: http://cpak.se/dump/location-search-test.html
I've tried this in Chrome and Safari on Mac.
I use the query string to pass simple data between pages since I have other code hooked into the pagechange events, that is more or less unaware of what earlier code might have done. If I can't get this working I'll have to find another way to pass data around... :P
Cheers!
/Christofer
Disabling jQm seems to be the easiest solution for updating the url parameters correctly in the browser. E.g. adding data-ajax="false" in the link anchor and not using $.mobile.changePage.
<a href="#page?id=1" data-ajax="false">
In a dynamic app modify the value of href beforehand.
I've looked up for this issue because it seems a little bit weird indeed. There is a open issue about this: https://github.com/jquery/jquery-mobile/issues/2859
Atm jQuery Mobile doesn't recommend using query parameters:
We don't currently support query parameters as part of the hash
fragment, though this is something that's been discussed frequently
internally and is on the feature request list.
They advise to use a plugin like:
https://github.com/jblas/jquery-mobile-plugins/tree/master/page-params
https://github.com/azicchetti/jquerymobile-router
However, there is a workaround since the data-url of the active page in the DOM DOES change, you can retrieve this with $(".ui-page-active").attr("data-url"); I've tested this on your website and it gave me all 3 uniques URLs
jQuery Mobile by default does not allow passing query-string parameters to internally linked pages. Check-out the very bottom of this documentation page (the second bullet from the bottom of the page): http://jquerymobile.com/demos/1.0rc3/docs/pages/page-navmodel.html
jQuery Mobile does not support query parameter passing to
internal/embedded pages but there are two plugins that you can add to
your project to support this feature. There is a lightweight page
params plugin and a more fully featured jQuery Mobile router
plugin for use with backbone.js or spine.js.

URL with JQuery Mobile

I am using JQuery mobile in asp.net web form website. I have the following code at the page "pageA.aspx".
View Saved Orders
When I am clicking on this link I am successfully redirected to the PageB, but the URL I am getting is
http://localhost:3244/MyFirstJQueryApp/PageA.aspx#PageB.aspx
But I want URL like this further processing, please help
http://localhost:3244/MyFirstJQueryApp/PageB.aspx
I have done it by setting target="_top" property.
Is this a good practice ?
There are a couple of mods out there (can't find the one I wanted) to remove the hash in the URL, but you have to edit the jQM framework.
You could try using the changePage() http://jquerymobile.com/demos/1.0a4.1/#docs/api/methods.html and set the transition without tracking it in history option to true (I think it's true)
Here is some more documentation on navigation as well: http://jquerymobile.com/demos/1.0a4.1/#docs/pages/docs-navmodel.html
mightbe able to think of another way
The idea behind jQuery Mobile is that you don't do it the way you're trying to do it! Check Dynamic pages with jQuery Mobile, which shows you how to let jQm do the work in the background by loading new data into the DOM.

ajax request changing url

I have a pager on a table using ajax and I would like each such request also to change the browser's url, so when I hit refresh button I won't skip back to first page. I was fighting the Url parameter of AjaxOptions, but it keeps winning over me. Please help.
Trim
You can safely change the URL past the hash mark without redirecting the page. However, the user can (in most browsers) navigate through these changes with the Back and Forwards buttons. This technique is usually called "history."
Because the technique is difficult to get working in all browsers, you'll want to use a framework. Take a look at http://www.mikage.to/jquery/jquery_history.html.
I can also recommend ExtJS's history stuff too. Take a look at this example:
http://www.extjs.com/deploy/dev/examples/history/history.html#main-tabs:tab2
Again, notice that not only does the URL change when the user does stuff, but changing the URL (via Back and Forward) also affects the page. This is good, awesome even, but means it must be done very carefully.
There is not really a quick and easy way to do this, here is an article on the topic. The problem is that not only does the Ajax have to generate the URLs, it also has to take those URLs into account when loading the page to get the appropriate content.

Resources