We Keep Coding

How to keep a tab active after asp.net button event?

I would like to know how to keep a tab open after a button postback event, I could not get it to work using HiddenFields. I would like the second tab to stay open after a button click on the second tab however my code would always refresh to the first tab.
I have also tried to use an update panel instead of refreshing the entire page however the tabs would not toggle properly using this method.
I would prefer to not postback on every tab click as it affects the user experience. Is there any other codes to do this without affecting the fade aesthetics?
$(function () {
$('.tab-content:first-child').show();
$('.tab-nav').bind('click', function (e) {
$this = $(this);
$tabs = $this.parent().parent().next();
$target = $($this.data("target"));
$this.siblings().removeClass('active');
$target.siblings().css("display", "none");
$this.addClass('active');
$target.fadeIn("slow");
});
$('.tab-nav:first-child').trigger('click');
});
<ul class="tabs-nav d-flex" style="padding-left: 35px;">
<li class="tab-nav d-flex justify-content-center align-items-center" data-target="#tab_1">Overview</li>
<li class="tab-nav d-flex justify-content-center align-items-center" data-target="#tab_2">Expenses</li>
</ul>
<div id="tab_1" class="tab-content">
<p>abc</p>
</div>
<div id="tab_2" class="tab-content">
<p>abc</p>
<asp:Button ID="saveexpense" runat="server" Text="Save"/>
</div>

You may be better off creating a web method and calling that from your jQuery instead of trying something with update panels. Especially considering the performance problems update panels can cause.
You would move your save functionality into a web method like this
[WebMethod]
public static void SaveExpense(string data, string moredata)
{
//your save code here
}
and something like this in your front end
<button id="saveexpense">Save</button>
Then you can call your webmethod like this
$('#saveexpense').click(function () {
$.ajax({
type: "POST",
url: "CurrentPage.aspx/SaveExpense",
data: JSON.stringify({ data: $("#textbox").val(), moredata: $("#textbox2").val() }) ,
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function () {
console.log("data saved");
},
error: function (jXHR, textStatus, err) {
console.log(err);
}
});
});

ajax is loading both divs on the page instead of specified div

