Estoy trabajando en una aplicación que requiere un formulario modal de bootstrap y también se carga de forma dinámica. me estoy enfrentando el problema de la página se carga en modal de nuevo. Nadie aquí proporcionar cualquier ejemplo de esto..?

//Controlador de

public function loadJsModalForm() {
    return View::make('frmModals.frmProject');
}

//index.hoja

@section('Modal')
<!-- Modal -->
<div class="modal fade" id="ProjectModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content" id="frmAddProject"></div>
    </div>
</div>
@stop

//formulario Modal

{{ Form::open(array('url'=>'projects/jsModal', 'class'=>'frmCreateProject')) }}
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span></button>
    <h4 class="modal-title" id="myModalLabel">Create Project</h4>
</div>
<div class="modal-body">
    <div class="row">
        <div class="col-lg-12">
            <div class="form-group">
                {{ Form::label('Project Title') }}
                {{ Form::text('project_title', null, array('class'=>'form-control', 'placeholder'=>'Project title')) }}
            </div>
        </div>
    </div>
</div>
<div class="modal-footer">
    <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
    {{ Form::submit('Submit', array('class'=>'btn btn-primary')) }}
</div>
{{ Form::close() }}

//main.js

function openMdoal(link, div){
    $(link).on('click', function(e){
        e.preventDefault();
        $('#'+div).html('<div style="text-align:center;"><img src="../img/spinner.gif"/><br/><br/><h3 class="text-primary">Loading Form...</h3></div>');
        $(div).load(
            $(this).attr('href'),
            function(response, status, xhr) {
                if (status === 'error') {
                    //console.log('got here');
                    $(div).html('<p>Sorry, but there was an error:' + xhr.status + ' ' + xhr.statusText+ '</p>');
                }
                return this;
            }
        );
    });
}

$(document).ready(function(){
    openMdoal('.addProjectModal', '#frmAddProject');
});

//Ruta

Route::get('projects/jsModal', '[email protected]');  

Gracias

  • Por favor enviar su código, de modo que podemos obtener de contexto.
  • #olive_tree el código se actualiza, espero que proporcionan mucha información.
InformationsquelleAutor CodeBriefly | 2014-08-11

2 Comentarios

  1. 12

    esta es una tardía respuesta, pero quería cargar todos los verbos modales de forma dinámica en lugar de tenerlos en el marcado, así que las vistas creadas para cada uno de ellos – para eliminar, editar, etc., sólo la parte interna (de contenido)

    en index.blade.php tengo un esqueleto modal:

    <div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
        <div class="modal-dialog">
            <div class="modal-content load_modal"></div>
        </div>
    </div>

    y botones para diferentes acciones:

    <button type="button" class="btn btn-danger" data-toggle="modal"  data-id="{{ $id  }}" data-post="data-php" data-action="delete">Delete </button>

    y, a continuación, llamar en el botón haga clic en el contenido de los diferentes verbos modales, habiéndose separado vistas de cada modal, por ejemplo modal_delete.blade.php se parece a:

    <div class="modal-body">
        <em>Are you sure that you want to delete</em>?
     </div>
     <div class="modal-footer">
       <button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
    
       <button type="button" class="btn btn-danger photo-delete" data-slug="">Delete</button>
     </div>

    en controlador de hice un método para todas las acciones:

    /**
         * load modals dynamically - for edit, delete,create
         * GET /folder/{id}/load-{action}
         * 
         * @param string $action
         * @param int $id
         * @return Response
         */
        public function loadModal($id, $action)
        {
           //return view for specified action
           //if action is delete, call this view, etc...
            return View::make('admin.photos.modal_delete')->render();
        }

    en las rutas:

    Route::get('photos/{id}/load-{action}','[email protected]');

    y, finalmente, JS para cargar el contenido:

    $('button').on('click', function(){
        var this_id = $(this).attr('data-id');
        var this_action = $(this).attr('data-action');
        if(this_action == 'edit'){
    
            $.get( base_url + this_id + '/load-' + this_action, function( data ) {
                $('#myModal').modal();
                $('#myModal').on('shown.bs.modal', function(){
                    $('#myModal .load_modal').html(data);
                });
                $('#myModal').on('hidden.bs.modal', function(){
                    $('#myModal .modal-body').data('');
                });
            });
        }
    });

    De esta manera mi html es más limpio. Espero que esto ayude a alguien, como bien estoy abierto a sugerencias 🙂

    • Impresionante! Gracias por compartir!
  2. 2

    Actualizado Ángel M. del respuesta para Laravel 5.4

    en index.blade.php tengo un esqueleto modal:

    <div class="modal fade" id="myModal">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
                <h4 class="modal-title"></h4>
            </div>
            <div class="modal-body load_modal">
    
            </div>          
        </div>
    </div>

    y botones para diferentes acciones:

    <button type="button" title="View Profile" class="btn btn-info btn-simple btn-xs" data-toggle="modal" data-target="#user" data-id="{{ $user->id  }}" data-post="data-php" data-action="view" data-title="Mais sobre:"><i class="fa fa-user"></i></button>
    <button type="button" title="Edit Profile" class="btn btn-success btn-simple btn-xs" data-toggle="modal" data-target="#user" data-id="{{ $user->id  }}" data-title="Editar" data-post="data-php" data-action="edit"><i class="fa fa-edit"></i></button>

    controlador hice un método para todas las acciones:
    $modal es el nombre de la vista en los datos de la acción, por ejemplo: delete.blade.php

    public function loadModal($modal, $id, $action)
    {
        $user = $user = User::findOrFail($id);
       //return view for specified action
       //if action is delete, call this view, etc...
        return view('admin.includes.modal.'.$modal, compact('user'));
    }

    en las rutas:

    Route::get('{modal}/{id}/load-{action}','Admin\[email protected]');

    y, finalmente, JS para cargar el contenido:

    $('button').on('click', function(){
        var this_id = $(this).attr('data-id');
        var this_action = $(this).attr('data-action');
        var title = $(this).attr('data-title');
        var base_url = this_action+'/';
        if(this_action == this_action){
            $.get( base_url + this_id + '/load-' + this_action, function( data ) {
                $('#myModal').modal();
                $('#myModal').on('shown.bs.modal', function(){
                    $('#myModal .load_modal').html(data);
                    $('.modal-header .modal-title').html(title);
                });
                $('#myModal').on('hidden.bs.modal', function(){
                    $('#myModal .modal-body').data('');
                });
            });
         }
    });
    • Puede resaltar las diferencias entre la respuesta original y su versión de la actualización?

Dejar respuesta

Please enter your comment!
Please enter your name here