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
Related
Its my first time using the tooltip and have done a lot research on it. I used the jquery website to get most of the information. I intend my tooltip to show dynamic data when a mouse clicks the hyperlink. I added the title to my link and have this code below:
var t = 1000;
$(document).tooltip({
content: '... waiting on ajax ...',
open: function(evt, ui) {
var elem = $(this);
$.ajax({ type: "POST",url:'/GetTooltip/', data: 80140}).always(function() {
elem.tooltip('option', 'content', 'Ajax call complete');
});
setTimeout(function(){
$(ui.tooltip).hide('destroy');
}, t);},
position: {
my: "center bottom-20",
at: "center top",
using: function( position, feedback ) {
$( this ).css( position );
$( "<div>" )
.addClass( "arrow" )
.addClass( feedback.vertical )
.addClass( feedback.horizontal )
.appendTo( this );
}
}
});
I am not fully knowledgeable with the syntax of the ajax call in reference to the always function and how to get the data to show on my tooltip. the GetTooltip returns JSON data, I just want to post to the GetTooltip script and the returned data to show on my tooltip. At the moment my ajax is posting nothing.
Regarding your statement that you are not fully knowledgeable with
always function: the always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { }); is always executed after the ajax request was executed. For more see the documentation deferred.always() Please look also at jqXHR.always(function(data|jqXHR, textStatus, jqXHR|errorThrown) { })
get the returned data to show on the tooltip - see the example in the fiddle
You can find many other answers on stackoverflow. Take a look at this fiddle and let me know if you need more help.
Updated fiddle 2
If have updated the fiddle. You can pass values from the parameters that are returned from the ajax callback. This is a simple wrapper around the ajax call:
function callAjax(elem){
$.ajax({ url: '/echo/json/',
type: 'POST',
contentType:"application/json; charset=utf-8",
dataType:"json",
data: { json: JSON.stringify({ text: 'some text'})}
}).always(
function(data,textStatus, errorThrown)
{
elem.tooltip('option', 'content'
, 'Ajax call complete. Result:' + data.text);
});
}
I am using JSON.stringify(...) above to create a Json-String. This function may be not present in all browsers. So if you run into troubles please use a current chrome / chromium browser to test it.
So you can use the wrapper function inside the tooltip():
$('#tippy').tooltip({
content: '... waiting on ajax ...',
open: function(evt, ui) {
var elem = $(this);
callAjax(elem);
} // open
});
Above you can see that the always method calls an anonymous function with 3 parameters (data, textStatus, errorThrown). To pass the reply from the ajax call you can use data. Above i am only passing a simple object with the propert text. To access it you can use data.text
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>
Friends I have a problem
We need to make a user control that has the ability to delete itself, I made it but we did not clear the mechanism for removal, it should be tied to a nice picture. Code that is attached to the frame is given below, but not
$('#delete').bind('click', function () {
alert('test');
var urlA = '<%=Url.Action("DeleteMessage","Ticket")%>';
$.ajax({
url: urlA,
type: 'POST',
data: { idMessage:$(this).parents("div:first").find("input[name='MessageID']").val(),idticket:$('#TicketID').val() },
success: function (data) {
alert(data);
}
});
});
But when I write this, but to throw me to the homepage what's wrong
$('#delete').live('click', function ()
$("#delete").live("click", function(){
//code
$(this).remove(); //delete itself
});
If your image is declared as input type="image" then it will behave like a submit button and submit your page. You should prevent the default behavior of submitting the page by adding an event.preventDefault() or equivalent to your javascript function.
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"
}
});
I am making a jQuery ajax request in a asp.net mvc page:
$.ajax({
type: "POST",
url: "/Home/Go",
data: dataObj,
success: function (data) {
// update html here
}
}
});
This call is within a page, which has a form and other elements which submit to other url (lets say "/Home/Do"). Now after the ajax call returns, If I click on any other element the form still submits to url1 instead of url2
Note I tried adding a "return false" statement to click event handler where the ajax call is made. But even this did not help
The ajax call is made within the jQuery dialog:
$('#myDialog').dialog({ buttons:
[
{
text: 'Next',
click: function () { HandleNext(); return false; }
}
],
title: 'Dialog-Title'
});
function HandleNext()
{
$.ajax({
type: "POST",
url: "/Home/Go",
data: dataObj,
success: function (data) {
// update html here
}
}
});
return false;
}
Anybody faced a similar issue? any solutions?
return false in the click handler is mandatory for ALL ajax requests. The web browser will visit the url otherwise. In other words: The ajax request is made first and then a regular request.
No urls can automagically be replaced with other urls. You either do it in your javascript code, or in your action/view.