I have a PHP page with the following two divs, and I am trying to load the content with a click event here and then conditional:
if (ballResult == 'W') { // processing wide
$.ajax({
url: "loads/scorer_soft_load.php #extrWideLoad",
cache: false,
success: function(html) {
$("#scoreBt").html("");
$('#scoreBt').append(html);
}, // call back function after ajax request complete
complete: function() {
}
});
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="extraScoreLoad">
<h3 class="g-m-u-heading" id="extrHeading"><span class="badge badge-secondary">Any extra</span></h3>
<button>nb</button>
</div>
<!------load for wide-------->
<div id="extrWideLoad">
<h3 class="g-m-u-heading" id="extrHeading"><span class="badge badge-secondary">Any extra</span></h3>
<button>w</button>
</div>
I am doing the same for the other div just changing the URL to loads/scorer_soft_load.php #extraScoreLoad.

url: "loads/scorer_soft_load.php #extrWideLoad"
You're trying to apply a selector in the URL. (Not to be confused with a fragment identifier.) URLs don't really work like that. It's going to return all of the content, you'd need to apply a selector after you receive the content. For example:
$.ajax({
url: "loads/scorer_soft_load.php",
cache: false,
success: function(html){
$("#scoreBt").html("");
var filteredHtml = $('#extrWideLoad', html); // <--- here
$('#scoreBt').append(filteredHtml);
}
});
i have use this technique with .load and it have worked in past.
That's because .load() does this client-side selector logic for you.

How to refresh an element using AJAX?

I have an element for ex. <div>. and in that I have fetched dynamic contents from database, I am already performing some database operation using AJAX and I am able to load some part of my page from other php file, but on the same page I want my other div to be repopulate its data from database.
This is my manage_your_listing.php
<div class="col-sm-12 pd">
<ul class="nav nav-tabs notificationtabs">
<li class="active">Live On Site</li>
<li>Pending Review</li>
<li>Pause</li>
</ul>
</div>
<div class="tab-content">
<div class="tab-pane fade active in" id="live_on_site" >
<?php
include'manage_order/live_on_site.php';
?>
</div><!-- End tab1-->
<div class="tab-pane fade" id="pause" >
<?php
include'manage_order/pause_order.php';
?>
</div><!-- End tab2 -->
</div><!-- End tab-content -->
this is my live_on_site.php's AJAX function
function ConfirmPause(prod_id){
$.ajax({
type: "get",
url: "seller/manage_order/live_on_site_pause.php?prod_id="+prod_id.id,
cache: false,
dataType: "html",
asyc: false,
success: function (data) {
$("div#live_prod").html(data);
}
});
}
so finally my live_on_site.php's live_prod div is being repopulated with the contents of live_on_site_pause.php
but what I want is, there is div in pause_order.php which is accessible in every php file specified here, and that div is being populated with some database content by using select statement, and I want it just to refresh, Is it possible? or do I need to create a new php file and call it using ajax?

I solved it by using nested ajax function.
I wanted to refresh one div after processing of some database update using ajax, But later I found that there is no way ajax can refresh div, it just copies some data from source position and paste it into specified position. So while success of previous ajax function I typed one more ajax function which worked for me.
function ConfirmPause(prod_id)
{
if (confirm("Pause Product?"))
{
$.ajax({
type: "get",
url: "seller/manage_order/live_on_site_pause.php?prod_id=" + prod_id.id,
cache: false,
dataType: "html",
asyc: false,
success: function (data) {
$("div#live_prod").html(data);
//nested ajax to change pause products tab real time the moment user pauses a product it will get removed from live tab and will be added to pause products tab
$.ajax({
type: "get",
url: "seller/manage_order/pause_order_resume.php",
cache: false,
dataType: "html",
asyc: false,
success: function (data) {
$("div#pause_prod").html(data);
}
});
}
});
}
}

you cant just refresh an element with ajax, you can either process something in ajax or in other file and replace it with old contents using ajax.

Filtering AJAX returned data and performing .each on selected elements within

Lets say I have 4 tabs within nothing in them until they are clicked (lazy load concept).
When:
Tab1 is clicked: Data is inserted into that tab via ajax.
Tab2 is clicked: Data is inserted into that tab via ajax.
etc.
The data that's being returned consists of:
<ul class="elements">
<li>
<div>Stuff</div>
<ul class="comments">
...Initially empty
</ul>
</li>
</ul>
Now in the success function I'm calling another function that gets all the comments associated with the li children of the parent ul.elements and this is where I'm having trouble.
So after all the elements are loaded into the tab, I have this function which needs doctoring:
function LoadComments(data) {
$newData = $(data).filter('ul.elements');
$newData.find('ul.comments').each(function() {
var commentsHome = $(this);
$.ajax({
url: '/MyFeed.aspx',
type: 'POST',
dataType: 'html',
data: {
"xfd" : "GetComments',
},
success: function(data) {
commentsHome.html(data);
}
});
});
}
So far my variable commentsHome doesn't seem to be working. My goal here is to load the comments for each returned element of the new data only. So when Tab2 is clicked, this function is performed only on the data returned after clicking on Tab2.
Not sure what I'm doing wrong :(

The commentsHome variable won't be available to you in the AJAX success function.
However, you can create a hidden <input type="hidden" id="commentsHome" /> and store the value in there, then reference that in the AJAX success function.
function LoadComments(data) {
$newData = $(data).filter('ul.elements');
$newData.find('ul.comments').each(function() {
$('#commentsHome').val($(this));
$.ajax({
url: '/MyFeed.aspx',
type: 'POST',
dataType: 'html',
data: {
"xfd" : "GetComments',
},
success: function(data) {
var commentsHome = $('#commentsHome).val();
commentsHome.html(data);
}
});

jQuery load url into div and replace current content pass url to function

I'm trying to call a function called loadPage on click of an a tag and pass it a URL to replace the current content in a div called main via Ajax.
However, my code isn't replacing the content already in the main div or even making the Ajax call as far as I can see and I can't see where it's going wrong.
JavaScript:
$(document).ready(function () {
function loadPage(urlToLoad) {
$.ajax({
type: "POST",
alert(urlToLoad);
url: urlToLoad,
data: dataString,
success: function (returnedData) {
$('#main').html(returnedData);
}
});
}
});
HTML:
<nav>
<ul>
<li><a onclick="loadPage('load.php');" href="javascript:void(0)" class="nav"><img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news</a>
</li>
</ul>
</nav>
<div id="main">
<section id="mainContent">abc</section>
</div>

You can simply do this using load:
function loadPage(urlToLoad) {
$('#main').load(urlToLoad, function () {
alert('Load was performed.');
});
}

why do you have alert inside ajax options.. this is throwing the error.. removing that and it should work..
//$(document).ready(function() { <--here
function loadPage(urlToLoad) {
alert(urlToLoad); // you can check that here...
$.ajax({
type: "POST",
// alert(urlToLoad); <--here
url: urlToLoad,
data: dataString,
success: function( returnedData ) {
alert("success") //to check if ajax call is successfull
$('#main').html( returnedData );
}
});
and no need to create a function inside document.ready()... keep it outside the ready function

You could do it in another way, by adding a custom "data-" attribute to your anchor tags, and using jquery to handle the click event.
$(document).ready(function()
{
$('a.nav').on("click", function(event){
event.preventDefault();
$.ajax({
type: "POST",
url: $(this).attr('data-page'),
data: dataString,
success: function( returnedData ) {
$('#main').html( returnedData );
}
});
});
});
<nav>
<ul>
<li><a data-page="load.php" class="nav"><img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news</a></li>
</ul>
</nav>
<div id="main">
<section id="mainContent">
abc
</section>
</div>

Your function loadPage is scoped to the closure used for jQuery's document.ready. Later when the function loadPage is called, the call comes from the global scope. As a result, the function will not be accessible. Take your function out of $(document).ready(function(){});
Also note that when attempting to debug using alert (not really recommended, at the very least you should use console.log), that you need to put the alert on its own line of code, and not just in the middle of code like a breakpoint. Your alert should come before the ajax call.
function loadPage(urlToLoad) {
alert(urlToLoad);
$.ajax({/*...*/});
}

Moveout the function from the doc ready handler:
function loadPage(urlToLoad) {
$.ajax({
type: "POST",
url: urlToLoad,
data: dataString,
success: function (returnedData) {
$('#main').html(returnedData);
}
});
}
$(document).ready(function () {
$('nav a.nav').click(function(e){
e.preventDefault();
loadPage(this.href);
});
});
try with this html:
<nav>
<ul>
<li>
<a href="load.php" class="nav">
<img src="news.png" alt="Latest news" width="81" height="61" class="navImage" />Latest news
</a>
</li>
</ul>
</nav>
You should not alert in the ajax function properties, so remove the alert from there. It seems that you want it to be work on click of a certain link. So you can try this.