2

Tenho uma função jquery que monta um html. Acontece que existe uma View com 4 abas. Gostaria de ao selecionar determinada aba, a função fosse chamada e claro, carregar o html dinâmico para montar a página. Qual evento eu faço isso? Tenho essa div:

<div id="agendamento">
</div>

Nessa div deverá ter todo o html.

$('#agendamento').html(str);

A variável str é uma concatenação do meu HTML. Veja uma parte dele, só para ilustrar:

var str = "";
    //var resultado = jQuery.parseJSON();

    $.ajax({

        url: '/Agendamento/MontaAgendamento',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        //data: JSON.stringify({  }),
        success: function (data) {

            str += '<div id="FiltroPesquisa">';

            str += '<table style="width: 100%;">';
            str += '<tr>';

            str += '<td class="Formatlabel"><strong>';
            str += '<label id="lblCNPJ">CNPJ</label>';
            str += '</strong></td>';
            str += '<td class="auto-style25">';
            str += '<input id="txtCNPJ" type="text"' + data.resultado[0].CNPJ + ' /></td>';
            str += '</tr>';
            str += '<tr>';
..............
 $('#agendamento').html(str);
str = "";

Tentei de várias forma e ainda nada. Abaixo uma das formas de chamada:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">PDV</a></li>
    <li><a href="#tabs-2">Eventos</a></li>
    <li><a href="#tabs-3">Formulários</a></li>
    <li><a href="#agendamento" onclick="return MontaAgendamento();">Agendamento</a></li>
  </ul>
................

É isso aqui? Não estou conseguindo montar o html. Da forma abaixo não consegui montar.

$('#agendamento a').click(function MontaAgendamento() {

    var str = "";
    //var resultado = jQuery.parseJSON();

    $.ajax({

        url: '/Agendamento/MontaAgendamento',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        //data: JSON.stringify({  }),
        success: function (data) {

            str += '<div id="FiltroPesquisa">';

            str += '<table style="width: 100%;">';
            str += '<tr>';

            str += '<td class="Formatlabel"><strong>';
            str += '<label id="lblCNPJ">CNPJ</label>';
            str += '</strong></td>';
.................
$(this).attr('href').html(str);

            str = "";
        },
        error: function (error) {

        }
    })
})
7
  • Amigo o que seria sua aba? Seria um Tabs? Basta pegar o id do Tab e colocar em um .click o seu código.. Commented 13/06/2014 às 14:55
  • Isso mesmo, uma Tab. Mas onde eu coloco esse onclick? Pois já tentei e não consegui montar o HTML. Dessa forma não funcionou: $('#agendamento').click.html(str);
    – pnet
    Commented 13/06/2014 às 16:02
  • pnet, coloque o evento no elemento que vai ser clicado (cuidado para não confundir o elemento onde o usuário clica com o elemento que vai receber os dados, o #agendamento). Fica assim : $("#elemento_clicado").click(function(){ .... aqui dentro entra o seu ajax }); Se o seu elemento clicado não tiver uma id, você vai ter que referenciar a ele com "$(this)".
    – lfarroco
    Commented 13/06/2014 às 16:20
  • Cara, então vou renomear o nome do ID da div, para não confundir com o nome da Tab, que tem o mesmo nome, apenas para fazer conforme dito pelo Ifarroco, certo?
    – pnet
    Commented 13/06/2014 às 16:23
  • Amigo, posta a sua funcao MontaAgendamento();
    – Joao Paulo
    Commented 13/06/2014 às 16:34

2 Respostas 2

3

Tente assim. Não precisa do onclick no html. Defina a classe "agendamento" na sua "li"

<li class="agendamento"><a href="#agendamento">Agendamento</a></li>

E depois a função deve estar dessa forma:

$(document).on("click",".agendamento", function(){
    var str = "";
    //var resultado = jQuery.parseJSON();

    $.ajax({

        url: '/Agendamento/MontaAgendamento',
        dataType: "json",
        contentType: "application/json; charset=utf-8",
        type: "POST",
        //data: JSON.stringify({  }),
        success: function (data) {

            str += '<div id="FiltroPesquisa">';

            str += '<table style="width: 100%;">';
            str += '<tr>';

            str += '<td class="Formatlabel"><strong>';
            str += '<label id="lblCNPJ">CNPJ</label>';
            str += '</strong></td>';
            str += '<td class="auto-style25">';
            str += '<input id="txtCNPJ" type="text"' + data.resultado[0].CNPJ + ' /></td>';
            str += '</tr>';
            str += '<tr>';

            $('#agendamento').html(str);
            str = "";
      }
   })
});
5
  • Não consegui. Veja só. Tenho 4 abas(tabs), uma se chama agendamento. Ao clicar nela para mostrar seu conteúdo, deveria vir. Está vindo vazia, com qualquer das situações aqui postadas.
    – pnet
    Commented 13/06/2014 às 16:48
  • Uncaught ReferenceError: MontaAgendamento is not defined
    – pnet
    Commented 13/06/2014 às 16:51
  • Eu retirei o MontaAgendamento da tag html. Tinha esquecido. Copie e cole novamente pois fiz algumas alteracoes.
    – Joao Paulo
    Commented 13/06/2014 às 16:51
  • Ficou ok, mas não consigo passar valor para o cshtml do controller, mas isso é outra coisa, creio eu.
    – pnet
    Commented 13/06/2014 às 16:59
  • É. Debugue seu controller pra ver como ele está retornando o JSON. Se quiser colar aqui o resultado posso tentar ajudar.
    – Joao Paulo
    Commented 13/06/2014 às 17:04
2

O usuário clica nos itens da lista, então o click precisa estar associado àqueles elementos.

$('#tabs a').click(function(){

 //gere aqui o conteúdo da string str

  $(this).attr('href').html(str);

});
1
  • Editei o post para te responder melhor.
    – pnet
    Commented 13/06/2014 às 16:36

Você deve fazer log-in para responder a esta pergunta.

Esta não é a resposta que você está procurando? Pesquise outras perguntas com a tag .