I have the following div
<div class="modal hide" id="changeProject">
<div class="modal-header">
<a class="close" data-dismiss="modal">×</a>
<h3><?php echo __('Change Project') ?></h3>
</div>
<div class="modal-body">
<form id="frmChangeProject">
<fieldset>
<ol>
<?php echo $changeProjectForm->render(); ?>
</ol>
</fieldset>
</form>
</div>
<div class="modal-footer">
<input type="button" id="dialogChange" class="btn" value="<?php echo __('Edit'); ?>" />
<input type="button" id="dialogCancel" name="dialogCancel" class="btn reset" data-dismiss="modal" value="<?php echo __('Cancel'); ?>" />
</div>
</div>
Using JS I want to change the value of <h3></h3> element. also I want to use that magic function for the purpose of localization.
Using jquery, you can call this after an event:
$(".modal-header h3").html("your new header");
It will look for the h3 element inside of the .modal-header class and change it.
Related
I'm having issues with trying to pass a value to a non-bootstrap modal. The way my current php loop is written, I understand that I can only use my modal to edit the last row in my SQL table. However when my modal div was inside the loop, I would only able to alter the first row of the SQL table. How could I modify my scripts to accept the value from the button which loads my modal?
PHP:
<?php
while ($row=mysqli_fetch_array($select))
{
$idtemp=$row['id'];
<button id="edit_form<?php echo $idtemp;?>" data-target="#id02" data-id="<?php echo $idtemp;?>" onclick="document.getElementById('id02').style.display='block'">Edit</button>
<?php
}
?>
HTML:
<div id="id02" class="modal">
<span onclick="document.getElementById('id02').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" id="editForm" action="modify_records.php" method="post">
<div class="container">
<h3>Edit an Existing Project</h3>
<label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
<input type="text" name="Project_Name" id="Project_Name_Edit" placeholder="Project Name">
<br><br>
<label for="Partners" class="ui-hidden-accessible">Partners:</label>
<?php
echo $partnersmenu;
?>
<br><br>
<label for="blank" class="ui-hidden-accessible">. </label>
<br><br>
<br><br>
<input type="button" id="edit_button" class="edit_button" value="Submit" onclick="edit_row(<?php echo $idtemp;?>);">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
</div>
Javascript:
function edit_row(id){
initialize variables
send ajax data to modify_records.php
...
}
EDIT:Solution with hidden-field:
First give a class to your buttons in your loop
<?php
while ($row=mysqli_fetch_array($select))
{
$idtemp=$row['id'];
<button class="openModal" id="edit_form<?php echo $idtemp;?>" data-target="#id02" data-id="<?php echo $idtemp;?>" onclick="document.getElementById('id02').style.display='block'">Edit</button>
<?php
}
?>
Than put a hidden-field in your modal
<div id="id02" class="modal">
<span onclick="document.getElementById('id02').style.display='none'"
class="close" title="Close Modal">×</span>
<!-- Modal Content -->
<form class="modal-content animate" id="editForm" action="modify_records.php" method="post">
<div class="container">
<h3>Edit an Existing Project</h3>
<label for="Project_Name" class="ui-hidden-accessible">Project Name:</label>
<input type="text" name="Project_Name" id="Project_Name_Edit" placeholder="Project Name">
<br><br>
<label for="Partners" class="ui-hidden-accessible">Partners:</label>
<?php
echo $partnersmenu;
?>
<br><br>
<label for="blank" class="ui-hidden-accessible">. </label>
<br><br>
<br><br>
<input type="button" id="edit_button" class="edit_button" value="Submit" onclick="edit_row(<?php echo $idtemp;?>);">
<input type="hidden" id="hidden_temp_id">
<button type="button" onclick="document.getElementById('id02').style.display='none'" class="cancelbtn">Cancel</button>
</div>
<div class="container" style="background-color:#f1f1f1">
</div>
</form>
</div>
Than create in your js-file eventlistener to your buttons
var openModalButtons = document.getElementsByClassName("openModal");
for (var i = 0; i < openModalButtons.length; i++) {
openModalButtons[i].addEventListener('click', myFunction, false);
}
var myFunction = function() {
var idtemp = this.getAttribute("data-id");
document.getElementById('hidden_temp_id').value = idtemp;
};
Here am I updating the data through modal and its working but the thing is, I want to show the selected data as selected. The update function is working but not getting idea for the value to be selected.
Here is my view
<td><a class="btn btn-primary vehicle_user" data-toggle="modal" data-target="#myModaledit" id="<?php echo $row->id;?>" vehicle="<?php echo $row->vehicle_id; ?>">Edit</a></td>
This is my modal
<div class="modal fade" id="myModaledit" 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">Edit Vehicle</h4>
</div>
<form action="<?php echo base_url();?>vehicle/vehicle_control/edit_vehicle_user" method="post">
<div class="modal-body">
<div class="form-group">
<label for="vehicle" class="control-label">Vehicle:</label>
<select name="vehicle" class="form-control">
<?php foreach($vehicles as $res){?>
<option <?php if($res->id==$row->vehicle_id)echo 'selected' ?> value="<?php echo $res->id;?>"><?php echo $res->name;?></option>
<?php }?>
</select>
</div>
</div>
<div class="modal-footer">
<input type="hidden" name="id" value="" id="vehicle_user_id">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class="btn btn-primary">Save changes</button>
</div>
</form>
</div>
</div>
</div>
Here is my jQuery script
$(document).ready(function() {
$(".vehicle_user").click(function() {
var id = $(this).attr('id');
//alert(id);
$("#vehicle_user_id").val(id);
$("#vehicle").val($(this).attr('vehicle'));
});
});
As you not specified the ID attribute. You need to use Attribute Selector to target the vehicle drop-down element.
$("[name='vehicle']").val($(this).attr('vehicle'));
OR, Set the ID attribute of vehicle drop-down element.
<select id="vehicle" name="vehicle" class="form-control">
</select>
This is my problem when im trying to change the image to my 2nd data it's not changing but when i tried the first data it's changing i don't know the reason why it's not working on the second data. Can someone help me with this?
Here is my form where the image and file is in.
Update
here is the picture the news with id 42 when i change the image of that the image is not changing but with the news with id 40 it's changing.
Here is my whole code.
$stmt = mysqli_prepare($con, "SELECT * FROM news ORDER BY news_id");
mysqli_stmt_execute($stmt);
$result = mysqli_stmt_get_result($stmt);
while($row = mysqli_fetch_array($result)){
?>
<tr>
<td><?php echo $row['news_id']; ?></td>
<td><?php echo $row['news_title']; ?></td>
<td><?php echo $row['news_date']; ?></td>
<td><?php echo $row['news_content']; ?></td>
<td><img style="height:150px; width:200px;" src="<?php echo $row['news_image']; ?>" ></td>
<td>
<button class="btn btn-info" data-toggle="modal" data-target="#newsedit<?php echo $row['news_id'];?>"><span class="glyphicon glyphicon-edit"></span> Edit</button>
<a class='btn btn-danger delete-object' data-toggle="modal" data-target="#newsdelete<?php echo $row['news_id'];?>"><span class="glyphicon glyphicon-remove"></span> Delete</a>
<div class="modal fade" id="newsdelete<?php echo $row['news_id'];?>" role="dialog" aria-labelledby="myModalLabel">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-body">
Are you sure you want to delete this?
</div>
<div class="modal-footer">
<a class='btn btn-danger left-margin' href="delete.php?newsid=<?php echo $row['news_id'];?>" >Yes</a>
<button type="button" class="btn btn-default" data-dismiss="modal">No</button>
</div>
</div>
</div>
</div>
<div id="newsedit<?php echo $row['news_id'];?>" class="modal fade" 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">Edit events</h4>
</div>
<div class="modal-body edit-content">
<form method="POST" enctype="multipart/form-data" action ="edit2.php?newsid=<?=$row['news_id']?>">
<div class="form-group">
<label for="title">News Title</label>
<input type="text" name="titles" class="form-control title" id="title" placeholder="News Title" value="<?php echo $row['news_title']; ?>">
</div>
<div class="form-group">
<label for="date">Date</label>
<input type="text" name="dates" class="form-control date" id="date" placeholder="Date" value="<?php echo $row['news_date']; ?>"s>
</div>
<div class="form-group">
<label for="content">News Content</label>
<textarea class="form-control content" name="contents" rows="5" id="content"><?php echo $row['news_content']; ?></textarea>
</div>
<img id="blah" name="newsimages" src="<?php echo $row['news_image']; ?>" width="200px" height="140px"/>
<input id="image" name="image" class="fileupload" type="file" accept="image/*"/>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" class='btn btn-info left-margin'>Yes</a>
</form>
</div>
</div>
</div>
</div>
</td>
</tr>
<?php
}
?>
here is the js for showing the image before uploading.
<script type="text/javascript">
function readURL(input) {
if (input.files && input.files[0]) {
var reader = new FileReader();
reader.onload = function (e) {
$('#blah').attr('src', e.target.result);
}
reader.readAsDataURL(input.files[0]);
}
}
$("#image").change(function(){
readURL(this);
});
</script>
Use something like this:
function readURL(input) {
if (input.files && input.files[0]) {
var url = URL.createObjectURL(input.files[0]);
$(input).siblings('img').attr('src', url);
}
}
$(".fileupload").change(function() {
readURL(this);
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<img name="newsimages" width="200px" height="140px"/>
<input name="image" class="fileupload" type="file" accept="image/*" />
Don't use duplicate ids in a document! This causes undefined behavior, and generally results in things not happening as expected. Easiest solution is to remove any ids in the HTML inside your PHP while loop.
I'm trying to get the distance from departure and destination using Google Map API. Its working nicely! But the problem is, I have departure field and Destination field. After filling those fields, if I click on "Get the Distance" button then I wanted it to show the distance value in Bootstrap modal. But, its not showing. That means, I'm not getting distance value in Modal.
Form
<form action="" method="get">
<div class="InP">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Departure', 'moorgiz_lang'); ?></span>
<input type="text" name="departure" class="form-control ICustom" id="departure" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<?php if($moorgiz['customize-style']=='black') { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/black/location.png" />
<?php } else { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/location.png" />
<?php } ?>
<div class="InP" style="margin-top:4%;">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Destination', 'moorgiz_lang'); ?></span>
<input type="text" name="desti" class="form-control ICustom" id="destination" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<div class="form-group">
<label class="text-left CustomLabel-NoP" for="sel1"><?php _e('Number of Passengers', 'moorgiz_lang'); ?></label>
<select class="form-control pull-left CustomControl-NoP" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-sm-12">
<input type="submit" class="btn btn-info pull-right ButtonPos" data-toggle="modal" data-target="#myModal" value="CALCULATE"/>
</form>
Modal HTML
<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">
<?php
$addressFrom = $_GET['departure'];
$addressTo = $_GET['desti'];
$distance = getDistance($addressFrom, $addressTo, "K");
echo $distance;
?>
</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>
Can you guys please suggest me something?
What you need is modal event and ajax method
Couple of changes required in form
change method from get to post or no need at all
assign id='myForm' to form
change type="submit" to type="button"
The form will be
<form action="" method="POST" id="myForm">
<div class="InP">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Departure', 'moorgiz_lang'); ?></span>
<input type="text" name="departure" class="form-control ICustom" id="departure" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<?php if($moorgiz['customize-style']=='black') { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/black/location.png" />
<?php } else { ?>
<img style="float: left; margin-top: 5%; margin-left: 30px;" src="<?php echo get_template_directory_uri(); ?>/images/icons/location.png" />
<?php } ?>
<div class="InP" style="margin-top:4%;">
<div class="input-group IGCustom">
<span class="input-group-addon InputGroup" id="basic-addon3"><?php _e('Destination', 'moorgiz_lang'); ?></span>
<input type="text" name="desti" class="form-control ICustom" id="destination" aria-describedby="basic-addon3" placeholder="<?php _e('Ex: N Rue, Code Postale, Ville', 'moorgiz_lang');?>">
</div>
</div>
<div class="form-group">
<label class="text-left CustomLabel-NoP" for="sel1"><?php _e('Number of Passengers', 'moorgiz_lang'); ?></label>
<select class="form-control pull-left CustomControl-NoP" id="sel1">
<option>1</option>
<option>2</option>
<option>3</option>
</select>
</div>
<div class="col-sm-12">
<input type="button" class="btn btn-info pull-right ButtonPos" data-toggle="modal" data-target="#myModal" value="CALCULATE"/>
</form>
Modal HTML (added <div class="getdistance"></div> to display the data via ajax method)
<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 class="getdistance"></div>
</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>
Modal event listener with Ajax method
$(document).ready(function(){
$('#myModal').on('show.bs.modal', function () {
var form = $('#myForm'); //Get Form
$.ajax( {
type: "POST",
url: caculatedistance.php, //Create this file to handle the form post data
data: form.serialize(), //Post the form
success: function(response) {
$('.getdistance').html(response); //show the distance in modal
}
});
});
});
last create caculatedistance.php where you handle the form posted values, calculate the distance and echo the output to display in modal
<?php
//include getDistance() function
if(isset($_POST['departure'])) {
$addressFrom = $_POST['departure'];
$addressTo = $_POST['desti'];
$distance = getDistance($addressFrom, $addressTo, "K");
echo $distance; //this value will show in modal
}
?>
I have a PHP page for insert, update and delete in which a pop up for edit is shown as follows
The pop is shown in jquery as follows when the edit button is clicked in the table in background of image shown according to the id:
$('.edit').live('click',function(){
var id=$(this).attr('data-id');
params={};
params.id=id;
params.action="editClient";
$('#popupbox').load('chapter_manager.php', params,function(){
$('#block').show();
$('#popupbox').show();
$(document).ajaxComplete(function(){
$("#wait").css("display", "none");
});
})
I need validation for the two input boxes. With jquery it works fine .
I need to perform server side validation .
The problem is that the page gets relaoded after the button click and hence the pop is not shown again after the server side validation.
I tried ajax but not working. Any idea how should I show the pop up again?
Also I want to know whether I need to perform PHP server side validation when already I have done validation in jquery?
I am using a page template in the modal pop up with the from submit and submit button as follows which is different from the page which is seen in the background.
<form name ="client" id="client" method="POST" action="chapter_manager.php"><div style="display: block; position:relative;" class="modal">
<div class="modal-dialog" style="width:100%; margin:0px 0px 0px 0px;">
<div class="modal-content">
<div class="modal-header">
<button id="close_form" type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
<h4 class="modal-title"> <?php echo $view->label ;?> </h4>
</div>
<div class="modal-body">
<table>
<tr><td><input type="hidden" name="id" id="id" value="<?php print $view->client->getChapter_ID() ?>"> <label>Name:</label>
<span style="color:#c30;">*</span>
<?php /*?><span class="error">* <?php echo $nameErr;?></span><?php */?>
<span class="error"> <?php echo $nameErr;?></span> </td>
<td><input type="text" class="form-control" name="name" id="name" value = "<?php print $view->client->getChapter_Name() ?>">
</td>
</tr>
<tr>
<td><br/>
</td>
<td></td>
</tr>
<tr>
<td><label>Description:</label>
<span style="color:#c30;">*</span> </td>
<td><input type="text" class="form-control" name="description" id="description" value = "<?php print $view->client->getChapter_Description() ?>">
</td>
</tr>
</table>
</div>
</div>
<div class="modal-footer">
<input id="cancel" class="btn btn-default pull-left" type="button" value ="Cancel" />
<input id="submit" class="btn btn-primary " type="submit" name="submit" value ="Save Changes" />
</div>
</div>
</div>
</div>
</div>
</form>