JQuery click function not working as it should

Question

I got trouble running my Jquery click function:

$("#eintragen_bauteil_neu").click(function() {  //soabld geklick 
        var fehler=0;
        var artikelnummer = $("#artikelnummer").val(); //eingegebene artikelnummer auslesen
        var kunde = $("#kunde").val(); // eingegebenen Kunden auslesen


        //generate array artikelnummern von kunde gewählt
         $.get("query_bauteile.php?kunde="+kunde, function(data){ //gibt 1001,1002,1003,1144 ... etc als tring zurueck
            bauteile_array = data.split(","); //string wird gesplittet durch (",")und zu array bauteile_array

    if (inArray(artikelnummer,bauteile_array) == -1) { 
        alert("alles ok"); 
        fehler = 0; //wenn Bauteilnummer nicht doppelt vergeben

        } 
    else {
        alert ("fehler"); 
        fehler = 1; //wenn Bauteilnummer doppelt vergeben

        }




     }); //fuction data //von get query_bauteile.php


     //Fehlerbehandlung
        alert(fehler);
     if (fehler == 1)  {                                                            
        $("#artikelnummererror").html("Bitte Artikelnummer NEU eingeben darf nicht doppelt vergeben werden<br />"); 
        $("#artikelnummererror").show( "fast" );} 


    //  if ($("#artikelnummererror").html()=="") {alert("kein Fehler"); }
    //  else {alert{"fehler die 2te");      



        //else {/*alert ('tosend');*/
        //$.post("send_bauteil.php",{               form_name: "bauteil_neu",
            //                          name: $("#name").val(),
                //                      useremail: $("#email").val(),
                    //                  web:  $("#web").val(),
                        //              questions:  $("#text").val()},
                            //function(data){
                                //$("#donediv").html(data); 
                                //}); //post
                //} //if errorar
                return false                }); //click

//bauteil_neu_form send end

the "click" comes from a form which should put new data in a mysql database. But before sending I have to check if the "artikelnummer" is already set or not - doing this with the get function in the click function ...

So I thought: create a click function -> in there get all data from the mysql database with the script "query_bauteile.php" which gives me a string back somethin g like this 10001, 10002, 10003, 10004 and so on, then set this string into an array and check if the entered value for "artikelnummer" is in array or not. This is all working so far.

But if i try to check if there is an error or not the script is sending and no error check happens at all.

I've tried to send me the actual value of the error variable within my site and see that it is zero and afterwards it tells me "fehler" if iI put in an "artikelnummer" which already exists.

so my question is how to solve that problem it seems that the script runs once completely throgh and afterwards checks the get function ... for error checking. what am I missing at this point?

score 0 · Accepted Answer · edited May 23 '17 at 11:58

this is an answer i gave to a previous question which is a different issue, but the same root:

consider the following code:

console.log('First');
jQuery.get('page.html', function(data) {
  console.log("Second");
});
console.log('Third');

In this snippet your console will log: First, Third, Second.

Now if we were to make this to run async:

console.log('First');
getPage("page.html, function(){
  console.log('Third');          
}


var getPage(url, callback) {
  jQuery.get(url, function(data) {
    console.log("Second ");
  }
  callback();
}

Now it logs: First, Second, Third

So what it boils down to is that javascript is a asynchronous language and while waiting for the ajax call to complete it continuous with the rest of the code.

Your variable fehler hasnt been filled with data from the ajax request yet. You should adjust it in a callback or in the success handler

link to original post: here

score 0 · Answer 2 · answered Aug 18 '15 at 13:23

From your description I believe you could use:

$("#eintragen_bauteil_neu").on('click', function () {
    var fehler = 0;
    var artikelnummer = $("#artikelnummer").val();
    var kunde = $("#kunde").val();

    var jqxhr = $.get("query_bauteile.php?kunde=" + kunde)
    .done(function () {
        alert("success");
        bauteile_array = data.split(",");
        if (inArray(artikelnummer, bauteile_array) == -1) {
            alert("alles ok");
            fehler = 0;
        } else {
            alert("fehler");
            fehler = 1;
        }
    })
    .fail(function () {
        alert("error");
    })
    .always(function () {
        alert("finished");
        alert(fehler);
        if (fehler == 1) {
            $("#artikelnummererror").html("Bitte Artikelnummer NEU eingeben darf nicht doppelt vergeben werden<br />");
            $("#artikelnummererror").show("fast");
        }
    });
});

score 0 · Answer 3 · answered Aug 18 '15 at 13:40

0

You both saved my day!!! Thanks a lot, I have to learn more about the callbacks - I am atm not so familiar with this. I used quick and dirty

$.ajaxSetup({async: false}); to have your code wait for the execution of the ajax call and set $.ajaxSetup({async: true});"

:) – Thanks again and have a great day out there! :)

answered Aug 18 '15 at 13:40

Loomy

3
2

no problem man, just keep enjoying programming and dont try to take the easy ways out. Programming is the most fun when its challenging! – jimmy jansen Aug 18 '15 at 14:09

JQuery click function not working as it should

3 Answers3