Cannot navigate to dynamically added page in jquerymobile / phonegap - javascript

I just cant figure out where I am going wrong. I want to create a page dynamically in jquerymobile. Then append it to body and navigate to it when clicking on a link. Here is what I try:
In my html I've got a second page, which is sort of a basic structure for the dynamically generated one. So I clone it and append it to body. The action is triggered on "pagecreate" of the active page (but triggering it on pagebeforeshow or pageshow doesnot change anything).
$('#basic-page').clone().attr({'id':'uniqueid'}).appendTo($.mobile.pagecontainer);
Then I make it live like a page...
$('#uniqueid').page();
And finally I add a link to the active page.
$('#activepage .content').append('Test');
But when I click this link, nothing happens. What is wrong? Im Running jquerymobile 1.3.2 on phonegap 2.9.0

Instead of cloning a page, create a new page and modify it the way you want.
Demo
$('<div/>', {
'data-role': 'page',
id: 'foo',
'data-theme': 'e'
}).appendTo('body');
$.mobile.changePage('#foo');

You could try having something like.
$("#uniquieid").on("vclick", function (e) {
// Do your stuff here
// or navigate to the desired section of the page.
$.mobile.changePage("#uniqueid");
e.preventDefault();
});

Related

Need to click Javascript URL automatically on page load

I am using below Javascript function for the Link in the homepage. Requirement is to link clicked automatically on page load.
Link-
document.writeln("Live Chat");
I have tried below steps like adding document.getElementById('zautoclick').click(); and added id="zautoclick" before href but the problem is that my page does not show the link neither it loads the second page which comes after clicking on Live Chat.
Please share some logic to work auto click in my scenario.
try this out
1)
$(function() {
$('#watchButton').click();
});
2)
window.ready=function(){
document.getElementById("linkid").click();
};
3)
window.onload=function(){
document.getElementById("linkid").click();
};

jQuery : delete a page

