I want to make a real time visit page which take data from database. I use a repeater for this which binds from a dataset. It works fine, but when new row added, I want to show some effect like in Feedjit's "real time visits" page.
I used jquery for this:
$(document).ready(function () {
$('.FadeIn').click(function () {
$('.show').show('slow');
});
});
$(document).ready(function () {
$(".FadeIn").trigger('click')
});
But it doesn't work. It slides down the whole repeater. Should I use something other than repeater or it is a jQuery problem?
Use long pulling with comet or SignalR
SignalR is the best options for Real time updates.
There are multiple technologies which you can use, also you can try exploiting Timeout function of Jquery
Few links to check
http://www.codeproject.com/Articles/315938/Real-time-Asynchronous-Web-Pages-using-jTable-Sign
http://www.asp.net/signalr/overview/getting-started/tutorial-server-broadcast-with-aspnet-signalr
http://datatables.net/
Updated Link for SignalR:
http://www.asp.net/signalr/overview/signalr-20/getting-started-with-signalr-20/tutorial-server-broadcast-with-signalr-20
Related
is there any simple jquery script/plugin to apply bootstrap pagination style in asp.net gridview ? I've found some good tips about how to do this, like these links: here and here.
the only problem with these tips/solutions is we need to make a lot of changes to achieve the result and this is not preferable when you have large application and you want to transform it to bootstrap style. we need another solution. like a simple jquery script that can do the job without making lot changes to the current code.
I've made simple jquery script to apply the bootstrap pagination in asp.net gridview and I think it will be useful to share it here in stackoverflow.
source code of this script is hosted in github here.
usage is very simple:
-include the plugin js file in your asp.net page file:
<script type="text/javascript" src="js/bs.pagination.js"></script>
-set gridview property:
PagerStyle-CssClass="bs-pagination"
that's is all you need to apply bootstrap pagination style in asp.net gridview.
check my blog for more info.
Edit:
about the problem when using gridview inside UpdatePanel, the reason of this problem is because “UpdatePanel completely replaces the contents of the update panel on an update. This means that those events we subscribed to are no longer subscribed because there are new elements in that update panel.”
There is more than one solution to solve this problem:
Solution 1:
Use pageLoad() instead of $(document).ready. Modify the code like this:
function pageLoad() {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
}
Solution2:
re-change the style after every update. We can do this by adding these lines to the bs.pagination.js file:
var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {
$('.bs-pagination td table').each(function (index, obj) {
convertToPagination(obj)
});
});
I have an FileUpload control on a page. I need to change some values based on the filename once a user selects a file. I'm trying to find out the best way to do this. The only option I can see is listening in JavaScript for a change event and then either..
a) forcing a post back and updating the form
b) updating things on the client side using JavaScript and some back end async calls.
Is there any other options and if not which of this is preferable?
Thanks
If you are using jquery, you can attach a function to the change of the file upload.
Consider the following example html:
<input id="myFile" type="file">
<p><label id="myLabel">No File</label></p>
And let's say we wanted to update the label with the name of the selected file. To do that, we'd use the following javascript:
$(document).ready(function () {
$("#myFile").change(function () {
$("#myLabel").html($(this).val());
});
});
Here's a fiddle in action: http://jsfiddle.net/ffkuL/1/
If you aren't using jquery, you can do something like this:
var upload = document.getElementById("myFile");
upload.onchange = function (e) {
var label = document.getElementById("myLabel");
label.innerHTML = this.value;
};
And here's a fiddle for that one: http://jsfiddle.net/8PYwK/
(Honestly, though, I find that it's far simpler in the long run to use jquery in the long run when dealing with ASP.NET controls.)
Obviously, the label changing in my samples are just examples. Following that pattern, though, you can make whatever changes you need to on the client side (rather than needing to post back).
just need tips on how to make forms where request are submitted via AJAX with a loading progress image. I am using update panels with AJAX framework. I would like to know about the recommended approach. Through JQuery or AJAX toolkit ?
Please advice, examples would be an added bonus for me.
1- Prepare a client side div with "display:none" style property. put your loading image inside.
2 - when the user or page submits a request, change that divs display property to "block".
3- Add some kind of "information received" sign to the response and check this response from the client side and then change that divs display property back to "none"
I would like to know about the
recommended approach
Well, that depends on what you are doing, what parts of the form are you updating, how big is the form, what values are you sending to the server.
Generally speaking, if you want to update something simple (dropdownlist, listbox, etc), youd generally use JavaScript (or jQuery) to call an AJAX-enabled web service. This way, you're only sending to the server the data it needs, things like ViewState/cookies are not sent over the wire. You also have full control over the pre/post execution events (so you can add your loading images, call the WS, then clear them).
However, if you want to asynchronously update an entire form (which has a lot of controls), you're probably right in using an UpdatePanel. Things like a GridView are a good case for an UpdatePanel (as you usually need to handle editing, binding and paging all asynchronously).
The progress image is made easy with the following code:
<ProgressTemplate>
<img src="someloadingimage.gif" alt="Loading" />
</ProgressTemplate>
Stick that inside your UpdatePanel, and whenever an AJAX call is made, the loading image will be shown.
HTH
If you use JQuery for AJAX request then you can use the following events -
$.ajax({ url: "test.html",
type: "GET",
beforeSend: function(){
-----load your loader here-----
});,
success: function(){
------remove your loader here -----------
Remaining code
}});
You can also use POST. in above example i have used GET.
For detailed documentation you can refer - http://api.jquery.com/jQuery.ajax/
Create a small plug-in for your loader like so.
$.fn.ShowLoader = function(on){
switch(on)
{
case true:
$(this).show();
break;
default:
$(this).hide();
break;
}
}
then use the following:
$('form').submit(function(){
var Form = $(this);
$('.loader',Form).ShowLoader(true);
//Gather some params
Location = Form.attr('src');
Data = Form.Serialize();
$.post(Location,Data,function(result){
result = result || false;
if(result)
{
$('.loader',Form).ShowLoader(false); //Disable the loader
//Process result
}
});
})
html would just be a regular form, with an image / div inside with the class of loader
I have a usercontrol with a couple of drop downs Lists and a button, I want the user to click the button (Which response.redirects depending on the selection in the DDL's).
Now instead of redirecting straight away, I want to display a little loading icon for 3 seconds and then redirect... Has anyone done anything like this?
An artificial delay where none is needed is kinda lame. What you can do instead is on submission of your form display your throbber. I use the following on a document upload form where large media files are being posted.
<script type="text/javascript" id="PreJavaScript">
function NUsubmit(){
document.getElementById("uploadFormInputs").style.display = 'none';
document.getElementById("progressBar").style.display = 'block';
return true;
};
function init() { document.getElementById("UploadFormObject").onsubmit = NUsubmit; };
window.onload = init;
</script>
If I remember correctly, in some versions of IE the animated gif didn't play but it worked fine in IE6+ and FireFox.
This way if the postback is quick they never see the throbber but if it takes a while they see it and it gives them the sense that something is happening.
You can perform delays with the setTimeout() function in javascript.
setTimeout(function() { alert('After 5 seconds.'); }, 5000);
You're probably going to need to override a couple things in your Javascript and use a "setTimeout" to delay the loading.
<script type="text/javascript" >
var __handleSubmit = theForm.submit;
theForm.onsubmit = function() {
alert('loading'); //Show your message here
window.setTimeout(function() {
__handleSubmit();
}, 3000);
}
</script>
You might want to play with a bit more... this is may not work for all instances since I've never done it.
If the delay is simply for "aesthetics", to make it appear it is working, then I'd recommend against it - programmers appear to be the only people that think loading bars are cool :)
Looks like you should implement this page using AJAX. You can place a progress indictor on your page to alert the user that a long running process is taking place.
I got this working by using
System.Threading.Thread.Sleep(4000);
In the postback
I am using the example on the AJAX website for the DropDownExtender. I'm looking to make the target control (the label) have the DropDown image appear always, instead of just when I hover over it.
Is there any way to do this?
This can be done using the following script tag:
<script>
function pageLoad()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
$find('TextBox1_DropDownExtender').unhover = VisibleMe;
}
function VisibleMe()
{
$find('TextBox1_DropDownExtender')._dropWrapperHoverBehavior_onhover();
}
</script>
I found this and some other tips at this dot net curry example.
It works but I'd also consider writing a new control based on the drop down extender exposing a property to set the behaviour you want on or off.
Writing a new AJAX control isn't too hard, more fiddly than anything.