如何连刷新页面后，可以在同一个选项卡？ [英] How to be on the same tab even after refreshing the page?
问题描述
我创造了它成功地通过自己....但问题是，当我刷新页面中的所有内容，得到HID。我想第一个内容，可以看到页面首先装载.....那么如果用户点击第二个链接，并刷新页面，他会看到他刷新了之前单击链接的内容。我觉得做局部变量全局可以是答案...但我不知道如何做到这一点。
＆LT; HTML＆GT;
＆LT; HEAD＆GT;
＆所述;脚本的src =http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js＆GT;＆所述; /脚本＆GT;
＆LT;脚本＆GT;
$（文件）。就绪（函数（）{
$（＃内容）找到（[ID ^ ='标签']）隐藏（）。
$（＃选项卡的）。点击（函数（）{
VAR浸= $（本）.attr（'名'）; //把握我们使用ATTR分开，否则我们可以写$ name属性（这是[NAME ='']）
window.dip =浸;
$（＃内容）找到（[ID ^ ='标签']）隐藏（）。
$（＃内容）找到（'＃'+ DIP）.fadeIn（）; //如果在父元素许多类似的元件，找到用于搜索所需的元件与它的id的帮助。
}）;
}）;
＆LT; / SCRIPT＆GT;
＆LT; /头＆GT;
＆LT;身体GT;
＆LT; DIV ID =uppertabs＆GT;
＆LT; UL ID =标签＆GT;
＆LT;李＆GT;＆LT; A HREF =＃NAME =TAB1＆GT;简介＆LT; / A＆GT;＆LT; /李＆GT;
＆LT;李＆GT;＆LT; A HREF =＃NAME =TAB2＆GT;健康＆LT; / A＆GT;＆LT; /李＆GT;
＆LT; / UL＆GT;
＆LT; DIV ID =内容＆GT;
＆LT; DIV ID =TAB1＆GT;您的个人资料是好＆LT; / DIV＆GT;
＆LT; DIV ID =TAB2＆GT;检查您的健康＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; / DIV＆GT;
＆LT; /身体GT;
＆LT; / HTML＆GT;
您必须使用服务器端语言，如PHP，让聊天消息。
秘诀是使用AJAX在你的JavaScript动态更新的内容。这样一来，一切都保持原样 - 用户保持不变标签上，但数据被更新
请不要被吓倒AJAX。 - 这是很容易比它听起来的你只需要看到一些很好的例子
请看看这些简单examples--的，并尝试一下自己的：
<一个href="http://stackoverflow.com/questions/13734395/form-inside-of-load-not-posting-correctly/13734466#13734466">A简单的例子
<一个href="http://stackoverflow.com/questions/17887098/two-post-requests-one-after-the-other-second-post-request-doesnt-get-execut/17887642#17887642">More复杂的例子
<一个href="http://stackoverflow.com/questions/25945137/php-fetch-content-from-one-form-and-update-it-in-other-form/25954450#25954450">php从一种形式获取内容和其他形式的更新
下面有一些事情你应该知道的AJAX：
（1）有4个的格式的一个AJAX请求 - 全 $阿贾克斯（）结构，和三个快捷键结构（ $。员额（）， $。获得（）和 $。负载（））
除非你是pretty的擅长AJAX，我建议使用格式正确的 $。阿贾克斯（） code块，这是上面的什么例子演示。这样的code座看起来是这样的：
$（'＃updateTab）。点击（函数（）{
。VAR thisTab = $（本）.parent（）ATTR（'身份证'）;
$（'＃my_hidden_input_field）VAL（thisTab）。标签//存储ID，我们都在
$阿贾克斯（{
类型：'后'，
网址：update_chats.php'，//外部的PHP文件处理Ajax请求
数据类型：HTML，
数据：电子邮件='+ form.email.value，
成功：（函数（recd_data）{
。VAR tabID = $（'＃my_hidden_input_field）VAL（）;
$（'＃制表符+ tabID）.find（'＃chatDIV）HTML（recd_data）。
}）;
}）;
（2）就行指定的文件网址：的必须是一个单独的文件的。这听起来很明显，但很多人（包括我）已经尝试过的，因为的，我们可以通过张贴到同一页它是处理形式 - 然而，这不能用AJAX实现。如果你尝试，你会得到整个页面返回的而不是的是，PHP页面应该发送响应。
（3）。在 $阿贾克斯（） code座的数据：行指定被发送到PHP处理器文件中的数据。
（4）数据类型：行指定的数据类型的AJAX code座的预计将收到来自的PHP的背处理器文件。默认的数据类型为HTML，除非另有说明。
（5）在PHP处理文件，数据通过回声命令返回到了AJAX code座。无论这些数据是返回HTML，文本或JSON，这是回声 ED回AJAX程序，像这样的：
＆LT; PHP
//这里执行MySQL的搜索。您将获得聊天数据;我只会得到第一/姓氏
//对于如MySQL返回数组`$ result`有：$结果['姓']和$结果['姓']
$ OUT ='＆LT; DIV ID =myresponse＆GT;';
$ OUT ='名字：＆LT;输入类型=文字值=，$结果['名字'。/＆GT;';
$ OUT ='姓氏：其中;输入类型=文字值=，$结果['姓氏'。'/＆GT;';
$ OUT ='＆LT; / DIV＆GT;';
回声$输出; //这条线将数据发回给JavaScript中的AJAX code座
请尝试一些自己上面的例子中，你会看到它是如何工作的。
这是没有必要使用 JSON 发送/返回数据。然而， JSON 是送的的阵列的数据的有用的格式 - 但正如你所看到的，你可以构造一个在PHP端和回声返回成品标记HTML完整的响应，所以通常没有必要发送数组数据本身。
最后，请，永远飞更改ID名称。一旦呈现页面时，独自一人离开了ID名称。相反，添加/删除类和用类名通过jQuery和CSS来参考元素。
I created it successfully by myself....but the problem is that when I refresh the page all the contents get hid. I want the first content to be seen on first loading of the page.....then if the user clicks on a second link and refreshes the page he should see the contents of the link he had clicked before refresh. I think making local variables Global can be the answer...but I dont know how to make it.
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#content").find("[id^='tab']").hide();
$("#tabs a").click(function(){
var dip=$(this).attr('name'); //to grasp the name attribute we used attr separately otherwise we could write $(this[name=''])
window.dip=dip;
$("#content").find("[id^='tab']").hide();
$("#content").find('#' + dip).fadeIn(); //if there are many similar elements in a parent element, find is used to search the required element with the help of its id.
});
});
</script>
</head>
<body>
<div id="uppertabs">
<ul id="tabs">
<li><a href="#" name="tab1">Profile</a></li>
<li><a href="#" name="tab2">Health</a></li>
</ul>
<div id="content">
<div id="tab1">Your profile is good</div>
<div id="tab2">Check your health.</div>
</div>
</div>
</body>
</html>
You must be using a server-side language, such as PHP, to get the chat messages.
The secret is to use AJAX in your javascript to dynamically update the content. That way, everything stays as it is -- the user remains on the same tab, but the data is updated.
Please do not be intimidated by AJAX -- it is much easier than it sounds. You just need to see a few good examples.
Please take a look at these simple examples-- and try them out for yourself:
Populate dropdown 2 based on selection in dropdown 1
php fetch content from one form and update it in other form
Here are some things you should know about AJAX:
(1) There are four formats for an AJAX request - the full $.ajax() structure, and three shortcut structures ($.post(), $.get(), and $.load() )
Until you are pretty good at AJAX, I suggest using a correctly formatted $.ajax() code block, which is what the above examples demonstrate. Such a code block looks like this:
$('#updateTab').click(function(){
var thisTab = $(this).parent().attr('id');
$('#my_hidden_input_field').val(thisTab); //store ID of Tab we are on
$.ajax({
type: 'post',
url: 'update_chats.php', //external PHP file that processes AJAX request
dataType: 'html',
data: 'email=' + form.email.value,
success: (function(recd_data) {
var tabID = $('#my_hidden_input_field').val();
$('#tab-' +tabID).find('#chatDIV').html(recd_data);
});
});
(2) The file specified on the line url: must be a separate file. This might sound obvious, but many people (including me) have tried it because we can process a form by "posting" it to the same page it is on -- however this cannot be done with AJAX. If you try, you will receive the entire page back instead of the response that the PHP page should be sending.
(3) In an $.ajax() code block, the data: line specifies the data that is sent to the PHP processor file.
(4) The dataType: line specifies the type of data that the ajax code block expects to receive back from the PHP processor file. The default dataType is html, unless otherwise specified.
(5) In the PHP processor file, data is returned to the AJAX code block via the echo command. Whether that data is returned as html, text, or json, it is echoed back to the AJAX routine, like this:
<?php
//perform MySQL search here. You will get chat data; I will just get first/last names
//For eg, MySQL returns array `$result` with: $result['firstname'] and $result['lastname']
$out = '<div id="myresponse">';
$out .= 'First Name: <input type="text" value="' .$result['firstname']. '" />';
$out .= 'Last Name: <input type="text" value="' .$result['lastname']. '" />';
$out .= '</div>';
echo $out; //this line sends the data back to the AJAX code block in javascript
Please try a couple of the above examples for yourself and you will see how it works.
It is not necessary to use json to send/return data. However, json is a useful format to send array data -- but as you can see, you can construct a full html response on the PHP side and echo back the finished markup, so usually there is no need to send the array data itself.
Finally, Please, never change ID names on the fly. Once the page is rendered, leave the ID names alone. Instead, add/remove classes and use the class names to reference elements via jQuery and CSS.
这篇关于如何连刷新页面后，可以在同一个选项卡？的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
