I have an element which contains an ID. I am trying to pass this ID through when opening a modal. The ID is then used to get a Wordpress post.
When an element which has a class (openModalStaff) is loaded in and clicked, I am successfully get the ID and assign it as an attribute to the element. I can also open the modal. What I can't do is display the variable inside the modal, which will then be used to target the correct Wordpress post.
Any ideas?
The JS:
jQuery(".page_meet_the_team").bind("DOMSubtreeModified", function() {
jQuery('.openModalStaff').each(function(i, obj) {
var staffIDAdd = jQuery(this).find('.wd_member_id').text().trim();
jQuery(this).attr('data-id', staffIDAdd);
});
jQuery(".openModalStaff").unbind().click(function() {
// Get ID of staff
var staffID = jQuery(this).attr("data-id");
console.log('fire');
// Post variable to PHP
jQuery.ajax(
{
url: "https://www.example.com/wp-content/themes/voisen-child/partials/partial-staff-modal-ajax.php",
type: "POST",
data: { id: staffID},
success: function (result) {
console.log(staffID);
// Fire modal
jQuery('#staffModal').modal('show');
}
});
});
});
The PHP:
if (isset($_POST['id']) && !empty($_POST['id'])) {
echo $_POST['id'];
} else {
echo 'not set';
}
The modal:
<div class="modal fade" id="staffModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel" aria-hidden="true">
<div class="vertical-alignment-helper">
<div class="modal-dialog vertical-align-center">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
</div>
<div class="modal-body">
<?php
$type = 'team';
$args = array(
'post_type' => $type,
'post_status' => 'publish',
'posts_per_page' => 1,
'p' => JQUERY UNIQUE ID
);
$my_query = null;
$my_query = new WP_Query($args);
if( $my_query->have_posts() ) {
while ($my_query->have_posts()) : $my_query->the_post();
?>
<div class="staffModalRow">
<div class="staffModalLeft">
<?php the_post_thumbnail('full'); ?>
</div>
<div class="staffModalRight">
<h2><?php the_title(); ?></h2>
<p><?php the_content(); ?></p>
</div>
</div>
<?php
endwhile;
}
wp_reset_query();
?>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-success">OK</button>
</div>
</div>
</div>
</div>
</div>
I ended up taking another approach. The modals were needed in Wordpress, so I used a modal per item inside the loop, and used ID's to target unique modals, which meant when I clicked the link I was able to pass the ID directly and open up the required data in to the modal.
Would have preferred a neater way using jQuery / AJAX like the above, and just using the one modal, but for some reason $_POST just wasn't passing the data.
Related
How can I fetch the data and displayed it as a Modal Popup and not a Text,
and here comes the problem because this code
errors
database structure
index.php
<!-- The Modal -->
<div id="myModal" class="modal">
?>
</div>
<script type="text/javascript">
$.ajax({
type: "GET",
url: "select.php", //create a php for the SELECT STATEMENT
//data: $("#signin").serialize(), // serializes the form's elements.
success: function (data) {
$("#myModal").html(data);
modal.style.display = "block";
}
});
</script>
Here is the second page which is select.php
here is where the modal will be fetched
select.php
<?php
$link=mysqli_connect("localhost","root","");
mysqli_select_db($link, "autorefresh");
$res = mysqli_query($link,"select * from table1");
while($row=mysqli_fetch_array($res))
{
echo ' <div class="modal-content">
<span class="close">×</span>
<p>'.$row["name"]." ".$row["city"].'</p>
</div>';
}
You did't define what modal is.... Try this lines,
success: function (data) {
$("#myModal").html(data);
$("#myModal").slideDown('slow');
}
The line $("#myModal").slideDown('slow'); will show your model with slideDown effect.
Also you can use $("#myModal").css('display','block'); to display instead of the slideDown effect.
MODAL POPUP
To create a modal popup you need to use bootstrap.
add boostrap to your project then try this,
<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">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
And in your javascript,
success: function (data) {
$("#myModal .modal-body").html(data);
$("#myModal").modal('show');
}
The line $("#myModal").modal('show'); will popup the modal.
I use the extension EFullcalendarheart , by making after click event will pop up. but fuction does not load into the intended controller.
--controller
public function actionView2($id)
{
$this->renderPartial('view2',
array('model'=>$this->loadModel($id)),false,true
);
}
--view
<?php $this->widget('ext.fullcalendar.EFullCalendarHeart', array(
// 'themeCssFile'=>'cupertino/jquery-ui.min.css',
'options'=>array(
'header'=>array(
'left'=>'prev,today,next',
'center'=>'title',
'right'=>'month',
//'right'=>',agendaWeek,agendaDay'
),
'events'=> $this->createUrl('peminjaman/calendarevents'),
'eventClick'=> 'js:function(calEvent, jsEvent, view) {
$("#myModalHeader").html(calEvent.title);
$("#myModalBody").load("'.Yii::app()->createUrl("peminjaman/view2/id/").'"+calEvent.id);
$("#myModal").modal();
}',
)));
?>
<?php $this->beginWidget(
'booster.widgets.TbModal',
array('id' => 'myModal')
); ?>
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h4 id="myModalHeader"></h4>
</div>
<div class="modal-body" id="myModalBody">
<p>----</p>
</div>
<div class="modal-footer">
<?php $this->widget(
'booster.widgets.TbButton',
array(
'label' => 'Close',
'url' => '#',
'htmlOptions' => array('data-dismiss' => 'modal'),
)
); ?>
</div>
<?php $this->endWidget(); ?>
how to solve it, to make a pop up view event or input details for me. Thank you in advance
I am trying to create a modal after an JQuery ajax call and filling it with a template, but the modal gets no height. Only if i add height manually in the show.bs.modal event i get the result i want.
$('span[data-toggle="filemanager"]').click(function( event ) {
$('#modal-filemanager').remove();
$.ajax({
url: "<?php echo site_url("filemanager/view")?>",
dataType: 'html' })
.done(function(data) {
$('body').append('<div id="modal-filemanager" class="modal">' + data + '</div>');
/* only with this code i get height on my modal */
$('#modal-filemanager').on('show.bs.modal', function () {
$(this).find('.modal-body').css({
height: ($( window ).height()*0.7)
});
});
/* */
$('#modal-filemanager').modal('show');
})
.fail(function(data) {
console.log(data);
});
});
And the template:
<div class="modal-dialog modal-lg">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title">Filemanager</h4>
</div>
<div class="modal-body">
<div row="row">
<?php if(isset($directories)) { ?>
<?php foreach($directories as $directory) { ?>
<div class="col-sm-3 col-xs-6 text-center">
<div class="col-sm-12">
<a href="<?php echo site_url("filemanager/load").'?path='.$path.'/'.$directory->name; ?>" class="directory"><i class="fa fa-folder fa-5x"></i>
</a>
</div>
<div class="col-sm-12">
<label>Folder Name
<?php //echo $directory->name; ?>
</label>
</div>
</div>
<?php } ?>
<?php } ?>
</div>
</div>
</div>
And screenshots first shows my problem and the second shows the result after adding css :
Thanks in advance for any help!
I cant believe that my problem was a syntax error. I had div row="row" rather than class="row". Anyway thanks for the help.
Currently I have a while loop setup to display notations made on the page. When clicking the "x" to delete one, it always removes the first one from the page. The back end still deletes the correct entry however I have to refresh to see this. How I can prevent the wrong box from diapering to avoid confusion?
HTML/PHP while loop
while ($commentRow = mysql_fetch_array($woComments)) { ?>
<div class="row">
<div class="col-lg-12">
<div class="panel panel-info panel-dismissable" id="panel-dismissable">
<div class="panel-heading">
<button type="button" class="close" data-target="#panel-dismissable" data-dismiss="alert" onClick="DelNotation(this, <?php echo $commentRow['CommentsID']; ?>);"> <span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
Notation on <?php echo $commentRow['Date']; ?>
</div>
<div class="panel-body">
<p><?php echo $commentRow['Comment']; ?></p>
</div>
</div>
</div>
<!-- /.col-lg-4 -->
</div>
<!-- /.row -->
<?php }
Ajax
<!-- Close Notation -->
<script>
function DelNotation(button, wo)
{
var Comment = $(button).closest(".row").find(".panel-dismissable").val();
jQuery.ajax({
type: "POST",
url: "functions/closeNotation.php",
data: {wo: wo},
cache: false,
success: function(response)
{
//alert("Your notation has been removed from this work order");
}
});
}
</script>
I need to load dynamic data into bootstrap modal box.
JS:
$(function() {
$('.push').click(function() {
var id = $(this).attr('id');
$.ajax({
type: 'post',
url: '../controller/booksdetails.php', // in here you should put your query
data: 'cmid=' + id, // here you pass your id via ajax .
// in php you should use $_POST['post_id'] to get this value
success: function(r) {
// now you can show output in your modal
$('#cm').modal({
backdrop: 'static',
keyboard: false
}) // put your modal id
$('.something').show().html(r);
}
});
});
});
PHP file :
if(isset($_POST['cmid'])){
$DB = mysqli::f("SELECT * FROM " . BOOKS . " WHERE id = ?",filter_var($_POST['cmid'], FILTER_VALIDATE_INT));
print_r($DB);
}
and print data into modalbox div with class="something". this method true worked and print all php array result.
now I need to work with php array aftar load data into modalbox(work with php class, secure data, ....). I mean is: load php data into modalbox (ie : json) not print result into modalbox.
how do can I generate this?
Hi man here an example: http://jsfiddle.net/leojavier/kwh2n00v/1/
<!-- Button trigger modal -->
<button type="button" class="btn btn-primary btn-lg" id="insert">
insert data
</button>
<!-- Modal -->
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<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" id="myModalLabel">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>
</div>
</div>
JS
$('#insert').on('click', function (){
// This should be on your AJAX Success
var data="some dynamic data";
$('.modal-body').html(data);
$('#myModal').modal('show');
//--------------------------------------
})
I hope this helps...
http://jsfiddle.net/leojavier/kwh2n00v/1/