I am having a problem updating a database field via jquery and php with contenteditible. The ajax.php file just takes my input from the form and updates the database when the user clicks away but for some reason I can never hit the $("td[contenteditable=true]").blur(function(). Is it because I am displaying the html from the js file? If so how can I get the .blur() to run this way?
Here is a snip of my php.
<div id="status"></div>
<div class="row">
<div id="html"></div>
</div>
My js file
$(function(){
var message_status = $("#status");
$("td[contenteditable=true]").blur(function(){
var field_userid = $(this).attr("id") ;
var value = $(this).text() ;
$.post('ajax.php' , field_userid + "=" + value, function(data){
if(data != '')
{
message_status.show();
message_status.text(data);
//hide the message
setTimeout(function(){message_status.hide()},3000);
}
});
});
//snip
});
function updateTable() {
//snip
$.post("controller.php", payload, displayTable);
}
function displayTable(data){
var obj_defect = $.parseJSON(data);
//snip
html += '<thead><tbody>';
for(i=0; i<obj.length; i++) {
html +='<tr>';
html +='<td width="10%">' + obj[i].row1 + '</td>';
html +='<td width="10%">' + obj[i].row2 + '</td>';
html +='<td width="10%">' + obj[i].row3 + '</td>';
html +='<td width="10%">' + obj[i].row4 + '</td>';
html +='<td id="row0:'+obj[i].id+'" contenteditable="true"> ' + obj[i].row5 + '</td>';
html +='</tr>';
}
html += '</tbody></table>';
} else {
html = '<h4>No results found</h4>';
}
}
$("#html").html(html);
}
Your listener must run AFTER the element exists. You currently create the contenteditble td row after you receive the data from your post, which means when you go to assign a listener at page load there is no object in existence yet.
Something like this should work:
$.post("controller.php", payload, displayTable).done(function() {
// now create listener on td[contenteditable=true]
});
Related
It's my first time using json and I'm trying to make an update button on a table that i make with ajax json, there is a problem that i can't put id_news attribute on the tag along with the target link. I tried put it next to the target link, but it doesn't work, and even the tables doesn't show anything, is there any way to make it work?
$(document).ready(function() {
display_data_info();
function display_data_info() {
$.ajax({
type: 'ajax',
url: '<?php echo base_url()?>/information/data_read_info',
async: false,
dataType: 'json',
success: function(data) {
var html = '';
var i;
var no;
var id_news;
for (i = 0; i < data.length; i++) {
no = +1;
html += '<tr>' +
'<td>' +
no +
'</td>' +
'<td>' +
data[i].news_title +
'</td>' +
'<td>' +
data[i].news_info +
'</td>' +
'<td>' +
data[i].news_status +
'</td>' +
'<td><a href="<?php echo site_url("information/display_update_info/".data[i].id_news); ?>" class="btn btn-app">' +
'<i class="fas fa-edit"></i> ' +
'</a>' +
'</td>' +
'</tr>';
}
$('#show_data_info').html(html);
}
});
}
});
[wanted to post just a comment, but haven't enough reputation yet. Perhaps a moderator can change my feedback into a comment?]
I see multiple typos and mistakes here:
In the first php part, put a ; after base_url()
You are not initializing no before you do no += 1
Instead of no += 1 you do no = +1 (which may accidentally overcome the previous error but it's probably not what you want)
In the <td><a href=.... line you are mixing up single and double quotes
In that same line, your javascript variable is inside PHP. data[i].id_news does not exist in PHP scope.
Check your web console and PHP error log, there will be several errors.
i have the following piece of code:
function teamAuswaehlen() {
$.post("Auswahl_Abteilung?_=" + new Date().getTime(), function(data) {
eintraege = "<div class='col-md-12 col-xs-12'>" +
"<div class='form-group'>" +
"<select class='form-control' id='teams' title='Wählen Sie hier ihre Teamansicht'>"
if (data.length > 1) {
$("#kalenderAuswahl .modal-body").empty();
$.each(JSON.parse(data), function(key, value) {
eintraege += "<option id='" + value.Team_ID + "'>" + value.TE_Kurzbezeichnung + "| " + value.TE_Langbezeichnung + "</option>";
});
eintraege += "</select>" +
"</div>" +
"</div>";
}
if (data.length > 1) {
$("#kalenderAuswahl .modal-body").append(eintraege);
$("#kalenderAuswahl").modal("show");
}
}).done(function() {
$("#teams").change(function() {
getId(this);
});
});
}
The Modal is build dynamicly at the start of the programm.
So the onchange event i want to call if a user change the select box is store in the done block.
But if i trie the code, nothing happens so the onchange event is not fired.
So how can i handle that ?
Here is code snippet for your change event.
$('body').on('change', '#teams', function(e) {
e.preventDefault();
// do your stuff
});
You can write this change event code in below section
Before body tag end Or
You can write in $(document).ready(function() {})
you can remove done method and paste your code to body.
select event with body tag as like $('body').on('change', '#teams'
or
just use like this $('body').on('change', '#teams' in done method.
No need to place code in done().place the following code anywhere in tag
$(document).on('change','#teams',function() {
getId(this);
});
I m working with a project using an AJAX call and in my program I have a select list and I need to implement select2 but I can not do it. My code in my .js file is:
function selectAlumnos(){
$.ajax({
type : "GET",
url : lang + '../../../api/select_alumnos', //the list of data
dataType : "json",
data : {
cachehora : (new Date()).getTime()
}
}).done(function(response){
var html = '';
if(response.state == 'ok'){ //add html to the file view
html = '<select class="select_1" name="select-allalumnos" id="select-allalumnos" onchange="getIconLocation()" >'; //class to include in select2
html = html + '<option value="-1">...</option>';
for(var i in response.alumnos){
html = html + '<option value="' + response.alumnos[i].id + '" >' + response.alumnos[i].nombre + '</option>';
} //get the list of the data
html = html + '</select>'; // put the data in the list
}
$('#select-alumnos').html(html); //publish the info in the html file
});
}
In my html page for the view I have the select-alumnos part like this:
<label for="select-alumnos" class="select">Alumno:</label>
<span id="select-alumnos"></span> //here is the call in the AJAX
In this file (html for view) I have also put all the select2 paths to the required files, and I checked all the files are ok, also I have included the class (same class in my js file):
$(document).ready(function() {
$(".select_1").select2();
});
</script>
What am I doing wrong because I can not get the select2 format in my list...?
you're calling select2() on .select_1 before its created. Do it after you've created the element (put it in the done function)
.done(function(response){
var html = '';
if(response.state == 'ok'){ //add html to the file view
html = '<select class="select_1" name="select-allalumnos" id="select-allalumnos" onchange="getIconLocation()" >'; //class to include in select2
html = html + '<option value="-1">...</option>';
for(var i in response.alumnos){
html = html + '<option value="' + response.alumnos[i].id + '" >' + response.alumnos[i].nombre + '</option>';
} //get the list of the data
html = html + '</select>'; // put the data in the list
}
$('#select-alumnos').html(html); //publish the info in the html file
$(".select_1").select2();
});
Ok, so I have a table with each row having check boxes at the start of each table row. When a user clicks the table rows he/she wants to display and hits the submit button I want those table rows to show up on another page. I am doing this by creating a variable just like this:
$('#submit').click(function(){
var data;
var title = $('#dimTableTitle td').html();
data = '<table id="dimTable">';
data += '<tbody>';
data += '<tr id="dimTableTitle">' + '<td colspan="100">' + title + '</td>' + '</tr>'
data += '<tr id="dimHeading">';
$("#dimHeading").find('td').each(function(){
data += '<td>' + $(this).html() + '</td>';
});
$('#dimTable tr').has(':checkbox:checked').each(function(){
data += '<tr>'
$(this).find('td').each(function(){
data += '<td>' + $(this).html(); + '</td>'
});
data += '</tr>'
});
data += '</tr>'
data += '</tbody>';
data += '</table>';
});
The variable 'data' displays just fine on the original page but when I try and load it into a new div or other container on a different page I only receive the entire table, not the selected table rows. I want to display that new variable onto a new page that pops up when a user clicks on the submit button. Any help would be appreciated.
You can send data with post method, (async)
jQuery.ajax({
url: "a.php?" + params,
async: false,
cache: false,
dataType: "html",
success: function(html){
returnHtml = html;
}
});
Note 1: Source code is written just to give you ideas.
Local storage is the way to go.
http://www.w3schools.com/html/html5_webstorage.asp
i have a div id.i have to append a table with values to the div.
<div id="testResult" style="padding-left: 120px; "></div>
am doing follwing steps but it is not working.
$.ajax({
url: '/getReports',
cache: false
}).done(function (html) {
if (html != "") {
$('#testResult').show();
var htm = "";
var string1 = '<table border="1"><tr><td>No</td><td>Testcase</td> <td>OS</td> <td>Browser</td> <td>Result</td></tr></table>';
$.each(html, function (i, data) {
string1 + = '<tr><td rowspan="3">1</td><td rowspan="3">' + data.status.test + '</td><td rowspan="3"><!--OS--></td><td>' + data.status.bwser + '</td> <td> ' + data.status.report + ' </td></tr>';
});
$('#testResult ').append(string1);
$("#testResult").html("<br/><br/>");
$("#testResult").html("<p>" + htm + "</p>");
}
}).fail(function () {
$("#testResult").html("Failed to run the test");
$('#edit ').removeAttr("disabled");
});
$("#testResult").html("<br/><br/>") and $("#testResult").html("<p>" + htm + "</p>") will overwrite contents of your "testResult" DIV. So, replace this
$('#testResult ').append(string1);
$("#testResult").html("<br/><br/>");
$("#testResult").html("<p>" + htm + "</p>");
}
with
$('#testResult ').append(string1);
$("#testResult").append("<br/><br/>");
$("#testResult").append("<p>" + htm + "</p>");
}
.append(): Will add or append extra strings to the existing contents of the DIV
where as
.html(): Will removes or overwrite the existing contents of the DIV with newer one.
This is the main difference between .append() and .html().
edit this part
$("#testResult").append("<br/><br/>");
Remove this part-->
$("#testResult").html("<p>" + htm + "</p>");
htm is empty string, as you never concatenate any string to it