Support the ongoing development of Laravel.io →
Eloquent Blade Forms
  • I am working on app, which required a form in bootstrap modal and also load the form dynamically. i am facing the problem all of the page is loaded in modal again.
// index.blade
 <a class="btn btn-primary pull-right addProjectModal" data-toggle="modal" data-target="#ProjectModal" href="projects/jsModal"><i class="fa fa-pencil"></i> Add Project</a>

<!-- 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>

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

// view/modal.from
{{ Form::open(array('url'=>'projects/jsModal', 'class'=>'frmCreateProject')) }}
<div class="modal-header">
    <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</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() }}

// JS file
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');
});


// route
Route::get('projects/jsModal', 'ProjectsController@loadJsModalForm');

anybody here provide the right file structure and route setting.

thanks.

Last updated 3 years ago.
0

Hey man, why don't you just http://bootboxjs.com/ or https://github.com/jschr/bootstrap-modal. We better don't reinvent the wheel. :D

Last updated 3 years ago.
0

Sign in to participate in this thread!

Eventy

Your banner here too?

webtuts4u webtuts4u Joined 11 Aug 2014

Moderators

We'd like to thank these amazing companies for supporting us

Your logo here?

Laravel.io

The Laravel portal for problem solving, knowledge sharing and community building.

© 2025 Laravel.io - All rights reserved.