CODEWITHSUNDEEP
javascriptjqueryhtmlajax
Fairplay89
Fairplay89

Reputation: 147

jQuery Load Divs Broken

I am trying to create an HTML order type page with 3 buttons using jQuery Mobile:

I've created the buttons and placed them properly on the page. Now, I'd like to display a unique form based on which button is clicked by the user.

Taking a look at examples it appears my options are jQuery, AJAX or Javascript. I'm already using jQuery so I tried going that route with no luck. Having added in the load HTML and JS Alert... my page will completely ignore the loading of HTML, but still display the alert. I've verified that my divs are properly named and that each link has a proper id set. So I gave up on jQuery for a bit.

On to javascript... add my logic in the between tags and again... it ignores loading of HTML content. I've tried putting things in divs, renaming divs, moving my form code to a seperate .html and .txt, but still no luck. I found a working example here and tried forcing its code into my page. Again, it does not load anything on button click when included in my page. (I'm using Chrome Version 35.0.1916.153)

Currently, the code for my page is as follows:

<head>
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">

    <title>Order Type</title>

    <script type="text/javascript">
        function showDiv(idInfo) {
          var sel = document.getElementById('divLinks').getElementsByTagName('div');
          for (var i=0; i<sel.length; i++) {
            sel[i].style.display = 'none';
          }
          document.getElementById('result'+idInfo).style.display = 'block';
        }
    </script>

    <link rel="stylesheet" href="assets/css/pp_mis_oa.css" />


    <!-- Standard jQquery Mobile themes can be created and replaced, to apply universal styling -->
    <!-- Go to: http://jquerymobile.com/themeroller/index.php to build one, and download it to the themes directory. -->
    <link rel="stylesheet" href="themes/jqm-test/theme.min.css" />

    <!-- Do not edit or remove the following jQuery framework files. -->
    <link rel="stylesheet" href="lib/jquery.mobile.structure-1.3.1.min.css" />
    <script src="lib/jquery-1.9.1.min.js"></script>
    <script src="lib/jquery.mobile-1.3.1.min.js"></script>
    <script src="http://code.jquery.com/jquery-1.4.min.js" type="text/javascript"></script>
</head>

<body>

    <!-- Start Main Landing Page -->
    <div data-role="page" data-theme="b" class="has_footer">

        <div data-role="content">
            <p>
            <div id="buttonDiv" data-role="navbar">
                <ul>
                    <li><a href="#" class="ui-btn-active ui-state-persist" id="eat_in" onclick="showDiv('1');return false">Pick Up</a></li>
                    <li><a href="#" id="take_out" onclick="showDiv('2');return false">Drop Off</a></li>
                    <li><a href="#" id="delivery" onclick="showDiv('3');return false">Ship It</a></li>
                </ul>
            </div><!-- /navbar -->
            <div id="result" style="clear:both;"></div>

        </div> <!-- End Content Div -->

        <!-- start footer -->
        <div data-role="footer" data-position="fixed" data-id="footer-nav" data-theme="d" class="footer-bar">
            <div class="ui-grid-solo">
                <div class="ui-block-a"><button type="v" data-theme="b">Continue</button></div>
            </div>
        </div><!-- end footer -->

    </div>
    <!-- End Main Landing Page -->

    <div id="divLinks">
        <div id="container1">Container #1<p>Whole bunch of text 1</div>
        <div id="container2">Container #2<p>Whole bunch of text 2</div>
        <div id="container3">Container #3<p>Whole bunch of text 3</div>
    </div>

</body>

What is going on here that jQuery/Javascript refuse to load in my content to my divs? Can someone help point me in the right direction?

Thank you!

Upvotes: 0

Views: 131

Answers (2)

Dustin Cochran
Dustin Cochran

Reputation: 1165

If you wanted to do this with jQuery, you could change your showDiv function to the following:

function showDiv(idInfo) {
  //hide all divs
  $('#divLinks div').each(function() { $(this).hide(); });
  //show the one selected
  $('#container'+idInfo).show();
}

To move content from your "container" divs to your "result" div:

function showDiv(idInfo) {
  //populate "result" div with selected content
  $('#result').html($('#container'+idInfo).html());
}

Upvotes: 1

Jordi Puig
Jordi Puig

Reputation: 224

I think you're trying to show divs with ids "result"+IdInfo where your div ids are container1, container2 and container3, so you should replace:

document.getElementById('result'+idInfo).style.display = 'block';

for

document.getElementById('container'+idInfo).style.display = 'block';

Also keep in mind that loading all the forms in the html (even if they are hidden) is not a good practice, so someone could see what he doesn't have to (and also can submit it). Consider to use some dynamic language (such PHP) to load only the form needed as the user type.

Upvotes: 1

Related Questions