How to embed external js script to over-ride jquery mobile functions/what to include?

StackOverflow https://stackoverflow.com/questions/23484826

Question

My overall intention is to over-ride the .click function of an element with a certain id, so that a button will replace only the contents of a specific element (not the whole page).

I am under the impression that I am running into trouble when embedding the script file, or in some of the coding in the script file.

I have come to this conclusion due to the fact that when my HTML and JS files are pasted into their respective windows on JSFiddle.net, that it works.

However, when I try to run the file from localhost, it is as though my .js file is not over-riding the .click function.

Any help is appreciated.

  <!DOCTYPE html>
  <html>
  <head>
     <title>NoteVote</title>
     <meta name="viewport" content="width=device-width, initial-scale=1">
     <link rel="stylesheet" href="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.css">
     <link rel="stylesheet" href="./NV_home.css">

     <script src="http://code.jquery.com/jquery-1.10.2.min.js"></script>

     <script src="./scripts/navScript.js"></script>

     <script src="http://code.jquery.com/mobile/1.4.2/jquery.mobile-1.4.2.min.js"></script>
  </head>
  <body>

  <!-- COURSES page -->
  <div data-role="page" id="noteVote">
     <div data-role="header" align="middle" class="header">
        <img src="./images/banner_post_it.png" align="middle" alt="Banner Image" height="100" width="250"/>
        <!-- This is the Navbar -->
        <div data-role="navbar" data-grid="c" id="navBar">
           <ul>
              <li><a class="ui-btn" id="coursesButton">Courses</a></li>
              <li><a class="ui-btn" id="searchButton">Search</a></li>
              <li><a class="ui-btn" id="submitButton">Submit</a></li>
              <li><a class="ui-btn" id="accountButton">Account</a></li>
           </ul>
        </div>
     </div>

     <!-- This is the MAIN section -->
     <div data-role="content" class="ui-content" id="coursesContent">
           Main section
     </div>

     <!-- FOOTER -->
     <div data-role="footer" class="footer">
        SomeText
     </div>
  </div>
  <!-- /COURSES -->

  <!-- SEARCH -->
  <div data-role="page" id="search">

     <!-- This is the MAIN section -->
     <div data-role="content" class="ui-content" id="searchContent">
        <h1>Search Section</h1>
     </div>

  </div>

  </body>
  </html>

I believe I have linked the scripts in the correct order: JQuery, my_custom, JQuery Mobile.

So is it in my custom script that there is the error?

  $("#searchButton").click( function() {
     $('#coursesContent').html( $('#searchContent').html() )
  });

If there is a better/easier way to do this, please let me know.

I have searched the internet for solutions, and I found that the order in which the scripts are loaded is important. I also tried inserting my script code inside a "$(document).bind("mobileinit", function(){ " function, which did not yield the results I'd hoped for.

I'm obviously quite new to JavaScript, and JQuery.

Thanks for your help, people.

Was it helpful?

Solution

You're right - order of the script is important (all lib's have to be loaded before you can refer to them).

You may use alternative javascript for this purpouse:

$(document).ready(function()
                  {
                      $(document).on("click","#searchButton",function(e)
                                     {
                                         e.preventDefault();
                                         alert('And now what? Click will not take me anywhere...');
                                         $('#coursesContent').html($('#searchContent').html());                                        
                                     });
                  });

Try to put this code at the bottom of the page (before </body>) and check browsers console for any other JS errors. This is working example: http://jsfiddle.net/3Qaq7/1/

Licensed under: CC-BY-SA with attribution
Not affiliated with StackOverflow
scroll top