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'));
Related
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
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() );
});
}
I am trying to parse $(this) to a function called by another function but without much luck. Essentially my question is; is it possible and if so, how?
Code is as follows:
Initial Call
$('.playform').on('click', playForm);
Primary Function
function playForm(e){
...snip...
TweenLite.to($('.video'), 1, {css:{'height':win.h+'px'}, ease:Power4.easeInOut, onComplete:showForm});
...snip...
}
Secondary Function
function showForm{
$('.video #youtube').append('<iframe class="show-form" src="'+$('.playform').attr('href')+'"></iframe>');
}
As I am going to be using more than one form, I wanted to automate this process but I cant seem to
Things I have tried so far but to no avail
Declared $(this) as a variable
Tried to give the functions parameters
Step 1
$('.playform').on('click', function(){
var whichVid = $(this);
playForm(whichVid);
});
Step 2
function playForm(e){
TweenLite.to($('.video'), 1, {css:{'height':win.h+'px'}, ease:Power4.easeInOut, onComplete:showForm(e)});
}
Step 3
function showForm(e){
$('.video #youtube').append('<iframe class="show-form" src="'+e.attr('href')+'"></iframe>');
}
Alternatively you could establish a global variable before step 1 and then set the value on the click event like
var window.whichVid = '';
$('.playform').on('click', function(){
window.whichVid = $(this);
playForm();
});
function playForm(){
TweenLite.to($('.video'), 1, {css:{'height':win.h+'px'}, ease:Power4.easeInOut, onComplete:showForm()});
}
function showForm(){
var thisVid = whichVid.attr('href');
$('.video #youtube').append('<iframe class="show-form" src="'+ thisVid +'"></iframe>');
}
you could put it like this (not tested) :
(function($){
var global_this;
function palyform(e){
global_this = $(this)
...
}
function showform(e){
// do shomething with global_this
...
}
$('.playform').on('click', playForm);
}(jQuery);
How can I save the value of the title for a row? These are the values of the title=%s:
<a class="false" title=1106 href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
<a class="false" title=1153 href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
<a class="false" title=1175 href="/useradminpage?main_id=%s&display=false"><span class="small">(hide)</span></a>
...
I've tried countless variations but none of them work. This is what I have now:
<script>
$(document).ready(function() {
console.log("ready");
$("a.false").click(function(e) {
$(this).closest("tr.hide").hide("slow");
var main_id = a.title;
var display = "false";
e.preventDefault();
});
$("a.false").click(function() {
$.ajax({
url: "/useradminpage?main_id=%s&display=false",
data: {main_id: "main_id", display: "display"},
success: function(data) {
display_false()
alert("4 - returned");
}
});
});
});
</script>
This is the third question on this topic. I appreciate any help. Thanks.
instead of
var main_id = a.title;
try
var main_id = $(this).attr('title');
because if I'm not wrong, "a" isn't defined
I think what you're trying to do is pass the value of the title attribute along in your AJAX request. If that's the case, the easiest thing to do will be to do it all in one event handler (is there a reason you're binding 2 different handlers to the same event?):
$("a.false").click(function(e) {
$(this).closest("tr.hide").hide("slow");
var main_id = this.title;
var display = "false";
e.preventDefault();
$.ajax({
url: "/useradminpage",
data: {main_id: main_id, display: display},
success: function(data) {
display_false();
alert("4 - returned");
}
});
});
Your problem currently is that main_id and display are not in the scope of the second event listener, so will be undefined (and they shouldn't be quoted, otherwise you're just passing in strings). As you're passing in a data object to the ajax function, you don't really need to add the query string to the URL either.
Aside from that, when you assign a value to main_id, you're using a.title. In this case a is undefined, and you will need to use this, which will be a reference to the clicked element.
I suspect that I might be missing something, but I suspect that your problem is using a.title instead of this.title:
$("a.false").click(function(e) {
$(this).closest("tr.hide").hide("slow");
var main_id = this.title; // or you could use the jQuery object approach: $(this).attr('title') instead
var display = "false";
e.preventDefault();
});
The problem in your original approach is that a would be parsed as a variable, which hasn't been assigned a value, nor has it been declared, so that it would return undefined or null (at best). Within the scope of the each() method, you're iterating over individual nodes; so to access the properties/attributes of that node use this.
To access any attribute of a DOM element through jQuery, you can use the .attr() function.
In your particular case you would do.
var main_id = $(this).attr('title');
I'm having issues with scope in Javascript. Take a look at this code, for example:
$(function() {
var items = "GLOBAL";
$('.add').click(function() {
$.post("main/get", { 'get' : 'all' },
function(data){
items = String(data.result);
items = items.split(' *** ');
alert(items);
}, "json");
alert(items);
return false;
});
$(".add").autocomplete({
source: items
});
});
I'm trying to get autocomplete working, and it almost is. The only problem is that I can't seem to change items outside of the inner-most function. The first alert gives me what I'm looking for, but the second just gives me "GLOBAL." The bottom autocomplete part has to be able to access it.
Any help is appreciated!
Thanks!
It is not just a scope issue. Since your request is very likely to happen asynchronously (unless configured otherwise) it won't work that way anyway. You have to initialize the autocomplete in the callback function which gets called once your AJAX request is complete:
$(function() {
$('.add').click(function() {
$.post("main/get", { 'get' : 'all' },
function(data){
var items = String(data.result);
items = items.split(' *** ');
$(".add").autocomplete({
source: items
});
}, "json");
});
});