Twitter Bootstrap Question posted in

Cant Access Partial View Button with jquery – Twitter bootstrap

Ok so I managed to get the button to load the next partial view from a main view but my action for the partial views button is not getting hit at all I have included all the jquery on the main layout file.

<!DOCTYPE html>

<html>
<head>
    <meta name="viewport" content="width=device-width" />

    <environment names="Development">
        <link rel="stylesheet" href="~/lib/bootstrap/dist/css/bootstrap.css" />
        <link rel="stylesheet" href="~/css/site.css" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
        <link rel="stylesheet" href="~/css/font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="~/css/form-elements.css">
    </environment>
    <environment names="Staging,Production">
        <link rel="stylesheet" href="https://ajax.aspnetcdn.com/ajax/bootstrap/3.3.7/css/bootstrap.min.css"
              asp-fallback-href="~/lib/bootstrap/dist/css/bootstrap.min.css"
              asp-fallback-test-class="sr-only" asp-fallback-test-property="position" asp-fallback-test-value="absolute" />
        <link rel="stylesheet" href="~/css/site.css" />
        <script src="https://code.jquery.com/jquery-1.12.4.js"></script>
        <script src="https://code.jquery.com/ui/1.12.1/jquery-ui.js"></script>
        <script src="~/js/site.min.js" asp-append-version="true"></script>
        <link rel="stylesheet" href="~/css/font-awesome/css/font-awesome.css">
        <link rel="stylesheet" href="~/css/form-elements.css">
    </environment>

    <script>
          $(document).ready(function () {
              $("#checkout").click(function () {

                   $.get('@Url.Action("LoadStage2", "Basket")', {}, function (response) {
                       $("#Display1").html(response);                    
                       $('#cart').slideUp();
    });
              });

          });
    </script>
    <script>
             $(document).ready(function () {
                 $("#backtoCart").click(function () {

                   $.get('@Url.Action("LoadStage2", "Cart")', {}, function (response) {
                       $("#Display").html(response);
                       $('#cart').slideUp();
    });
              });

          });

    </script>


</head>
<body>
    <div id="logo" class="logo">


    </div>

    <div class="container">
        <div class="row form-group">
            <div class="col-xs-12">
                <ul class="nav nav-pills nav-justified thumbnail setup-panel">
                    <li class="active">
                        <a href="#step-1">
                            <h4 class="list-group-item-heading">1. Cart</h4>
                            <p class="list-group-item-text">Final Cart</p>
                        </a>
                    </li>
                    <li class="disabled">
                        <a href="#step-2">
                            <h4 class="list-group-item-heading">2. Login</h4>
                            <p class="list-group-item-text">Account Login / Creation</p>
                        </a>
                    </li>
                    <li class="disabled">
                        <a href="#step-3">
                            <h4 class="list-group-item-heading">3. Your Details</h4>
                            <p class="list-group-item-text">Third step description</p>
                        </a>
                    </li>
                    <li class="disabled">
                        <a href="#step-3">
                            <h4 class="list-group-item-heading">4. Payment Details</h4>
                            <p class="list-group-item-text">Credit card,direct debit, paypal.</p>
                        </a>
                    </li>
                </ul>
            </div>
        </div>


        <div class="row setup-content" id="step-1">

            <div id="Display1"></div>
                   @Html.Partial("/Views/Basket/Cart.cshtml")

        </div>
        <div class="row setup-content" id="step-2">

                    <div id="Display"></div>

        </div>

        @RenderBody()

</body>

This is stage 2 code which is called from above but I cant seem to hit the button here at all in the partial view. Which is loaded into the display div. This is the button I am wanting to get to 

<button type="submit" id="backtoCart" class="btn">Back to Cart</button>

But I am thinking .ready function may not work in this case any ideas people 

