Bootstrap Modal immediately closes when showing on edit form - php

i need some help, i have already read a lot of articles but haven't found de solution to my problem.
As you can see in the picture my modal button is in a table but when i click de edit button it shows de modal with the edit form but it closes inmmediately
These is my code of my button, im using php and bootstrap:
echo "<td><a href='consultar_usuario.php?id_trabajador=$arreglo[0]&idactualizar=3'><img src='../imagenes/Iconos/actualiza.png' class='img-rounded' data-toggle='modal' data-target='#myModal'></td>";
and these is the code of my modal:
echo'
<div class="control-group modal fade" id="myModal" role="dialog">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h3 class="modal-title">Modificar Empleado</h3>
</div>
<form action="../validar_form/valida_actualizacion.php" method="post" class="form-horizontal modal-body">
all the divs and form are close in my proyect.
I really apreciate your help.

I have a suggestion hope this helps somehow.
this line:
echo "<td><a href='consultar_usuario.php?id_trabajador=$arreglo[0]&idactualizar=3'><img src='../imagenes/Iconos/actualiza.png' class='img-rounded' data-toggle='modal' data-target='#myModal'></td>";
can you change it to this:
echo "<td><a href='consultar_usuario.php?id_trabajador=$arreglo[0]&idactualizar=3'><img src='../imagenes/Iconos/actualiza.png' class='img-rounded modal_clicker'></td>";
and add this javascript:
<script>
$(".modal_clicker").on("click", function(){
$('#myModal').modal('show');
});
</script>
That way you can just echo the "modal_clicker" and not repeating the "data-toggle='modal' data-target='#myModal'" over and over again.
And for your question I hope this code helps:
<script>
$("#myModal").modal({
backdrop: 'static',
keyboard: false})
</script>
[ Fixed / Solution ]
I found what's causing it. Your are trying to open a new url everytime you click the link; here <a href='consultar_usuario.php?id_trabajador=$arreglo[0]&idactualizar=3'>
The fix for this is to change your href or link into this.
<a href='javascript:void(0);'>
If you want to access these: id_trabajador=$arreglo[0]&idactualizar='3'
try adding this to your link as data-*. See example below.
<a href='javascript:void(0);' class="modal_clicker" data-id_trabajador='".$arreglo[0]."' data-idactualizar=3'>
You can then access those data-* using the javascript below:
$(".modal_clicker").on("click", function(){
var ele = $(this);
var id_trabajador = ele.attr("data-id_trabajador");
var idactualizar= ele.attr("data-idactualizar");
$('#myModal').modal('show');
});

Related

How do I stop a video from playing after closing a modal

I'd like to preface that I am new to web development, so I apologize, I know this question seems to be out there a lot. I have tried many solutions, but I just can't seem to get anything to work.
I am working on a webpage that has a series of tutorial videos, each is in their own modal with descriptions. Is there a way I can stop the video from playing upon closing without needing to create ID tags for each video or use bootstrap? (I'm honestly not even sure how to use it, if I'm being honest.) I've seen a lot of solutions, but none of them seem directly applicable to my existing code.
<button id="myBtn">Video Title</button>
<!-- The Modal -->
<div id="myModal" class="modal">
<!-- Modal content -->
<div class="modal-content">
<div class="modal-header">
<span class="close">×</span>
<h3>Video Title</h3>
</div>
<div class="modal-body">
<p>
Video description Prose
<div class="video-container">
<iframe class="responsive-iframe" src="https://drive.google.com/file/d/1M-nlvbG_WUuIq-sjHdntgk1VrhdVnKDh/preview" width="950" height="550"></iframe>
</div>
</p>
</div>
<div class="modal-footer">
<h3></h3>
</div>
</div>
</div>
Here is the corresponding script I'm using at the bottom of the page.
<script>
var datamap = new Map([
[document.getElementById("myBtn"), document.getElementById("myModal")],
[document.getElementById("myBtn1"), document.getElementById("myModal1")],
[document.getElementById("myBtn2"), document.getElementById("myModal2")],
[document.getElementById("myBtn3"), document.getElementById("myModal3")],
[document.getElementById("myBtn4"), document.getElementById("myModal4")],
[document.getElementById("myBtn5"), document.getElementById("myModal5")],
[document.getElementById("myBtn6"), document.getElementById("myModal6")],
[document.getElementById("myBtn7"), document.getElementById("myModal7")]
]);
datamap.forEach((value, key) => {
doModal(key, value);
});
function doModal(anchor, popupbox) {
// Get the <span> element that closes the modal
var span = popupbox.getElementsByClassName("close")[0];
anchor.addEventListener("click", function (event) {
popupbox.style.display = "block";
});
span.addEventListener("click", function (event) {
popupbox.style.display = "none";
});
window.addEventListener("click", function (event) {
if (event.target == popupbox) {
popupbox.style.display = "none";
}
var
});
}
</script>
You can register handlers for custom modal events that Bootstrap fires, just as you can for built-in events like "click."
It's been a long while since I've done it without jQuery, but something like this should work:
const modals = document.getElementsByClassName("modal");
for (let i = 0; i < modals.length; i++) {
window.addEventListener("hide.bs.modal", function(e) {
// do your stuff
});
}
That's as far as I can go since you haven't included in your question is any detail on the video file itself. I would also question why you're using an iframe instead of a video element.

