Jquery/Javascript/Ajax Help

Question

danarashad 17 Light Poster

10 Years Ago

I am using an ajax to load form fields. When the you select the school, the grade fields load. When you select the grade, the show name check box appears. When the select all box appears, I have to click the select all box twice for it to work. I am not really sure what the issue is. I've took all of the coldfusion pages out and substituted them with html pages.
Can someone take a look at tell me what I am doing wrong.
I also posted the code to paste bin.
MainPage
ShowGrade
ShowName
ShowCourse

<html>
<head>
<title>Score</title>
<meta content="text/html; charset=iso-8859-1" http-equiv="Content-Type">
<meta content="no-cache" http-equiv="Pragma">
<meta content="no-cache, must-revalidate" http-equiv="Cache-Control">
<style type="text/css">
A.nav {
    text-decoration: none;
    color: black;
    font-weight:bold;
}
</style>
</head>
<body topmargin="0" bottommargin="0" rightmargin="0" leftmargin="0">
<script type="text/javascript">
function CustomajaxFunction(ajaxAction,getPage,doReturn,returnID)
{
    var xmlHttp;
    try
    {
        // Firefox, Opera 8.0+, Safari
        xmlHttp=new XMLHttpRequest();
    }
    catch (e)
    {
        // Internet Explorer
        try
        {
            xmlHttp=new ActiveXObject("Msxml2.XMLHTTP");
        }
        catch (e)
        {
            try
            {
                xmlHttp=new ActiveXObject("Microsoft.XMLHTTP");
            }
            catch (e)
            {
                alert("Your browser does not support AJAX!");
                return false;
            }
        }
    }

    xmlHttp.onreadystatechange=function()
    {
        if(xmlHttp.readyState==4)
        {
            if ( document.getElementById(returnID) )
            {
                document.getElementById(returnID).innerHTML=xmlHttp.responseText;
                return false;
            }
        }
    }
    xmlHttp.open(ajaxAction,getPage,true);
    xmlHttp.send(null);
}
</script>

<script language="javascript">
function FirstCheck()
{
    var g=document.report.school.value;
    if (g.length)
    {
        document.getElementById('shwschool3').style.display='';
        document.getElementById('shwschoollbl3').style.display='';
        CustomajaxFunction('get','showgrade.html?gradec='+g,1,'shwschool3');        
        document.getElementById('shwteacherlbl3').style.display='none';
        document.getElementById('shwteacher3').style.display='none' 
    }
    else
    {
        document.getElementById('shwschool3').style.display='none';
        document.getElementById('shwschoollbl3').style.display='none';      
        document.getElementById('shwteacher3').style.display='none';
        document.getElementById('shwteacherlbl3').style.display='none';     
        document.getElementById('shwcourselbl3').style.display='none';
        document.getElementById('shwcourse3').style.display='none'; 
    }
}

function SecondCheck()
{
    var g=document.report.DistrictGrade.value;
    var b=document.report.school.value;

    if (g.length)
    {
        document.getElementById('shwteacher3').style.display='';
        document.getElementById('shwteacherlbl3').style.display='';
        CustomajaxFunction('get','showname.html?tgrade='+g+'&amp;sch='+b,1,'shwteacher3');     
    }
    else
    {
        document.getElementById('shwteacher3').style.display='none';
        document.getElementById('shwteacherlbl3').style.display='none';     
        document.getElementById('shwcourselbl3').style.display='none';
        document.getElementById('shwcourse3').style.display='none';         
    }
}

function ThirdCheck()
{
    var g=document.report.DistrictGrade.value;
    var b=document.report.school.value;
    var cou = '';
    if ($('input[name=coursereportcheckall][type=checkbox]') && $('input[name=coursereportcheckall]:checked').length >= 1)
    {   
        //alert('');

    }

    $(document).on('click', '.#checkall', function(event)
    {
        var checked_status = this.checked;
        var cou='';
        if (this.type == 'checkbox') 
        {
            $('.tid').attr('checked', $(this).is(':checked'));
            $.each($("input[name='tid']:checked"), function(){cou += (cou?',':'') + $(this).attr('value');});
        }
        if (cou.length)
        {
            document.getElementById('shwcourse3').style.display='';
            document.getElementById('shwcourselbl3').style.display='';
            CustomajaxFunction('get','showcourse.html?tgrade='+g+'&cou='+cou+'&sch='+b,1,'shwcourse3');
        }
        else
        {
            document.getElementById('shwcourse3').style.display='none';
            document.getElementById('shwcourselbl3').style.display='none';      
        }
    });
}

