I am using Jquery ui tabs with asp.net webforms and I'm loading the content with ajax. I actually have two problems
I don't know how to load the content for the first tab load. Right now I use the tabsselect to load content via ajax.
$('#contentHolder').bind( "tabsselect", function(event, ui) {
// run ajax request
});
The build in spinner control only seems to work when I use actual paths for the href. But since I have to use pagemethods I need to use an id instead.
One
Two
Three
// ajax request to pagemethod
$.ajax...
Updated Code
// tab initializaztion
var $tabs = $('#followersTable').tabs({ spinner: 'Loading...' });
$tabs.bind("tabsselect", function(event, ui) {
//LoadTabContent(ui.index);
var request = {
'controlName': 'FollowersTab'
};
$(this).tabs({
ajaxOptions: {
type: "POST",
url: "ajax/Followers.aspx/LoadTabContent",
data: $.toJSON(request),
contentType: "application/json; charset=utf-8",
dataType: "json",
success: function (data) {
$(container).html(data.d);
},
error: function () {
}
}
})
});
For your first question:
$("your-tabs-selector-here").tabs( "load" , 0 ); this will force your tab first tab to be loaded via ajax.
If I didn't get it wrong; you could use [WebMethod] for your page methods and you can combine your page methods with UI Tabs ajaxOptions. You can play with ajaxOptions for return type and/or method name ..etc
$( "your-tabs-selector-here" ).tabs({
ajaxOptions: {
type: "POST",
url: "Default.aspx/PageMethodName",
data: "{}",
contentType: "application/json; charset=utf-8",
dataType: "json"
}
});
Related
I added data to the page in Ajax and then I changed to the page
$.mobile.changePage('#postDetails', { transition: "slide" })
but then when I refresh the browser all the contents I added with the Ajax is not there any more.
refreshing a page will remove Ajax data, to resolve that issue you need to add your Ajax call inside pageshow event like following
$(document).on("pageshow","#postDetails",function(){
$.ajax({
url: postDetailsUrl,
type: "post",
data: {id: id},
beforeSend: function () {
$.mobile.loading("show");
},
complete: function () {
$.mobile.loading("hide");
},
success: function (data) {
$('#commentList').html(data);
$('#commentsNum').text($('#commentList .comment').length);
initCommentPage();
},
error: function (requestObject, error, errorThrown) {
alert("Error in communication");
}
});
})
now this ajax request is in pageshow event so every time popstDetails page is shown it will make a ajax call to postDetailsUrl and show the data in commentList element.
to know more about page events see gajotres's blog
I have the following view model in a separate .JS file:
var vm = {
ControllerName:ko.observable(),
getData: function () {
$.ajax({
type: 'GET',
url: '/'+this.ControllerName+'/GetData',
contentType: "application/json; charset=utf-8",
dataType: "json",
data:jsonData,
success: function(data){
// code to bind the data
}
});
} }
$(function () {
ko.applyBindings(C1ViewModel);
C1ViewModel.getVisibleAndInvisibleColumns(); });
I have to set the ControllerName observable with the current asp.net mvc controller name and use this observable in the getData function so that the controller name is always dynamic. Since we cannot execute server side razor code in .JS files I would have to pass the current controller name from my markup file where I can get the current controller name by writing server side razor code.
My question is how can I pass a value from my html to my view model, set it in an observable and use it as a global value throughout my view model? Is there any other way to achieve what I am trying to do above?
You can use script tags in your markup to declare a JS variable that sets the controller name. You can then access this is your .JS file:
CSHTML
<script>
var urlForController = "#Url.RouteUrl("DefaultApi",
new { httproute = "",
controller = "ControllerNameHere",
action = "GetData" })";
</script>
You can add additional logic in this code if the controller name varies on some specific criteria.
AJAX Call in JS:
$.ajax({
type: 'GET',
url: urlForController,
contentType: "application/json; charset=utf-8",
dataType: "json",
data:jsonData,
success: function(data){
// code to bind the data
}
});
I have four different tabs in one page and data for each tab is rendered by an ajax call using partial page. Data for tab is loaded by ajax post.
ajax call:
$('#movieDatabase').click(function () {
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'html',
type: 'POST',
url: '/Admin/GetMovieDatabase',
data: {},
success: function (data) {
$('#view16').html(data);
},
failure: function (response) {
alert('error');
$('#view16').html(response);
}
});
});
This ajax call rendered the partial page. Now I want to do is paging the movie came from database.For this I use PagedList.Mvc. But problem occurred in navigating movie from one page to another. It is done by:
#Html.PagedListPager((IPagedList)Model.MovieInforamtions, page => Url.Action("GetMovieDatabase", new { page }))
But when I click on next page it gives page not found error as I have not written any action in HTTPGet. And If I made above call by HTTPGet, I couldnot render all page but only partial page. My action is..
[HttpPost]
public ActionResult GetMovieDatabase(int? page)
{
var AdminGetMovieDatabaseViewModel = new AdminGetMovieDatabaseViewModel();
var allMovie = _AdminService.getAllMovieInfo();
var pageNumber = page ?? 1;
// if no page was specified in the querystring, default to the first page (1)
var onePageOfMovie = allMovie.ToPagedList(pageNumber, 5);
// will only contain 5 products max because of the pageSize
AdminGetMovieDatabaseViewModel.MovieInforamtions = onePageOfMovie;
return PartialView("MovieDataBasePartialPage", AdminGetMovieDatabaseViewModel);
}
Now How can I render the next page like in ajax call which is done previously?
I put the code in javascript section inside the partial view and works for me.
<script language ="javascript" type="text/javascript">
$('#movieDatabase').click(function () {
$.ajax({
contentType: 'application/json; charset=utf-8',
dataType: 'html',
type: 'POST',
url: '/Admin/GetMovieDatabase',
data: {},
success: function (data) {
$('#view16').html(data);
},
failure: function (response) {
alert('error');
$('#view16').html(response);
}
});
});
</script>
I am using jConfirm dialog for confirmation in jqgrid. All i want is when the gridComplete triggers it should popup a jConfirm dialog with Ok and cancel buttons when i hit ok it should setSeletion of Rows in jqgrid. My code is as follows:
// My ajax call in gridComplete function in jqgrid
function listSelectedUsers(data) {
$.ajax({
cache: false,
async: true,
type: "POST",
url: urlPath,
data: { countryID: countryID},
dataType: "json",
success: function(data){
jConfirm(data, 'JqGrid Popup', function(confirmation) {
if (confirmation) {
}
});
},
error: function(data) {
}
});
}
//jqgrid code
// on gridComplete function call, does not show up jConfirm dialog popup.
gridComplete: function() {
listSelectedUsers(data);
},
Please suggest me the solution ASAP.
Thanks in advance.
I have following code.I show user a fancybox and they click Submit on Form I close fancybox and show them processing on page and do an AJAX post using JQuery. But some how fancybox gets stays open until AJAX form post is completed.Which creates confusion for user .
function BeginProcess(){
$.fancybox.close();
$("#imgProcess").attr("src", "/admin/images/loading_animation.gif");
$('#imgProcess').show();
PostAJAXForm();
}
function PostForm(FormData){
$.ajax({
type: "POST",
url: "process_image.jsp",
data: FormData,
contentType: "application/x-www-form-urlencoded",
async: false,
success: function(response) {
response = $.trim(response);
$('#imgProcess').delay(10000).hide();
return response;
},
error: function(xhr, ajaxOptions, thrownError) {
alert("There was an error. Please undo image and perform action again. " );
$('#lblProcess').delay(5000).hide();
return;
}
});
}
Here's a snippet:
var params = $(this).serialize();
var self = this;
$.ajax({
type: 'POST',
url: self.action,
data: params,
beforeSend: function(){
alert('Closing');
$.fancybox.close();
},
success: function(data){
alert('Finished processing form');
return false;
},
dataType: 'json'
});
Sorry if something is messed up or left out from that snippet - but you should get the idea.
You need to add $.fancybox.close() in Jquery' Ajax's beforeSend function.
http://api.jquery.com/jQuery.ajax/
http://api.jquery.com/ajaxSend/
This should help you out too
http://snipplr.com/view/47979/close-a-fancybox-when-you-submit-a-form-with-ajax