2014-04-08 51 views
0

我有一个jquery选项卡集:是否有可能更新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代码,职位形成的数据(包括我的代码)。问题是,我希望刷新标签元素,以便可以显示任何新内容。是否有内置的方式使用“success:”选项刷新选项卡。我目前使用“location.reload();”但它只是刷新整个页面。不理想。

谢谢。

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

回答

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。 :)

不知道你对CFCs,returnformats等有多熟悉。但希望这是一个正确的方向推动。

+0

好吧,所以newHTML变量可能是一个成功的消息,或者我发回到我的选项卡的权利。而且cfc也需要我的查询以及正确的? –

+0

是的,你可以发回你需要的任何东西。如果您只需要一个状态消息,您可以发送该消息,或者如果您愿意,您可以重建并发送该标签的全部内容。完全灵活。是的,你会把你的删除查询放入cfc的deleteTrip函数中,以便在任何事情返回到你的页面之前执行。 –

+0

明白了。所以我能够使用你的样品来处理它。谢谢。如果我将HTML文本返回到选项卡ID,则整个选项卡集将替换为我的文本。不理想。我唯一能做的其他事情是将html文本返回到活动选项卡。但是,这只是添加文本,并不会在添加它之后刷新标签。通过重建选项卡的内容,你是什么? –

0

你需要使用DOM Manipulation以刷新成功功能的选项卡。可能是这种情况,您的脚本(如actionpages/delete_trip.cfm)必须返回您需要刷新选项卡的新信息(例如,格式为JSON)。

一些注意事项:

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

好吧,如果我有我的actionpages返回一些Json数据,我应该使用哪种方法刷新? –

+0

您只能刷新整个网站。单标签没有刷新。但可以通过JavaScript(例如使用jQuery)更新他们的CSS,内容,属性...。在网站http://api.jquery.com/category/manipulation/上看看如何使用jQuery来操作HTML标签。 –

+0

这个怎么样:我使用$('#include-from-outside')显示带有制表符的内容。 。一旦成功功能发生,有没有办法让我再次发生火灾? –

相关问题