Question

我有一个jquery标签集：

<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元素刷新，以便显示任何新内容。有没有内置的方法来使用＆＃34;成功刷新标签：＆＃34;选项。我目前正在使用＆＃34; location.reload（）;＆＃34;但它只是刷新整个页面。不理想。

感谢。

我的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>

Answer 1

我认为你能实现这一目标的唯一方法是使用你在AJAX中调用的服务器端函数，返回一个HTML块，你可以将其注入要重新加载的选项卡中。如果您要这样做，则需要将这些功能放在CFC中，而不是现在调用的CFM页面。

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

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

$('.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 ：

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

我已将所有内容都放入JSON格式，因为我总是使用JSON。：）

不确定您对CFC，返回格式等有多熟悉。但希望这是朝着正确的方向发展。

Answer 2

您需要使用DOM Manipulation刷新成功功能中的标签。可能是这样的情况，像actionpages/delete_trip.cfm这样的脚本必须返回刷新选项卡所需的新信息（例如，以JSON格式）。

一些注意事项：

函数location.reload();可以从浏览器缓存重新加载页面。如果您不想要此行为，请使用location.reload(true);。
$('.successTab2').fadeIn(200)应该足够了（不需要.show()）。您也不需要.hide()功能。

是否可以更新jquery选项卡集

2 个答案: