I have a HTML table on my website where I click on a cell and then am able to edit it. I am now trying to push the edited value back to my database by using ajax. I have tested the click to work properly, the content editable to work properly and that ajax is sending to the correct URL by using a simple "hello" on updatedatabase.php and seeing it return through the alert. When I try to pull the data from ajax to updateddatabase.php is where I am having problems. I believe that maybe $(this).val() may not be what I want to get the contents of the cell that I just edited with contenteditable? The reason I say this is because it looks like a blank value is being passed through to the second page. Here is a chunk of my code for the click / content editable /ajax on the main page:
$('td').click(function(){
var val=($(this).siblings().first().text());
var col = $(this).parent().children().index($(this));
$(this).prop('contenteditable', true);
//var row = $(this).parent().parent().children().index($(this).parent());
//alert('Date: ' + val + ', Column: ' + col);
$(this).bind('input propertychange', function() {
//On key stroke
$.ajax({
method: "POST",
url: "updatedatabase.php",
data: { content: $(this).val() }
})
.done(function( msg ) {
alert( "Data Saved: " + msg );
});
});
});
and here is what I have sitting on updatedatabase.php. I kept it simple just to test the value passing through for now.
<?php
if(array_key_exists("content", $_POST)) {
echo $_POST['content'];
}
?>
Hopefully this is an easy fix as I believe it all may just be with $(this).val() but I am not sure what I should change it to? Thanks for the help!!
Part of the problem is that you're not actually capturing the value of the table cell to be edited. Using a new version of jQuery in my sample code I have replaced your bind() with keyup() as there should not need to be any delegation:
$('td').click(function() {
console.log('clicked');
$(this).prop('contenteditable', true);
$(this).keyup(function() { // get the new value as soon as the key is released
console.log($(this).html());
});
});
https://jsfiddle.net/w9e0d5wm/
As mentioned in comments by #adeneo, table cells have no value property which you can get with val(). In my example I have used $(this).html() to get the text inside the changed <td>, but you could also use .text().
You should change data: { content: $(this).val() } to data: { content: $(this).html() } or data: { content: $(this).text() } in order to send a variable value in your AJAX. Now if you watch the console you'll see something posted and something returned.
Try "delegate" instead of "bind"
Related
I want to create a web app like google sheets in jQuery, but when I try to get a <select> value with $(select).val() I get `null.
I tried to put the code into $(button).click() and then it worked so I think the problem is that Javascript is executed before HTML, but I am not sure.
$(function() {
$.post("getTablesName.php", function(data) {
$("#tables_SCT").html(data);
});
var name = $("#tables_SCT").val();
$.get("getTable.php", { name: name }, function(data) {
$("#columns").html(data);
});
)};
I just want to get the $("#tables_SCT").val().
You will need to put the var name = $("#tables_SCT").val(); line inside the first AJAX callback. As it stands your code is trying to read content which doesn't yet exist in the DOM as the request which fills the option elements is asynchronous.
You will also need to make the second AJAX call from this point too, for the same reason. Try this:
$(function() {
$.post("getTablesName.php", function(data) {
$("#tables_SCT").html(data);
var name = $("#tables_SCT").val();
$.get("getTable.php", { name: name }, function(data) {
$("#columns").html(data);
});
});
)};
I have a table that i load with AJAX and edit with Jeditable.
This is how i start my function:
function refresh_page() {
var tableElm = $('#refresh');
$.ajax({
url: 'assets/php/ritsys/my_table.php',
success: function(data) {
if (!($("*:focus").is("textarea, input, select, date, time")) ) {
tableElm.html(data)
}
$(function(){
$('.edit').editable('assets/php/ritsys/save.php', {
indicator : '<img src="assets/css/smoothness/images/ui-anim_basic_16x16.gif">'
});
});
setTimeout(refresh_page, 1500);
}
}); };
This works fine and i added the if (!($("*:focus").is("textarea, input, select, date, time")) ) { line because i had problems with the data refreshing while i was editing something in the table.
But after i added this everytime when i update a value in the table firstly it shows me the indicator image, then the old value and after that the new value.
Before it would briefly show the indicator and then the new value. Can somebody help me to cut out the step where it shows the old data?
It would be greatly appreciated!
Does the script assets/php/ritsys/save.php return the "new" value? You should return the "new" value, not the "old" value. The returned value will be shown when the request is complete.
Hello I'm doing a script that checks the value entered in the text area line by line after that sending the response, however what I'm seeing in my code is that all the lines are removed at once, and after that the responses start coming i don't want that what i want is:
TextArea One:
Value1
Value2
Value3
After checking (Value1) get the response and remove it from the text area so it will be
TextArea One:
Value2
Value3
and as i was saying the code is removing everything after that start getting the response and this is the code that i tried:
$(document).ready(function(){
$('#submit').click(function(){
$('#linewhichischeckednowhide').slideDown();
function removeResourceLine()
{
resource.splice(0, 1);
$('#resource').val(resource.join("\n"));
}
function removeSocksLine()
{
socks.splice(0, 1);
$('#socks').val(socks.join("\n"));
}
function Result(type,data)
{
$('#'+type).append("<br />"+data);
}
function whenToChangeSocks()
{
if(maxFail == timeToChangeSocks){maxFail = 0;removeSocksLine()}
}
// Functions are up
//this section only for code variables and code execution
success: function(data)
{
resource.splice(0, 1);
$('#resource').val(resource.join("\n"));
}
}).complete(function(){
});
});
});
});
Ok let's talking about the concept cause there are some things not clearly in your question
1st : split textarea value by \n to get rows
2nd : use $.each() to loop through array to get each row value
3rd : use each value as you want (split it or anything) and post it with ajax
4th : in ajax success just replace the value with ('') (check demo)
this is just a simple example
$(document).ready(function(){
$('button').on('click',function(){
var valueSplit = $('textarea').val().split('\n');
$.each(valueSplit , function(key , value){
alert(key + value);
// you can use ajax here for each value
});
});
});
Working DEMO
I have created an unordered list just like in this example - DirectionAwareHoverEffect .
Because I may have a lot of content, I decided to automate the markup. I included the content in a JSON file. The file is loaded using the following code.
$.ajax({
//cache: false,
url: "../content/"+"benefits.json",
dataType: "json",
success: function(data) {
var rows = data.rows;
var item = '<ul id="da-thumbs" class="da-thumbs">';
$.each(rows, function(idx, obj) {
item += '<li><a class="hvr-float"><img src="' + obj.image + '" /><div><span>' + obj.title + '</span></div></a></li>';
});
item += '</ul>';
$("#benefits-container").html(item);
}
});
However after having done so, the JS effect no longer works and I don't see any errors when I use the debugging tool.
The JS effect for the DirectionAwareHoverEffect (according to the tutorial) is done using this code
$('#da-thumbs > li ').each( function() {
$(this).hoverdir({
hoverDelay : 0
});
} );
Of course, this code calls its own library given in the source code.
I included the content loading function in the $(window).load() function and the JS effect in the $(document).ready() function. But I do not get any effect.
Any help will be much appreciated.
You either need to use delegation like on() or you need to call the plugin after the ajax call and the appending of the elements.
So, either, after this line
$("#benefits-container").html(item);
do
$('#da-thumbs > li ').each( function() {
$(this).hoverdir({
hoverDelay : 0
});
} );
or try and see if you can delegate like
$(document).on('hoverdir', '#da-thumbs > li', function(){
return {hoverDelay : 0}
}));
$('#da-thumbs > li ').each( function() {
} );
Note, above delegate suggestion may not be %100 correct as I am not sure how to bind to custom events(and can't look it up right now, sorry :) ).
I got an problem with dynamically added DOM objects in jQuery. First of all I use this:
var $input = $('#search-input');
var $usersList = $('#ulist');
$input.on('input', function () {
$.ajax({
type: 'get',
url: '/userlist',
data: {query: $input.val()},
success: function (response) {
var json = JSON.parse(response);
$usersList.empty();
$.each(json, function (index, val) {
$usersList.append("<div id=\"listelem\">" + val + "</div>");
});
}
});
});
<div id="ulist"></div>
<input id="search-input" type="text">
to insert divs into usersList. This works well, but now I want to get val from this div when I click on it to process it further. I wrote this piece of code:
$usersList.on('click','#listelem', function(){
alert("clicked");
});
When I click on div I got proper alert, but now I have no idea how could I took data from inside of this element.
I don't know the proper engineering but I have dealt with similar issue while I was developing some requirements. basically as I understood you want to find out the target of the event and drag a value from there? if so you can do something like this:
jQuery(document).on('click', '#listelem', function(event){
var x = event.target.val();// event.target.value; depending on your situation and availability of the method.
});
Hope this helps.
try this
$(document).on('click','#listelem', function(event) {
alert($(event.target).text());
});
jsfiddle
Thanks you for help. for me proper option was to call
var mem =event.target.innerText;
you can do that with the regular javascript, you don't need Jquery.
document.addEventListener("click", function(e) {
if(e.target) {
console.log("item clicked ", e.target.textContent);
}
});
This should do the job to get the value of current target.