CODEWITHSUNDEEP
jqueryhtmlajax
Prakash Patil
Prakash Patil

Reputation: 107

How to be on the same tab even after refreshing the page?

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>

Upvotes: 1

Views: 4336

Answers (1)

cssyphus
cssyphus

Reputation: 40076

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:

A simple example

More complicated example

Populate dropdown 2 based on selection in dropdown 1

https://stackoverflow.com/questions/25945137/php-fetch-content-from-one-form-and-update-it-in-other-form/25954450#25954450

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.

Upvotes: 2

Related Questions