Support » Plugins » Jquery mobile listview query post not working

  • waynmeyer

    (@waynmeyer)


    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">
    
    <ul>
    <li><a href="venta.html"><img style="margin-top: 0px;" src="http://domain.co.za/wp-content/themes/Bizcloud-mobile-app/images/bizcloud-app-icon.png" width="60%" height="auto"><p style="font-size: 12px;">Bizcloud</p></a></li>
    <li><a href="venta.html"><img style="margin-top: 0px;" src="http://domain.co.za/wp-content/themes/Bizcloud-mobile-app/images/shop-app-icon.png" width="60%" height="auto"><p style="font-size: 12px;">Shop</p></a></li>
    <li><a href="venta.html"><img style="margin-top: 0px;" src="http://domain.co.za/wp-content/themes/Bizcloud-mobile-app/images/promo-app-icon.png" width="60%" height="auto"><p style="font-size: 12px;">Promo</p></a></li>
    <li><a href="venta.html"><img style="margin-top: 0px;" src="http://domain.co.za/wp-content/themes/Bizcloud-mobile-app/images/maps-app-icon.png" width="60%" height="auto"><p style="font-size: 12px;">Maps</p></a></li>
    <li><a href="venta.html"><img style="margin-top: 0px;" src="http://domain.co.za/wp-content/themes/Bizcloud-mobile-app/images/maps-app-icon.png" width="57%" height="auto"><p style="font-size: 12px;">Maps</p></a></li>
    </ul>
        </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.

  • The topic ‘Jquery mobile listview query post not working’ is closed to new replies.