Posts tagged Javascript

Validate atleast one checkbox is checked

0

I am currently working on a ASP.NET form which has a lot of checkboxes and i need to validate on submit that at atleast one checkbox is selected. I tried a lot of various methods to ultimate settle on a very easy one using Javascript.

function ValidateGrid()
{
    var objs = document.Form1.getElementsByTagName('input');
    var selected = false;
    for(var i = 0; i < objs.length; i++)
    {
        if(objs[i].type == 'checkbox')
        {
            if(objs[i].checked)
                selected = true;
        }
    }
    if(!selected)
    {
        alert('Please select the advertisements which you require.');
        return false;
    }
}

Isnt that simple and neat, eh? Got a better one?

Show message on UpdatePanel update

0

Several times, we are in a situation where we need to do some work the moment the update panel finishes its update (ASP.NET 2.0 AJAX). There are situations like showing an error if any during the update, showing a success message after a proper update, setting up scroll bars, changing some UI component, updating some other part of UI, etc. The list can get longer as per the developer’s requirement. I had tried to show how we can get control to the page once the update is finished. We can tweak things via JavaScript the way we need to out there in the handler.

Earlier I too faced lots of problem and was unable to work out of how to handle anything JUST after an update of update panel. I found lots of my colleagues facing the same issue. They wanted to have a certain UI work like scroll or to trap an error after the update. Googling didnt give me any success either. It was a real difficult time for my friends to find out the way to handle it.

It is said “Big things come in small packages” and thats what has happened here. You will understand when you read the solution below.

The thing that we are going to use is “adding an end-request handler to the request-manager”.

We add the handler to the request manager during page load via JavaScript.

function OnSubmitSuccess()
{
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(SubmitSuccessHandler);
}

Now, after having this piece of code in place, whenever the update panel finishes its update, the request would go through the SubmitSuccessHandler.

SubmitSuccessHandler needs to be placed now. In the handler, one can write whatever requirement one asks for. Errors can be trapped, scrolls can be set, any UI component can be updated.

function SubmitSuccessHandler(sender, eArgs)
{
/* This function can be used to do anything you want to be done after the update of Update Panel. You can run any JavaScript code you want to run from here. */
if (eArgs.get_error() == null)
{
alert("Update was successful");
}
else
{
// There was an error in the update panels update
// caught here and message displayed via JavaScript
alert("There was an error in update:"+eArgs.get_error().message);
}
}

Looping through form elements using JavaScript

1

You can loop through all the form fields, their names and values using the following JavaScript code:

for(i=0; i<document.FormName.elements.length; i++)
{
document.write("The field name is: " + document.FormName.elements[i].name + " and it’s value is: " + document.FormName.elements[i].value + ".<br />");
}

An example of looping through all the form fields could be checking and unchecking all the check boxes present on a page (checking all the records to delete, or adding all the items to a shopping cart, for instance). First you have the two “Check All” and “Uncheck All” links:

<a href="javascript: void(0);" onclick="javascript: checkall();">Check All</a> / <a href="javascript: void(0);" onclick="javascript: uncheckall();">Uncheck All</a>

Now the code that loops through all the elements, checks whether it’s a checkbox and check or uncheck it if it is a checkbox:

<script language="JavaScript">
function checkall()
{
for(i=0; i<document.FormName.elements.length; i++)
{
if(document.FormName.elements[i].type=="checkbox")
{
document.FormName.elements[i].checked=true;
}
}
}
function uncheckall()
{
for(i=0; i<document.FormName.elements.length; i++)
{
if(document.FormName.elements[i].type=="checkbox")
{
document.FormName.elements[i].checked=false;
}
}
}
</script>

Both the JavaScript functions above loop through the form elements, check their type and check and uncheck them accordingly.

Ajax CalendarExtender – Date Validation

0

I’ve just been asked to find a solution to stop users choosing dates in the past in a calendarextender control.  After using a little google-phoo, I found a couple of solutions which involved extending the extender itself.  Altering the calendar.js then recompiling it and putting it back into your solution.  That just seems a bit excessive to me.  So I got to thinking couldn’t I just use some in page JavaScript to trap the date entered. The Solution was pretty simple:

First we add a text box and a calendarextender:


 

you may notice that the CalendarExtender has an event attached (checkDate) – this is the JavaScript function you want it to call when ever you select a new date, add this function the top of your aspx page:

     

Simple and the nice thing is it’s reusable for all the calendarextenders on your page, just add the checkDate function to your other extenders.

Why Google is focusing on Chrome

0

Google’s Chrome browser is more than just a poke in the eye at Microsoft. It’s a strategic move that should have both Microsoft and Adobe worried about the future of their applications.

As Nick Kolakowski reported on eWEEK, Google introduced the newest beta of its spectacularly fast browser this week.

Now, Google is launching Chrome Experiments to demonstrate the browser’s strengths.

Google wants consumers and advertisers to see the sophistication and reliability of Chrome’s technology. These toys are built using the ubiquitous development language JavaScript, which has caused browser performance problems in the past. Given that many of Google’s own Web programs, such as Gmail, rely heavily on JavaScript, Google is signaling that it’s serious about building a strong, sturdy platform for cloud applications.

Google is showing it knows how to play on both sides of the ball–in other words, offline as well as on. Developers love Chrome, especially because it uses WebKit HTML as a rendering engine.


As recent outages continue to suggest, we’re a long way from ubiquitous connectivity and availability. (This isn’t a knock on Google, by the way, as Microsoft’s Azure also suffered an outage this weekend, putting the lie to Microsoft’s claim that its cloud is more enterprise-ready than Google’s).

The powerful combination of Chrome, the only browser with native Gears integration, allows Google to create a reassuring on- and offline experience for users while mustering an army of developers to its side.

The more share Chrome gains, the more more momentum it will have in the developer community; the more developers it recruits, the more applications will be built using Chrome. Better applications leads to better online experiences which lead to more browsing and, you guessed it, more searching.

People wonder how Google is going to keep growing its share of search–and eventually the overall search pie. This is how.

Go to Top