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.
Related
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);
}
});
});
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.
Reload Tab instead of Whole Page
<div class="content">
<div id="tabstrip">
<ul>
<li id="tabEdit">#ResourceStrings.Text_ProblemDetails</li>
<li id="tabItemsAffected">#ResourceStrings.Text_ItemsAffected</li>
<li id="tabAttachments">#ResourceStrings.Text_Attachments</li>
#if (ApplicationGlobals.SELECTED_COMPANY_CODE != CompanyCode.MONTREAL)
{
<li id="tabPlmReferences">#ResourceStrings.Text_PlmReferences</li>
}
<li id="tabDispositions">#dispositionsText</li>
#if (ApplicationGlobals.SELECTED_COMPANY_CODE == CompanyCode.MONTREAL && (ApplicationGlobals.SELECTED_NCRBASE.NcrType != (int)NcrTypeEnum.NCRATTEST))
{
<li id="tabReworkDetails">#ResourceStrings.Text_ReworkDetails</li>
}
<li id="tabLineClosure">#ResourceStrings.Text_Line_Approval</li>
<li id="tabTraceability" style="float:right">#ResourceStrings.Text_Traceability</li>
</ul>
</div>
</div>
Is it Possible to update parts (Like Tabs) of a web page, without reloading the whole page on switching to another Tab
$.ajax({
url: "NcrLine/Reload",
type: "GET",
async: false,
dataType: "json",
success: function () {
alert("Hello");
var tab = $('#tabstrip').tabs('getSelected');
tab.panel('refresh');
}
});
First thing I need to understand is what type of updates are those, if those have simple rendering of code, you can simply bind the HTML code to the tabs handle once you receive the response. This is shown as below -
$.ajax({
url: "NcrLine/Reload",
type: "GET",
async: false,
dataType: "json",
success: function () {
alert("Hello");
var tab = $('#tabstrip').tabs('getSelected');
tab.panel('refresh');
// Add css to the selected tab
$('#tabstrip[selected=selected]').css('css-property', 'css-value');
//Render complete new HTML code of updated tabstrip
$('#tabstrip').html('<Your tabstrip HTML template>');
}
});
If you have complex HTML rendering, then I would suggest you to create partials by using handlebars.js, that will help you to create reusable partials with dynamic values and that can be bind to your content page.
I'm currently working with an MVC page where I'm using Grid.Mvc table. I also have some search fields where I can update the table via Ajax Post, once I use the search fields and submit for sorting the html gets replaced on post-back, once replaced, the grid rows can NOT be clicked like before the Ajax call, is like the ajax call is killing the javascript or Jquery or both,
here is code for the Ajax call for the grid:
$(function() {
$(document) on.("click", "#buscar", function() {
$.ajax({
url: '/MainPage/Grid',
type: 'POST',
async: false,
datatType: 'html',
processData: true,
data: {
url: $('#url').val(),
isInternal: ('#isInternal').val()
},
success: function(data) {
$('#grid').html(data);
}
})
});
});
Here is the code for when I click the rows I send another Ajax call, but after the first code post the grid becomes unclickable;
$(function() {
pagesGrids.linksgrid.onRowSelect(function() {
$.ajax({
url: '/mainpage/getlinkdetails',
type: 'POST',
async: false,
dataType: 'html',
processData: true,
data: {
id: e.row.BrokenId
},
success: function(data) {
$('#linkdetails').html(data);
},
error: function() {
alert('something went wrong')
}
})
});
})
Any help or hint that can point me in the right direction will greatly appreciated, thanks
UPDATE
The the grid it self is a partial view rendering at Index on MVC
<div id="grid">
#Html.Action"Grid"
</div>
Your partial view is rendering new elements into the page rather than altering the existing elements.
You will need to rebind the javascript events (click) to the new elements after the partial postback.
Although this is an old post, I found a solution that worked for me, and hope it works for someone else.
AJAX forms have a data dash attribute called data-ajax-complete, to which you can pass the name of a javascript function to run. That javascript function can contain the code you need to rebind the click events to all your elements.
<form asp-controller="Home" asp-action="SaveForm" data-ajax-complete="onComplete" data-ajax="true" data-ajax-method="POST">
<input type="submit" value="Save" class="btn btn-primary" />
<div id="Results"></div>
</form>
<script>
var onComplete = function(){
results.html("");
};
</script>
More details here.
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);
}
});