We Keep Coding

PHP & Ajax , Javascript - How to display modal when data is fetched into the database instead of text

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.

jQuery variable to bootstrap modal with ajax and php (using Wordpress)

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.

Dismissable box removing first box and not one clicked

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>

Laravel 4 validation in bootstrap modal

I'm a newbie to Laravel 4, and I'm trying to get a form validation in bootstrap modal.
My modal have a form with a text input and a submit button, and I want that when the validation fails, the modal show me the error.
But the modal, after the validation and the page refresh, is closed.
Here is the code from the controller and the view:
Controller code:
public function postAvatar()
{
$avatar_rules = array(
'avatar_src' => 'url',
);
$validator = Validator::make(Input::all(), $avatar_rules);
$validator->setAttributeNames(User::$names_attr);
if ($validator->passes())
{
$avatar_src = (Input::get('avatar_src'))? Input::get('avatar_src') : URL::asset('assets/images/user/default-user-avatar.png');
$user = User::find(Auth::id());
$user->avatar_src = $avatar_src;
if ($user){
return Redirect::to('dashboard')->withSuccess("Success: avatar updated.");
}
return Redirect::to('dashboard')->withError("Error: an error has occurred.");
}
return Redirect::back()->withErrors($validator);
}
View code:
<!-- Modal -->
<div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-labelledby="avatarModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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>
<h4 class="modal-title" id="avatarModalLabel">Update avatar</h4>
</div>
<div class="modal-body">
<h4><span class="label label-info">Current avatar</span></h4>
<img class="img-circle img-responsive dashboard-avatar" src="{{ $user->avatar_src }}" alt="{{ $user->username }} avatar">
<div class="divider"></div>
<h4><span class="label label-info">New avatar</span></h4>
{{ Form::open(array('url' => 'dashboard/avatar', 'method'=>'post', 'role'=>'form')) }}
<ul>
#foreach($errors->all() as $error)
<div class="alert alert-danger" role="alert">{{ $error }}</div>
#endforeach
</ul>
<div class="form-group">
<label for="avatar_src" class="control-label">Link avatar</label>
<input type="text" name="avatar_src" class="form-control" id="avatar_src" placeholder="Link of avatar image url">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
{{ Form::close() }}
</div>
</div>
</div>
How can I resolve ?
Thanks.
SOLVED:
Controller code:
public function postAvatar()
{
$avatar_rules = array(
'avatar_src' => 'url',
);
$validator = Validator::make(Input::all(), $avatar_rules);
$validator->setAttributeNames(User::$names_attr);
if ($validator->passes())
{
$avatar_src = (Input::has('avatar_src'))? Input::get('avatar_src') : URL::asset('assets/images/user/default-user-avatar.png');
$user = User::find(Auth::id());
$user->avatar_src = $avatar_src;
if ($user->save()){
if(Request::ajax()){
return Response::json(array('success' => true));
}
}
return Redirect::to('dashboard')->withError("Error: an error has occurred.");
}
return Response::json(array('errors' => $validator->errors()->toArray()));
}
View code:
<!-- Modal -->
<div class="modal fade" id="avatarModal" tabindex="-1" role="dialog" aria-labelledby="avatarModalLabel" aria-hidden="true">
<div class="modal-dialog">
<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>
<h4 class="modal-title" id="avatarModalLabel">Update avatar</h4>
</div>
<div class="modal-body">
<h4><span class="label label-info">Current avatar</span></h4>
<img class="img-circle img-responsive dashboard-avatar" src="{{ $user->avatar_src }}" alt="{{ $user->username }} avatar">
<div class="divider"></div>
<h4><span class="label label-info">New avatar</span></h4>
{{ Form::open(array('url' => 'dashboard/avatar', 'id'=>'avatar_form', 'method'=>'post', 'role'=>'form')) }}
<div class="alert alert-danger avatar_alert" role="alert" style="display: none">
<ul></ul>
</div>
<ul>
</ul>
<div class="form-group">
<label for="avatar_src" class="control-label">Link avatar</label>
<input type="text" name="avatar_src" class="form-control s_tooltip" id="avatar_src" placeholder="Avatar image links">
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Update</button>
</div>
{{ Form::close() }}
</div>
</div>
</div>
Ajax:
<script>
$(document).on('submit', '#avatar_form', function(event){
var info = $('.avatar_alert');
event.preventDefault();
var data = { avatar_src: $("#avatar_src").val() }
$.ajax({
url: "/dashboard/avatar",
type: "POST",
data: data,
}).done(function(response) {
info.hide().find('ul').empty();
if(response.errors)
{
$.each(response.errors, function(index, error){
info.find('ul').append(error);
});
info.slideDown();
}
else if(response.success){
window.location.href = "/dashboard";
}
});
});
</script>

