Can I call a javascript function in model of codeigniter?
I made a modal in my view..
<div class="modal fade" id="success" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-haspopup="true" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="alert alert-success fade in" id="alert">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4>Success!</h4>
<p>Record successfully deleted.</p>
<a id="okButton" class="btn btn-success" data-dismiss="modal">
OK
</a>
</div>
</div>
</div>
and in my model
public function delete_job_title($P1)
{
if (success condition)
{
what could should i put in here to call the function in javascript? or to show the modal?
}
}
I don't know what to put in there in order to show the modal?. whereas in jquery you can show it by:
" $('#success').modal('show'); "
but I want to call it in my model.
My main question is there a way to call a function in javascript from a model of codeigniter?
whereas in my javascript:
function showsuccess()
{
$('#success').modal('show');
}
You can do it like this.
<input type='button' name='show_model' class='modal_display'>
JQuery
$(function(){
$('.modal_display').click(function(){
$('.modal-content').load('controller/method');
});
});
Only controller can interact with javascript/ajax
Related
Not sure whats going on here but when I click the button calling a function it won't show my modal.
The function call itself works because the commented out alert will show if I uncomment it. How do I need to be showing the modal within this method?
No errors in the console either
<button #click="eventClick"></button>
<div id="example-modal">
<!-- Modal -->
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<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">
hihi
</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>
</div>
eventClick: function(e) {
var eventObj = e.event;
//alert('Clicked ' + eventObj.title);
let element = this.$refs.modal.$el;
$(element).modal('show');
It's hard to tell based on the code presented. The modal ref isn't defined.
In general, you really don't want to mix JQuery into Vue - especially when JQuery is modifying the state of a component (in this case the visual state: shown/not shown).
The preferred way to render a modal is with a standard v-if, as shown in this example.
I have dynamic link and each link is associated with modal pop up.
#foreach($image_data as $image)
<a href="#" data-toggle="modal" data-target="#{{$image->image_id}}">
<img src="{{asset('public/user_images/')}}/{{$image->image_name}}">
</a>
<div class="modal fade" id="{{$image->image_id}}" tabindex="-1" role="dialog">
<div class="modal-dialog" role="document">
<div class="modal-content">
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">X</span></button>
<div class="modal-body">
<img src="{{asset('public/user_images/')}}/{{$image->image_name}}">
</div>
</div>
</div>
</div>
#endforeach
What javascript or something else should I use to pop up this model ?
$('.buttonClass').on('click', function(){
$('#modalID').fadeIn();
});
modalID has to be determined by a data-attribute that you can give to your buttons. For example
<button type="button" class="open" data-dismiss="modal" data-id={{$image->image_id}}>
And then in JavaScript add
$('.buttonClass').on('click', function(){
let modalID = '#' + $(this).data('id');
$(modalId).fadeIn();
});
Add class="modal-open" to your as
jQuery method
$('.modal-open').on('click', function() {
$( '#'+$(this).data('target') ).show();
})
Typing from my head so there could be typos.
If the as and .modals are added dynamically then:
$(this).on('click','.modal-open', function() { ...
I have a scenario where I am uploading file using IFRAME. What I want is after succesfully uploading file, I want to close the modal pop up. But it is not working in my case. I tried like below
function CloseWindowFunction() {
alert('PDF uploaded successfully');
$('.modal-dialog').modal('toggle');
}
Also see the html for the same
<div class="modal fade" id="dvFileUpload" tabindex="-1" role="dialog" aria-labelledby="dvFileUploadTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">File Upload</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body" data-keyboard="false">
<iframe id="ifrmFileUpload" clientidmode="Static" runat="server" style="overflow: hidden; border: none" frameborder="0" scrolling="no"></iframe>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
So, how should I close that modal popup because my code is not working with toggle property.
I think you are calling CloseWindowFunction() inside iframe. If so then, please create a function say hideModalPopup inside parent page:
function hideModalPopup(){
$('.modal-dialog').modal('toggle');
//OR - $('.modal-dialog').modal('hide');
}
Call the above function hideModalPopup() inside CloseWindowFunction() like this. CloseWindowFunction() Edited, check below.
function CloseWindowFunction() {
alert('PDF uploaded successfully');
window.parent.hideModalPopup();
}
maybe you can try with
function CloseWindowFunction() {
alert('PDF uploaded successfully');
$('#dvFileUpload').modal('hide');
}
here for some reference for modal events
https://getbootstrap.com/javascript/#modals-events
Simply do this
$('#dvFileUpload').modal('hide');
OR
$("#dvFileUpload .close").click();
OR
$('#dvFileUpload').removeClass('show');
Try to add a class with the first div of modal for example:
<div class="modal fade test-modal" id="dvFileUpload" tabindex="-1" role="dialog" aria-labelledby="dvFileUploadTitle" aria-hidden="true" data-backdrop="static" data-keyboard="false">
and then call the
$('.test-modal').modal('hide');
I have the following DELETE button that I am passing $userid through the data-id
<a href='#myModal' class='trash' data-id='".$userid."' role='button'data-toggle='modal'>
Delete</a>
I have the following 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">Confirm Delete</h4>
</div>
<div class="modal-body">
<p>You are about to delete <b><i class="title"></i></b> record, this procedure is irreversible.</p>
<p>Do you want to proceed?</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Cancel</button>
Delete
</div>
</div>
</div>
</div>
And the following JS which gets the value of the DELETE button
$('.trash').click(function(){
var id=$(this).data('id');
$('#modalDelete').attr('href','delete_user.php?id=' + id);
});
I am trying to set the value of the "href" in the modal so that it can be passed to a php page called delete_user.php which deletes the user from the database. Anyone see where I am going wrong? I cannot get the href to go to the delete_user.php
you have mistake here data-id='".$userid."' should be data-id='<?php echo $userid;>'
<a href='#myModal' class='trash' data-id='<?php echo $userid;>' role='button'data-toggle='modal'>
Delete</a>
and for better approach, get rid of click function, use modal event and let bootstrap handle the rest
$(document).ready(function() {
$('#myModal').on('show.bs.modal', function(e) {
var id = $(e.relatedTarget).data('id');
alert(id);
$('#modalDelete').attr('href', 'delete_user.php?id=' + id);
});
});
Fiddle
I'm building a website using bootstrap. But i'm come to somewhat of an dead-end. i've created a modal from an given example (see below). As you might see, this is a modal taken straight from their website.
<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">Nieuwe Taak toevoegen</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>
</div>
</div>
I open this dialog using a button.
<button type="button" class="btn btn-default btn-sm" data-toggle="modal" data-target="#myModal" >
But i want to keep my modals in seperate aspx/html-files. How can i open these modals when they are kept inside different html/aspx - files ?
example:
if the button is inside index.Html but the modal is inside newTaskModal.html, how would i open the modal? (If both are inside index.html, then there are no problems)
Note: I don't/can't use HTML5 (company-standards)
if you're using jquery, you could download the page using an ajax call:
$.ajax({
url: 'newTaskModal.html',
dataType: 'text',
success: function(data) {
alert(data);
// todo: add the html to the dom...
}
});
If you're building a single page application you might want to check out a framework designed to solve this type of problem:
durandal
Can you use PHP? If so there is simple solution.
Your index will be index.php and where you want to have your modal just place this code
<?php include "newTaskModal.html"; ?>
Also you could if you are using JQuery to load your html page into into a matched element.
$( "#result" ).load( "ajax/test.html", function() {
alert( "Load was performed." );
});
Go to http://api.jquery.com/load/ for more info.
STEP 1 Use below code for link:
<a class="btn btn-primary" data-toggle="modal" href="MyModal.html" data-target="#MyModal" data-backdrop="static">OPEN MODAL</a>
STEP 2 Use below code for modal window
<div class="modal fade" id="MyModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="modal-dialog model-sm">`enter code here
<div class="modal-content"> </div>
</div>
</div>
STEP 3 Create MyModal.html and place some text.
<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">Title</h4>
</div>
<div class="modal-body">
Modal Contents
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-success">OK</button>
</div>
Note: This may not work local html. works only on server!