Calling a jquery function when changing tabs

Asked

Viewed 3,544 times

2

I have a jquery function that mounts an html. It turns out there is a View with 4 tabs. When selecting a particular tab, the function is called and of course, load the dynamic html to assemble the page. What event do I do this for? I have this div:

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

In this div you should have all the html.

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

The str variable 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 tried several ways and still nothing. Below one of the call forms:

<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’m not getting the html. The way below I couldn’t assemble.

$('#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 c# jquery asp.net-mvc-5

  • Friend what would be your tab? Would be a Tabs? Just take the Tab id and put in a . click your code..

  • That’s right, a Tab. But where do I put this onclick? Because I tried and I couldn’t assemble the HTML. That way it didn’t work: $('#scheduling').click.html(str);

  • pnet, put the event in the element that will be clicked (be careful not to confuse the element where the user clicks with the element that will receive the data, the #scheduling). It looks like this : $("#element_clicked"). click(Function(){ .... here enters your ajax }); If your clicked element does not have an id, you will have to reference it with "$(this)".

  • Dude, so I’m renaming the div’s ID, so I don’t confuse it with Tab’s name, which has the same name, just to do as Ifarroco says, right?

  • Friend, put your function Montaagendamento();

  • posted above in the post.

  • I posted an answer. Test and if it doesn’t work press F12 and see in the Console if it shows any javascript error. I just edited it because it lacked close a function

Show 2 more comments

2 answers

3


Try this. You do not need onclick in html. Set the "scheduling" class in your "li"

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

And then the function should be that way:

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

  • I couldn’t. Check it out. I have 4 tabs (tabs), one is called scheduling. When you click on it to show your content, you should come. It’s coming empty, with any of the situations posted here.

  • Uncaught Referenceerror: Mount is not defined

  • I removed Schedule Setup from html tag. I had forgotten. Copy and paste again as I made some changes.

  • It was ok, but I can’t pass value to the controller’s cshtml, but that’s something else, I think.

  • Yeah. Debug your controller to see how it’s returning JSON. If you want to paste the result here I can try to help.

2

The user clicks on the list items, so the click needs to be associated with those elements.

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

 //gere aqui o conteúdo da string str

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

});

  • I edited the post to answer you better.

Browser other questions tagged javascript c# jquery asp.net-mvc-5

You are not signed in. Login or sign up in order to post.