I want to open a pdf file(from database) using onclick event to pass two parameters.
Here is my html
<td class="text-center">
<button data-toggle="modal" data-target="#myModal1" onclick="edit_book1(<?php echo $row['markid'].'/'.$row['appno'];?>)"><i class="glyphicon glyphicon-eye-open"></i></button>
</td>
AJAX
function edit_book1(markid)
{
save_method = 'update';
$('#form2')[0].reset(); // reset form on modals
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('/users/ajax_edit1')?>/" + markid,
type: "POST",
dataType: "JSON",
success: function(data)
{
console.log(data.file_name);
alert(data);
$('[name="title"]').val(data);
$('#modal_form2').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Upload Images'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
modal window
<div class="modal fade" id="modal_form2" role="dialog" >
<div class="modal-dialog">
<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>
<h3 class="modal-title">Book Form</h3>
</div>
<div class="modal-body form">
<!-- <form action="#" id="form1" class="form-horizontal"> -->
<?php $this->load->helper("form"); ?>
<form action="<?php echo base_url();?>upload/do_upload" id="form2" method="post" class="form-horizontal" enctype="multipart/form-data">
<input type="text" value="<?php echo $appno; ?>" name="appno" readonly/>
<div class="form-body">
<div class="form-group">
<label class="control-label col-md-3"></label>
<div class="col-md-3">
<input name="title" readonly="true" placeholder="Markid" class="form-control" >
</div>
<div class="modal-footer">
<input type="submit" class="btn btn-primary" id="submit" value="Upload" />
</div>
</form>
</div>
</div><!-- /.modal-content -->
</div><!-- /.modal-dialog -->
</div><!-- /.modal -->
Modal window could not opened. what mistake did I make? Somebody please help me solve the problem. The alert shows correctly but not display the window
Related
I have a modal in an html page as shown below:
<!-- Modal -->
<div class="modal fade" id="uploadImages" role="dialog">
<div class="modal-dialog modal-lg">
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload Scanned Images</h4>
</div>
<div class="modal-body">
<form action="upload.php" method="POST" enctype="multipart/form-data">
Select file : <input type='file' name='U_FILES[]' id='file' class='form-control' multiple=""><br>
<input type='submit' class='btn btn-info' value='Submit' id='upload' name = 'submit'>
</form>
</div>
<div class="modal-footer">
<p>Only jpeg, png, bmp and tiff Images are allowed to be uploaded</p>
</div>
</div>
</div>
</div>
I also have a php file where I am outputting whether an output has been successful or not through an echo.
for ($i = 0; $i < count($response); $i++) {
echo $response[$i]["fileName"]." - ".$response[$i]["msg"]."<br/>";
}
Is it possible that instead of an echo I pass the response to the same modal body?
You can use ajax to submit form based on your response, also you can display message on same model.
<!-- Modal -->
<div class="modal fade" id="uploadImages" role="dialog">
<div class="modal-dialog modal-lg">
<div id="alertMsg"></div>
<!-- Modal content-->
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal">×</button>
<h4 class="modal-title">Upload Scanned Images</h4>
</div>
<div class="modal-body">
<form method="POST" enctype="multipart/form-data" id="form_submit">
Select file : <input type='file' name='U_FILES[]' id='file' class='form-control' multiple=""><br>
<input type='submit' class='btn btn-info' value='Submit' id='upload' name = 'submit'>
</form>
</div>
<div class="modal-footer">
<p>Only jpeg, png, bmp and tiff Images are allowed to be uploaded</p>
</div>
</div>
</div>
</div>
<script>
$.ajax({
url: 'path/to/php/upload.php',
type: 'POST',
data: $('#form_submit').serializeArray()
success: function(response) {
var tempResponse = JSON.parse(response);//if you are getting json array in response then this line is needed otherwise pass response directly in below html
$('#alertMsg').html(tempResponse);
}
});
</script>
I am newbie to web programming. I would like to insert data into MySQL DB, for that I am using PHP and this data is coming from a form in a Bootstrap Modal. When I click the Savebutton, nothing is happening. I been following a this tutorial and I have done exactly that tutor is doing. What went wrong with my code?
HTML Code and JavaScript:
<body>
<p><br/></p>
<div class="container">
<p></p>
<button class="btn btn-primary" data-toggle="modal" data-target="#addData">Insert data</button>
<!-- Modal -->
<div class="modal fade" id="addData" tabindex="-1" role="dialog" aria-labelledby="addLabel">
<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="addlLabel">Insert Data</h4>
</div>
<form>
<div class="modal-body">
<div class="form-group">
<label for="nm">Name</label>
<input type="text" class="form-control" id="nm" placeholder="Name here">
</div>
<div class="form-group">
<label for="em">Email</label>
<input type="email" class="form-control" id="em" placeholder="Email">
</div>
<div class="form-group">
<label for="hp">Hone Number</label>
<input type="number" class="form-control" id="hp" placeholder="Your Phone">
</div>
<div class="form-group">
<label for="al">Address</label>
<textarea class="form-control" id="al" placeholder="Your address"></textarea>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="submit" onclick="saveData()"class="btn btn-primary">Save</button>
</div>
</form>
</div>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="js/jquery-3.1.1.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="js/bootstrap.min.js"></script>
<script>
function saveData(){
var name=$('#nm').val();
var email=$('#em').val();
var phone=$('#hp').val();
var address=$('#al').val();
$.aja({
type:"post",
url:"server.php?p=add",
data:"nm="+name+"&em="+email+"&hp="+phone+"&al="+address,
success: function(msg){
alert('Success Insert data');
}
});
}
</script>
PHP Code:
<?php
$db=new PDO('mysql:host=localhost;dbname=ajax','root','');
$page=isset($_GET['p'])?$_GET['p']:'';
if($page=='add'){
$name=$_POST['nm'];
$email=$_POST['em'];
$phone=$_POST['hp'];
$address=$_POST['al'];
$stmt=$db->prepare("insert into users values('',?,?,?,?)");
$stmt->bindParam(1,$name);
$stmt->bindParam(2,$email);
$stmt->bindParam(3,$phone);
$stmt->bindParam(4,$address);
if ($stmt->execute()) {
echo "Success";
}else{
echo "Fail".mysqli_error();
}
}else if($page=='edit'){
}if($page=='del'){
}else{
}
?>
I have used the development in Chrome, no error is being shown.
Typo error.You have $.ajx({}).It must be $.ajax({}).Also send your data in object format.like this..
$.ajax({
type:"post",
url:"server.php?p=add",
data:{nm:name,em:email,hp:phone,al:address},
success: function(msg){
alert('Success Insert data');
}
});
I have a popup model where user add the course name. I have added a form validation in my codeigniter controller and then if the validation is false, I am loading my view again with a form error showing above form input in the model, but due to page reload the model closes. What I want is if the form validation is false I want to reload the page with the modal open. I am not familiar with ajax. Any help will be really appreciated.
Codeigniter Controller
$this->form_validation->set_rules('course_name', 'Course Name', 'required|max_length[30]');
$this->form_validation->set_error_delimiters('<div class="text-danger">', '</div>');
if ($this->form_validation->run() ) {
echo "inserted";
}else {
$this->load->view('admin/coursename');
}
Codeigniter View (Modal Code)
<center><button type="button" class="btn btn-primary btn-lg" data-toggle="modal" data-target="#myModal">Add Course</button><center>
<!-- Modal -->
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="myModal" 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">Add Course</h4>
</div>
<div class="modal-body">
<form action="" method="post">
<div class="form-group">
<label for="name">Course Name:</label>
<?php echo form_error('course_name'); ?>
<input type="text" class="form-control" id="name" name="course_name" placeholder="Enter course name...">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
<button type="reset" class="btn btn-warning">Cancel</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
You can use jquery ".ajax()" method to call the validation controller without refreshing, then the controller echoes its result which your j-query code will now have to interprete. An example code below.
You can modify your view code like this:
<div class="modal fade" data-backdrop="static" data-keyboard="false" id="myModal" 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">Add Course</h4>
</div>
<div class="modal-body">
<div class="err">
</div>
<form action="" method="post" id ="yourform">
<div class="form-group">
<label for="name">Course Name:</label>
<?php echo form_error('course_name'); ?>
<input type="text" class="form-control" id="name" name="course_name" placeholder="Enter course name...">
</div>
<div class="form-group">
<button type="submit" class="btn btn-success">Save</button>
<button type="reset" class="btn btn-warning">Cancel</button>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-danger" data-dismiss="modal">Close</button>
</div>
</div>
</div>
<script>
$("#yourform").submit(function (event) {
var form = $(this).closest('form');
field1 = $(form).find('.field1').val();
field2 = $(form).find('.field2').val();
$.ajax({
url: '<?php echo site_url('your/controller/url') ?>',
type: 'POST',
data: {field2: field2, field2: field2},
success: function (result) {
//alert(result);return false;
if (result == 1)
{
location.reload();
} else
{
$('#err').html(result);
}
}
});
event.preventDefault();
});
Then you can configure your controller like such :
<?php
$this->form_validation->set_rules('course_name', 'Course Name', 'required|max_length[30]');
$this->form_validation->set_error_delimiters('<div class="text-danger">', '</div>');
if ($this->form_validation->run()) {
echo "1";
} else {
echo "<b>" . validation_errors() . "</b>";
}
?>
Hope i helped
you can use location.reload("Your Page Name") function in ajax success function.
I'm trying a modal to my php page so when the form is submitted a modal would be triggered, but it doesn't work
here's my code:
<?php
if(isset($_POST['add'])){
$genre=$_POST['genre'];
$desc_genre=mysqli_real_escape_string($cnxn,$_POST['desc_genre']);
$sql = "INSERT INTO genres (genre, desc_genre) VALUES ('".$genre."', '".$desc_genre."')";
if(mysqli_query($cnxn, $sql)){
echo "<script>
$('#myModal').modal('show');
</script>";
}
?>
<div id="myModal" class="modal hide fade" tabindex="-1" data-backdrop="static" data-keyboard="false">
<div class="modal-body">
<p>This Genre Has Been Added Successfully</p>
</div>
<div class="modal-footer">
<button type="button" data-dismiss="modal" class="btn">Cancel</button>
<button type="button" data-dismiss="modal" class="btn btn-primary">Continue Task</button>
</div>
</div>
<div class="login-page">
<?php }else{ ?>
<div class="form">
<form class="login-form" name="f1" method="post" action="" enctype="multipart/form-data">
<input required name="genre" type="text" placeholder="Add Genre"/>
<textarea required name="desc_genre" type="text" placeholder="Description of the Genre"></textarea>
<button type="submit" name="add">ADD</button>
</form>
</div>
ps: everything is running fine except for the modal showing
This will be running before jQuery has loaded. You need it to run after the library has loaded:
<script>
$(function() {
$('#myModal').modal('show');
});
</script>
Why is this not working, because of a problem in Bootstrap or ajax?
This is my modal update:
<div class="container">
<!-- Modal update -->
<div class="modal fade" id="myModals<?php echo $row->id ;?>" 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">Edit Data</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="user">Username:</label>
<input type="user" class="form-control" id="users<?php echo $row->id ;?>" value="<?php echo $row->username ;?>">
</div>
<div class="form-group">
<label for="password">Password:</label>
<input type="password" class="form-control" id="passwords<?php echo $row->id ;?>" value="<?php echo $row->password ;?>">
</div>
<button onclick='update("<?= $row->id ?>")' type="submit" class="btn btn-default">Update</button>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
</div>
And this is my ajax:
function update(id){
var users = $("#users"+id).val();
var passwords = $("#passwords"+id).val();
$.ajax({
dataType:'html',
url:"update.php",
type:"POST",
data:"users="+users+"&passwords="+passwords+"&id="+id,
}).done(function(data){
load();
$('back-drop').remove();
});
}
Why is this not working when I submit the change, the modal form is not closed completely like this:
Please recheck your selector in the hide() syntax. You've forgotten the # in front.
Change this:
$('myModals'+id).modal('hide');
To this:
$('#myModals'+id).modal('hide');
For checking such issues, you should use Google Chrome and press CTRL + Shift + J. The possible syntax errors will be shown in the console.