Cannot get PHP session variable back to JQuery

I know there have been tons of questions about setting a PHP session from JQuery and then returning it to JQuery. And I have looked at all of them and still cannot figure out why my code doesn't work. I am trying to use a modal to set a PHP session variable on a back end PHP page and then display it in another modal using jquery, but nothing gets returned.
Here is my sending modal:
<div id="sendingModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<button id="testSession" type="button" class="btn btn-secondary">Session Test</button>
</div>
</div>
</div>
and here is my back end php:
<?php
session_start();
$_SESSION['testInput'] = $_POST['inputData'];
?>
and here is my receiving modal:
<div id="receivingModal" class="modal" tabindex="-1" role="dialog">
<div class="modal-dialog modal-md" role="document">
<div class="modal-content">
<div class="modal-body">
<div id="testDiv"></div>
</div>
</div>
</div>
Here is my JQuery:
$(document).ready(function() {
$('#testSession').on('click',function(e){
var testData = 'testing 123';
$.post("backendSession.php", {"inputData": testData});
$('#testSession').html(<?=$_SESSION['testInput']?>);
$('#testModal').modal('show');
});
});
What am I doing wrong?
You only have a small issue here, and its a simple fix based on the code you provided. You MUST return the new data back during the ajax call, or you will not be able to use it (not until, that is, a whole new page refresh).
First up, add to your backendSession.php:
<?php
session_start();
$_SESSION['testInput'] = $_POST['inputData'];
echo htmlspecialchars( $_SESSION['testInput'] );// new bit
?>
Then adjust your .post usage as follows:
$(document).ready(function() {
$('#testSession').on('click',function(e){
var testData = 'testing 123';
$.post("backendSession.php",
{"inputData": testData},
function( rawdata ) { // add return handler callback
$('#testDiv').html( rawdata ); // use the return data
$('#testModal').modal('show'); // show the modal
}
);
});
});
Now that is the basic change to make what you were wanting to do. However you may want to deal with JSON return data in the future, if you plan on needing more than just an echo of the input. An example of that will go beyond the question though ;)
As another side: You probably will want to sanitize that post input. I know what you provided was a minimal example, but I just wanted to mention it. As simply echoing out the raw user input, back into a page, can open up some XSS attack vectors.

Load MySQL data dynamically by unique id into Bootstrap modal -CodeIgniter

