I've built a mobile web app with jQuery Mobile. In the index.php file, there're multiple pages declared as data-role="some_page_name" and their urls are like index.php#my_profile.
Now I want to use Optimizely to do A/B test on one of the pages. I created one variation and let it redirect index.php#my_profile to a new page, url: index_b.php#my_profile. But I have trouble linking this page to other not-in-test pages.
For example, if I have a link in index_b.php#my_profile like this:
My Favorite
It can't link to the favorite page in index.php. And sometimes if it does, you navigate to other pages, you'll never go back to the B version/variation.
Looks like Optimizely can't adapt to the jQuery Mobile multi-page structure.
Any solutions?
You can try to add more tag in href link, such as,
My Favorite
<a href="index.php#favorite" data-ajax='false'>My Favorite</a>
You also could use full link path with http:// prefix.
My Favorite
And an other option is add a link click JavaScript method. You can control the JavaScript content.
It should be okay on optimizely or visual website optimizer.
Related
Below is the part of screenshot of mywebsite/index.php, a PC site with NO jQuery Mobile (JQM), with all scripts and styles.
Below the screenshot of mywebsite/mobile/options.php, a page designed to be run on mobile browsers, having JQM.
Here is the HTML script for Logout button, actually an ahchor tag:
Logout
.. refers to the main mywebsite folder out from mobile folder.
When I tap/click Logout, it should go to mywebsite/index.php, the PC site. And here's what shows up:
If I display the location using alert(document.location);, it shows - mywebsite/mobile/options.php.
I have to press F5 to view the page as it should.
I know that this is happening because JQM loads the pages AJAXually and hence ignores all scripts and stylesheets outside of BODY tag. I know this question is duplicate of many questions in StackOverflow and I have tried my level best to find a solution, but can't find one.
How do I move to the index.php without need to refresh?
You need to add additional code to your logout.php file to execute after the logout code executes. PHP headers can accomplish this. Within your PHP tags, add this to the end of your code:
header( 'Location: http://mywebsite/index.php' ) ;
In an Electron application, what is the standard way to navigate to different pages / locations when a link is clicked?
I tried creating
<a href="/profile.html>profile</a>
and an HTML file named profile.html, but clicking the link just takes my app to a blank page.
What is actually happening when the link is clicked & what is the right way to do basic links?
Just use a relative link - this will work (note no slash at the beginning):
profile
This is because Electron uses local file:// URLs which map to your file system. If you link to /profile.html that will be looking for the file in the root of your drive, and you probably want it to be loading the file from the same directory instead.
Also if you put the profile.html in a directory called pages you could access it like this:
profile
Electron is designed to work best as a single-page application.
Clicking a link shouldn't load a new page but should manipulate the DOM to changes the contents on the same page.
If you use jquery you could use Tabs to swap between content https://jqueryui.com/tabs/
<a href="./profile.html>profile</a>
use ./{filename} to access the file in the same directory
I am starting a jquery mobile/phonegap application. And would like to know if there is any way I can keep my code in seperate files so it is easier to manage. From all the reading I have done on jquery mobile it looks like all of your pages are in one file and are just seperated by divs like <div data-role="page" id="page-one"></div>. I guess I could try to make some type of a makefile that concatenated them all together, but it seems that most apps are pretty lengthy that they should have a solution for this. Keeping all the code in one file just seems impossible to maintain.
JQuery demo, three pages, all one source file:
http://demos.jquerymobile.com/1.1.0/docs/pages/multipage-template.html
You can just use normal links with jQuery mobile:
http://demos.jquerymobile.com/1.4.0/navigation/
It will "hijack" the link and use transitions to give you a native like animation. As Flatlineato pointed out you need to make each page confirm to the required markup, and you'll need to repeat your headers/footers etc on each included page.
Or you can use more complex solutions to dynamically change the content of your page, which can be stored in multiple files, like this other SO post:
including the header and footer in jquery mobile multiple page site
But I would also agree with Leo and say the jQuery mobile isn't the best choice for Phonegap, it's not that well optimized, and runs slower in the Phonegap webkit view than it does in native safari.
I've also switched to a custom navigation system and dropped jQM early on in my Phonegap development, but that was over a year ago, more recent versions may work better.
I think my personal API is what you are searching for:
https://github.com/charnekin/api
Demo example:
http://yopo.es/cordovapi/
jQuery Mobile allows you to have the pages in separate files. Obviously in each file must conform to the structure of the markup pages.
To point to another page in the link instead of the id you specify the correct file name. If the file then you enter multiple jquery mobile pages must also specify the id.
This is my first question on SO so i'll try and make it as clear and as understandable as possible.
I've recently started messing around with Angular JS and currently I am working on a mobile app using Angular JS and jQuery Mobile. So far I've not had any major problems and so far have no had a need to consider any external libraries for integration (such as the angular js + jquery mobile adapter). I've created a multi-page app (currently only two pages) and used separate controllers for each page (login + content page). The app itself is simple, it's just a list keeping app and i've created a quick jsfiddle based on the ui aspect of the content page: http://jsfiddle.net/G7JNV/4/
The app works as expected from the jsfiddle. However because the content page is a page in the same html document (index.html) as the login page, to navigate to the content page the url becomes:
.../index.html#mainpage
(mainpage being the page for the list keeper)
Thats when things start getting funny. When the url is like above, when adding an item to the list, the item is initially unstyled (it doesn't look like it's part of the list) but the css styling for that item comes back after adding another item. Of course the next item is then unstyled (and so on).
If you want to see what the issue looks like:
Everything however works fine if i don't have the hash page as part of the URL (I tested this by turning the two page app into just one page for the content so that .../index.html goes straight to the content page). The css is applied to the dynamic content fine as one would expect.
Of course I have no idea why it's doing this and I suspect that it's something to do with how angular and jqm treat the hash anchor in the URL (but bare in mind I don't have much experience in both Angular JS nor jQuery Mobile).
Any help from any of the more experienced Angular JS (and jQuery Mobile) users would be greatly appreciated!
You should be creating a directive that encapsulates the list and the logic that you have for it.
As suggested in the comments to your questions, a timeout can work. If you're having issues with the element "flashing" or "flickering", you can use the ngCloak directive to deal with this.
You may also want to check out the $locationProvider configuration in your app and turn off HTML5 mode or set the hash prefix.
I'm fairly new to jquery mobile, and am getting an error when trying to link a file in my jquery mobile project for download. I would like a user to be able to download a .zip file from the app, but get either a page loading error, or undefined displayed in a new page. I tried using an anchor tag to link the file to download, but it doesn't seem to work right. I know jquery mobile makes use of the anchor tag, so I don't know if there is something special that needs to be done. Any help?
You are likely getting the exception when jQuery Mobile assumes the link is a page and attempts an AJAX page load. Disable AJAX loading on the link.
Link
And I have no idea what the typical mobile browser will do with a link to zip file.