Your best bet would be to validate the form via AJAX to avoid the page reloading entirely. You would then check the response of your AJAX request for the presence of errors and show them inside the modal if they exist.
You could also add in client side validation to prevent the request being made until the rules are satisfied. I wouldn't recommend using this INSTEAD of server side validation but using it ASWELL as is normally quite desirable.
To accomplish this, you'd need to do something along these lines:
Javascript:
Catch submit event of your form and make an AJAX request.
$(document).on('submit', 'form', function(event){
event.preventDefault();
var data = { avatar_src: $("#avatar_src").val(); };
$.ajax({
url: "/dashboard/avatar",
data: data
type: "POST",
}).done(function(response) {
if(response.errors)
{
// Add error to Modal Body
}
else
{
// Show success message, close modal?
}
});
});
Backend:
Modify your controller method to detect if the current request is an AJAX request and if so, return the response in JSON instead of Redirecting. For example:
if(Request::ajax())
{
return Response::json(array('errors' => $validator->messages()));
}
else
{
return Redirect::back()->withErrors($validator);
}
I've not tested any of that code so might contain some typos/errors but hopefully this helps you!

I was facing same issue. After research on internet,I found that Laravel don't support withSuccess('success_msg') method.
return Redirect::to('dashboard')->withSuccess("Success: avatar updated.");
Here is complete discussion on this topic:
https://github.com/laravel/framework/issues/906.
But you can handle this issue with this approach:-
- For Error message:-
[code has to be added in controller]
return Redirect::to('view')->withErrors('your error message.');
[code has to be added in view]
#if(isset($errors) && count($errors->all())>0)
<ul>
#foreach($errors->all() as $error)
<li>{{ $error }}</li>
#endforeach
</ul>
#endif
- for succcess message:-
[code has to be added in controller]
$success_msg='your success message.';
Session::flash('successMsg', $success_msg);
return Redirect::to('view');
[code has to be added in view]
#if (Session::has('successMsg'))
{{ Session::get('successMsg') }}
#endif
This approach is working fine for me.
For better display of your errors you can use bootstrap css.

How to load image into Bootstrap Modal from JSON Flickr API

Below is the code I am working with as an example.
When I click each image from the Flickr feed I want to be able to load the Bootstrap Modal (which it does) but display that particular photo in the Modal (which it currently doesnt).
I've tried numerous different things. But I am unable to get it to work.
Example at http://jahax.com/ins/
<div class="container">
<h2 style="text-align: center;">Demonstration</h2>
<p class="text-center">Demo of Bootstrap, jQuery & JSON API</p>
<div class="row text-center">
</div>
<div id="images" class="row text-center"> </div>
</div>
<div class="modal fade" id="myModal" tabindex="-1" role="dialog" aria-labelledby="nyModalLabel" aria-hidden="true">
<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" id="myModalLabel">Demo of Modal</h4>
</div>
<div class="modal-body">
<img id="mimg" src="">
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<script src="https://code.jquery.com/jquery.js"></script>
<script src="js/bootstrap.min.js"></script>
<script type="text/javascript">
// Start jQuery Function
$(document).ready(function(){
// JSON API to access Flickr
$.getJSON("http://api.flickr.com/services/feeds/photos_public.gne?tags=winter&format=json&jsoncallback=?", displayImages);
function displayImages(data) {
var iCount = 0;
var htmlString = "<div class=row>";
$.each(data.items, function(i,item){
if (iCount < 18) {
var sourceSquare = (item.media.m).replace("_m.jpg", "_q.jpg");
htmlString += '<a class="btn" data-toggle="modal" data-target="#myModal">';
htmlString += '<img src="' + sourceSquare + '">';
htmlString += '</a>';
}
iCount++;
});
// HTML into #images DIV
$('#images').html(htmlString + "</div>");
// Close down the JSON function call
}
// End jQuery function
});
</script>
<script type="text/javascript">
// Send Content to Bootstrap Modal
$('img').on('click',function()
{
var sr=$(this).attr('src');
$('#mimg').attr('src',sr);
$('#myModal').modal('show');
});
</script>

Change your 2nd script to this:
<script type="text/javascript">
// Send Content to Bootstrap Modal
$(document).on('click', 'img', function(){
var sr=$(this).attr('src');
$('#mimg').attr('src',sr);
$('#myModal').modal('show');
});
</script>