是否可以更新jQuery选项卡集 [英] Is it possible to update jquery tab set

问题描述

我设置了一个jquery标签:

I have a jquery tab set:

<div id="tabs">
  <ul>
    <li><a href="#tabs-1">Mileage Log</a></li>
    <li><a href="#tabs-2">Trips</a></li>
  </ul>
  <div id="tabs-1">something</div>
  <div-id="tabs-2">something</div>
</div>

我在标签上的内容触发了一些JavaScript代码，这些代码发布了表单数据(我包括了该代码).问题是我希望刷新tab元素，以便可以显示任何新内容.是否有使用"success:"选项刷新选项卡的内置方法.我目前正在使用"location.reload();"但只会刷新整个页面.不理想.

My content on my tabs fires some javascript code that posts form data (I included that code). The problem is that I would like the tab element to refresh so any new content can be shown. Is there a built-in way to refresh the tabs using the "success:" option. I am currently using "location.reload();" but it just refreshes the whole page. Not ideal.

谢谢.

我的Javascript

<script>
$(document).ready(function () {
      //Submit form to add record.
      $('#addmileage').submit(function (e) 
      {          
        e.preventDefault();
        $.ajax({
        data: $('#addmileage').serialize(),
        type:'POST',
        url:'actionpages/add_trip.cfm?ticketid=<cfoutput>#url.ticketid#</cfoutput>',
        success: function(){
        $('.success').fadeIn(200).show();
         location.reload();
        $('.error').fadeOut(200).hide();
            }
        });
    });



      $('.deleteMileageForm').submit(function (e) 
      {          

        e.preventDefault();
        $.ajax({
        data: $(this).serialize(), // **** modified this line ****
        type:'POST',
        url:'actionpages/delete_trip.cfm',
        success: function () {
            $('.successTab2').fadeIn(200).show();
            location.reload();
            $('.errorTab2', $row).fadeOut(200).hide();
            }

        });
    });


});

</script>

推荐答案

我认为您可以实现此目标的唯一方法是，让您在AJAX中调用服务器端函数，返回一个HTML块，您可以注入您要重新加载的标签的中.而且，如果要执行此操作，则需要将功能放在CFC中，而不是现在要调用的CFM页面中.

The only way I think you could achieve this, is to have the server-side functions you're calling in AJAX, return a block of HTML which you could inject into the of the tab you want to reload. And if you're going to do that, you'll need to put the functions in a CFC instead of the CFM page you're calling now.

因此，您将生成现在要构建初始页面的方式，但是将生成的HTML保存为字符串，然后将其返回给jQuery AJAX调用.

So, you would generate the way you're doing now to build the initial page, but save the generated HTML as a string and then return it to the jQuery AJAX call.

仅是一个非常简单的例子:

As just a really bare-bones example:

$('.deleteMileageForm').submit(function (e) 
  {          

    e.preventDefault();
    $.ajax({
    data: $(this).serialize(), // **** modified this line ****
    type:'post',
    dataType: 'json',
    url:'actionpages/actions.cfc?method=deleteTrip&returnformat=json',
    success: function (result) {
        $('.successTab2').fadeIn(200).show();
        $('.errorTab2', $row).fadeOut(200).hide();
        $('#tab2').html(result);
        }

    });

然后在服务器上，您需要具有远程访问功能的 actions.cfc :

Then on the server you'll need an actions.cfc with remotely accessible functions:

<component>
    <cffunction name="deleteTrip" access="remote">
        <cfset newHTML = "<h1>This is new HTML!</h1>">
        <cfreturn newHTML>
    </cffunction>
</component>

我一直将所有内容都设为JSON格式，因为我总是使用JSON. :)

I've put everything into JSON format, just because I always use JSON. :)

不确定您对CFC，returnformat等的熟悉程度.但是希望这是朝着正确的方向发展.

Not sure how familiar you are with CFCs, returnformats, etc. But hopefully this is a push in the right direction.

这篇关于是否可以更新jQuery选项卡集的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！