javascriptjqueryhtmljquery-mobilename-conflict

Possible conflict betwen jquery and jquery mobile versions when trying to use Tipue Search 4.0

I am trying to get search up and running on my website. Right now the search either does nothing or spinner endlessly spins and nothing loads or I get "ERROR LOADING PAGE." I feel that this may be due to a jquery and jquery mobile conflict.

jquery.min.js is version 1.11.1 jquery mobile is 1.4.3

Hope you can help!

Here is the index.html

<!DOCTYPE HTML>
<html>
    <head>    
        <!-- jQuery -->
        <script src="js/jquery.min.js"></script>           
        <!-- jQueryMobile -->
        <script src="js/jquery.mobile.min.js"></script>
    </head>
    <body>

        <div data-role="page" data-theme='b'>
          <div class="block">
            <form action="search.html">
              <input type="text" name="q" id="tipue_search_input" autocomplete="off">
            </form>
          </div> 
       </div> 
    </body>
</html>

This is the search.html (as it states to do in tipue docs)

<!DOCTYPE HTML>
<html>
    <head>
    <title>TEST</title>            
        <!-- jQuery -->
        <script src="js/jquery.min.js"></script>           
        <!-- jQueryMobile -->
        <script src="js/jquery.mobile.min.js"></script>
<script type="text/javascript" src="tipuesearch/tipuesearch_set.js"></script>
<script type="text/javascript" src="tipuesearch/tipuesearch_content.js></script>
<link rel="stylesheet" type="text/css" href="tipuesearch/tipuesearch.css">
<script type="text/javascript" src="tipuesearch/tipuesearch.js"></script>
    </head>
    <body>  
        <div data-role="page" data-theme='b'>
          <div data-role="content">

                    <div class="block" ><form action="search.html">
<input type="text" name="q" id="tipue_search_input" autocomplete="off" required placeholder="Enter manufactuer or part number" >
</form>

                 </div> </div> 

<div id="tipue_search_content"></div>


 </div> 


<script>
$(document).ready(function() {
     $('#tipue_search_input').tipuesearch({
          'show': 6
     });
});
</script>
    </body>
</html>
Solution

  • In case anyone is wondering this was simply a slight lack of JQM experience. Disabling ajax on the form solved the problem ()