function FourthCheck()
{
    var g=document.report.DistrictGrade.value;
    var b=document.report.school.value;
    var cou = '';   
    $.each($("input[name='tid']:checked"), function(){cou += (cou?',':'') + $(this).attr('value');});
    if (cou.length)
    {
        document.getElementById('shwcourse3').style.display='';
        document.getElementById('shwcourselbl3').style.display='';
        CustomajaxFunction('get','showcourse.html?tgrade='+g+'&amp;cou='+cou+'&amp;sch='+b,1,'shwcourse3');
    }
    else
    {
       document.getElementById('shwcourse3').style.display='none';
       document.getElementById('shwcourselbl3').style.display='none';       
    }
}
</script>

<script src="http://code.jquery.com/jquery-1.7.js"></script>
<script type="text/javascript">
$(document).on('click', '.#checkallcourse', function(event)
{
    var checked_status = this.checked;
    if (this.type == 'checkbox'){$('.cid').attr('checked', $(this).is(':checked')); }
});             
</script>

<div align="left">
<table width="500" cellspacing="0" cellpadding="0" border="0" style="background-color:buttonFace; border:1px solid black;">
    <tr bgcolor="gray">
        <td valign="top" align="left" style="border-bottom: 1px solid black; color:white; font-weight:bold;">Show Header</td>
    </tr>
    <tr>
        <td valign="top" style="padding-left:10px; padding-right:10px;">
            <form method="post" action="index.html" id="report" name="report">
                <table cellpadding="5">
                    <input type="hidden" value="reports.reports" name="fuseaction">
                    <tr>
                        <td valign="top" align="left">School:</td>
                        <td valign="top" align="left">
                            <select onChange="FirstCheck(this.selectedIndex);" id="school" name="school">
                            <option value="">Select a School</option>
                            <option value="1">Washington Elementary</option>
                            <option value="2">Adams Elementary</option>
                            <option value="3">Jefferson High</option>
                            <option value="4">Madison Elementary</option>
                            <option value="5">Monroe West High</option>
                            <option value="6">Jackson Elementary</option>
                             </select>
                        </td>
                    </tr>
                    <tr>
                        <td align="left" style="display:none;" id="shwschoollbl3">Grade:</td>
                        <td valign="top" nowrap="" style="display:none;" id="shwschool3"></td>
                    </tr>
                    <tr>
                        <td valign="top" align="left" style="display:none;" id="shwteacherlbl3">Show Name:</td>
                        <td valign="top" nowrap="" style="display:none;" id="shwteacher3"></td>
                    </tr>
                    <tr>
                        <td valign="top" align="left" style="display:none;" id="shwcourselbl3">Course:</td>
                        <td valign="top" align="left" style="display:none;" id="shwcourse3"></td>
                    </tr>
                    <tr>
                        <td align="center" colspan="3"><input type="Button"   value="Create Report"></td>
                    </tr>
                </table>
            </form>
        </td>
    </tr>
</table>
</div>
</body>
</html>

Showhtml.html

    <input type="checkbox" id="checkallcourse">Select All<br />
    <input type="checkbox" name="cid" id="cid" class="cid" value="12"/> Twelve<br />
    <input type="checkbox" name="cid" id="cid" class="cid" value="13"/> Thirteen<br />
    <input type="checkbox" name="cid" id="cid" class="cid" value="14"/> Fourteen<br />

showname.html

    <input type="checkbox" class="coursereportcheckall" onChange="ThirdCheck();" id="checkall" name="coursereportcheckall">Select All<br>
    <input type="checkbox" onChange="FourthCheck(this.selectedIndex);" value="10" class="tid" id="tid" name="tid"> George Washington<br>
    <input type="checkbox" onChange="FourthCheck(this.selectedIndex);" value="11" class="tid" id="tid" name="tid"> John Adams<br>

showgrade.html

    <select onChange="SecondCheck(this.selectedIndex);" id="DistrictGrade" name="DistrictGrade">
    <option value="">Select a Grade</option>
    <option value="7">7</option>
    <option value="8">8</option>
    <option value="9">9</option>
    </select>

coldfusion javascript jquery

2 Contributors
3 Replies
324 Views
10 Months Discussion Span
Latest Post 9 Years Ago Latest Post by danarashad

dipakatcvrca 0 Newbie Poster

9 Years Ago

Hi There,

If this question, is still relevant to you, I do see all the stuffs are going good. Do you want to double click on select all check box to select all names. If so then in place of onChange event you need to use ondblclick event and call the same method as you are doing now.

Please let me know if this helps.

Regards,
Dipak

Reply to this topic

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.

danarashad 17 Light Poster · Answer 1 · 2014-04-17T19:49:25+00:00

Here is what is happening. I have to click the select all box twice before it works.
Not Working

danarashad 17 Light Poster · Answer 2 · 2015-02-23T19:35:25+00:00

Yes this is still relevant, I will give that a shot and hopefully that works.
Thanks for the advice.