|
JavaScript - Js Function To Hide Multiple Div Call In A Loop With Php
Hi,
I have a problem with my script, I have a php request and the result is shown in a div, so there is several divs and their id is the "id" in the database, and I want that if we click on a link, it hides every divs... Here is how I tried to do that: Code: <script type="text/javascript">
function visibilite(thingId)
{
var targetElement;
targetElement = document.getElementById(thingId) ;
targetElement.innerHTML = "" ;
}
</script>
Code: $hide = "";
while($ligne=mysql_fetch_array($ress)){
$hide.= "visibilite('$ligne[id]'); ";
$return.= "<tr><td>$ligne[heure] - $ligne[fin]</td><td>$ligne[sport]</td><td>$ligne[salle]</td><td>$ligne[ville]</td><td>$dispo/$ligne[place]</td><td><div id=$ligne[id]>";
$return.= "<a href=# onClick=\"maFonctionAjax($ligne[id],$tennis); $hide return false\">Reserver</a>";
$return.= "</div></td></tr>";
}
Every div'id is the id in the database, with the onClick we call an ajax function and $hide which is the call for the function visibilite for each div It works for some request, I don't know how is it possible because I can have the same number of results and sometimes it works, and sometimes not... Does somebody can help me? Thanks a lot! Jeff Similar Tutorialshi i'd like to ask how can i ask for a function inside a for loop , if i remove the loop the code works fine but i need it for 10 rows . please help , here is the code PHP Code: $content .=' <table cellspacing="2" cellpadding="2" border="0" align="center" > <SCRIPT LANGUAGE="JavaScript" type="text/JavaScript"> function doCalcAndSubmit() { // get both values kolicina1 = document.forms["vlez1"].kolicina.value; cena1 = document.forms["vlez1"].cena.value; // do some calculation vkupno1 = kolicina1 * cena1; // set the value in the right field document.forms["vlez1"].vkupno.value = vkupno1; } </script> <form id="vlez1" name="vlez1" method="POST" action="index_execute.php" > <tr valign="middle"> <td></td> <td align="center"><b> Sifra : </b></td> <td align="center"><b> Kolicina : </b></td> <td align="center"><b> Cena : </b></td> <td align="center"><b> Vkupno : </b></td> </tr> '; for($t=1;$t<11;$t++) { $content .= ' <tr valign="middle"> <td>'.$t.'.</td> <td><input type="text" id="sifra" autocomplete="off" name="sifra['.$t.']" align="middle" onblur="normalField(this);" onfocus="fireKeyListener_sifra(event); highlightField(this,1);" onkeyup="getList_sifra(event);" size="25" value="" /></td> <td><input type="text" id="kolicina" name="kolicina['.$t.']" align="middle" size="25" ></td> <td><input type="text" id="cena" name="cena['.$t.']" align="middle" size="25" onblur="doCalcAndSubmit();"></td> <td><input type="text" id="vkupno" disabled name="vkupno['.$t.']" align="middle" size="25" ></td> <input type="hidden" name="hidden_data" value="'.$data.'"> </tr>'; } $content .= '<tr> <td></td> <td></td> <td align="center"><input type="submit" id="submit2" name="submit2" value="Potvrdi" ></td> </tr> </form> </table> '; Hi everybody. I'm new to both Javascript and this site, so apologies if this isn't the right way to be asking this question. Here's what I'm trying to do. I've got two dropdown boxes ('language' and 'word'). When the submit button is pressed, I want a div to show with the right word in it. I can do this fine with one dropdown box, but two has got me stumped. Any ideas would be much appreciated. S Hi to All, I have a table that contains many rows, some in italian with code <td nome='riga_i'> and some in english with code <td name='row_e'>. I have created two buttons with different background flags: italy and uk, so when one pushes the button with flag uk, the html page will be reloaded with only english rows, and when one pushes the button with flag it, the same page is reloaded containing only italian rows. All the code posted here works well, but I think that the code can be better because to reach this result I had to dupplicate the same function and I don' t like this. Here the code: <html> <head> <script type="text/javascript"> function toggle(name) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(name)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } // function toggle(nome) { tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(nome)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } </script> </head> <body onload="toggle('name');"> <table> <tr nome="riga_i"> <td>REQUISITI RELATVI AL SERVIZIO</td> <td> </td> <td><input type="button" onclick="toggle('nome');toggle('name');" style="background-image: url(../images/flag_uk.jpg); background-color:Transparent;" /></td></tr> <tr name="row_e"> <td> </td> <td>REQUIREMENTS RELATED TO THE SERVICE</td> <td><input type="button" onclick="toggle('name');toggle('nome');" style="background-image: url(../images/flag_italy.jpg); background-color:Transparent;" /></td></tr> .... .... and so on.... ..... </table></html> To better the code I have tried in this way but without success ... <html> <head> <script type="text/javascript"> function toggle(this) { if (this=='nome' || this=='name'){ tr=document.getElementsByTagName('tr') for (i=0;i<tr.length;i++){ if (tr[i].getAttribute(this)){ if (tr[i].style.display=='none'){tr[i].style.display = '';} else {tr[i].style.display = 'none';} } } } } </script> </head> Thanks in advance !!! Hi, I am hoping I just need to be pointed in the right direction with this. I have Page1. When Page1 body onloads it uses Ajax to call PartA Within PartA I have a message board so members can write messages which will be sent to my database in PartA[1] and immediately posted for view on to PartA[2]. As I want to have my request to the server updating regularly I want to have PartA[2] on a timed loop to refresh - I do not need the content of PartA[1] to refresh. So the order of events would look like this: Page1 | onload call | v PartA / \ V V PartA[1] PartA[2] (loads once) (constantly refreshes) What I am not sure about is that I have <body> and <head> attributes in Page1 only. I have already used my body onload to call PartA (and can't use it to call PartA[2] before PartA has loaded anyway). I do not want the user to have to click a button or do anything to call up PartA[2]. So my question is how would I get PartA[2] to automatically load within PartA? I hope I have made this clear, but if I haven't let me know and I will try again. i keep getting error Call to undefined function codeandurl() below is my code PHP Code: <?php $value= strip_tags(get_field('link',$post)); $resultid=get_field('resultid',$post); codeandurl($resultid,$value); ?> <div id="result"></div> <script type="text/javascript"> function codeandurl(resultid,url){ $( "#result" ).text(resultid); $( "#result" ).dialog({ modal: true, buttons: { Ok: function() { $( this ).dialog( "close" ); } } }); window.open(url); return false; } </script> <p> <script type="text/javascript">// <![CDATA[ var metrics = { "mm" : 1, "cm" : 10, "m" : 1000, "inch" : 25.4, "foot" : 304.8 }; function convert(num, dec){ var val = document.getElementById("fromVal").value; if(isNaN(val)){ return } function roundNumber(num, dec) { var result = Math.round( Math.round( num * Math.pow( 10, dec + 1 ) ) / Math.pow( 10, 1 ) ) / Math.pow(10,dec); return result; } document.getElementById("toVal").value = val * metrics[document.getElementById("fromSystem").value]/ metrics[document.getElementById("toSystem").value]; } var interval = null; function watchChanges(){ interval == null ? setInterval("convert()", 500) : clearInterval(interval); } // ]]></script> </p> <table> <tbody> <tr> <td><input id="fromVal" style="width: 100px;" onfocus="watchChanges()" onblur="watchChanges()" type="text" /><select id="fromSystem" onchange="convert()"> <option value="mm">millimeters</option> <option selected="selected" value="cm">centimeters</option> <option value="m">meters</option> <option value="foot">feet</option> <option value="inch">inches</option> </select></td> </tr> <tr> <td colspan="1" align="center">=</td> </tr> <tr> <td><input id="toVal" style="width: 100px;" type="text" disabled="disabled" /><select id="toSystem" onchange="convert()"> <option value="mm">millimeters</option> <option value="cm">centimeters</option> <option value="m">meters</option> <option selected="selected" value="foot">feet</option> <option value="inch">inches</option> </select></td> Hello, I am trying to use a for loop to call images of custom text. For example, I have images named uppera.png and lowera.png for a custom font. I need the image of the letter to show up as they type into a text area, but also have backspace work correctly to delete the last image added. Here is the code I have thus far: <script type="text/javascript"> function callimage() { var chars = document.getElementById('userinput').value.split(""); for (i=0; i < chars.length; i++) { if (chars[i] == "A") { var image = "uppera.png"; } if (chars[i] == "a") { var image = "lowera.png"; } ... if (chars[i] == "9") { var image = "9.png"; } document.getElementById('visual').innerHTML = document.getElementById('visual').innerHTML + '<img src="' + image + '"/>'; } } </script> <input type="text" maxlength="20" id="userinput" onkeyup="callimage()"/> <p id="visual"> </p> When I test this out it takes the previously entered text and adds it to the new text and combines them. For instance if you entered "a" it would show up as "a"; if you entered "a" again it would show up as "aaa" and then "aaaaaa" and so on. Also, it will add the existing characters again if any key is pressed, like just shift. I think I would need to write an else statement to fix that part, but I don't know what to put there, either. Any ideas on how I could fix this one? Thanks! Code: <html>
<head>
<title>TESTING</title>
<script type="text/javascript">
<!--
document.write("<input type='submit' value='submit' onclick='func()'>");
function func()
{
document.write("<input type='submit' value='New Button' onclick='func()'>");
window.alert("THIS");
}
-->
</script>
</head>
<body>
<!--input type="button" value="Read" onclick="ReadFiles()"-->
</body>
</html>
This is a very basic version of what I am trying to do. I have a dynamic list which is set in a table. When clicked, a function is run to set up a new list.. The reason I explain that, is that I need to keep it dynamic. Now for the problem: When I run this page, I have the button made right away, then when clicked it creates the new button. The new button should also run the function to create the new button again, but when I click it, I only receive "error on page". I don't know if there is a better way to go about this, but as for this route, I am stuck. Any help is greatly appreciated! -Shane I'm trying to "progressively enhance" one of my surveys using javascript. Basically, I have rating scales that make use of radio buttons as each point on the scale. Each radio button occupies its own cell in a table. I wrote some functions that will highlight cells on mouseover in a color corresponding to its position on the scale (e.g. the lowest point is red, the midpoint is yellow, the highest point is green). When a radio button is clicked, the background of the button's cell and preceding cells in the same row will be colored accordingly. The functions are working well in FireFox and Chrome (I just have to add a few lines using the addEvent function to make it compatible with IE). The effect looks a lot nicer when I add a function that makes the visibility of the radio buttons hidden. However, I want to make sure that there is a fallback option in case the functions that color the cells don't work for whatever reason. I would not want the radio buttons hidden in this case. Is there a method whereby I can call the "hideRadiobuttons" function only if the other functions are successfully executed? Ok, I'm nearly pulling my hair out with this one. I have been looking at this code for two evenings now, and rewrote it 4 times already. It started out as jQuery code and now it's just concatenating strings together. What I'm trying to do: Build a menu/outline using unordered lists from a multidimensional array. What is happening: Inside the buildMenuHTML function, if I call buildMenuHTML, the for loop only happens once (i.e. only for 'i' having a value of '0'.) If I comment out the call to itself, it goes through the for loop all 3 times, but obviously the submenus are not created. Here is the test object: Code: test = [
{
"name" : "Menu 1",
"url" : "menu1.html",
"submenu" : [
{
"name" : "menu 1 subitem 1",
"url" : "menu1subitem1.html"
},
{
"name" : "menu 1 subitem 2",
"url" : "menu1subitem2.html"
} ]
},
{
"name" : "Menu 2",
"url" : "menu2.html",
"submenu" : [
{
"name" : "menu 2subitem 1",
"url" : "menu2subitem1.html"
},
{
"name" : "menu 2subitem 1",
"url" : "menu2subitem1.html"
} ]
},
{
"name" : "Menu 3",
"url" : "menu3.html",
"submenu" : [
{
"name" : "menu 3 subitem 1",
"url" : "menu3subitem1.html"
},
{
"name" : "menu 3 subitem 1",
"url" : "menu3subitem1.html"
} ]
}
];
Here is the recursive function: Code: function buildMenuHTML(menuData,level) {
var ul;
if (level == 1) {
ul = "<ul id='menu'>";
} else {
ul = "<ul class='level" + level + "'>";
}
for (i = 0; i < menuData.length; i++) {
menuItemData = menuData[i];
ul += "<li>";
ul += "<a href='" + menuItemData.url + "'>" + menuItemData.name + "</a>";
if (typeof menuItemData.submenu != 'undefined') {
ul += buildMenuHTML(menuItemData.submenu,level + 1);
}
ul += "</li>";
}
ul += "</ul>";
return ul;
}
Here is how the function is called initially: Code: buildMenuHTML(test,1); This is it's return value (with indentation added for readability): Code: <ul id='menu'>
<li><a href='menu1.html'>Menu 1</a>
<ul class='level2'>
<li><a href='menu1subitem1.html'>menu 1 subitem 1</a></li>
<li><a href='menu1subitem2.html'>menu 1 subitem 2</a></li>
</ul>
</li>
</ul>
'Menu 2' and 'Menu 3' don't show up! I'm sure it's something small that I'm overlooking, but any help would be appreciated. Hi Guys, I have a PHP loop region, which repeats all completed projects for each customer, then displays all jobsheets linked to those projects. I have a javascript show/hide function, which will only show the jobsheets when the project link is clicked. Without this javascript, the PHP loop works perfectly, but all the information is displayed. How can I use the show/hide function and still show all the jobsheets for completed projects? Code: function toggle2(id, link) {
var e = document.getElementById(id);
if (e.style.display == '') {
e.style.display = 'none';
link.innerHTML = '<img src="../Images/plus.gif" border="0" >';
} else {
e.style.display = '';
link.innerHTML = '<img src="../Images/minus.gif" border="0" >';
}
}
PHP Code: <table> <tr> <th>Project / Job</th> <th>Language</th> <th>Words (Net)</th> <th>Shipped</th> </tr> <?php $previousProject = ''; if ($totalRows_rsComplete_Cust > 0) { // Show if recordset not empty while ($row_rsComplete_Cust = mysql_fetch_assoc($rsComplete_Cust)) { if ($previousProject != $row_rsComplete_Cust['projid']) { // for every user, show the user name ?> <tr> <td colspan="4"><a href="#" onclick="toggle2('<?php echo $row_rsComplete_Cust['projid']; ?>', this)"><img src="../Images/plus.gif" border="0" /></a><?php echo $row_rsComplete_Cust['projid']; ?></td> </tr> <?php $previousProject = $row_rsComplete_Cust['projid']; } ?> <tr id="<?php echo $row_rsComplete_Cust['projid']; ?>" style="display:none"> <td><a href="jobsheet_details.php?id=<?php echo $row_rsComplete_Cust['jobid']; ?>&proj=<?php echo $row_rsComplete_Cust['projid']; ?>"><?php echo $row_rsComplete_Cust['jobname']; ?></a></td> <td>LANGUAGE</td> <td>WORD NET</td> <td>YES / NO</td> </tr> <?php }} // Show if recordset not empty ?> </table> Let me start by saying I'm a noob to JavaScript. What I'm trying to do for my website is have a select menu that shows the number of div's that's selected. I found a JS that I could do that with, but it only toggles, not change specifically what's selected. So if you click the wrong one, it doesn't work right. Here's what I got: Code: <body>
<script type="text/javascript">
function toggle_visibility(){
for(var i = 0,len = arguments.length;i < len; i++){
var e = document.getElementById(arguments[i]).style,d = e.display;
e.display = (d == "block") ? "none" : "block";
}
}
</script>
<select name="select" id="select">
<option>0</option>
<option onclick="toggle_visibility('1');" >1</option>
<option onclick="toggle_visibility('1','2');">2</option>
<option onclick="toggle_visibility('1','2','3');">3</option>
<option onclick="toggle_visibility('1','2','3','4');">4</option>
</select><br>
<div id="1" style="display: none;">Test1</div>
<div id="2" style="display: none;">Test2</div>
<div id="3" style="display: none;">Test3</div>
<div id="4" style="display: none;">Test4</div>
</body>
Any help would be appreciated, cause I'm lost. Hello. Started my massive JavaScript career just yesterday and the forums I frequent still lack a proper BB-code hide-tag, so I figured I'd try make it in JavaScript, since HTML is allowed on there. This is what I did: Code: <script type="text/javascript">
function show() {
document.getElementById('silHideTextTag').innerHTML='Hidden text!!';
document.getElementById('silHideTextBtn').value='Hide';
document.getElementById('silHideTextBtn').onclick='hide()';
}
function hide() {
document.getElementById('silHideTextTag').innerHTML=' ';
document.getElementById('silHideTextBtn').value='Show';
document.getElementById('silHideTextBtn').onclick='show()';
}
</script>
<input type='button' id='silHideTextBtn' onclick='show()' value='Show'/>
<div id='silHideTextTag'> </div>
The button labelled "Show" appears fine, when I click it it becomes "Hide" and the text "Hidden text!!" is shown. However, when I click the button again, nothing happens at all. I don't quite understand where the problem is. Thanks in advance for any clues. Best regards, Zyl I'm trying to implement this 'ajax' script, however i'm getting the following error: function expected line 25. And I'm not the only person who is getting this error message :S How can the code be altered so it will work? Also the script isn't executed when I change onclick in onload :S How come and how can I change it so that it will be executed on launch? http://chriscook.me/web-development/...icking-a-link/ Hello, if in a webpage is included a javascript file (for example code.js) can I from my browser call a function contained in code.js and will it works correctly? I'm not meaning that the function is called in the page with or without a link to click, but it is only in code.js! Thank you! My problem is that I am trying to call an function within an SWF. Now, I already know how to setup my SWF and that isn't the problem. The problem is that when I try to call the function using Javascript, I am told that the function doesn't exist. I'll show you the code right here. Code: function AudioPlayerEmbed( e )
{
if ( e.success )
{
e.ref.LoadAudio( 'http://therevolve.com/upload/userfiles/Music/Alec_Smith1.mp3' );
}
}
swfobject.embedSWF("player/MP3Player.swf", "flash", "300", "90", "9.0.0", "player/expressInstall.swf", null, null, null, AudioPlayerEmbed );
HOWEVER, when I put some alert before the call, it happens to work. What is going on? Code: function AudioPlayerEmbed( e )
{
alert("A");
if ( e.success )
{
e.ref.LoadAudio( 'http://therevolve.com/upload/userfiles/Music/Alec_Smith1.mp3' );
}
}
swfobject.embedSWF("player/MP3Player.swf", "flash", "300", "90", "9.0.0", "player/expressInstall.swf", null, null, null, AudioPlayerEmbed );
Here is a live example. Any help would be appreciated. If you need more information, I can provide it. I have a page that has 26 divides one for each letter A-Z. I have the script written so that when you click on the link for one letter it shows that divide and hides the rest. However, I think there has got to be an easier way to do this because the code is so long! It works great but takes forever to write! Does anyone have any suggestions to reduce the size of this code? Code: Javascript: (Short and simple code)
function showstuff(divID){
document.getElementById(divID).style.visibility="visible";
document.getElementById(divID).style.display="block";
window.location.hash="names";
}
function hidestuff(divID){
document.getElementById(divID).style.visibility="hidden";
document.getElementById(divID).style.display="none";
}
HTML: (WHAT A CLUSTER!)
<a href="javascript:showstuff('adivide');hidestuff('bdivide');hidestuff('cdivide');hidestuff('ddivide');">A</a>
So I have 26 functions being called for each click! There must be a simpler way to do this. Perhaps I can write a function that calls all 25 hidestuff() functions and then I can add the one showstuf(). Hello, I'm working on a top menu consisting of MENU A, MENU B and MENU C each with it's own drop down submenu on a separate layer. I'm using ShowContent and HideContent to display the submenus onmouseover. So on mouseover it shows "LayerA" and hides "LayerB" and "LayerC." The problem I'm having is that it will only hide one of the layers. Which ever one is listed first. I'm sure the problem lies in HideContent('LayerB','LayerC') but I don't know how to resolve it. Any help would be much appreciated. Here is the script I'm using: <script type="text/javascript" language="JavaScript"><!-- function HideContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "none"; } function ShowContent(d) { if(d.length < 1) { return; } document.getElementById(d).style.display = "block"; } function ReverseContentDisplay(d) { if(d.length < 1) { return; } if(document.getElementById(d).style.display == "none") { document.getElementById(d).style.display = "block"; } else { document.getElementById(d).style.display = "none"; } } //--></script> And here is my menu: <td><a href="XXXX" onmouseover="ShowContent('LayerA'); HideContent('LayerB','LayerC')">MENU A</a> </td> <td><a href="XXXX" onmouseover="ShowContent('LayerB'); HideContent('LayerA','LayerC')">MENU B</a> </td> <td><a href="XXXX" onmouseover="ShowContent('LayerC'); HideContent('LayerA','LayerB')">MENU C</a> </td> Hello, Ok so the following code works. Code: function myFunction(myName)
{
alert("You are "+myName);
}
callFunction = "myFunction";
parameter = "Joe";
window[callFunction](parameter);
However this code doesn't work: Code: function myFunction(myName, myAge)
{
alert("You are "+myName+" and "+myAge+" years old.");
}
callFunction = "myFunction";
parameter = "Bill,15";
parameter = parameter.split(",");
window[callFunction](parameter);
The above code alerts: "You are Bill,15 and undefined years old." Thanks for the help! |
|||||||