Bootstrap twitter modal is slow to load on iPad - performance

I'm using the standard modal popup from twitter bootstrap ui team without the fade property: http://getbootstrap.com/javascript/#modals
<div class="modal">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" ng-click="cancel()">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
<ul>
<li ng-repeat="item in items">
<a ng-click="selected.item=item">{{item}}</a>
</li>
</ul>
<div>Selected Item: {{selected.item}}</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" ng-click="cancel()">Close</button>
<button type="button" class="btn btn-primary" ng-click="ok()">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- modal -->
In chrome and safari (with user-agent = ipad) it loads instantly.
On the iPad it takes more than 2.5 seconds to load. Can anyone point me to how I would start looking into this? I commented out all the css fade elements. Not sure where next to look.
Thanks
Edit: it actually works super fast on a blank page. On a page with about 50 ng-repeat elements it's super slow. My guess is that the ng-repeat elements are being redrawn when this loads? I'll investigate this.
Fixed: The problem was a dropdown in each row which caused it to render slowly. Thanks

Related

Partial View Modal popup buttons not calling Controller Action Method

I am trying to implement a modal popup which gives a user two buttons, each pointing to action methods in separate controllers.
Here is the partial view:
<div class="modal fade" id="importOption">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" style="color:darkorange">Select Import Option</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close" style="background-color:transparent; color:aquamarine; border-style:none">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<form method="post">
<div asp-validation-summary="ModelOnly" class="text-danger"></div>
<div class="flex-container">
<div class="first">
<div class="form-group">
<button type="button" class="btn btn-primary" asp-controller="BundleNodes" asp-action="Import" asp-route-bndl_id=#ViewBag.Bundle_id asp-route-n_qty=#ViewBag.missing asp-route-org_id=#ViewBag.org_id asp-route-userSelect="auto" data-dismiss="modal">Select Node(s)</button>
</div>
</div>
<div class="second">
<div class="form-group">
<button type="button" class="btn btn-primary" asp-controller="Nodes" asp-action="SelectBind" asp-route-bndl_id=#ViewBag.Bundle_id asp-route-n_qty=#ViewBag.missing asp-route-org_id=#ViewBag.org_id asp-route-userSelect="select" data-dismiss="modal">Auto Import</button>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</form>
</div>
</div>
</div>
</div>
This partial view is basically a modal popup with a form in the body element which contains two buttons. The buttons were taking up too much space in the parent view so I want to move them into a popup, reducing the number of buttons in the parent view. The problem is, once the buttons are in the partial view they don't trigger their respective controller actions.
I am rendering the partial view in the parent view using this line:
#await Html.PartialAsync("_ImportOptionPartialView")

Laravel vue js modal hide curret modal and show new modal with bootstrap 5

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

Bootstrap modal not close after submit data through jquery ajax method

i wanna put data into database through bootstrap modal with ajax. But after submit data button on modal the modal not close automatically. How i can fix this.
Here is code of Bootstrap modal
<!-- Trigger the modal with a button -->
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div id="myModal" class="modal fade" role="dialog">
<div class="modal-dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
This is ajax code
<script type="text/javascript">
***
SOme Code Here
****
$.ajax({
type: 'GET',
url : "YOu URL",
data: {},
success: function(feedback){
$('#feedback').html(feedback);
}
});
});
});
</script>
In your success method, you call to close the model by using
$('#yourModal').modal('hide');
Btw, it is advisable to do a http POST rather than a GET for submissions.
The syntax for modal closing seems fine. But I'm not sure if you are targetting right modal element. See if the target id on which you are triggering the modal close code is right. Hope it solves your problem.

Laravel 5.6 how to populate select in modal window

I am having problems to populate a select on a modal window with data retrieved from database, I would like to know if there's a shorter bullet-proof way to do it using Jquery.
select in modal window
Index.blade.php
<a href="{{ url('beneficios/create') }}" class="btn btn-primary mb-3"
role="button" data-toggle="modal" data-target="#modalbeneficio"
id="crear-beneficio">Crear Beneficio</a
Thanks in advance!
Just put somewhere in your index.blade.php the code for your modal, as described in bootstrap official docs:
<div class="modal" tabindex="-1" role="dialog" id="modalbeneficio">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">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">
<!-- Insert here whatever HTML you need to be displayed inside the modal --!>
</div>
</div>
</div>
</div>

trigger a modal on blade (laravel 4.2) depending if conditional statement is satisfied

i have this blade that adds a user in the database and i wanted to use bootstrap modal to inform the user that the record has been added. This adding functionality works and my only problem is that i dont know how to display the modal here is my current code:
#if ($errors->any())
<ul>
{{ implode('', $errors->all('<p style="color:red" class="error">:message</p>')) }}
</ul>
#else
<li style="color:red">Record Added!</li> <!-- display modal instead li tag --!>
#endif
and here is the code for the modal
<div id="myModal" class="modal fade" role="dialog">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Modal Header</h4>
</div>
<div class="modal-body">
<p>Some text in the modal.</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
any ideas?
With blade conditionals any HTML within the block is valid, this means we can use <script> tags and add some inline javascript to trigger the modal. Assuming you have bootstrap-js and jquery the following should work for your scenario:
#if
..
#else
<script>
$('#modalid').modal('show');
</script>
#endif

Resources