removing line by line from textarea - javascript

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

Related

JS Variable Not Being Passed Correctly

I've been working on this code for a while. I have a HTML, JS and a Code.js page.
On changing of the value in a Dropdown list on my HTML form, the item in the Dropdown is passed to the Code.js to have the result returned, however, I keep having NULL as my result. -arr is the result.
Another issue, is that I can see in the script logs that getRowData() is being executed twice, not sure why, but this may be overwriting our array.
HTML
JS
//$('#searchDropdown').one('change', function(){
//$("#searchDropdown").change(function(){
//$('#searchDropdown').on('keyup propertychange change', function(){
//$('#searchDropdown').on('input', function(){
//$('#searchDropdown').one('submit', function(){
$('#searchDropdown').one('change', function(){
var selatr = $('#input1').val();
google.script.run.withSuccessHandler(poperr).getRowData(selatr);
});
function poperr(arr){
alert(arr +" ! ");
}
Code.GS
function getRowData(selatr){
//Vlookup a GoogleSheet and return the resulting row
sheet_data.getRange(2,16).setValue(selatr); //set for vlookup
var x = sheet_data.getRange(3,16).getValues();
var arr= [];
arr.push({
id : selatr
name : sheet_data.getRange(x,2).getValues()
})
return arr;
}
It might be because you have multiple event handlers in your code and your getRowData function is being called twice.
Try e.stopImmediatePropagation(); This stops the rest of the event handlers from being executed.
$('#searchDropdown').one('change', function(e){
e.stopImmediatePropagation();
var selatr = $('#input1').val();
google.script.run.withSuccessHandler(poperr).getRowData(selatr);
});

Jeditable and AJAX reload

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.

Get a Javascript variable on the click of button

That's my code:
afficherListe();
function afficherListe()
{
$.post('afficher_liste.php', function(data)
{
var obj = jQuery.parseJSON(data);
if(data!="")
{
$.each(obj, function(index, value){
$('<li><button onclick="supprimer_article()">X</button>'+value.nomArticle+' '+value.prixArticle+'</li>').insertAfter($('#liste_boissons'));
});
}
else
{
alert('no data');
}
});
}
function supprimer_article(article_selectionne)
{
alert(article_selectionne);
}
Problem : I want to put my variable in supprimer_article() function, to have it in parameter and to continue my work in the function.
Example : If I click on "X" Vodka button (view picture), I would find inalert(article_selectionne); "Vodka"
In a primary step, I've put the variable like that :
$('<li><buttononclick="supprimer_article('+value.prixArticle+')">X</button>'+value.nomArticle+' '+value.prixArticle+'</li>').insertAfter($('#liste_boissons'));
But, the result in alert(article_selectionne); was : UNDEFINED
If you think you have the solution, it would be very nice and helpful to share it for me !
To have an idea of what do this function now (the final goal is that this function will remove the selected article from the DB after the onclick event....) :
You need to add name to function arguments when calling. Replace the line
$('<li><button onclick="supprimer_article()">X</button>'+value.nomArticle+' '+value.prixArticle+'</li>').insertAfter($('#liste_boissons'));
with the following code:
$('<li><button onclick="supprimer_article(\'' + value.nomArticle + '\')">X</button>'+value.nomArticle+' '+value.prixArticle+'</li>').insertAfter($('#liste_boissons'));
You need to place the value within the function itself. Change:
$('<li><button onclick="supprimer_article()">X</button>'+value.nomArticle+' '+value.prixArticle+'</li>').insertAfter($('#liste_boissons'));
to
$('<li><button onclick="supprimer_article('"+value.nomArticle+"')">X</button>'+value.nomArticle+' '+value.prixArticle+'</li>').insertAfter($('#liste_boissons'));

Issue passing value through ajax

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"

Getting html out of multiple input labels with the same class

So this is my code so far...
function doAlertings()
{
var inputlabels = $('.inputLabel').each(function(i, obj) {
});
alert(inputlabels);
}
This will alert all 12 of my input labels one after another however they are all blank. But when I use...
var inputlabels = $('.inputLabel').html();
alert(inputlabels);
That will alert only the first input label and stop there. Anyone got an idea of how to get the html out of each one?
Help is much appreciated.
Thanks
Use $(this).text() to get the text of each element in each loop
$('.inputLabel').each(function(i, obj) {
alert($(this).html()); // console.log($(this).text());
});
Pay attention to indentation - messy indentation and formatting makes code obscure and you easily overlook a mistake, like in your case.
After you format your code properly, you get:
function doAlertings()
{
var inputlabels = $('.inputLabel').each(function(i, obj) {
// do nothing
});
alert(inputlabels);
}
So, you clearly see, you are calling the alert function just once.
If your intent is to alert contents of the labels, this would be the way:
function doAlertings()
{
var inputlabels = $('.inputLabel').each(function(i, obj) {
alert( $(obj).html() );
});
}

Categories

Resources