here is the html file
it contains a model popup with fields name and email id. I need to edit and update them
<tr ng-repeat="item in collection">
<a ng-click=readOne(item.id) data-toggle="modal" data-target="#myModal">Edit</a>
<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="modal-product-title">Edit</h4>
</div>
<div class="modal-body">
<div><b style='color: red'>{{modalstatustext}}</b></div>
<form id="form-dinminder">
<div class="form-group">
<label for="name" class="control-label">Name</label>
<input ng-model="name" type="text" class="form-control" id="form-name" placeholder="Name">
</div>
<div class="form-group">
<label for="email" class="control-label">Email ID</label>
<input ng-model="email" type="text" class="form-control" id="form-email" placeholder="Email ID">
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button id="btn-update-product" type="button" class="btn btn-warning" ng-click="updateProduct()">Save changes</button>
</div>
</div>
</div>
</div>
</td>
</tr>
controller.js
/***********edit************/
$scope.readOne=function(id){
console.log("selected agency id",id)
adminservice.selectedAgency(id).then(function(response){
$scope.aid = response.data[0].id;
$scope.name=response.data[0].name;
$scope.email=response.data[0].webaddress;
//update modal
$('#myModal').modal('show');
},function(error){
$scope.modalstatustext = "Unable to Update data!";
});
}
$scope.updateProduct=function(id){
var Name = $scope.name;
var Email = $scope.email;
service.updateAgency(Name,Email).then(function(response){
//alert(response.data);
$('#myModal').modal('hide');
showAll();//after updating all items are shown
},function(error){
console.log("error in updating ");
});
}
service.js
var updateAgency=function(Name,Email){
return $http({
method: "POST",
url: CONFIG.apiurl + 'edit',
params:{
name:Name,
webaddress:Email
}
});
i have no idea what i have done wrong.
Backend seems to work perfectly.
thanks
Your UpdateProduct function expects a parameter of id,
<button id="btn-update-product" type="button" class="btn btn-warning" ng-click="updateProduct(passidhere)">Save changes</button>
Remove the id parameter from your updateProduct function as this is not used.
Related
I am working on a machine learning app with Django and I have to pass the data that I wont to use in the model to a views function using ajax and Jquery but the function didn't get called at all so whenever I submit the form is show nothing I've try many solution but didn't work
ps: I am still a beginner in JS
here is the views function:
def Iris_classify(request):
print('called1')
if request.POST.get('action') =='post':
print('caled2')
sepal_length = float(request.POST.get('sepal_lenght'))
sepal_width = float(request.POST.get('sepal_width'))
petal_length = float(request.POST.get('petal_lenght'))
petal_width = float(request.POST.get('petal_width'))
model = pd.read_pickle(r"C:\Users\zakaria\Django\DataProject\Data_science\machinlearning\classifier_model.pickl")
prediction_features=[sepal_length,sepal_width,petal_length,petal_width]
result = model.predict([prediction_features])
classification = result[0]
print(classification)
return JsonResponse({'result': classification, 'sepal_length': sepal_length,
'sepal_width': sepal_width, 'petal_length': petal_length, 'petal_width': petal_width},
safe=False)
and here is the template:
{%extends 'machinlearning/base.html'%}
{%block title%}Iris classification{%endblock %}
{%block content %}
<div class='container pt-5'>
<form action ="" method="POST"id ="input_form">
{% csrf_token %}
<div class="form-group" >
<label for="sepal_length" style="color:white">Sepal Length</label>
<input type="number" step="0.1" class="form-control" id="sepal_length" placeholder="Sepal Length">
</div>
<div class="form-group" >
<label for="sepal_width">Sepal Width</label>
<input type="number" step="0.1" class="form-control" id="sepal_width" placeholder="sepal width">
</div>
<div class="form-group" >
<label for="petal_length">Petal Length</label>
<input type="number" step="0.1" class="form-control" id="petal_length" placeholder="petal_length">
</div>
<div class="form-group" >
<label for="petal_width">Petal Width</label>
<input type="number" step="0.1" class="form-control" id="petal_width" placeholder="petal width">
</div>
<button type="submit" value = "Submit" class="btn btn-primary" data-toggle="modal" data-target= "#modalex">classify</button>
</form>
</div>
<div class="modal fade" id="modalex" tabindex="-1" role="dialog" aria-labelledby="exampleModalLongTitle" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLongTitle">Result</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true">×</span>
</button>
</div>
<div class="modal-body">
<div class="modal-body">
<h5>Prediction Input:</h5>
<div>Sepal Length: <span id="sl"></span></div>
<div>Sepal Width: <span id="sw"></span></div>
<div>Petal Length: <span id="pl"></span></div>
<div>Petal width: <span id="pw"></span></div>
<h5 class="pt-3">Prediction Classification:</h5>
<div id="prediction"></div>
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-primary"data-dismiss="modal">Try again</button>
</div>
</div>
</div>
</div>
<script>
$(document).on("#input_form",'submit', function(e){
e.preventDefault();
$.ajax({
type:'POST',
url:'{%url "mlapps:iris"%}',
data:{
sepal_length:$('#sepal_length').val(),
sepal_width:$('#sepal_width').val(),
petal_length:$('#petal_length').val(),
petal_width:$('#petal_width').val(),
csrfmiddlewaretoken:$('input[name=csrfmiddlewaretoken]').val(),
action: 'post'
},
success:function(json){
document.forms["input_form"].reset();
document.getElementByID("prediction").innerHTML=json['result']
document.getElementByID("sl").innerHTML =json['sepal_length']
document.getElementByID("sw").innerHTML=json['sepal_width']
document.getElementByID("pl").innerHTML=json['petal_length']
document.getElementByID("pw").innerHTML=json['petal_width']
},
error : function(xhr,errmsg,err) {
}
});
})
</script>
{%endblock %}
I have a form I created for editing style on my html page. I pull the data into this form with ajax. And in my select box list, I want whatever data in the database is selected. Others will not disappear. The list will remain the same, but the data in the database will be selected. Somehow I couldn't. How can I do it?
read.php
case "magaza":
if(isset($_REQUEST["id"])){
$result = $mk_db->oku("magaza", " id='$id' ", "", "", "");
if(!empty($result)) {
$responseArray["marka_adi"] = $result[0]["marka_adi"];
$responseArray["resim"] = $result[0]["resim"];
$responseArray["durum"] = $result[0]["durum"];
$responseArray["sira"] = $result[0]["sira"];
echo json_encode($responseArray);
}
}
break;
$(document).ready(function() {
/********************** MODAL AÇMA **********************/
$(document).on('click', '.bn-edit', function() {
var id = this.id;
console.log("id:" + id + ",type:magaza");
$.ajax({
type: "GET",
url: "read.php?id=" + id + "&type=magaza",
success: function(response) {
$("#edit-modal").modal('show');
$.each(response, function(key, value) {
console.log("key:" + key + ",value:" + value);
})
$("#duz_sira").val(response.sira);
$("#duz_durum").val(response.durum);
$("#id").val(id);
}
});
});
});
<div class="modal fade duzenle" id="edit-modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pl-3" id="exampleModalScrollableTitle">Markayı Düzenle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="text-white">×</span>
</button>
</div>
<form method="post" id="frmedit" enctype="multipart/form-data">
<div class="modal-body pre-scrollable">
<input type="hidden" name="id" id="id" class="form-control">
<div class="form-group form-float mt-3">
<div class="form-line">
<input type="text" class="form-control" id="duz_sira" name="duz_sira" required>
<label class="form-label">Sıra</label>
</div>
</div>
<select class="form-control" name="duz_durum" id="duz_durum" required>
<option>Durum Seçiniz</option>
<option value="aktif">Aktif</option>
<option value="pasif">Pasif</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-grey waves-effect iptal-butonu" data-dismiss="modal">İptal</button>
<input type="submit" id="update" class="btn bg-purple waves-effect kaydet-butonu" value="Kaydet">
</div>
</form>
</div>
</div>
</div>
My console request:
Please study the post I made - it is a [mcve] without any needless AJAX if the PHP works, it works and is not needed in the question
You need an ID on the select:
$("#duz_durum") uses the id. if you need name, you need $("[name=duz_durum]")
const response = {
"marka_adi": "Marka 2",
"resim": "",
"durum": "aktif",
"sira": "3"
}
// $("#edit-modal").modal('show');
$.each(response, function(key, value) {
console.log("key:" + key + ",value:" + value);
})
$("#duz_sira").val(response.sira);
$("#duz_durum").val(response.durum);
// $("#id").val(id);
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<div class="modal fade duzenle" id="edit-modal">
<div class="modal-dialog modal-lg" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title pl-3" id="exampleModalScrollableTitle">Markayı Düzenle</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
<span aria-hidden="true" class="text-white">×</span>
</button>
</div>
<form method="post" id="frmedit" enctype="multipart/form-data">
<div class="modal-body pre-scrollable">
<input type="hidden" name="id" id="id" class="form-control">
<div class="form-group form-float mt-3">
<div class="form-line">
<input type="text" class="form-control" id="duz_sira" name="duz_sira" required>
<label class="form-label">Sıra</label>
</div>
</div>
<select class="form-control" name="duz_durum" id="duz_durum" required>
<option>Durum Seçiniz</option>
<option value="aktif">Aktif</option>
<option value="pasif">Pasif</option>
</select>
</div>
<div class="modal-footer">
<button type="button" class="btn bg-grey waves-effect iptal-butonu" data-dismiss="modal">İptal</button>
<input type="submit" id="update" class="btn bg-purple waves-effect kaydet-butonu" value="Kaydet">
</div>
</form>
</div>
</div>
</div>
I have to develop a CRUD function to manage a DB. The button EDIT and DELETE open modal window and interact with the DB. What I cannot get is that the script works perfectly for EDIT but seems to be ignored for DELETE...what is wrong?
Those are my routes:
Route::get('/', 'DataController#overview');
Route::get('/myproject', 'ProjectsController#getForm');
Route::post('/myproject/create', 'ProjectsController#create');
Route::post('/myproject/update', 'ProjectsController#update');
Route::post('/myproject/delete', 'ProjectsController#delete');
Route::get('/upload','DataController#showform');
Route::post('/upload', 'DataController#read_xsl');
Route::get('/jobcontents', 'DataController#showscrape');
Route::post('/jobcontents', 'DataController#scrape');
This is my controller:
public function update(Request $request)
{
#$projectID = \DB::table('projects')->select('id')->get(),
try
{
//Find the project id in Project_model
#var_dump($request->toArray());
#var_dump($request->get('id'));
#exit;
$project = Project_model::findOrFail($request->get('id'));
//Set project object attributes
$project->name = $request->get('name');
$project->description = $request->get('description');
// Save/update project.
$project->save();
#return view('form_project')->with('project', $project);
return redirect()->back()->with('project', $project);
#return back();
}
catch(ModelNotFoundException $err)
{
return redirect()->action('ProjectsController#getForm');
}
}
public function delete(Request $request)
{
try
{
var_dump($request->toArray());
exit;
$project = Project_model::findOrFail($request->get('id'));
$project->delete();
return redirect()->back()->with('project', $project);
}
catch(ModelNotFoundException $err)
{
return redirect()->action('ProjectsController#getForm');
}
}
This is my blade:
//search and retrieve data from Modal
$(document).ready(function() {
$('#editModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var name = button.data('myname')
var description = button.data('mydesc')
var project_id = button.data('projectid')
var modal = $(this)
//put the values in modal <input>
modal.find('.modal-body #name').val(name);
modal.find('.modal-body #description').val(description);
modal.find('.modal-body #project_id').val(project_id);
})
$('#deleteModal').on('show.bs.modal', function(event) {
var button = $(event.relatedTarget)
var projctid = button.data('projid')
var modal = $(this)
modal.find('.modal-body #projid').val(projctid);
})
});
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/css/bootstrap.min.css">
<link rel="stylesheet" href="https://www.w3schools.com/w3css/4/w3.css">
<div class="container">
<h3 class="jumbotron">Create here your project</h3>
<form method="post" id="projectform" class="w3-container w3-light-grey" action={{action( 'ProjectsController#create')}} enctype="multipart/form-data">
{{csrf_field()}}
<p>
<label>Project Name</label>
<input class="w3-input w3-border w3-round" name="name" type="text"></p>
<p>
<label>Project Description</label>
<input class="w3-input w3-border w3-round" name="description" type="text"></p>
<button type="submit" class="btn btn-primary" style="margin-top:10px">Create Project</button>
</form>
</div>
<div class="container-fluid">
<h3 class="jumbotron">Your Projects</h3>
<div class="table-responsive">
<table class="table table-bordered table-striped">
<thead>
<tr>
<th>ID</th>
<th>name</th>
<th>description</th>
<th>created_at </th>
<th>updated_at </th>
</tr>
</thead>
<tbody>
#if(isset($project_data)) #foreach($project_data as $project)
<tr>
<td> {{$project->id}} </td>
<td> {{$project->name}} </td>
<td> {{$project->description}} </td>
<td> {{$project->created_at}} </td>
<td> {{$project->updated_at}} </td>
<td>
<button type="button" class="btn btn-warning btn-detail open-modal" data-projectid="{{$project->id}}" data-myname="{{$project->name}}" data-mydesc="{{$project->description}}" data-toggle="modal" data-target="#editModal">Edit</button>
<button type="button" class="btn btn-danger btn-delete open-modal" data-projid="{{$project->id}}" data-toggle="modal" data-target="#deleteModal">Delete</button>
<button class="btn btn-info">See Jobs</button>
</td>
</tr>
#endforeach #endif
</tbody>
</table>
</div>
</div>
<!-- Modal (Pop up when edit button clicked) -->
<div class="modal" id="editModal" tabindex="-1" role="dialog" aria-labelledby="editModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="editModalTitle">Edit your project</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method="post" action={{action( 'ProjectsController#update')}} id="frmSave" name="frmSave" class="form-horizontal" role="form">
{{csrf_field()}}
<input type="hidden" name="id" id="project_id">
<div class="form-group">
<label for="name" class="col-sm-3 control-label">Project Name</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="name" name="name" placeholder="" value="">
</div>
</div>
<div class="form-group">
<label for="description" class="col-sm-3 control-label">Description</label>
<div class="col-sm-9">
<input type="text" class="form-control" id="description" name="description" placeholder="" value="">
</div>
</div>
</form>
</div>
<div class="modal-footer">
<button type="submit" form="frmSave" class="btn btn-primary" id="btn-save" value="add">Save changes</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
</div>
</div>
</div>
</div>
<!-- Modal (Pop up when delete button clicked) -->
<div class="modal" id="deleteModal" tabindex="-1" role="dialog" aria-labelledby="deleteModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h3 class="modal-title" id="deleteModalTitle">Delete your project</h3>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body">
<form method="post" action={{action( 'ProjectsController#delete')}} id="frmDel" name="frmDel" class="form-horizontal" role="form">
{{csrf_field()}}
<input type="hidden" name="id" id="projid">
<p class="text-center">
Are you sure you want to delete this?
</p>
</form>
</div>
<div class="modal-footer">
<button type="submit" form="frmDel" class="btn btn-primary" id="btn-delete" value="">Yes, delete!</button>
<button type="button" class="btn btn-secondary" data-dismiss="modal">No, don't!</button>
</div>
</div>
</div>
</div>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
---EDIT---
These are the results when I run console.log(button) and console.log(projctid)
Hope this can help newbie like me in the future!
The problem was just related to Chrome CACHE REFRESH!!!
So be sure to clear cache (Shift+F5) and not only refresh the page when something does not work!
I have a problem with a small project for class, which does not insert the data to the database, the data I collect with a bootstrap modal and pass them to the php file using ajax. The error comes at the time of using the script, I think it is correct, but I do not execute the actions.
This is the script I use:
<script type="text/javascript">
$(document).ready(function(){
$('#confirm').click(function() {
var tk = $("#task").val();
var dt = $("#date").val();
var at = $("#amount").val();
var st = $("#status").val();
$.ajax({
type: "POST",
url: "insert.php",
data: {"task": tk, "date": dt, "amount": at, "status": st},
success: function (msg) {
$("#task").val("");
$("#date").val("");
$("#amount").val("");
$("#status").val("");
}
});
});
});
</script>
And this is the modal:
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<div class="modal-dialog" role="document">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title" id="exampleModalLabel">New task</h5>
<button type="button" class="close" data-dismiss="modal" aria-label="Close"><span aria-hidden="true">×</span></button>
</div>
<div class="modal-body" id="task_insert">
<div class="form-group">
<label for="recipient-name" class="form-control-label">Task:</label>
<input type="text" required class="form-control" id="task">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Date:</label>
<input class="form-control" required type="text" id="date">
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Amount:</label>
<div class="input-group mb-2 mr-sm-2 mb-sm-0">
<input type="number" class="form-control" required id="amount">
<div class="input-group-addon">€</div>
</div>
</div>
<div class="form-group">
<label for="recipient-name" class="form-control-label">Status:</label>
<input type="text" class="form-control" id="status" >
</div>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
<button type="button" id="confirm" class="btn btn-success" data-dismiss="modal">Confirm</button>
</div>
</div>
</div>
</div>
Thanks to everyone for your support
Hope this will help You
add jquery at top of page:
<script src="https://code.jquery.com/jquery-3.2.1.js"></script>
then write your ajax script and get your value in insert.php page like:
$task = $_POST['task'];
echo $task;
if still not work then take form inside modal and submit form using jquery.
I am using ckeditor in bootstrap modal. The data in ckeditor should be loaded dynamically after ajax call. I am not able to load the data in ckeditor.
Code :
<div class="modal fade" id="exampleModal" tabindex="-1" role="dialog" aria-labelledby="exampleModalLabel" aria-hidden="true">
<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>
<h4 class="modal-title" id="exampleModalLabel">Thank you Message</h4>
</div>
<div class="modal-body">
<form>
<div class="form-group">
<label for="recipient-name" class="control-label">Recipient:</label>
<input type="text" class="form-control" id="recipient-name">
</div>
<div class="form-group">
<label for="recipient-name" class="control-label">Subject:</label>
<input type="text" class="form-control" id="subject">
</div>
<div class="form-group">
<label for="message-text" class="control-label">Message:</label>
<?php $ckeditor->editor('message', '', array('id'=>'editor1')); ?>
</div>
</form>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
<button type="button" class="btn btn-primary">Send message</button>
</div>
</div>
</div>
</div>
Script
$(document).on('click', '#sendemail', function(){
var target = $('#hidden_send_email_url').val();
var id = $(this).find('#hidden_id').val();
$.ajax({
url : target,
data : {id : id},
type : 'POST',
dataType: "json",
success : function(data){
var modal = $('#exampleModal').modal('show');
modal.find('.modal-body input#recipient-name').val(data.to)
modal.find('.modal-body input#subject').val(data.subject)
CKEDITOR.instances.editor1.setData(data.message)
},
error : function(){
alert('Error occured');
}
})
})
Error is:Uncaught TypeError: Cannot read property 'setData' of undefined
How to solve this?
Any help/suggstion is welcome. Thanks.
I just fixed this issue by removing the id attribute from the textarea