I'm using ace-admin template (http://ace.jeka.by/) for my CI3 project. I want to populate a modal form from my view. it's working if i put code of modal on the same view, exemple :
<a href="#modal-table" role="button" class="green" data-toggle="modal">
<button class="btn btn-sm btn-default" id="myBtn">
<i class="ace-icon fa fa-plus align-top"></i>
Modal
</button>
</a>
<div id="modal-table" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
Results for "Latest Registered Domains
</div>
<div class="modal-body no-padding">
azerty
</div>
<div class="modal-footer no-margin-top">
<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Closee
</button>
</div>
</div>
</div>
</div>
But if i change href to send it to controller like this :
<a href="<?php echo base_url();?>ctl/add/" role="button" class="green" data-toggle="modal">
<button class="btn btn-sm btn-success" id="myBtn">
<i class="ace-icon fa fa-plus align-top"></i>
New
</button>
</a>
and on controller :
$this->theme_view = 'modal';
$this->render('parametres/utilisateurs/_new', $data);
the render function :
if (isset($this->theme_view)) {
$template = 'modal';
} else {
$template = 'master_view';
}
$name = 'contents';
$this->load->view('layouts/'.$template, $this->template_data);
And the modal layouts :
<div id="modal-table" class="modal fade" tabindex="-1">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header no-padding">
Results for "Latest Registered Domains
</div>
<div class="modal-body no-padding">
<?=$contents;?>
</div>
<div class="modal-footer no-margin-top">
<button class="btn btn-sm btn-danger pull-left" data-dismiss="modal">
<i class="ace-icon fa fa-times"></i>
Closee
</button>
</div>
</div>
</div>
</div>
the view appear not like a modal form but in new page.
Any idea for this ?
Related
I have 3 components in my vue js
create.vue
list-user.vue
modal-role.vue
in my create.vue i call the 2 other component,
<template>
<div>
<modal-role></modal-role>
<list-user></list-user>
</div>
</template
these 2 components are all modal
modal-role.vue
<template>
<div>
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-bs-toggle="modal" data-bs-target="#modalRole">
add members
</button>
<!-- Modal -->
<div class="modal fade" id="modalRole" tabindex="-1" aria-labelledby="modalRoleLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalRoleLabel">Role</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
</div>
<div class="modal-body">
<ul class="list-group">
<li #click="selectRole(item)" data-bs-toggle="modal" data-bs-target="#modalUser" data-bs-dismiss="modal" class="list-group-item list-group-item-action" v-for="item in roles" :key="item.id"> {{ item.name }} </li>
</ul>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">Cancel</button>
</div>
</div>
</div>
</div>
</div>
</template>
list-user.vue
<div class="modal fade" id="modalUser" tabindex="-1" aria-labelledby="modalUserLabel" aria-hidden="true">
<div class="modal-dialog" v-if="role">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="modalUserLabel">Choose members as {{ role.name }} </h5>
<button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close" #click="dismiss()"></button>
</div>
<div class="modal-body">
<ul class="list-group">
<li
class="list-group-item list-group-item-action"
v-for="item in users" :key="item.id"
>
{{ item.name + ' ' + item.surname}}
</li>
</ul>
<div class="row justify-content-center" v-if="!isLast">
<button class="btn btn-primary" #click="loadMore()">
View more
</button>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal" #click="dismiss()">Cancel</button>
<button type="button" class="btn btn-primary" #click="choose()" data-bs-dismiss="modal">Choose</button>
</div>
</div>
</div>
</div>
So in my create.vue when i have button from my modal-vue to show a modal with list of role,
in my modal-role.vue what i expected is when i select one role, it dismiss the modal on modal-role.vue and show a new modal that is in list-user.role but I got an error:
app.js:14656 Uncaught TypeError: Illegal invocation
at Object.findOne (app.js:14656:44)
at Modal._showElement (app.js:16567:38)
at app.js:16490:35
at execute (app.js:13914:5)
at app.js:16196:7
at execute (app.js:13914:5)
at HTMLDivElement.handler (app.js:13937:5)
and if tried to put the modal in list-user.vue to modal-role.vue, it work but if the second modal dismiss but i still have the overlay background from one of these 2 modals
EDIT
When i show the first modal, got 2 modal backdrop in my element.
I got the problem here, i put a v-if in my modal-dialog div in my list-user.vue, so my modal have no div dialog in mounted then modal bootstrap can't call it to show, so i move my if statement in my modal-content and it work well
So I want to use bootstrap modal in my project, I followed the official bootstrap documentation about modal, to test it out I just simply copy and paste the code to my blade. and somehow after I press the button the modal is not showing up. I pretty much sure followed the documentation.
and I realized that this also happens to the dropdown function
can anyone help me with this?
Modal
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary" data-toggle="modal" data-target="#exampleModal">
Launch demo modal
</button>
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">Modal title</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div>
</div>
</div>
Dropdown:
<div class="dropdown">
<button class="btn btn-secondary dropdown-toggle" type="button" id="dropdownMenuButton" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
Dropdown button
</button>
<div class="dropdown-menu" aria-labelledby="dropdownMenuButton">
<a class="dropdown-item" href="#">Action</a>
<a class="dropdown-item" href="#">Another action</a>
<a class="dropdown-item" href="#">Something else here</a>
</div>
</div>
shout out to Rouhollah Mazarei and Rwd after reading their comment, I did some recheck on the code and found out that the js and css include code is missing. It still works on my other blade so I thought it already included. thanks
I make button on index.php file and want call modal in another page, because when modal in same file and i refresh the page modal seen temporarily.
index.php
<a href="modal.php" data-target="#cancel{{ $form->id }}" class='btn btn-danger btn-sm' data-toggle="modal">Cancel</button>
modal.php
#foreach($list_form as $form)
<div class="modal fade" id="cancel{{ $form->id }}" tabindex="-1" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog modal-sm">
<div class="modal-content">
<div class="modal-header" style="background-color: red;">
<h3 class="modal-title h3" id="exampleModalSmLabel" style="color: white;"><b>Cancel Description</b>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true"><h1><b>×</b></h1></span>
</button>
</h3>
</div>
<div class="modal-body">
#if(auth()->user()->role == 'Admin')
<form action="{{ route('form001.cancel', $form->id) }}" method='post'>
#csrf
<div class="form-group">
<label for="cancel_deskripsi">Alasan Cancel</label>
<textarea class="form-control" id="cancel_deskripsi" name="cancel_deskripsi" placeholder="tuliskan alasan anda..."></textarea>
</div>
<div class="modal-footer">
<button type='submit' class='btn btn-danger btn-sm'>Submit</button>
</div>
</form>
#endif
{{ $form->cancel_deskripsi }}
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
#endforeach
Am I doing writing anything wrong?
I am currently learning ajax and have some problems with it. Whenever I reload the page I get over the data attributes of the modal no more data. Do I give the data wrong to the modal? Or do I have to reload something else?
The second problem is, the data in the modal or the input fields are displayed to me, but when I pass them to the controller and save there are no data available.
View
#foreach ($todolistprivate as $list)
<div id="todo-list-{{$list->id}}" class="panel panel-default panel-primary margin-bottom-0">
<div class="panel-heading panel-pointer">
<span class="elipsis"><!-- panel title -->
<strong>{{ $list->title }}</strong> <span class="label label-info white">0</span>
</span>
<ul class="options pull-right relative list-unstyled hover-visible">
<li><a data-toggle="modal" data-target=".task-modal" class="btn btn-success btn-xs white hover-hidden">
<i class="fa fa-plus"></i> Erstellen
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-update-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-info btn-xs white hover-hidden">
<i class="fa fa-edit"></i> Bearbeiten
</a>
</li>
<li><a data-toggle="modal" data-target=".todolist-destroy-modal" data-id="{{ $list->id }}" data-title="{{ $list->title }}" data-description="{{ $list->description }}" class="btn btn-danger btn-xs white hover-hidden">
<i class="fa fa-times"></i> Löschen
</a>
</li>
<li></li>
</ul>
</div>
<div class="panel-body">
<div class="slimscroll min-height-30 max-height-100">
{{ $list->description }}
</div>
</div>
</div>
#endforeach
Modal
<div class="modal fade todolist-update-modal" tabindex="-1" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
<h4 class="modal-title">Bearbeite diese Liste</h4>
</div>
<div class="modal-body">
<form>
<input type="hidden" name="id" id="id" value="">
<div class="form-group">
<label for="" class="control-label">Titelname</label>
<div class="fancy-form">
<i class="fa fa-header"></i>
<input id="title" name="title" type="text" class="form-control input-lg" placeholder="Titel">
</div>
</div>
<div class="form-group">
<label for="" class="control-label">Beschreibung</label>
<div class="fancy-form">
<textarea id="description" name="description" rows="2" class="form-control" placeholder="Beschreibe deine Aufgabe"></textarea>
<i class="fa fa-comments"><!-- icon --></i>
</div>
</div>
<div class="form-group">
<label for="" class="control-label">Privatsphäre</label>
<div class="fancy-form fancy-form-select">
<select id="privacy" name="privacy" class="form-control">
<option value="0">Öffentlich</option>
<option value="1">Privat</option>
</select>
<i class="fancy-arrow"></i>
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success" id="update-todo-list">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Function:
$('.todolist-update-modal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget);
var title = button.data('title');
var description = button.data('description');
var id = button.data('id');
var modal = $(this);
modal.find('.modal-body input').val(title);
modal.find('.modal-body textarea').val(description);
modal.find('.modal-body #id').val(id);
});
$(document).on('click','#update-todo-list', function(e) {
e.preventDefault();
var _token = $("input[name='_token']").val();
var title = $("input[name='title']").val();
var description = $("textarea[name='description']").val();
var privacy = $("select[name='privacy']").val();
var id = $("input[name='id']").val();
$.ajax({
url:'/admin/tasks/update/'+id,
type: 'Put',
data: {_token:_token, title:title, description:description, privacy:privacy, id:id, _method:'put'},
dataType: 'json',
success: function (data) {
if (data.error) {
_toastr((data.error),"top-full-width","error",false);
console.log(data);
}
else{
$('.todolist-update-modal').modal('hide');
$("#wrapper").load(location.href+" #wrapper>*","");
_toastr((data),"top-full-width","success",false);
console.log(data);
}
}
});
});
Im displaying a treeview data and everything works perfecly.
But when i add the fourth raw, Laravel crash.
I want to post my code but i don't even know which one and where that came from..
view :
<div class="list-group">
<div class="col-md-12">
<div class="col-md-2">Departement</div>
<div class=" float-right">
<button class=" btn-primary" type="button" data-toggle="collapse" data-target=".multi-collapse" aria-expanded="false" aria-controls="multiCollapseExample1" >
<span class="glyphicon glyphicon-eye-open"></span></button>
<button type="submit" class="btn btn-warning " data-toggle="modal" data-target="#exampleModalposition"><span class="glyphicon glyphicon-plus-sign"></span></button> </div>
</div>
<div class="list-group-item" name="state">
#foreach($treeViewPosition as $departement)
<div class=" collapse multi-collapse collapse in " id="8" >
<div class="col-md-2"> {{ $departement->departement_name}}</div>
<div class=" float-right"><button class="btn btn-success" data-toggle="collapse" data-target="#{{ $departement->id}}8" aria-expanded="false" aria-controls="{{ $departement->id}}8">
<span class="glyphicon glyphicon-eye-open"></span></button></div>
<div class="list-group">
#if(count($departement->position))
#include('treeposition2',['position'=>$departement->position])
#endif
</div>
#endforeach
</div>
</div>
</div>