javascript - how I can create 3 steps in the same modal window? - Stack Overflow

admin管理员组

文章数量:1400771

I need create in the same modal windows 3 steps.

1. Find a promoter.
2. Select activities of this promoter.
3. Install device in this selected activity.

PHP code loads steps and shows me something in the modal, I tried various forms but can not find a solution, for example I tried jQuery .load() but to no avail. Any help? Thank You!

My modal:

<script>
    $('#exampleModal').on('show.bs.modal', function (event) {
        $( "#modal-content" ).load( "{{ path("agc_asistente_actividad", {"paso": "1"}) }}" );
    })
</script>

<div class="modal fade bs-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div id="modal-content" class="modal-content">

        </div>
    </div>
</div>

Controller :

public function asistenteActividadAction($paso, Request $request){
        switch($paso){
            case "1" :
                return $this->render('AgcBackendBundle:asistente:paso1.html.twig');
            case "2" :
                $data = $request->request->get('data');
                $promotor = $data["promotor"];
                echo $promotor;
                return $this->render('AgcBackendBundle:asistente:paso2.html.twig');
            default:
                return $this->render('AgcBackendBundle:asistente:paso1.html.twig');
        }
    }

paso1.html.twig

<script>
    $('#next').click(function() {
        var data = [];
        data["promotor"] = $( "#recipient-promotor" ).val();
        $( "#modal-content" ).load( {{ path("agc_asistente_actividad", {"paso" : "2"}) }} + "/"+data);
    });
</script>
<div id="all">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="exampleModalLabel">Primer paso. <small>Localice al promotor titular de la actividad donde desea instalar el equipo</small></h4>
</div>
<div class="modal-body">
    <ol class="breadcrumb">
        <li class="active">Paso 1</li>
    </ol>
    <label for="recipient-promotor" class="control-label">DNI/CIF: </label>
    <input type="text" class="form-control" id="recipient-promotor">
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
    <button type="button" id="next" class="btn btn-primary">Buscar</button>
</div>
</div>

paso2.html.twig (this not load)

<script>
    $('#next').click(function() {
        var data = [];
        data["promotor"] = $( "#recipient-promotor" ).val();
        $( "document" ).load( {{ path("agc_asistente_actividad", {"paso" : "3"}) }} + "/"+data);
    });
</script>
<div id="all">
    <h1>prueba</h1>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="exampleModalLabel">Segundo paso. <small>Localice al promotor titular de la actividad donde desea instalar el equipo</small></h4>
</div>
<div class="modal-body">
    <ol class="breadcrumb">
        <li class="active">Paso 1</li>
    </ol>
    <label for="recipient-promotor" class="control-label">DNI/CIF: </label>
    <input type="text" class="form-control" id="recipient-promotor">
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
    <button type="button" id="next" class="btn btn-primary">Buscar</button>
</div>
</div>

I need create in the same modal windows 3 steps.

1. Find a promoter.
2. Select activities of this promoter.
3. Install device in this selected activity.

PHP code loads steps and shows me something in the modal, I tried various forms but can not find a solution, for example I tried jQuery .load() but to no avail. Any help? Thank You!

My modal:

<script>
    $('#exampleModal').on('show.bs.modal', function (event) {
        $( "#modal-content" ).load( "{{ path("agc_asistente_actividad", {"paso": "1"}) }}" );
    })
</script>

<div class="modal fade bs-example-modal-lg" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel">
    <div class="modal-dialog modal-lg">
        <div id="modal-content" class="modal-content">

        </div>
    </div>
</div>

Controller :

public function asistenteActividadAction($paso, Request $request){
        switch($paso){
            case "1" :
                return $this->render('AgcBackendBundle:asistente:paso1.html.twig');
            case "2" :
                $data = $request->request->get('data');
                $promotor = $data["promotor"];
                echo $promotor;
                return $this->render('AgcBackendBundle:asistente:paso2.html.twig');
            default:
                return $this->render('AgcBackendBundle:asistente:paso1.html.twig');
        }
    }

paso1.html.twig

<script>
    $('#next').click(function() {
        var data = [];
        data["promotor"] = $( "#recipient-promotor" ).val();
        $( "#modal-content" ).load( {{ path("agc_asistente_actividad", {"paso" : "2"}) }} + "/"+data);
    });
</script>
<div id="all">
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="exampleModalLabel">Primer paso. <small>Localice al promotor titular de la actividad donde desea instalar el equipo</small></h4>
</div>
<div class="modal-body">
    <ol class="breadcrumb">
        <li class="active">Paso 1</li>
    </ol>
    <label for="recipient-promotor" class="control-label">DNI/CIF: </label>
    <input type="text" class="form-control" id="recipient-promotor">
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
    <button type="button" id="next" class="btn btn-primary">Buscar</button>
</div>
</div>

paso2.html.twig (this not load)

<script>
    $('#next').click(function() {
        var data = [];
        data["promotor"] = $( "#recipient-promotor" ).val();
        $( "document" ).load( {{ path("agc_asistente_actividad", {"paso" : "3"}) }} + "/"+data);
    });
</script>
<div id="all">
    <h1>prueba</h1>
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">&times;</span></button>
    <h4 class="modal-title" id="exampleModalLabel">Segundo paso. <small>Localice al promotor titular de la actividad donde desea instalar el equipo</small></h4>
</div>
<div class="modal-body">
    <ol class="breadcrumb">
        <li class="active">Paso 1</li>
    </ol>
    <label for="recipient-promotor" class="control-label">DNI/CIF: </label>
    <input type="text" class="form-control" id="recipient-promotor">
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Cerrar</button>
    <button type="button" id="next" class="btn btn-primary">Buscar</button>
</div>
</div>

• javascript
• php
• jquery
• twitter-bootstrap
• modal-dialog

Share Improve this question Follow edited Jun 30, 2015 at 7:46 Ivan Javier Barranco Gavilan asked Jun 30, 2015 at 7:24 Ivan Javier Barranco GavilanIvan Javier Barranco Gavilan 50333 gold badges1111 silver badges2626 bronze badges 2

• share the code that you have tried.. – Sameer K Commented Jun 30, 2015 at 7:34
• When next button clicked in paso1.html.twig, whether request in ing inside $('#next').click function ?? – Sameer K Commented Jun 30, 2015 at 9:18

Add a ment  | 

1 Answer 1

Sorted by: Reset to default 4

Place your 3 steps within the same modal under separate divs (2 of which will always be hidden). Then you'll advance to the next step's div with some quick jQuery.

CSS Needed:

.hideMe {display: none;}

jQuery Needed:

$("#btnEndStep1").click(function () {
    $("#step1").addClass('hideMe');
    $("#step2").removeClass('hideMe');
});
$("#btnEndStep2").click(function () {
    $("#step2").addClass('hideMe');
    $("#step3").removeClass('hideMe');
});
$("#btnEndStep3").click(function () {
    // Whatever your final validation and form submission requires
    $("#sampleModal").modal("hide");
});

Keeps it simple and pact. Here's an example - https://jsfiddle/32rL6gxk/

本文标签： javascripthow I can create 3 steps in the same modal windowStack Overflow