<!-- Top content -->
<div class="top-content">

    <div class="inner-bg">
        <div class="container">


            <div class="row">
                <div class="col-sm-5">

                    <div class="form-box">
                        <div class="form-top">
                            <div class="form-top-left">
                                <h3>Login to our site</h3>
                                <p>Enter username and password to log on:</p>
                            </div>
                            <div class="form-top-right">
                                <i class="fa fa-key"></i>
                            </div>
                        </div>
                        <div class="form-bottom">
                            <form role="form" action="" method="post" class="login-form">
                                <div class="form-group">
                                    <label class="sr-only" for="form-username">Username</label>
                                    <input type="text" name="form-username" placeholder="Username..." class="form-username form-control" id="form-username">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-password">Password</label>
                                    <input type="password" name="form-password" placeholder="Password..." class="form-password form-control" id="form-password">
                                </div>
                                <button type="submit" class="btn">Sign in!</button>
                            </form>
                        </div>
                    </div>

                    <div class="social-login">
                        <h3>...or login with:</h3>
                        <div class="social-login-buttons">
                            <a class="btn btn-link-1 btn-link-1-facebook" href="#">
                                <i class="fa fa-facebook"></i> Facebook
                            </a>
                            <a class="btn btn-link-1 btn-link-1-twitter" href="#">
                                <i class="fa fa-twitter"></i> Twitter
                            </a>
                            <a class="btn btn-link-1 btn-link-1-google-plus" href="#">
                                <i class="fa fa-google-plus"></i> Google Plus
                            </a>
                        </div>
                    </div>
                    <button type="submit" id="backtoCart" class="btn">Back to Cart</button>
                </div>

                <div class="col-sm-1 middle-border"></div>
                <div class="col-sm-1"></div>

                <div class="col-sm-5">

                    <div class="form-box">
                        <div class="form-top">
                            <div class="form-top-left">
                                <h3>Sign up now</h3>
                                <p>Fill in the form below to get instant access:</p>
                            </div>
                            <div class="form-top-right">
                                <i class="fa fa-pencil"></i>
                            </div>
                        </div>
                        <div class="form-bottom">
                            <form role="form" action="" method="post" class="registration-form">
                                <div class="form-group">
                                    <label class="sr-only" for="form-first-name">First name</label>
                                    <input type="text" name="form-first-name" placeholder="First name..." class="form-first-name form-control" id="form-first-name">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-last-name">Last name</label>
                                    <input type="text" name="form-last-name" placeholder="Last name..." class="form-last-name form-control" id="form-last-name">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-email">Email</label>
                                    <input type="text" name="form-email" placeholder="Email..." class="form-email form-control" id="form-email">
                                </div>
                                <div class="form-group">
                                    <label class="sr-only" for="form-about-yourself">About yourself</label>
                                    <textarea name="form-about-yourself" placeholder="About yourself..."
                                              class="form-about-yourself form-control" id="form-about-yourself"></textarea>
                                </div>

                                <button type="submit" class="btn">Sign me up!</button>
                            </form>
                        </div>
                    </div>

                </div>
            </div>

        </div>
    </div>

Edit 2
Ok Suggesiton by admam is working but its closing my first div right away any ideas people

 <script>
 $("#checkout").click(function () {

       $.get('@Url.Action("LogInRegister", "Basket")', {}, function (response) {
           $("#Display1").html(response);
           $('#Display1').hide() 
        $('#Display').slideUp();
    //Bind now that #backtoCart exists in DOM
    $("#backtoCart").click(function () {
    $.get('@Url.Action("Cart", "Basket")', {}, function (response) {
    $("#Display").html(response);
    $('#cart').slideUp();
    });

    $('#Display').slideUp();
    });
    });
    });</script>
Tags:

2

Answers


  1. 0

    You really should be putting your scripts below the body, not in the head. Also, if you are bringing in a partial view with a button, you need to define the click listener after the view has been returned. Something like this…

    $(document).ready(function () {
     $("#checkout").click(function () {

           $.get('@Url.Action("LoadStage2", "Basket")', {}, function (response) {
                $("#Display1").html(response);   

                //Bind now that #backtoCart exists in DOM
                $("#backtoCart").click(function () {
                     $.get('@Url.Action("LoadStage2", "Cart")', {}, function (response) {
                     $("#Display").html(response);
                     $('#cart').slideUp();
                });

                $('#cart').slideUp();
           });
     });
});

    You can’t actually bind a click event until the HTML exists in the DOM.

    Login or Signup to reply.
  2. 0

    use On instead of Click event like this :

    $("#Display1").on("click","#backtoCart",function(){
        $.get('@Url.Action("LoadStage2", "Cart")', {}, function (response) {
        $("#Display").html(response);
        $('#cart').slideUp();

});
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search