Having successfully eliminated the issue from a previous question I posed in add limit to data passed to bootstrap modal with foreach() in codeigniter, I now find myself with the residue of that issue. As succinctly posited by #webcrazymaniac;
The idea is to have a unique modal window, with it's unique id for each article, uniquely called with the corresponding button
According to the solution listed in Send parameter to Bootstrap modal window?, I should be able to have my desired effect as stated above - adapted as;
On page Modal
<!-- alert view -->
<div class='modal fade' id='myModal' role='dialog'>
<div class='modal-dialog'>
<!-- Modal content-->
<div class='modal-content' id='#myModal<?php echo $a->art_id;?>'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h2 class='modal-title'>Title: <?php echo $a->title;?></h2>
</div>
<div class='modal-body'>
<h3>Category: <?php echo $a->cat_name;?></h3>
<h3>Date: <?php echo $a->public_date;?></h3>
<h3>Content: <?php echo $a->description;?></h3>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
</div>
</div>
jQuery Script
<script type="text/javascript">
$( document ).ready(function() {
$('#myModal').on('show.bs.modal', function (e) { //Modal Event
var id = $(e.relatedTarget).data('id'); //Fetch id from modal trigger button
$.ajax({
type : 'POST',
url : 'query.php', //Here you will fetch records
data : 'post_id='+ id, //Pass $id
success : function(data){
$('.form-data').html(data);//Show fetched data from database
}
});
});
});
</script>
Modal Trigger Button
echo "<a href='#myModal/".$a->art_id."' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal' data-id='".$a->art_id."'>View</a> ".
query.php
<?php
//Include database connection here
$dsn = 'mysql:host=localhost;dbname=articles;charset=utf8';
$user ='';
$pass ='';
$options = array(PDO::ATTR_DEFAULT_FETCH_MODE => PDO::FETCH_ASSOC, PDO::ATTR_ERRMODE => PDO::ERRMODE_EXCEPTION, PDO::ATTR_EMULATE_PREPARES, false);
try {
$pdo = new PDO($dsn, $user, $pass, $options);
} catch (PDOException $e) {
file_put_contents('PDOErrors.txt', $e->getMessage(), FILE_APPEND);
}
if($_POST['art_id']) {
$id = $_POST['art_id'];
$category = $_POST['cat_name'];
$public_date = $_POST['public_date'];
$description = $_POST['description'];
// Run the Query
$sql = "SELECT `art_id`, `cat_name`, `public_date`, `description` FROM `articles` WHERE `art_id`='?'";
$stmt = $pdo->prepare($sql);
// Fetch Records
$stmt->execute();
}
?>
It all works to call the modal, but this attempt only nets me the 5th result on-page for all (green) buttons clicked. As (maybe) an important note, I'm having trouble with data-id='#myModal<?php echo $a->art_id;?> fitting into the modal trigger button as it destroys the popup of the modal. I know I have to maybe pull a destruction mode in order to change to another ID like so;
$('#myModal').on('hidden.bs.modal', function () {
$(this).removeData('bs.modal');
});
Now, mind you, I'm not especially conversant in jQuery, so what I've come up with is based on a solid few hours of reading and experimentation. Having pored over numerous examples, I'm still at a loss as to exactly how to make this all work. I'm really stuck as I'm getting the same result (off by a factor of either the display of the first or fifth result for clicking green buttons) whether I'm trying this straight PHP or jQuery. It seems like every question that I've read in this category of question gets me to the current dilemma I'm in where if I use the PHP version solution, I'm returned the 1st page result for every view button on the page. jQuery solution returns the fifth page result for each view button. This is strange indeed... Not even changing out the jQuery for simplified js like this;
<script type="text/javascript">
//jQuery Library Comes First
//Bootstrap Library
($ 'a[data-toggle=modal]').click ->
target = ($ #).attr('data-target')
url = ($ #).attr('href')
($ target).load(url)
I was pulling for that snippet to rescue me, but, no. Neither did this one;
<script type="text/javascript">
//jQuery Library Comes First
//Bootstrap Library
$(document).ready(function(){
$('#myModal').on('shown.bs.modal', function () {
var $modal = $(this),
modal_title = $(this).data('modal-title'),
modal_params = $(this).data('modal-params');
if(typeof modal_title !== typeof undefined && modal_title !== false) {
title = modal_title;
}
else{
title = 'Title';
}
$.ajax({
cache: false,
type: 'POST',
url: 'query.php',
data: modal_params,
success: function(data) {
$modal.find('.modal-title').html(title);
$modal.find('.modal-body').html(data);
}
});
});
});
</script>
//crabbed from
//https://stackoverflow.com/questions/35702374/bootstrap-modal-with-individual-attributes
But, as par for the course, no love... There's either Human Error to blame, or I'm just missing something plainly hiding in full view. Having read more than 200-plus questions today, I'm having problems re-reading this for formatting, etc. (lol!). Learned tons, but still stuck.
UPDATE
In the time since I've looked at what #progrAmmar suggested, I went back to try and refine my approach. The key issue is how to make the jQuery reload process;
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
clear out the modal so that upon click of another button, the corresponding table row content flows in like water. I'm having problems figuring out what sequencing is correct for the jQuery - as it stands now;
<script type="text/javascript">
//jQuery Library Comes First
//Bootstrap Library
$(document).ready(function() {
// Fill modal with content from link href
$('.myModal').on('click', function(e) {
var link = $(this).data('href');
$('#myModal').modal('show');
$('#myModal .modal-body').load(link );
$('body').on('hidden.bs.modal', '.modal', function () {
$(this).removeData('bs.modal');
});
})
</script>
Which results in the view below:
If you look on the bottom-left of the image you'll see the corresponding id value is 3, but the open modal is pulling content from id value 5. I'm still having the process of calling the modal and displaying table row go smoothly, but the modal reload process is bent. Suggestions? I'm out of ideas at this point.
#progrAmmar, I went back to your proffered suggestion, but these are the following things preventing me from fully adapting;
article/index (controller/index function)
public function index()
{
$modal = $this->article_model->modal($art_id=NULL);
$category = $this->category_model->listAll();
$article =$this->article_model->index($this->limit);
$total_rows=$this->article_model->count();
$config['total_rows']=$total_rows;
$config['per_page']=$this->limit;
$config['uri_segment']=3;
$config['base_url']=site_url('article/index');
$this->pagination->initialize($config);
$page_link =$this->pagination->create_links();
$this->load->view('admin/article',compact('article', 'page_link', 'category', 'modal'));
}
article_model.php
public function modal($art_id)
{
$data = array();
$this->db->select('art_id', 'cat_name', 'public_date', 'description');
$this->db->from('tbl_article');
$query = $this->db->get();
if($query->num_rows() > 0)
{
$results = $query->result();
}
return $results;
}
Still trying to figure out where the needle is here. Thanks again for your suggestions #progrAmmar.
UPDATE ANNOYANCES
Back to purely PHP as jQuery wasn't doing anything different for me - even after playing around with #progrAmmar's code. Now I'm left back at ground zero and having read for another two hours (mainly # the jQuery forum). :sigh:
ALMOST THERE....
After consulting the BS 3.3.5 docs, I know my answer is in the Varying modal content based on trigger button section. Tried to extrapolate this;
//Modal window trigger button
echo "<a href='".base_url()."article/$a->art_id' class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal' data-id='".$a->art_id."'>View</a> ".
//jQuery code
$('#myModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var id = button.data('id') // Extract info from data-* attributes
var href = button.data('href') // Extract info from data-* attributes
var target = button.data('target') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('Title:')
modal.find('.modal-body').val('Category:')
modal.find('.modal-body').val('Date:')
modal.find('.modal-body').val('Content:')
$('#myModal > div.modal-body).empty();
})
I'm pretty sure I'm doing it wrong as I just can't get my head around any attempted extrapolations - been poring over other solution examples on SO, but am still working out approaches to the above coding. Research in motion...
Extrapolating Code Proffered By #progrAmmar;
Controller Article(.php)
------------------------
public function index()
{
$data['modal'] = $this->article_model->modal($art_id); // Gets all the data
$this->load->view('('admin/article',compact('article', 'page_link', 'category', 'modal') $data);
}
View article(.php)
------------------
<div class='modal fade' id='myModal' role='dialog'>
<div class='modal-dialog'>
<!-- Modal content-->
<div class='modal-content' id='myModal'>
<div class='modal-header'>
<button type='button' class='close' data-dismiss='modal' aria-hidden='true'>×</button>
<h2 class='modal-title'>Title: <?php echo $a->title;?></h2>
</div>
<div class="modal-body">
<div class="row">
<div class="col col-md-12">
<h3>Category: <?php echo $a->cat_name;?></h3>
<h3>Date: <?php echo $a->public_date;?></h3>
<h3>Content: <?php echo $a->description;?></h3>
<input type="hidden" id="hidId" value="<?php echo $a->art_id;?>" />
</div>
</div>
</div>
<div class='modal-footer'>
<button type='button' class='btn btn-default' data-dismiss='modal'>Close</button>
</div>
//Finally call the html via JavaScript
$.get(window.base_url + 'index.php/article/'+ id, function (data) {
$('#myModal' > div.modal-body).empty();
$('#myModal').html('data');
$('#myModal').modal('show');
}
Did a little juggling to fit in this attempt, but there's no change as the fifth page result is never bumped out by another content ID as shown below;
Still stuck in the same position before...round and round we go ミ●﹏☉ミ
Of the section I'm interested in within the docs;
$('#exampleModal').on('show.bs.modal', function (event) {
var button = $(event.relatedTarget) // Button that triggered the modal
var recipient = button.data('whatever') // Extract info from data-* attributes
// If necessary, you could initiate an AJAX request here (and then do the updating in a callback).
// Update the modal's content. We'll use jQuery here, but you could use a data binding library or other methods instead.
var modal = $(this)
modal.find('.modal-title').text('New message to ' + recipient)
modal.find('.modal-body input').val(recipient)
})
my primary issue is;
HOW do I extrapolate Update the modal's content?
THIS is essentially the core of my impedance and not located by an intensive search of the BS docs. If I could sync up some kind of way to force-reload the content within the modal, I have my answer. In fact the closest I've found to any example of how to (maybe) approach this was a post here (sorry forgot which one) detailing how to reload an image within a modal by targeting the src element;
//And then you just change the src attribute of the picture element from your function.
var picture = button.data('picture')
$('#picture').attr('src',picture);
THAT'S IT!* (theoretically)...Between the above example and the Varying modal content based on trigger button example, I'm on my way to losing it. I can't believe I can't just make the logical connection required to fire off the force-reload. I just don't see it, and every example I've used thus far keeps me in the same place.
Having gone through fifty-plus JQuery code examples, not one of them did squat as far as activating any functionality, so I'm off attempting to use it as any sort of solution. NONE of the answers under this topic worked (even a little). This is the 1st time in my career where I've been completely stumped with nowhere to turn.
Here are the things I've tried:
Situation 1
Initially dealing with an HTML table <table class="table table-condensed"> listing out the articles db elements of 'art_id', 'title', 'cat_name', 'public_date', 'image', the table elements are scooped from the db with foreach ($article->result() as $a){.
The table ends with the activity buttons, the 1st of which is the BS modal trigger (unable to change table being echoed out in PHP - just mucks it all up);
echo "<a href='".base_url()."article/#myModal/$a->art_id' button class='btn btn-success btn-sm' data-toggle='modal' data-target='#myModal' data-id='".$a->art_id."'>View</a> ".
Situation 2
The modal data-toggle (as posted above) is the trigger for the modal to popup and is located on page bottom;
<!-- alert view -->
<div id="myModal<?php echo $a->art_id" class="modal fade" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<?php
$i=0;
foreach ($article->result() as $a){
?>
<div id="#myModal<?php echo $a->art_id ?>" class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h2 class='modal-title'>Title: <?php echo $a->title;?></h2>
</div>
<div class='modal-body'>
<h3>Category: <?php echo $a->cat_name;?></h3>
<h3>Date: <?php echo $a->public_date;?></h3>
<h3>Content: <?php echo $a->description;?></h3>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
<?php
if(!$i=0) break;
$i++;
}
?>
</div>
If the modal foreach isn't both included and augmented like so;
<?php
if(!$i=0) {
break;
} else {
$i++;
}}
?>
then the modal pulls all of the $a->art_id elements into view simultaneously like so;
And, even with the necessary jQuery at the bottom (after the modal);
<script type="text/javascript">
jQuery(document).ready(function($) {
jQuery(document).ready(function($) {
$('.myModal').click(function(event){
var $link = $(this);
new BootstrapDialog({
title : 'Title : ' + $link.attr('href'),
content : $('<div>Loading...</div>').load($link.attr('href')),
buttons : [{
label : 'Close',
onclick : function(dialog){
dialog.close();
}
}, {
label : 'View',
cssClass: 'btn-primary',
onclick : function(dialog){
alert('The content of the dialog is: ' + dialog.getBody().html());
dialog.close();
}
}]
}).open();
event.preventDefault();
});
});
});
</script>
//crabbed from - https://stackoverflow.com/questions/14045515/how-can-i-reuse-one-bootstrap-modal-div/14059187#14059187
Situation 3
NOTHING WORKS.... The jQuery is not destroying and reloading the modal, so I'm only getting that 1st on-page result from the 1st button on the page (completely correct content and ID). The most frustrating thing is if I hover over each button, the correct content ID is returned. I think it's safe to say that it's not any problem with the code - I have to investigate WHY that specific code isn't working on-page. Confusing because I'm using jQuery already;
<script src="<?php echo base_url(); ?>asset/js/jquery.js"></script>
<script src="<?php echo base_url(); ?>asset/js/jquery-latest.min.js"></script>
putting these two lines just above the modal and jQuery at the bottom of the page. It looks as if there is a conflict somewhere preventing the jQuery-driven script from firing. The only conflict I can maybe even see is that with the CKEditor that loads just above the jQuery.
Even with switching to another code block;
<script type="text/javascript">
jQuery(document).ready(function($) {
$('.myModal').click(function(){
$(this).find('.inner').clone().appendTo('#myModal .modal-content');
$('#myModal .modal-title .modal-body .control-group.hide').show();
$('#myModal').modal();
});
$('#myModal').on('hidden', function(){
$('#myModal .inner').remove();
});
});
</script>//forgotten SO crabbing
I keep getting the same results. Since throwing in the towel, I've come upon several SO solutions which suggest the scenario I want, but I can never physically fulfill them and it making me angrier than a rattlesnake in a Texans' boot. Not only were these questions completely similar to mine, but they (almost) all got upvoted # +1 or better, and the selected solutions did nothing to extract me from my bottleneck.
This is an issue that I'd like to see cleared up as I know there's a solution, and from the numerous Fiddles and Plunkers, they're all similar in nature with slight variations that I haven't been able to employ.
The simplest (and probably the easiest) way to call a MODAL for data is to call the HTML from the server.
Create a separate view for your model.
Call the data into it, load the model from the controller.
Here's how I am calling my Modal with codeigniter
Controller
public function EditData($id)
{
$data['entity'] = $this->Home_model->getData($id); // Gets all the data
$this->load->view('Home/modal_data', $data);
}
views/Home/modal_data.php
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Edit <?= $entity['name'] ?></h4>
</div>
<div class="modal-body">
<div class="row">
<div class="col col-md-12">
<label>Name</label>
<input type="text" id="txtName" class="form-control" value="<?= $entity['name'] ?>" />
<input type="hidden" id="hidId" value="<?= $entity['id'] ?>" />
</div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-success has-spinner" id="btnSave">
<span class="spinner"><i class="glyphicon glyphicon-spin glyphicon-refresh"></i></span>Save
</button>
</div>
Make sure you have a modal div on your page to call the html into.
views/Home/index.php
<html>
.
.
.
<body>
<div id="home_modal" class="modal fade" role="dialog">
<div class="modal-dialog">
<div class="modal-content" id="home_modal_cont">
</div>
</div>
</div>
</body
</html>
Finally call the html via JavaScript
$.get(window.base_url + 'index.php/home/EditData/'+ id, function (data) {
$('#home_modal_cont').empty();
$('#home_modal_cont').html(data);
$('#home_modal').modal('show');
}

Bootstrap modal issue with ckeditor

This is some how related to Passing MySQL data to Modal Form via PHP because I am using method mentioned in that article to edit records.
But now I have quite surprising issue in it. I am using ckeditor to edit product details but when I use it in there, it shows only in the first record. In next records, simple textarea comes up.
Here is code which comes in while loop.
<div class="modal" id="modaledit<?=$id; ?>">
<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">Edit Product</h4>
</div>
<div class="modal-body">
<div class="formleft">Name:</div>
<div class="formright"><input type="text" name="prod_name" value="<?=$r["prod_name"]; ?>" /></div>
<div class="formleft">Details:</div>
<div class="formright">
<textarea name="prod_details" cols="40" rows="10" id="editor1"><?=$r["prod_details"]; ?></textarea>
<script type="text/javascript">
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl :'js/ckeditor/filemanager/browser/default/browser.html?Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
filebrowserImageBrowseUrl : 'js/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
filebrowserFlashBrowseUrl :'js/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
filebrowserUploadUrl :'<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=File',
filebrowserImageUploadUrl : '<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=Image',
filebrowserFlashUploadUrl : '<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=Flash'
});
//]]>
</script>
</div>
</div>
<div class="modal-footer">
Close
Submit
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
It has become a headache for me because first I tried with external page modal, but there ckeditor does not show up for any record. And here it does show up, but only for first record. weird!!!
EDIT
Another thing I noticed, actually ckeditor is showing in modal for only one time. Basically, I am using two modals on same page, one for add new record and one for edit. And because edit modal is inside while loop of showing all products, so it comes earlier on page. And then, ckeditor shows up only for first record edit. Now I notice that ckeditor is not showing up in add new record modal as well (where it was working perfectly before I wrote edit modal code).
This is what shows up in the error console:
Uncaught [CKEDITOR.editor] The instance "editor1" already exists.
If you plan to use more than one instance of CKEditor on your page do the following:
A) Assign different ID to each textarea element you plan to replace. Something like this should do the trick in your case:
<textarea name="prod_details" cols="40" rows="10" id="editor<?=$id; ?>">
and later:
CKEDITOR.replace( 'editor<?=$id; ?>',
OR
B) Or call something like CKEDITOR.instances.editor1.destroy(); whenever you close the modal dialog window
Keep in mind that you have different errors on this sample page, HTTP 404 requests and
Uncaught TypeError: Cannot read property 'length' of undefined
which may result in CKEditor not loading etc.
If you're using BootStrap than you got Jquery, that said you can add this kind of code (Example)
<script>
$('.modal').on('shown.bs.modal', function (e) {
//<![CDATA[
CKEDITOR.replace( 'editor1',
{
filebrowserBrowseUrl :'js/ckeditor/filemanager/browser/default/browser.html?Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
filebrowserImageBrowseUrl : 'js/ckeditor/filemanager/browser/default/browser.html?Type=Image&Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
filebrowserFlashBrowseUrl :'js/ckeditor/filemanager/browser/default/browser.html?Type=Flash&Connector=<?php echo $url;?>js/ckeditor/filemanager/connectors/php/connector.php',
filebrowserUploadUrl :'<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=File',
filebrowserImageUploadUrl : '<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=Image',
filebrowserFlashUploadUrl : '<?php echo $url;?>js/ckeditor/filemanager/connectors/php/upload.php?Type=Flash'
});
//]]>
})
</script>
Please note that this example code is binded to the modal class, if you are using modal only for this you can give a try. However, you do not need to have 100 Modal if you've got 100 rows, you can simply use 1 modal and change the contents with Javascript/Jquery when needed.
EDIT: Added the part.

Render View Via Bootstrap Modal

I need to use bootstrap modal to load form , how I can call bootstrap modal with parameters via link ?
View:
<?php echo CHtml::link(Yii::t('app','addaction'),'#myModal',array('class'=>'btn btn-primary','data-toggle'=>'modal')) ;?>
<br/><br/><br/>
<!-- Bootstrap modal dialog -->
<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"><?php echo Yii::t('app','AddAction'); ?></h4>
</div>
<div class="modal-body">
<?php echo $this->renderPartial('_form', array('model'=>$model,'productId'=>$productId)); // I need $productId to by dynamic related to link
?>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Controller :
public function actionCreate()
{
$model=new Actions;
$productId=intval($_GET['productId']);
// Uncomment the following line if AJAX validation is needed
$this->performAjaxValidation($model);
if(isset($_POST['Actions']))
{
$model->attributes=$_POST['Actions'];
$model->product_id=$productId;
if($model->validate()){
$model->save(false);
$message=Email::setJavaMessage('success',Yii::t('app','sm'),Yii::t('app','actionWasAdded'));
echo CJSON::encode(array('status' => 'success','message'=>$message));
Yii::app()->end();
}else{
$error = CActiveForm::validate($model);
if($error!='[]')
echo $error;
Yii::app()->end();
}
}
if(Yii::app()->request->getIsAjaxRequest())
echo $this->renderPartial('_form',array('model'=>$model,'productId'=>$productId),false,true);//This will bring out the view along with its script.
else
$this->render('create',array(
'model'=>$model,'productId'=>$productId));
}
So with above code form is work with validation also, the problem if I need to add dynamic parameters to link how to ?
For example : use it in CRGidview via update function then the $product_id will change for every row related to values in database .
I don't know if you already found a solution but here is how I would do it:
In your link add a parameter like "data-productId" (for example: CHtml::link('Addaction','#myModal',array('id'=>'link','data-toggle' => 'modal','data-productId'=>$id, 'class' => 'link'))).
Bind a javascript function to the click event on your link like this:
$("a#link").click(function()
{
var productId = $(this).data('productId');
//you can change the value of a form component like this
//in the below example I have a hidden input field whose val I want to change to be submitted with the form
$("input#FormId_idHiddenInput").val(productId);
$('#myModal').modal('show');
});
For this example to work you would have to move your form from the partial to your dialog file.
Let me know if this helps you or if there are other problems you encounter.

Categories