I have a set of objects and each those object keep track of some strings.
Those objects are created at page load and stored in an object array.
I have four user controls in ascx file that displays those strings of a particular object at a time.
And also I have a play button in the same ascx file which is default set to play.
When I load the ascx it displays the first set of strings in a particular object.
And after 5 second time interval iy should display the second set of strings in the next object. When the play button pushed, it should move into pause state also.
Can anybody give me a start to achieve this requirement. my code behind file is C#
Fundamentally, you want a 'Slideshow' of your ASCX controls. A common way to do this is by having all your ASCX's visible and then use Javascript and CSS to make one visible at a time.
Google for 'html css javascript slideshow'.
http://www.catswhocode.com/blog/top-10-javascript-slideshows-carousels-and-sliders
Just realised you might want to achieve this via front-end JavaScript as per your question title? In which case, you will need the setInterval function, and your array of data available in the DOM.
Suppose your button is
<asp:ImageButton src="source.jpg" class="btnPlay" alt="Play" />
Your JavaScript (using jQuery) could be along the lines of:
$(function() {
$('.btnPlay').click(function() {
$(this).toggleClass('btnPause');
if($(this).hasClass('btnPause') {
yourHandlerID = setInterval ("yourHandler()", 5000 );
} else {
clearInterval (yourHandlerID);
}
});
});
You can also do this via C# code behind using the timer class, example like:
http://www.csharphelp.com/2006/02/c-timer-demo/
And everytime the timer triggers the event handler you define, you can reiterate through your array, display what you want.
The toggle pause button would be just stopping the timer.
Microsoft reference:
http://msdn.microsoft.com/en-us/library/system.timers.timer(VS.71).aspx
Related
I need to add possibility to changing menus from old design to new. The changes are only the structure of the menu. I don't have any problem with that.
How I implemented the change add button, on button client click(no postback) I made one of the menu divs display:none and set hidden field to 0 or 1. On every post back I read the hidden field value and set the correct div.
My question is: Is it possible to be done without hidden field and to set the choice of the user, so when he log in again to stay with last configuration(not the default). I don't want to use postback, if it possible provide example. Thanks !
You are using JQuery so here it goes. Call the changeMenu() function in $(document).ready to make sure the old is shown first.
var current=1;//old system
//this function will be called in the button click
function changeMenu(){
if(current==0){
$("#oldMenuDiv").hide();
$("#newMenuDiv").show();
current=1;
}else{
$("#oldMenuDiv").show();
$("#newMenuDiv").hide();
current=0;
}
}
Using ajax I am causing an OnTextChangedEvent before this happens there is some Javascript that performs a check on the input field for validation and outputs some text based on whether it is valid or not. The Ajax I run resets the changes made by my javascript. It all happens in this order:
Javascript fires!
Text changes show
Ajax fires!
Text changes reset
The ajax partial autopostback is contained in an update panel. Without giving any code away is there anyone who has an idea of a way to stop the javascript changes resetting?
Over the day I will add code as I find time. Thought I would get the question up atleast. Thanks in advanced.
The Text changes are made in the DOM-Model and are not transmitted to the server.
If the ajax fires it will override the changes in the DOM made by javascript.
Solution is to transmit the validation-texts to the server and to add them again via ajax.
An UpdatePanel completely replaces the contents of the update panel on
an update.
This means that those events you subscribed to are no
longer subscribed because there are new elements in that update panel.
Full answer here
In your Page or MasterPage, put the following script
<script type="text/javascript">
Sys.WebForms.PageRequestManager.getInstance().add_beginRequest(BeginRequestHandler);
function EndRequestHandler(sender, args)
{
Validate(); //method that performs check on input field
}
</script>
I am trying to build a SharePoint 2007 web part in Visual Studio.
This web part should search a sharepoint list and display the results.
What I want to accomplish is to display the results as soon as the user stops typing, so no clicking button involved.
Probably, a combination of text_changed event and onkeydown javascript?
Any thought would be great.
This sharepoint site is "Ajax-enabled", btw.
Thanks
I would suggest using jquery and keyup:
$("input#txtid").keyup(function () {
if (this.value.length < 8)
return false;
$.get("ServiceUrl", { arg: this.value }, function (result) { $("#output").html(result); });
});
The easiest way to take care of the UI part is to use the AjaxToolkit AutoCompleteExtender se MOSS, AJAX and the AutoCompleteExtender then all you have to do is decide how you want the searching inside the web service to work
I approached this by using an UpdatePanel in my webpart. Then I added a Button (more on this later) and a TextBox to the UpdatePanel.
I also have a JavaScript class which handles all of the logic for submitting a query after the user has paused while typing their query. It contains the event handler for the onkeyup event which is attached to the TextBox:
t.Attributes.Add("onkeyup", "javascript:oSearchClass.KeyUpEventHandler(event);");
I used setTimeout and clearTimeout to handle when the class should call a SubmitQuery function.
When SubmitQuery() is called, it makes the TextBox read only (so the user can't type anything while it is querying) and then "clicks" the button using click(). Since you're using a normal Button, you can handle the Button.click event like normal to re-query the list and display results.
If you don't want your user to see the button, you can simply put it inside a span WebControl that is hidden.
Have a look at this sample, it adds 'search as you type' to the standard SharePoint search box.
Automatically add ‘Search As You Type’ to every SharePoint page using Infuser.
I am using asp.net mvc with ajax navigation. I use jquery address and I can change the address bar to be like "MYPage.Com/#/Url", but how can I invoke my route when the user enters that link?
This has probably been asked before but I could not find it, so please point me to it if you find it.
You need to use the window.onHashChange event of the window element. It is best to use javascript libraries like jquery bbq to handle the hash change.
If you still want to do it without using a library, then on page load you should make a call to the function that handles the onHashChange even.
There is no event for that (at least not the last time I've checked). You need to make a checker function in JS that will run once every 100ms for example (or more often).
var currentHash="";
function CheckHash()
{
if(currentHash!=window.location.hash)
{
currentHash=window.location.hash;
NavigateTo(currentHash); //or whatever code to execute when address behind `#` changes
}
}
CheckHash(); //Initial Run, for fast reaction on load
window.setInterval(CheckHash,100); //schedules the function to run once every 100ms
I need to populate 4 GridViews on an aspx page, but I only bind a datatable to one of them on page load. I need to pupulate the other 3 after page load.
does anyone know the best way to do this using ajax ?
Currently I'm using javascript to __doPostBack on a button that pupulates the 3 GridViews but unfortunately this forces a full page load even when using an update panel. I need the page to load, and then populate the GridViews as the datatables are returned.
any suggestions would be much apreciated.
The way you are doing it should work ok, although using jquery to populate a div via the $("#targetDiv").load("contentUrl"); function may be a cleaner way to do it. Anyway, in order to get your current implementation working, there could be a few things you want to look at:
I assume EnablePartialRendering is true on your ScriptManager (always worth checking!).
Make sure the eventTarget for the __dopostback call is set up as an async trigger for your update panels or that it is inside the UpdatePanel if you are only using one UpdatePanel. (See here for details)
Try returning false from the javascript code that executes in the onclick event handler if you have attached this to a button, to make sure the form is not being submitted normally by your browser when you click the button.
If I understand the question properly, you want the data to load after the page is in the browser. If this is the case, then you can fire an event with JavaScript when the page loads on the client.
One method I've used is to put a hidden (with CSS, not any property) button on the page and 'clicking' it with javascript. The event of the button click event will need to be wired in the page's code. Also the button would have to be in an update panel that either contains the grids you want to be bound or has the appropriate triggers to cause them to reload.
You might look at JQuery to get manage when this code gets fired. The $(document).ready(function(){ /* Your code here... */ }); method will fire after the entire DOM is available, which is faster than waiting on the entire page to load (images and so forth).