using ASP .Net MVC 4.0 , vs10 , MSSQL 2008
I have a stored procedure, which is executed in one of my page. it generally takes 30 to 50 second to execute. I want to show a alert dialogue where an gif image will be loaded during this process time. I am executing stored procedure with sqlcommand. The process started on clicking Process button. after finishing the process, the page returns another view.
I have poor knowledge of javascript, so please show me a simple way.
EDIT:
Is it possible to show an image on buttonclick an do other codebehind process?
Like:
<script type="text/javascript">
function showImage() {
document.getElementById('Processing').style.visibility = visible;
}
</script>
<div id="progessbar">
<img alt="Processing" src="../../Images/Processing2.gif" id="Processing" style="visibility:hidden"/>
</div>
It will be difficult to accomplish what you're trying to do in a traditional MVC fashion since the request takes a long time. This is better accomplished using AJAX which processes your request asynchronously. I recommend also using jQueryUI dialog or any modal to show a progress indicator, or even any custom JS.
I like jQuery BlockUI personally to create the modal for me but that's just a preference.
/** Using a wrapper to show/hide the progress indicator.
Swap the blockUI with any library or custom JavaScript for displaying the progress indicator.
*/
var showProgress = function() {
$.blockUI({ message: '<img src="progressImage.gif" />' });
};
var hideProgress = function() {
$.unblockUI();
;}
/** Trigger to submit the form */
$('#submit').click(function() {
/** Show an indicator before making an AJAX request*/
showProgress();
$.ajax({
url: '/someEndpoint',
data: $.toJSON({/* some JSON param */}),
type: 'POST',
dataType: 'json',
timeout: 50000 /** Override timeout in ms accordingly */
}).done(function(data){
/** Remove the indicator once the request has succeeded and process returned data if any. */
hideProgress();
});
return false;
});
Use ajax for your process. It ll make the parallel processing for "showing gif" and completing your desired code.
You can use JQuery-AJAX with page methods this way: [1]: http://encosia.com/using-jquery-to-directly-call-aspnet-ajax-page-methods/
The success callback contains a parameter with the returning data.
or you can try simply this
var actionURL = "(Your disired action e.g /index.jsp)"
$.ajax({
cache:false,
url: actionURL,
beforeSend: function( xhr ) {
xhr.overrideMimeType( 'text/plain; charset=UTF-8' );
$("#progessbar").show();
//Here you can write any code to execute before the action like gif loading etc
},
success: function( data ) {
alert("Success Conditions");
//"data" is what u gets from your target. You can see by alert(data); here
//Here you can write any code which you want to execute on finding the required action successfully
},
complete: function(){
alert("Complete Conditions");
$("#progessbar").hide();
//Here you can write any code which you want to execute on completion of the required action you given in actionURL
},
error: function(){
alert("Error Conditions");
}
});
NOTE: alerts are just for explanation, you can write your own code also
For this code you have to include jquery plugins. which can be downloaded from their official site [l]: http://jquery.com/
Related
So I have a Spring Boot API project using Jquery SmartWizard. The first Step of 4 contains a simple form. For the sake of testing, am using with one field (ID: first-name).
On clicking of the Next button of the Wizard, the jquery method should execute, form details posted to the database and then go to the Next Step of the Wizard(i.e. 2).
$( document ).ready(function() {
$('#wizard').smartWizard({
onLeaveStep: function() {
ajaxPost();
}
});
$('.buttonNext').addClass('btn btn-success');
$('.buttonPrevious').addClass('btn btn-primary');
$('.buttonFinish').addClass('btn btn-default');
function ajaxPost(){
var formData = {
name : $("#first-name").val()
//lastname : $("#lastname").val()
};
// DO POST
$.ajax({
type : "POST",
contentType : "application/json",
url : "http://localhost:8080/api/uc/create",
data : JSON.stringify(formData),
dataType : 'json',
success : function(result) {
console.log(result)
},
error : function(e) {
alert("Error!");
console.log("ERROR: ", e)
}
});
//$('#wizard').smartWizard('goForward');
// Reset FormData after Posting
//resetData();
}
function resetData(){
$("#first-name").val("");
//$("#lastname").val("");
}
});
The ajaxPost() works but the Wizard doesnt move to the next step. If I uncomment this line //$('#wizard').smartWizard('goForward'); The ajaxPost() function replicates alot of data in the database then.
How do I get the Wizard to move to Step 2 after doing the form submit via the ajax functionality by clicking on the next button.
The ajax post is asynchronous, so the javascript needs to wait for the response.
Most likely you want to continue with the wizzard, only if the ajax request was successful.
So move 'goForward' into the success handler :
...
success : function(result) {
$('#wizard').smartWizard('goForward');
},
...
You wrote, many entries are added to the database. This can have two reasons :
The server does not work correctly, so add breakpoints there to see when its called and how many entries per call are created
The client calls the server many times, so you need to debug the frontend
I make a menu link with javascript. By using the parsing in php I display a menu with the help of javascript. The problem is how do I display data in accordance with the "id" which has been on the destination page.
Here's the code in index.html
function loadkategori(idnya){
$('#contentID').load('kategori.php?id='+idnya, function(){
$('#myListview').listview().listview('refresh');
});
}
$(document).ready(function(){
$.ajax({
url: 'http://localhost/fiqi/fiqi2/kuliner/www/parsing2.php',
dataType: 'jsonp',
jsonp: 'jsoncallback',
timeout: 5000,
success: function(data, status){
$.each(data, function(i,item){
// $("#listview").append("<li><h2>"+item.namatempatnya+"<p>Kalimat</p></h2></li>");
// seharusnya menggunakan class, tidak inline function
$('#listview').append('<li data-filtertext="form checkboxradio widget checkbox input checkboxes controlgroups" onclick="loadkategori('+item.idkat+')">'+item.namakategori+'</li>');
});
// $("#listview");
// $('ul').listview('refresh');
$('#listview').listview().listview('refresh');
// $('#element').collapsibleset('refresh');
},
error: function(){
alert('Error terjadi');
}
});
});
here's the code in kategori.php
The code in kategori.php doesn't work on adobe phonegap.
I couldn't implement you code but as far as i understand, You need to use some http request function to get data from serverside php rather than using load(), go for using $.get(). That might work out as a solution to your problem.
function loadkategori(idnya){
var data = $.get('kategori.php?id='+idnya, function(data,status){
//PROCESS YOUR DATA OR CALL YOUR FUNCTION TO POPULATE YOUR LISTVIEW
});
}
Secondly you should use either xml or json data for client server communication. That would make your program simple and more efficient. You might paste your php code instead of putting screenshot so that some editing or testing can be done.
I am building a messaging system for my site. The mailbox is flat, i.e. accessing the inbox, or sending a new message does not move to another page, it just toggles divs. When a user clicks a message, an AJAX call replaces the inbox div with the chosen thread. Inside the thread view, there is a form to reply to the message.
A few problems:
From inside this thread_view, which sends an AJAX response to a div nested inside the entire mailbox div, I don't have access to document objects outside of it. So, I can't manipulate divs outside of this view, such as the one that receives the AJAX beforeSend and Success messages. I think this may be accomplished with some kind of .load(), though I'm not sure exactly how.
My AJAX doesn't fire. I am using the Ajax.Form() plugin. I think this problem might be related to the first, but I can't say for certain. I'm not sure how to begin troubleshooting the Ajax request because I get no errors in the console.
I wonder if the problem has to do with the fact that I am trying to send an ajaxRequest from a view that is itself a response from a previous ajaxRequest, i.e. the entire view for the thread is a result of the following, in the same js file as the next request:
// compose a message function
$('#send_message').on("click", function(e) {
var send_message_options = {
type: 'post',
url: "/users/new_message",
beforeSend: function() {
//Display a loading message while waiting for the ajax call to complete
$('#message').html("Sending message...");
},
// Hide form and display results
success: function(response) {
$('#message').html(response);
}
};
$('#message_form').ajaxForm(send_message_options);
});
My new AJAX request, which does nothing:
$('#reply_in_thread').on("submit", function(e) {
e.preventDefault();
console.log("trying for reply");
var reply_options = {
type: 'post',
url: "/users/reply",
beforeSend: function() {
//Display a loading message while waiting for the ajax call to complete
$('#reply_message').html("Sending message...");
},
// Hide form and display results
success: function(response) {
$('#reply_message').html(response);
}
};
$('#reply_in_thread').ajaxForm(reply_options);
});
I couldn't say why the ajaxForm() plugin failed, but a jquery $.post was successful. The code that worked below:
$('#reply_in_thread').on("submit", function(e) {
e.preventDefault();
var data = $(this).serialize();
$.post('/users/reply',data,function(response){
$('#reply_message').html(response);
})
});
I am returning data from a php file using ajax. But it would look good if a loading display came up, like an animated gif or something. I have had a go using text but noting shows up. Is there a better way of doing it than I have.
function small_loader(t){
if(t === 'show'){
$('#sub_menu').html('Loading');
}else{
$('#sub_menu').html('');
}
}
function loadtools(t){
var tools = 'tools/'+t+'.php';
$.ajax({
url:tools,
type:'POST',
beforeSend: function(){
small_loader('show');
},
success: function(e){
$('#sub_menu').html(e);
},
complete:function(){
small_loader('hide');
}
});
}
At the moment the php file just has a for loop on it echoing out numbers with kine breaks for testing purposes. This does work if I take the small_loader function off. Why is this?
You set #sub_menu to 'Loading...' then put the AJAX stuff there, then at the end overwrite it with '' when you disable the loader, overwriting the ajax response.
Try using a different div for the loader, and maybe hide the #sub_menu and display it when it's finished.
You should add your loader in your HTML (at the right place, say beside the button launching the ajax request), hide it in css (display:none), show it before sending your request and hide it when response comes back :
function loadtools(t){
var tools = 'tools/'+t+'.php';
$.ajax({
url:tools,
type:'POST',
beforeSend: function(){
$("#your_loader_wrapper_id").show();
},
success : ...,
error : ...,
complete: function(e){
$("#your_loader_wrapper_id").hide();
$('#sub_menu').html(e);
}
});
}
I am not trying to ask for free ride, but I don't seem to know how to do this at all.
My recent posts are about running jobs in the background, but I have no luck in doing that.
So...
User clicks run inside a form and it fires a job.
It takes about 30 seconds to complete the job, returns, and tells Django view function to return HttpResponseRedirect(....).
So while the page is being redirect (it takes 30 seconds to signal "GO AHEAD").... I want to show user like an Ajax loading gif picture.
I don't have Ajax implemented and the system is way too complicated to hack on.
Can we actually do this with javascript? The problem is that it hasn't load any page yet because it needs heavy_work to finish.
result = heavy_work(....)
.... more code ....
return HttpResponseRedirect(go to this page...)
Thanks!
Why don't you use a regular ajax call?
javascript
function do_heavy_lifting(argument) {
$.ajax({
type: 'GET',
data: { argument: argument }, // if necesarry
url: '/heavy_lifting_django_view_url/',
beforeSend: function() {
$('#loading').show();
},
success: function(data) {
...redirect...
},
cache: false
});
}
html
<div id="loading" style="display:none">
<button onclick="do_heavy_lifting('argument');">
Using AJAX is simple: just show a 'loader' animated gif before the actual ajax call, and in 'on_success' response callback to hide the loader gif.
Bu without AJAX - the only solution so far is using iterators - look at this: How to stream an HttpResponse with Django