Why sometimes can not call a function after save on modal? - javascript

My modal is like this :
<div id="modal-account" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
{!! Form::open(['url' => 'member/profile/setting/account/add','class'=>'form-horizontal']) !!}
<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">Add</h4>
</div>
...
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
<button type="submit" class="btn btn-success">Save</button>
</div>
{!! Form::close() !!}
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
My routes is like this :
Route::group(['middleware' => 'auth', 'prefix'=>'member', 'as'=>'member.'], function () {
...
Route::group(['prefix' => 'profile', 'as'=>'profile.'], function () {
...
Route::get('setting/account', 'Member\UserBankController#create');
Route::post('setting/account/add', 'Member\UserBankController#store');
...
});
...
});
My controller is like this :
public function store(CreateUserBankRequest $request)
{
dd('test');
...
}
When the first time I run the modal, and then click the submit button, it successfully runs the statements in the store function, which displays the word : test.
But after that, I tried again the second and so on, it can not display the word : test.
Sometimes it can be. Sometimes it can not.
Whether there are any people who can explain, why it happened and what is the solution?

Related

Bootstrap 4 Modal with JavaScript and Vue: $ is not defined at eval

I'm simply trying to launch a Bootstrap 4 modal from my Javascript code in my Vue 3 app. Every time the execution reaches the modal launch line however, I get this error: $ is not defined at eval
The other common questions about this seem to reference not including jQuery into the project more than once, i'm not sure if that's the issue causing the problem i'm seeing.
Code below, what am I doing incorrectly to launch the Bootstrap modal?
Html
<!-- Modal -->
<div
class="modal fade"
id="errorModal"
tabindex="-1"
role="dialog"
aria-labelledby="exampleModalCenterTitle"
aria-hidden="true"
>
<div class="modal-dialog modal-dialog-centered" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">
{{ modalTitle }}}
</h5>
<button
type="button"
class="close"
data-dismiss="modal"
aria-label="Close"
>
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
{{ modalMessage }}
</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>
Javascript
<script>
export default {
methods: {
doNetworkedThings(requestHeader, profile) {
let that = this;
axios
.post(
"http://localhost:8080/endpoint",
profile,
requestHeader
)
.then(function(response) {
console.log("Success");
})
.catch(function(error) {
//show error modal
$('#errorModal').modal({ //TODO: fails on this line
keyboard: false,
backdrop: "static"
})
});
},
},
};
</script>
you can add this
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
its works for me

Display text into div not working

The bootstrap editor is working good, but I want to display the entered data into a div with the id: enclousere. It works fine but the data should display like this:
Enclouser:first enclousersecond enclouser3rd enclouser
But it displays like:
Enclouser:<div><ol><li>first enclouser</li><li>second enclouser</li><li>3rd enclouser</li></ol></div>
My model:
<div class="modal fade" id="myModale" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Add Enclosure</h4>
</div>
<div class="modal-body sol">
<textarea id="textareaIDe" class="form-control"></textarea>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" id="savedatae" data-dismiss="modal" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
MY JQuery:
$('#myModala').on('shown.bs.modal', function () {
$('#textareaIDe').focus();
})
$("#savedatae").click(function(){
var message = $('.sol .Editor-editor').html();
alert(message);
$('#enclousere').text(message);
//alert(message);
});
Tag used to display:
<div class="fsize" id="enclousere"></div>
Use
.html(message);
Instead of
.text(message);

How to call class first without call modal if it meets certain conditions?

Demo and Full Code is like this : https://jsfiddle.net/oscar11/xzxrp7nn/2/
My HTML Code is like this :
<!-- Button trigger modal -->
<button class="btn btn-primary btn-lg check_session" data-toggle="modal" data-target="#myModal">Launch demo modal</button>
<!-- 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">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title" id="myModalLabel">Modal title</h4>
</div>
<div class="modal-body">
<div class="col-md-12">
<div class="row">
<label for="idTourDateDetails">Tour Start Date:</label>
<div class="form-group">
<div class="input-group">
</div>
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<!-- /.modal-content -->
</div>
<!-- /.modal-dialog -->
</div>
<!-- /.modal -->
My Javascript Code is like this :
$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
}
}
})
});
When response != 'exist_session', I want the system display alert message without display modal. So only display alert message.
Any solution to solve my problem?
Thank you
You remove data-toggle and data-target in button
<button class="btn btn-primary btn-lg check_session">Launch demo modal</button>
then you can call it in javascript.
$(".check_session").click(function(){
$.ajax({
success : function(response)
{
response = 'no_session';
if(response != 'exist_session')
{
alert('Please login');
} else {
$('#myModal').modal()
}
}
})
});
Working Demo
https://jsfiddle.net/xzxrp7nn/4/

