essa é fácil, organização Js

segunda parte, acho q nao ficou bem claro o que eu quero.

por exemplo se fosse java eu poderia fazer:

$(document).ready(fillProduct(loadProducts()));

e no botão de enviar formulário:

onclick="updateProduct(getFormProduct())"

Porém em js não sei como se faz;

----//----

Outro Exemplo:

$(document).ready(inicializePage);

function inicializePage(){
    var product = loadProducts();
    console.log(product); // aqui retorna undefined, ou seja nao retornou nada
    fillProduct(product);
}
function sendForm(){
    var product = loadProducts();
    product = getFormProduct(product);
    updateProduct(product);
}

Oi Antonio tudo bem?

Para uma lista de eventos veja essa página da documentação do jQuery, lá achará como declarar o onclick e os outros eventos.

https://api.jquery.com/category/events/

Espero ter ajudado!!!

Oi, então eu esperava mais que isso, eu sei declarar eventos, não sei como organizar porque o return da função nao funciona. Está detalhado ai as minhas duvidas. é importante pra mim. Meu código funciona, mas vai ficando cada vez mais bagunçado olha esse exemplo (igual o de cima): não retorna o desejado.

function loadProducts() {
    $.ajax({
        url : "http://localhost:8080/products/1"
    }).then(function(data) {
        return data;
    });
}

tem que fazer assim:

function loadProducts() {
    $.ajax({
        url : "http://localhost:8080/products/1"
    }).then(function(data) {
        funcao1(data);
        funcao2(data, outroParametro);
    });
}

Olha que lixo de bagunça de código.

Dai eu tentei:

function loadProducts() {
    $.ajax({
        url : "http://localhost:8080/products/1"
    }).then(function(data) {
        $("#class").html(data);
    });
}

Porém por algum motivo também não consigo pegar de volta a #class, fala que é Nan, ou seja, preciso dar um jeito de pegar após essa função. Mesmo assim bem zoneada essa solução.

Ok, entendi agora o que precisa. Me passa o seu código, por gentileza, inclusive a parte do html para eu dar uma analisada. É um projeto grande né? Se puder colocar no git agradeceria.

na verdade nao estou colocando nada no git

Vou dar um feedback das coisas que você compartilhou, se tiver mais dúvidas por favor escreva mais e eu respondo.

No ajax dá para ficar mais funcional usando assim como no exemplo:

$.ajax({
    url: "/someurl",
    method: "GET",
    data: { 
      a: "a"
    }
  })
  .done(function(data) {
    console.log('success', data) 
  })
  .fail(function(xhr) {
    console.log('error', xhr);
  });

E eu não costumo usar onclick no javascript uso tudo no html porque no futuro é só olhar para o elemento html usando inspecionar e saberei exatamente o que aquele elemento faz.

Espero ter ajudado!!!

Então, no seu exemplo deu na mesma. Ou seja, data não sai da função do ajax, tendo que chamar as funções lá dentro e tendo que passar varios atributos que não tem nada a ver com a função para poder repassar lá dentro:

function countProdutos(page, sort, attribute) {
    $.ajax({
        url : "http://localhost:8080/produtos/count"
    }).then(function(data) {
        count = data;
        $("#qttRegister").html(count);
        loadProdutos(page, size, count, sort, attribute);
        updateNumberOfPages(page, size, data);
        pagination(data);
    });
}

o mais proximo que consegui foi:

function testAjax() {
      return $.ajax({
          url: "http://localhost:8080/produtos/count"
      });
    }
var tajax = testAjax();
$(document).ready(console.log(tajax.responseJSON));

porem tajax.responseJSON não funciona.

Fiquei sabendo que pra retornar variavel precisa desligar acrescentar async: false, porem está deprecated porque congela a página até retornar o resultado. O melhor que dá pra fazer é:

function testAjax(handleData) {
  $.ajax({
    url:"getvalue.php",  
    success:function(data) {
      handleData(data); 
    }
  });
}
Call it like this:

testAjax(function(output){
  // here you use the output
});

fonte: https://stackoverflow.com/questions/5316697/jquery-return-data-after-ajax-call-success