JavaScript - Table Checkbox Problem After Ajax Refresh

I'm using meta refresh to refresh my web page. I have a small compose email window that appears via ajax when the user clicks on a name.

Is there a way I can disable the screen refresh in my ajax code while they are composing their message?

Hi,

Need some help please. I have the following function:

Code:

<script type="text/javascript">
function getVote(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("ajax").innerHTML=xmlhttp.responseText;
}
}
 
var questionid = document.question.questionid.value;
 
xmlhttp.open("GET","result.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>

I then have the following onClick:

Code:

<input type="radio" name="vote" value="1" onClick="getVote(this.value);" />
<input type="radio" name="vote" value="2" onClick="getVote(this.value);" />

Currently, all is good and works perfectly, the div 'ajax' refreshes ajax style with 'result.php' and I can take the value. But what I now need to do is refresh two divs. I have tried everything from putting two onClicks on the radio button, within the 'getVote' function calling in the second function and many more alternatives.

The second function is pretty much the same, just a different div ID:

Code:

<script type="text/javascript">
function getTotal(int)
{
if (window.XMLHttpRequest) {// code for IE7+, Firefox, Chrome, Opera, Safari
  xmlhttp=new XMLHttpRequest();
} else {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
}
xmlhttp.onreadystatechange=function()
{
if (xmlhttp.readyState==4 && xmlhttp.status==200) {
  document.getElementById("total").innerHTML=xmlhttp.responseText;
}
}
   
xmlhttp.open("GET","total.php?id="+questionid+"&vote="+int,true);
xmlhttp.send();
}
</script>

The problem I have, I think, is that both functions need to use 'xmlhttp.open', and it seems once one has ran, the functions end.

Any ideas gratefully received.

Thanks.

hi

i have a table with some document.write statements inside that write inside the cells.

i need to refresh the table from a function so the statements will execute again. but i only want the table to refresh not the whole page

document.location.reload()
this does the page but can i put the tables id in the brackets or something.

thanks

Hello All,

I'm working on a project which requires a small portion from a large table of information to be displayed on a webpage (sort of like a magnifying glass). The display will be a table of fixed size (m by n cells).
Some of the cells will be merged. When the table updates, different sets of cells may be merged.

It needs to be coded in HTML5, which I assume includes the use of JavaScript and CSS (The specs of this is rather unclear at the moment, so I'm going to cover all bases).


Anyhow, looking through the HTML5 and JavaScript tutorials, I found two ways to solve this problem.
One way would be to have a script to parse out the relevant information, and have it output into a table (dynamically generating the HTML required).


The second way would be to have the script draw the table on its own in a canvas.

User events (such as arrow keys on the keyboard) will change the position of the focus (move the magnifying glass in a cardinal direction).


I hit a small snag with the first solution -
Is it possible to update the table on the page (including changing the structure of it) without having to refresh?

If you could point me to a relevant tutorial or example on the web, I'd greatly appreciate it.

I'm trying to click on a link and via Ajax, get a table row to display updated data. I have it all working except it displays at the top of the table instead of inside the table at the desired row.

For now, I'm just trying to add a simple table row using:

Code:

<TR><TD>test</TD></TR>

Here is my table code:
Code:

<TABLE>
<TR><TD>one</TD></TR>
<TR><TD>two</TD></TR>
<span id="id_row3"></span>
</TABLE>

So when I click on my link to execute the ajax code, I expect to see a table row inserted with the text "four" but "four" displays at the top of the web page, above the table itself. How can I get the new row to insert at the id_row3 tag?

Thanks for any help...

hellow,

i try to make a script that gets data from my mysql-database and displays it in a form with check boxes.
if i select one or more check boxes the data with its checkbox should move to another column in the table in this form.
all the other data and there checkboxes not selected should stay at its own place.
in the future i want to work with 150 checkboxes.

the part for getting it out off the database and display it in the form with the checkboxes is completed in PHP.

but i'm stuck changing its place with the onclick handler from javascript.

here you can see it working
(but it's written when you click auto1 an click submit all the checkboxes change place and are selected)
http://silent.comxa.com/m.php


the code i have so far is:


PHP Code:
<?
$ch11 = '';
$ch11 = $_POST['auto1'];
$checked = isset($_POST['submit1']) && $_POST['auto1'] == 'on' ? 'checked="checked"' : '';
?>
</head>

<body>
  <?

@$cat=$_GET['cat']; 
if(strlen($cat) > 0 and !is_numeric($cat)){  
echo "Data Error";
exit;
}

///////// Getting the data from Mysql table //////////
$quer2=mysql_query("SELECT DISTINCT category,cat_id FROM category order by category"); 
?>

<form method="post" name="f2" action="m.php"><table width="828" border="1">

<?php
while($noticia2 = mysql_fetch_array($quer2)) { 
if ($ch11 =='on'){
  echo '<tr><td width="200" >&nbsp;</td><td width="300" >&nbsp;</td> <td width="200" > <input name="'.$noticia2[category].'" type="checkbox"'.$checked.'/> '.$noticia2[category].' </td><td width="100">'.$noticia2[cat_id].'</td></tr>';
  } else { 
  echo '<tr><td width="200" >  <input name="'.$noticia2[category].'" type="checkbox"'.$checked.'/> '.$noticia2[category].' </td><td width="300" >'.$noticia2[cat_id].'</td><td width="200" >&nbsp;</td><td width="100" >&nbsp;</td></tr>';}
  }
?>
</table>
<?php
echo '<input type="submit" name = "submit1" value="Submit"/>';
echo '</form>';
?>

Hello!

Im very limited in my skills with html/JS/CSS and can only understand the concept of the varius coding but ot much more than that.

Now i really need a sortable table like the one you can find on this site:

Jämför & Hitta Billiga Små Lån

Has anyone come across a tutorial or similar on how to build stuff like this? Or have any other hints for me to get started with?

Any help is much appriciated





Reply With Quote




12-25-2014, 06:27 PM #2
Wieli View Profile View Forum Posts

New to the CF scene Join Date Dec 2014 Posts 5 Thanks 5 Thanked 0 Times in 0 Posts

Hmm, cant find the option to clean the link, wasnt supposed to have a title like that.





Reply With Quote

12-26-2014, 06:08 AM #3
Old Pedant View Profile View Forum Posts

Supreme Master coder! Join Date Feb 2009 Posts 28,311 Thanks 82 Thanked 4,754 Times in 4,716 Posts

No problem, the post worked.

I don't have time tonight, but will try to show you this tomorrow.

Question: How do you *create* the <table>?? From PHP? From AJAX?

I was wondering if anyone could help me with getting this working.

I'm using html to create a table which has at least 1 row but no max number of rows - as they can be added/removed by the user - and 4 columns, 1st contains a checkbox and the last 2 contain drop down menus.

I wish to be able to store the values of those menus in an array only if that row's checkbox has been checked. e.g if the first row has 1 and A as it's dropdown values and the second row has 2 and B. If only row 1 has been checked the array should only contain [1,A]. Instead mine holds all the values including the non-checked ones i.e [1,A,2,B].

My code for javascript function and html table are below:

Code:

function calculate(textID){
    var table = document.getElementById('course'); //id of table
    var rowCount = table.rows.length;
    var array = []; //array to hold the values
    var c = 0;

    dmenus = document.getElementByTagName("select"); //get the drop down menus

    for(var a = 1; a < rowCount; i++){ //a = 1 as the 1st row contains column headings
        var row = table.rows[a];
        var check = row.cells[0].childNodes[0];
        if(null != check && true == check.checked){
            for(var b = 0; b < dmenus.length; b++){
                val = dmenus[b].options[dmenus[b].selectedIndex].value;
                array[c] = val; //set index of array to equal value of dropdown box
                c++;
            }
        }else{
            b++;
        }
    }

Html code for table:
Code:

<table id="course">
    <tr>
        <td><input type="checkbox" name="ucheck" id="ucheck" onclick="checkAll('course')"/></td>
            <th style="color:white">Course Title</th>
            <th style="color:white">Credits</th>                
            <th style="color:white">Grade</th>
        </tr>
    <tr>
            <td><input type="checkbox" name="tick" id="tick"/></td>
            <td><input type="text"/></td>
            <td>
                <select name="credits" id="credits">
                    <option...</select></td>
            <td>
                <select name="grade" id="grade">
                    <option...</td>

It works only for the first row but if there are more than 1 row it doesn't do what it's supposed to. The coding platform I'm working on does not seem to support jquery so javascript code will be most appreciated. Thanks

I'm making a chess game and I have a couple of problems. one, for some reason I need to refresh the page for it to fully load

http://ktownsend.shorelinevct.net/chess/

two, hiding the available moves only works when I click on a different piece. when clicking on the same piece I get an err.message which says that the pieces this.availMoves[i] = null. which doesn't make sense. I get the same err.message when I click on a different piece but it works anyway. when I click on the same piece it doesn't work at all.

Any help would be appreciated

Hi Frnds,

I have faced some problem i.e I have 2 jsp pages.In that I want to go one jsp to another jsp.In 2nd jsp i can show my captcha code,but unfortunately it is not visible first page is reloaded in IE6.Once you refresh the page it's visible in IE6.So please help me to avoid this problem.

Thanks,

Hi,

I'm having a problem with my page not resetting to the point where the user clicked on an element. I believe this to be a javascript problem, however, if it is not I would be glad to move it to the proper forum.

What I have is a page with a div that contains a large image (a map). the dims are 1237 x 1550. I am using a browser window resized to approx. 800 x 600 so that I can simulate a smaller screen viewport. The page has links that are scattered about the map (positioned with css) and what I want to do is launch a video using the HTML5 video tag when the user clicks on a link. The video is supposed to open in the center of the users viewport and then dim the map div, which it does, however the page resets its position after the js function and aligns the page back to the upper left corner of the browser window. If the user had scrolled (both x and y) to the max of the scroll bar, then this will be fairly frustrating to have to keep moving back, thus my dilemma.

I tried using scrollto to reset the scroll back to where the user was, but this is not working. What's funny is if I put an alert at the very end of the function, the page displays properly (video is centered on the screen where the user was in their viewport) but resets as soon as the alert is closed. I then tried using location.reload(false), but this keeps the function from running properly (the page shows properly for a fraction of a second then resets back to a newly launched page).

Below is the code. Also, this has only been tested with FF and Chrome on my local drive. It is not anywhere on the web right now. In chrome, the page resets to the top only. I'm really not interested in making this work with IE since this is for personal/family use. Your help is greatly appreciated.

Code:

CSS
	body {
		background: black;
		text-align: center;
		vertical-align: middle;
	}	
	div#bkg {
		position: absolute;
		text-align: center;
		z-index: 1;
	}
        p#day1 {
		position: absolute;
		top: 800px;
		left: 1000px;
		font-weight: bold;
		width: 50px;
		background: white;
	}

Javascript
function showVid(srcVid) {
// set the proper filename of the vid
	srcVid = srcVid + ".ogv";
// create the video tag
	var vidWin = document.createElement("video");
	vidWin.id = "movie";
	vidWin.setAttribute("width", "320");
	vidWin.setAttribute("height", "240");
	vidWin.setAttribute("controls", "controls");
// pic size is 1237 x 1550
	var vpw = window.innerWidth;
	var vph = window.innerHeight;
	var xPosOff = window.pageXOffset;
	var yPosOff = window.pageYOffset;
	var leftNum = ((vpw/2) + xPosOff) - 160;
	var topNum = ((vph/2) + yPosOff) - 120;
	vidWin.setAttribute("style", "position: absolute; left: " + leftNum + "px; top: " + topNum + "px; z-index: 255;");
// create the source tag
	var vidSrc = document.createElement("source");
	vidSrc.src = "videos/" + srcVid;
	vidSrc.type = "video/ogg";
	vidSrc.codecs = "theora, vorbis";
	vidWin.appendChild(vidSrc);
	document.getElementById('bkg').style.opacity = 0.5;
	document.body.appendChild(vidWin);
	window.scrollTo(xPosOff, yPosOff);
// tried this, it didn't work
//	location.reload(false);
}

HTML
<body>
<div id='bkg'>
<img src="images/pic1.jpg" />
<p id="day1"><a href="#" onclick="showVid('oggtest')">Day 1</a></p>
</div>
</body>

hi all , I'm new to js , here is my problem : i want to make a button to toggle a checkbox , here is my code ,when i replace box.checked with boxVal it doesn't work!

Code:

<!DOCTYPE html>
<html>
<head>
</head>
<body>
  <p><button>Toggle checkbox</button></p>
<input type="checkbox" id="box"/>

        <script>

var button = document.getElementsByTagName("button")[0];
var box = document.getElementById("box");
var boxVal = document.getElementById("box").checked;

                button.onclick = function(){
                   if (box.checked==false){         //when i replace box.checked with boxVal  it doesn't work!
                       box.checked=true;
                   }
                    else if(box.checked==true){
                       box.checked=false;
                   }
                }

  </script>
</body>
</html>

Hi, I want to check all checkboxes using one main checkbox. Then, the checkboxes will be disabled. But then, when the user unchecks the main checkbox, it must revert all the checkboxes to be enabled. How do I do so?



Code:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
    <title>TSPL Admin</title>

    <script type='text/javascript'>
    function checkUncheckAll(checkAllState, chkbxGroup)
{
    // Check that the group has more than one element
	if(chkbxGroup.length > 0)
	{
	    // Loop through the array
		for (i = 0; i < chkbxGroup.length; i++)
		{
		    chkbxGroup[i].checked = checkAllState.checked;		    
		}
		document.getElementById("Checkbox7").disabled = true;
		document.getElementById("Checkbox8").disabled = true;
		document.getElementById("Checkbox9").disabled = true;
		document.getElementById("Checkbox10").disabled = true;
		document.getElementById("Checkbox11").disabled = true;
		document.getElementById("Checkbox12").disabled = true;
		document.getElementById("Checkbox13").disabled = true;
		document.getElementById("Checkbox14").disabled = true;
		
	}
	else
	{
	    // Single element so not an array
		chkbxGroup.checked = checkAllState.checked;
	}
}
    </script> 
    <style type ="text/css">
        
        .style42
        {
	        border-style: solid;
	        border-width: 1px; 	
	        margin-left: 10px;
	        width: 135px;
	        border-color: #8181F7;
            text-align: left;
            float:left;	
        	
        }
        .style45
        {
	        float: left;
        }

        
    </style>

</head>
<body>
<form id="form1" method="post" action="default.aspx">

                <br />
                <div class="style19">
                <tr>

                            <td align="left">
                                    <div class="style45">
                                   <input id="Checkbox6" name="checkall" onclick="checkUncheckAll(this, grp1);" type="checkbox" />All
                                   </div>
                                        <div class="style42">
                                            <input name="grp1" id="Checkbox7" type="checkbox" />Account Admin<br />
                                            <input name="grp1" id="Checkbox8" type="checkbox" />Network Admin<br />
                                            <input name="grp1" id="Checkbox9" type="checkbox" />Organization Admin<br />
                                            <input name="grp1" id="Checkbox10" type="checkbox" />Super Admin<br />
                                        </div>
                                        <div class="style42">                        
                                            <input name="grp1" id="Checkbox11" type="checkbox" />Schema Admin<br />
                                            <input name="grp1" id="Checkbox12" type="checkbox" />Troubleshooting Admin<br />
                                            <input name="grp1" id="Checkbox13" type="checkbox" />Helpdesk Admin<br />
                                            <input name="grp1" id="Checkbox14" type="checkbox" />Online Admin<br />                       
                                        </div>  
                                    
                            </td>
                        </tr>
                    </div>
</form>    
    
</body>
</html>

I have the following ajax code:

Quote:
.............
.............
.............
XHR.createXMLHttp();
XHR.open("POST", "/cgi-bin/addpost.cgi", true);
XHR.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
XHR.onreadystatechange = function() {
if (XHR.readyState == 4) {
if (XHR.status == 200) {
alert("Operazione effettuata con successo");
}
else {
alert("Operazione non riuscita");
}
}
}
XHR.send(url);
The function send data, but it don't return never alert windows. Where is the problem?