bootstrap modal as jquery object

Using the example of bootstraps modal
<div class="modal fade">
<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">Modal title</h4>
</div>
<div class="modal-body">
<p>One fine body…</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
I was wondering if there is a way to make this, some sort of dynamic via jQuery.
My goal is to have something like a variable called $theModal which will be initialized and has properties for getting/setting the title, the content, the javascipt-functions to be called when Save/Cancel/Close is clicked etc.
Should all be generated via jQuery or should I have the markup in the code and use ids/custom data-attributes to catch the modal?
Maybe some class-structure?
var $theModal = new MyModal();
Next question would be, how to create a clone in case a modal is already open?
I would make/guess
var $theClone = $theModal.clone().init();
$theClone.title = "Title of the second modal";
$theClone.content = $.ajax(url);
$theClone.saveAction = saveTheContentOfTheContent;
$theClone.show();
Is this possible or am I totally wrong with my assumptions?
Your idea isnt too bad, but...
You could have one modal in your html code.
Then in the space Where your title would be you could use the $scope type.
Then in your js file you could specify the strings you want in arrays and just change to the one you want in the parameter of an ng-click function.
index.html
<p>This is the modal view.</p>
<button type="button" class="btn btn-info btn-lg" data-toggle="modal" data-target="#myModal">Open Modal</button>
<!-- Modal -->
<div class="modal fade" id="myModal" 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">{{msgArray.title}}</h4>
</div>
<div class="modal-body">
<p>{{msgArray.body}}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">{{msgArray.btn}}</button>
</div>
</div>
</div>
</div>
script.js
var app = angular.module('plunker', []);
app.controller('MainCtrl', function($scope) {
$scope.msgArray1 = {
title : "Modal 1",
body: "This is the co to say anything you want here.",
btn : "Close",
};
$scope.msgArray2 = {
title : "Modal 2",
body: "This is the co to say anything you want here.",
btn : "Close",
};
$scope.msgTemp = {
title : "",
body: "",
btn : "",
};
$scope.openModal = function(modal){
if(modal == "modal1"){
$scope.msgTemp = $scope.msgArray1;
}
if(modal == "modal2"){
$scope.msgTemp = $scope.msgArray2;
}
$("#myModal").modal('show');
}
});
http://plnkr.co/edit/nV3iq1U1ymcsBAXT6g2y?p=preview
Your idea is very good and it is already implemented by somene. Check out this link
This link demonstrate you every possible case scenario in which your idea can be used. It also has some tremendous features which we don't have even thought of.

Multiple Bootstrap Modals one after another

I am new to bootstrap. I have a situation where I have to Show a Bootstrap Modal, When I click any button on that Modal I'll have to show another modal below that 1st Modal (Not Stackable). If I close the 1st Modal 2nd Modal has to go up to replace the position of 1st Modal.
Is it possible ?
Any help ?
You can listen to the "close" event of the first model to open the second model:
Bind a function to Twitter Bootstrap Modal Close
$('#my-modal').on('hidden.bs.modal', function () {
window.alert('hidden event fired!');
})
Manually open the second model:
$('#otherModel').modal('toggle')
An example:
Your HTML code:
<!-- Button trigger modal -->
<a data-toggle="modal" href="#myModal" class="btn btn-primary btn-lg">Launch demo modal</a>
<!-- 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">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
<div class="modal fade" id="myModal2" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Modal title</h4>
</div>
<div class="modal-body">
...
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Save changes</button>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Javascript:
$('#myModal').on('hidden.bs.modal', function() {
$('#myModal2').modal("toggle");
});

Categories