I would like to refresh a partial view using ajax.
I kwow how to append the new data to the HTML, but I would like to know if there is a simpler way to do it.
I have partial view that does this
each x in data
li x.name
I pass the data using !=partial('test',{data:data})
I want to call a function to render the partial view again without reloading the page..
and without doing append( ... );
Any Idea??
Or other way to do it...
First, add a route for just the partial like
app.get('/mypartial', function (req, res) {
//compute data here
res.render('mypartial', {layout: false, data: data});
});
Then load the new HTML with a jQuery .get or .ajax call to /mypartial.
Then use jQuery to replace the HTML of the parent element by doing
$('#idofparentelementofyourpartial').html(responseHTML);
See also my answer to this similar question.
Use it You may get good solution
function ajaxRequest(url, succesCallBck, completeCallBck, errorCallBck)<br>
{
$.ajax({url: url
type: "POST",
dataType: "json",
complete: completeCallBck,
success: succesCallBck,
error: errorCallBck
});
}
Related
I been trying to use #Url.Action inside Ajax url in another external .JS file but unfortunately i got no luck.
Here's my Code:
$.ajax({
type: 'post',
url: "#Url.Action("ClearData","Home")",
success: function () {
}
});
This Code working only inside the View itself but not in Javascript externally.
Iv'e been searched some possible solution but it seems different than this.
Is there any alternative way to use #Url.Action in another .Js File?
#Url.Action() is razor (server side) code and is not parsed in external files. Options include
Declaring a global variable in the main file, say
var url = #Url.Action("ClearData","Home");
and then in the external script use url: url in the ajax call
Including a data- attribute in the element your handling, for example if its a button click event, then
<button data-url="#Url.Action("ClearData","Home")" id="mybutton">
and then reading that value in the external file, for example
$('#mybutton').click(function() {
var url = $(this).data('url');
$.ajax({
url: url,
....
if your js code inside view
$.ajax({
type: 'post',
url: "#Url.Action("ClearData","Home")",
success: function () {
}
});
this is work
when js code is an separate (external file)
#Url.Action("ClearData","Home") is not work ,
this case you have to write total url or folder path
You can create a partial view, then inside this view are just list of hidden fields
such as
#Html.Hidden("ActionName", #Url.Action("ActionName", "Controller"))
which generates this
<input id="ActionName" name="ActionName" type="hidden" value="/controller/ActionName">
then you can call it like
var urlAction = $('#ActioName').val();
or you can create a js function like what I did
function ActionCaller(actionName)
{
return $('#' + actionName).val();
}
var action = ActionCaller(ActionName);
What is the equivalent for success function when I am using [HttpPost] in MVC instead of ajax calls
in ajax, for calling controller in MVC I use something like
$.ajax({
url: '#Url.Action("SomeConroller", "ActionName")',
dataType: 'html', //be sure to use html dataType
contentType: 'application/json; charset=utf-8',
success:someFunctionName
});
I stopped using ajax calls and started using ajax and started using [HttpPost] so that all input type="submit" will come to that and i will handle the events to be done.
Now there is a scenario where I am selecting and moving an item to a different list, and after its done i am doing a this.RedirectToAction("ActionName", "ControllerName");
The problem is, once it is done how can i alert that it is moved? if it is ajax i will handle it in success function. Where can i handle that here?
Since you are redirecting to another action, the page will refresh. If you want to display an alert on new page, the action view can display it with the data you pass to the view.
So something like this should give action data that it pass to the view:
return RedirectToAction("TargetAction", "Controller", new {id = userId});
The "TargetAction" will prepare a view model object and return a view with the view model:
return View(viewModel);
View will have logic to display a alert with custom text. E.g. if you want to display javascript alert on load, just define
$(document).ready(function () {
alert("Item moved: " + '#Model.Id');
});
Is it possible to simply run the knp paginator with ajax? Is it possible at all and what is the best way to do it ?
Greetings Michael
Not sure if this is best solution, but I did it this way:
$(function(){ $('#dish-select-component-canvas').on('click', "ul.pagination a" , function(e){
$.ajax({
type: "GET",
url: $(this).attr('href'),
})
.done(function( msg ) {
$('#dish-select-component-items').html(msg);
});
e.preventDefault();
});
});
#dish-select-component-canvas is container for page. When somebody click on this canvas on link in ul.pagination (pagination is class used by knpPaginator by default as wrapper for pagination), I take href attribute of that link, and send it with ajax GET request.
Result of that request goes to appropriate div (here to #dish-select-component-items). Of course you must remember to add e.preventDefault() to prevent browser from reloading the page.
I have a probleme with ah changePage.
I want to switch the Page after an Ajax call.
If the form get submit, this function will be executed, but after the ajax call the page does not switch.
If I wanna set a Breakpoint on this call, it do not stop.
What can I do, that I can switch the page after the ajax call.
$("#serialNumber").submit(function() {
$.ajax({
type: "POST",
url: "mobilemain.do",
data: "serialNumberInput=" + $("#serialNumberInput").val(),
success: function(msg)
{
$.mobile.changePage("#machine_manuals", "slide");
}
});
});
Edit:
Ok!
I found some hint to my Problem.
The SAP-Server call is from the form-submit and not from my ajax-call.
He never goes in the method above.
On my Server, I made that:
l_view = create_view( view_name = 'main.htm').
call_view( l_view ).
But I does not wanna call the main.htm .
I wanna call the second page in the jquery mobile project. (main.htm#machine_manuals)
How does that work?
Other than the page you are changing to, all options for $.mobile.changePage are passed as a key-value pair in an object.
Your changePage should look like this:
$.mobile.changePage("#machine_manuals", {transition: "slide"});
The documentation for the method, and the options available can be found here:
http://api.jquerymobile.com/jQuery.mobile.changePage/
Below is the code snippet which is hitting the url on server and getting the html response.I can see
the response inside firefox debugger but it does not display in div tag.
$.ajax({
url: url,
dataType: 'html',
data: '',
type: 'POST',
success: function(data) {
//in firefox debugger i can see complete html response inside data
$('#displayContent').html(data); // but here, it does not
// append the html inside div displayContent. Instead it makes
// the current page blank
}
});
I don't get what mistake I'm making here Can I not directly assign the ajax html response to an selector(div tag in my case) with $('#displayContent').html(data)?
Instead of using html() method use append i.e.
$('#displayContent').append(data);
Or if you want to assign whole content direct to your element use load method
$(function(){
$('#displayContent').load(url);
});
If you've got a form tag on your page, and you're trying to submit it asynchronously with jQuery, your function will need to return false, to prevent the browser from handling the form.
Example:
$("form").submit(function () {
$.ajax(...);
return false;
});