I'm using jQuery mobile and my page is generated from an index.php file. When I click on links referring to another option of my php file (index.php?action=other_action) it loads in Ajax so the previous content is still kept in the code. This causes problems as nothing is dynamic anymore, because I'm using specific ids, so it breaks everything. Of course disabling Ajax works but I loose all the beauty of jQuery Mobile.
I guess a solution would be to create an onclick function on the <a>, that will prevent the page from keeping the previous content or delete the old page.
So is there a way to keep using ajax in a way that it doesn't break my dynamic elements ?
You can see it in action here, you can filter names if everything's good. Then click on the top left panel and click something, notice what happens in the inspector...
Thanks for any help.
Hi you have missed enclosing the selector within qoutes...
your jQuery
$(document).ready(function() {
//bind a listener to "click" event on links with class "markviewed"
$('a.ui-btn-present').click(function(event) {
$('ul.listlist').listview('refresh');
$(#pageone).remove(); //<-- selector should be within quotes
// get ids from clicked <a>
var id = $(this).attr('data-id');
$(this).attr({
"class" : "ui-btn ui-btn-icon-notext-ok ui-icon-check ui-btn-a"
});
After much more research I wasn't looking in the right direction: the problem was that the listview had to be refreshed. So I created a new function
<script>
function refreshlist() {
$('.listlist').listview("refresh");
$('#pageone').remove();
};
</script>
And then I added onclick= "refreshlist()"to all my links and now it works.

Alternative to jquery $(document).ready(handler) when using javascript page transitions

In a simple plugin for my wordpress site, I wrote code that sets up click events as follows:
$(document).ready(function() {
$("#myButton").click(function() {
//do stuff
});
});
This code works as expected when I load the relevant page directly. However, the way users are expected to access the page is through a link in the theme header. I am not really sure how page transitions in the theme work, but the end effect is that whenever a link is clicked, some animation happens, the page fades out, and the new page fades in. The problem is that $(document).ready() does not fire when the new page fades in, so the click handlers do not function.
How can I change the code so that the click handlers are registered at the time the new page fades in?
If it's necessary to see how the theme works, I am using the Bridge Theme. A demo version of the theme is available here.
UPDATE:
After playing with the theme page transitions a bit, I am suspecting that the theme is using ajax to get the new page content, fading out old page content, fading in new page content, then "artificially" modifying the url to show the new pages url.
If you bind your click event to the document it will apply to elements which are loaded or created after the document has loaded.
This can be done like so:
$(document).on('click', '#myButton', function() { /* ... */ });
you can use one of these methods:
The DOM way
window.onload = function() { // do stuff with the DOM }
The direct jQuery translation
$(document).ready(function() { // do stuff with the DOM });
The jQuery way
$(function() { // do stuff with the DOM });

Adding any additional JavaScript is breaking functionality within jQuery modal

I have a page created by someone else that contains modal windows, and each modal window has links/images that display on hover. FYI, I have a very limited understanding of JavaScript and jQuery.
What I am trying to achieve is to add Google Analytics event tags to the links in the modal windows. It would work with onclick (code below) added directly to the anchor tag, or if it is added to the link via jQuery/JavaScript). The event needs to fire as a click event in Google Anayltics.
Usually, I just add:
onclick="_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);"
directly to the anchor tag, but whenever I add the code to the anchor tag in the HTML, the jQuery stops working. The modal windows work correctly on this link:
http://cookware.lecreuset.com/cookware/content_cast-iron-guide-sizes_10151_-1_20002
and you can see what I mean by "stops working" on the following link - the items within the list tags are no longer being populated, which means the icons don't show up and the new content that displays on hover can't be accessed: http://cookware.lecreuset.com/cookware/content_test-form_10151_-1_20002
Since most of the links are created in the jQuery, I started by trying to add the Google Tag via .click, .attr, .on and .bind with no luck. The link above shows you my attempt with the .click function (search for CIGuide and you'll find it in the source on the 2nd link), but it breaks in the same way no matter what JavaScript I add to the page. My original question is here: Not able to successfully add Google Analytics Event Tag to link created by .attr
After I wasn't able to get either of those two things to work, I decided to try a simple alert on the page outside of all the content I was provided, with it's own JavaScript tags, just to see if I could get that to work. It worked perfectly, but the modal functionality still broke.
I have been able to successfully add the Google Tags to the anchor in the top navigation, and to the arrows on the left and right side of the page. But anytime I try to tag anything else, it breaks.
The agency I'm working with is able to add the google tag to the anchor with no issue when they test it on their server, and I am able to see the event fire if I test it on my local machine. I have to assume there is a problem on my server or with OpenCMS. However, I don't see any error messages in any browser/debugger, and I have validated my script additions with JSLint, and everything checks out.
This is driving me nuts! Can anyone help me figure out why this won't work and how I can add event tags to the page?
Not entirely sure what you're trying to achieve, and if it would work.
$(document).ready(function() {
$("#modal_sizes_1 a").each(function( index, elem ) {
$(elem).click(function() {
_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3']);
});
});
});
Update
Okay, so I think it's about this line:
<a
href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
title="About Cast Iron"
onclick="_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);"
>About Cast Iron</a>
And I would try to change it like this
<a
href="/cookware/content_cast-iron-guide-about_10151_-1_20002"
title="About Cast Iron"
onclick="setTimeout(function(){
_gaq.push(['_trackEvent','CIGuide', 'Click', 'About Cast Iron']);
},0);"
>About Cast Iron</a>
Or even make the delay longer than 0, like 10 or 50.
You can use the callback for the GA push method and add the timeout. In your case try something like this:
var submitBtn = $('.submit-btn');
submitBtn.on('click', function(e) {
var that = this;
if (typeof _gaq != 'undefined') {
e.preventDefault();
_gaq.push(['_trackEvent','Parameter 1', 'Parameter 2', 'Parameter 3'], function() {
setTimeout(function() {
window.location = $(that).attr('href');
}, 100);
});
}
});

jQuery Mobile anchor links to other page are not working

I'm creating a jQuery Mobile web application.
This link, works correctly:
Click Here 1<!--This is working-->
But, these links which have anchors are not working:
Click Here 2<!--This is not working-->
Click Here 3<!--This is not working-->
How to make those links that have # work with ajax navigation?
Edit: The page, which contains these links, contains some links to different articles. And /ThePage/25 contains the full text of that articles. I want each link to go to somewhere inside /ThePage/25. So I've used #. (#3 means the third article in the page)... Do you know any better way?
Edit 2: I'm simply trying to load/show a page and then jump within it...
Edit 3: My jump inside that page isn't a simple jumping. It's a custom handled jumping with hashchange event. But if there is any other method, I can change that page...
add rel="external" to any links that have an anchor # and you don't want to load via ajax.
New Links would be:
Click Here 2<!--This is not working-->
Click Here 3
See http://jquerymobile.com/demos/1.1.1/docs/pages/page-links.html for more detail.
You can try using this from JS like this , I had problems with # tags :
<a class='homeSet'>Home</a>
....
$('body').on('click', '.homeSet', function(ev) {
$.mobile.changePage('/home.html#myhome', {
transition : "slide"
});
return false;
});

Categories