Calling a jquery function in tab change

Question

Calling a jquery function in tab change

Navigation

#1 by (3 votes)
#2 by (2 votes)

2

I have a jquery function that mounts an html. It turns out that there is a View with 4 tabs. I would like when selecting a certain tab, the function would be called and of course, loading the dynamic html to mount the page. What event do I do? I have this div:

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

In this div you should have all the html.

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

The variable str is a concatenation of my HTML. See a part of it, just to illustrate:

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 = "";

I have tried in many ways and still nothing. Below is one of the ways to call:

<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>
................

Is this it? I can not mount the html. In the form below I could not mount.

$('#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) {

        }
    })
})

javascript jquery c# asp.net-mvc-5

asked by anonymous 13.06.2014 / 16:40

2 answers

2

The user clicks the items in the list, then the click must be associated with those elements.

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

 //gere aqui o conteúdo da string str

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

});

13.06.2014 / 18:25

Next value in a random order of numbers Writing PHP code without special characters

score 3 · Accepted Answer

Try this. No need onclick on html. Set the "scheduling" class in your "li"

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

And then the function should look like this:

$(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 = "";
      }
   })
});