Hi everyone
Im using jquery mobile to build a custom theme. Ive got everything working there is only one issue. Im using mappress to display business location data.
When i add a map to the post then the listview in jquery mobile works, but im not able to click the link to the post. If i remove the mappress map from the post then the link works fine. For example in a listview i have 5 posts with custom post type and custom taxonomy query. if i add maps to 2 of those posts you will find the other 3 posts works fine in the listview but if i click the two posts with maps in the list view nothing happens besides a spinning jquery mobile standard icon which means loading.
i have had a chat to the plugin author chris, he is not expert in jquery mobile and cannot help. After a few tests we have narrowed down the issue to jquery mobile conflict and the plugin js conflicts.
Is there anyone that can replicate or fix this issue? I really like mappress and would hate to use another google maps wordpress plugin as there is nothing that competes with the mashups ect:)
the listview query i use is
<?php /* Template Name: taxonomy-capetown-cpt-cuisine */ ?> <?php get_header(); ?> <?php $args=array( //'your_registered_taxonomy_name' => 'taxonomy_term_slug' 'capetown' => 'cpt-cuisine', 'post_type' => 'business', 'posts_per_page' => 10, 'caller_get_posts'=> 1 ); $my_query = null; $my_query = new WP_Query($args); if( $my_query->have_posts() ) { while ($my_query->have_posts()) : $my_query->the_post(); ?> <ul data-role="listview" data-theme="c" data-inset="true"> <li> <a href="<?php the_permalink(); ?>"> <img style="margin-left: 0px; height: 85px;" alt="sample" src="<?php the_field('business_logo'); ?>" align="left"/> <h2><?php the_title(); ?></h2> <p><?php the_field('business_slogan'); ?></p></a> </li> </ul> <?php endwhile; } wp_reset_query(); // Restore global post data stomped by the_post().?> <?php get_footer(); ?>the jquery mobile CDN i am using is
<link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script>my header file looks like this
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd"> <html xmlns="http://www.w3.org/1999/xhtml" <?php language_attributes(); ?>> <head profile="http://gmpg.org/xfn/11"> <meta http-equiv="Content-Type" content="<?php bloginfo('html_type'); ?>; charset=<?php bloginfo('charset'); ?>" /> <meta name="viewport" content="width=device-width, initial-scale=1"> <?php if (is_search()) { ?> <meta name="robots" content="noindex, nofollow" /> <?php } ?> <title> <?php if (function_exists('is_tag') && is_tag()) { single_tag_title("Tag Archive for ""); echo '" - '; } elseif (is_archive()) { wp_title(''); echo ' Archive - '; } elseif (is_search()) { echo 'Search for "'.wp_specialchars($s).'" - '; } elseif (!(is_404()) && (is_single()) || (is_page())) { wp_title(''); echo ' - '; } elseif (is_404()) { echo 'Not Found - '; } if (is_home()) { bloginfo('name'); echo ' - '; bloginfo('description'); } else { bloginfo('name'); } if ($paged>1) { echo ' - page '. $paged; } ?> </title> <link rel="shortcut icon" href="/favicon.ico" type="image/x-icon" /> <link rel="stylesheet" href="<?php bloginfo('stylesheet_url'); ?>" type="text/css" /> <link rel="pingback" href="<?php bloginfo('pingback_url'); ?>" /> <?php if ( is_singular() ) wp_enqueue_script( 'comment-reply' ); ?> <?php wp_head(); ?> <link rel="stylesheet" href="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.css" /> <script src="http://code.jquery.com/jquery-1.8.2.min.js"></script> <script src="http://code.jquery.com/mobile/1.2.0/jquery.mobile-1.2.0.min.js"></script> <script language="javascript"> $(document).bind('pageinit', function() { /** * you can't use css to position the element * because the window height is a variant, * so we use this function to calculate */ $('#popupPanel').on({ popupbeforeposition: function() { var h = $(window).height(); $('#popupPanel').css('height', h); } }); }); </script> </head> <body <?php body_class(); ?>> <div data-role="page" data-theme="b" data-add-back-btn="true" data-back-btn-text="Back"> <div data-role="header" id="header" data-theme="b"> <h1><?php bloginfo('name'); ?></h1> </div> <div data-role="content">my footer code looks like so
` </div><!-- data role content-->
<footer data-role="footer" data-position="fixed" style="height:65px">
<div data-role="navbar" data-iconpos="top" data-grid="d">
</div><!-- /navbar -->
</footer>
<?php wp_footer(); ?>
</div><!-- data role content-->
</body>
</html>
Any help will be greatly appreciated, any expert developer that can help take time to fix this can ask for donations or mark a price to help fix this for me.