i have this ajax function i found in an opensource code.
function edit_person(id)
{
save_method = 'update';
$('#form')[0].reset(); // reset form on modals
//Ajax Load data from ajax
$.ajax({
url : "<?php echo site_url('person/ajax_edit/')?>/" + id,
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="id"]').val(data.id);
$('[name="firstName"]').val(data.firstName);
$('[name="lastName"]').val(data.lastName);
$('[name="gender"]').val(data.gender);
$('[name="address"]').val(data.address);
$('[name="dob"]').val(data.dob);
$('#modal_form').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Person'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
}
it does open a form over the data table with the information to be updated..
to briefly explain what i want to happen,
i have this folders in my module
folder
--controller
--model
--views
----main.php
----edit.php
----add.php
what i want to do is when i click the button, ajax will get the values i need to update and go to my edit.php and show the values there
No you can't call edip.php from VIEWS folder with AJAX request. Create a class called Person with edit_ajax method. And send your information from Ajax to edit_ajax method.
folder
--controller
----person.php /*Person class, contains edit_ajax method*/
--model
----person.php /*Contains update_person method, Call it from edit_ajax,
this model method will update Database with new information*/
--views
----main.php
----edit.php
----add.php
Related
I have a ajax function as follows:
$.ajax({// defining the below function as ajax responsive//
url:'Type&State', // the function that process the mapped url name and matching type is going to receive the data//
type:'POST',
data:{state_name:name,case_type:type},// function to get the value from jsp page and send it to mapped class function//
success: function(response){// if the backend process is success then the function will run by getting the response as its parameter//
alert(response.message);
load();
},
error: function(response){
alert("unable to pull up any electricians or plumbers for the selected state");
}
});
}
load = function(){
$.ajax({
url:'list',
type:'POST',
success: function(response){
data = response.data;
$('.tr').remove();
for(i=0; i<response.data.length; i++){
$("#table").append("<tr class='tr'> <td> "+response.data[i].user_name+" </td> <td> "+response.data[i].user_email);
}
}
});
Now depending upon the user input my controller may retun user data or
admin data,i know how to capture user data (email and name) but it may
not return user data type,so could any one please tell me how to configure success or load function to
print the response of admin data when the response contains admin attributes and how to print user data when the response contains user attributes, Thank you!
If I wanted to pop up a particular modal currently I'd add this HTML and click the link...
<a data-deploy-menu="notification-modal-3" href="#">Demo</a>
However I want to remove link and call the modal on a successful ajax call. Somethinkg like the below, but unsure how to do it. Please can you help?
jQuery.ajax({
url: "http://localhost/timesheets/mobile/add-timesheet.php",
type: "POST",
data: form.serialize(),
crossDomain: true,
datatype: "json",
cache: false,
success: function (data) {
var jsArray = JSON.parse(data);
console.log(jsArray);
if ($.trim(jsArray.success) === 'yes') {
$('#notification-modal-3').load;
}
},
error: function (xhr, thrownError) {
console.log(xhr.status);
console.log(thrownError);
}
});
});
The modal html is as follows...
<div id="notification-modal-3" data-menu-size="345" class="menu-wrapper menu-light menu-modal">
<h1 class="center-text">Test</h1>
</div>
Edit : I sort of got this working..
So I added the a href link back in. For example...
<a id="notification-modal-4" data-deploy-menu="notification-modal-3" href="#"></a>
so the link doesnt actually show on the page then in the ajax call I used
$('#notification-modal-4').click();
but would appreciate if there is a better way to do this...
Basically you can do this in you ajax success code:
(hopyfully I did not missunderstand)
success: function (data) {
var jsArray = JSON.parse(data);
console.log(jsArray);
if ($.trim(jsArray.success) === 'yes') {
// fill up the modal with some content if it is dynamicaly
$('#notification-modal-3').html('thank you');
$('#notification-modal-3').show();
// do some cleanup if needed like hide it if needed
setTimeout(function() {
$('#notification-modal-3').html('');
$('#notification-modal-3').hide();
}, 1000);
}
},
With the controlling of the modal within the ajax call, you do not need any (auto-)link-clicking.
I have a jquery ajax form to add/edit/delete username list in mysql db.
When I retrieve data with special chars from DB I'd like to populate the modal edit form with entity decoded chars...so for example ù wouldn't show as ù
Here you are the code I'm using:
$("body").on("click",".edit-user",function(){
var id = $(this).parent("td").prev("td").prev("td").prev("td").prev("td").text();
$('#form')[0].reset(); // reset form on modals
//Ajax Load data from ajax
$.ajax({
url : url + '/ajax_edit/' + id,
// type: "POST",
type: "GET",
dataType: "JSON",
success: function(data)
{
$('[name="username"]').val(data.username); // Populate edit modal form with retrieved username data
$('#con-close-modal').modal('show'); // show bootstrap modal when complete loaded
$('.modal-title').text('Edit Contributor'); // Set title to Bootstrap modal title
},
error: function (jqXHR, textStatus, errorThrown)
{
alert('Error get data from ajax');
}
});
});
Solved using echo html_entity_decode(json_encode($data)); in server side PHP script.
I have a problem with calling ajax on my view on codeigniter website. Ajax is calling method in controller on same project.
I have ajax search, which is work correctly. When I chose one of results, he open a new tab and show me a detail information from database. In some cases when I click on some results(I didn't find rule when it will be happening), ajax return me a 500 error, without go into controller method, but when I refresh the page (F5) he shows me a correct result. Did someone have a same problem, or can help me to fix it?
Here is my ajax call:
<script>
$(document).ready(function() {
$.ajax({
type: 'POST',
url: '<?=site_url('index/ajax_read_details')?>',
dataType: 'json',
cache: false,
async:true,
data: {'param':'<?=$selected?>'},
beforeSend: function (xhr) {
$('#loading').show();
},
success: function (data) {
$('#loading').hide();
var details = '<tr>' +
'<td>'+data['title']+'</td> '+
'<td>'+data['code']+'</td>' +
'</tr>';
$('#data >tbody').append(details);
})
},
error: function(jqXHR, textStatus, errorThrown){
alert('Error: '+ errorThrown);
}
});
});
</script>
I know now that he didn't go into controller method "ajax_read_details" in index controller in case when it give me an 500 error.But when I refresh, he go into that method and do it correctly job. In both cases, he send a same values but in first he didn't return values, after refresh page he give me a values :(
Short controller method is:
public function ajax_read_details()
{
$param = $this->input->post('param');
echo json_encode(array('title' => $param, 'code'=>param));
}
Please look at the ajax URL hardcoded which works but the usual url(commented) doesn't work! How to specify such url to direct ajax call to different controller folder?
Even with hardcoded url I cannot set json data to modal pop up label in the view which calls ajax request. But an alert works fine!
How strange is that or am making any mistakes here?
My Script:
$("#img_xx_info").click(function () {
$.ajax({
type: 'GET',
//url: '#Url.Action("action1","controller2")', //doesnt work
url: "../controller2/action1", //works
dataType: "JSON",
success: function (data) {
alert(data);
var obj = JSON.parse(data);
alert(obj.count);//works
$("#value_xy_Id").val = obj.count;//doesnt work this #value_xy_Id is a part of modal lable
}
});
$("#myModal").modal('show');
});
My MVC Structure:
----content
css goes here
----scripts
ajax script goes here ( needs to call controller2/action1 to return json result)
----controllers
>A -controller1controller(action1,2,3..)
>B -controller2controller(action1,2,3..) // return Json(data, JsonRequestBehavior.AllowGet);
>C -controller3controller(action1,2,3..)
-------views
>A -file1.cshtml
>B -file1.cshtml
>C -file1.cshtml ("#img_xx_info" click event here invokes below scripts + modal popup here to get json into table)