JavaScript - Seriously ... Giving A Table A Name Bombs, But Id And Elementsbytagnames Work??

All,
I have the following code:

console.log("My num is: " + num);
console.log("My lat is: " + lat);
console.log("My lat length is: " + lat.length);
console.log("My long is: " + long);

When I get the output, I get the following:

My num is: {"1":1,"2":2}
My lat is: {"1":"40.59479899","2":"41.4599860"}
My lat length is: 36
My long is: {"1":"-75.5549650","2":"-87.596430"}

I'm confused on why the length is saying 36 when it's obviously two and the other output shows that???

I was wondering if there was any way I can give a child element, preferably the first one, a link through a parent element with an ID.

An example:
Code:

<div id="parent">
 <a href="/">Name</a> <-! start message -> <b>child element text</b> <-! end message ->
</div>

I want the bold tag to have the link, basically. But through javascript.

Dreamweaver is giving me a syntax error, but i dont understand what is wrong.
i copied the line from the source code of the demo file included in the download and it it still telling me there is a syntax error.

obviously something is wrong bc my slider isnt auto-sliding.





so then i tried copying and pasting from the source code of the web page i got the slider from (http://www.ndoherty.biz/demos/coda-slider/2.0/)

Dreamweaver then moved the syntax error warning to the line that only contains my closing script tag




what am i doing wrong?
why am i getting syntax errors?
how can i make this thing autoslide?

full code available at: http://mydomainsample.com/fire_rebuild

Does anyone know how to make these things work? I have to make this hanjie puzzle and I have at least gotten the black squares to display. I have worked through all the directions three times and run it through the Firebug. I don't understand what it is asking for and don't know how to change the code to make this work, someone please help me!

Code:

window.onload = setPuzzle;

var allCells = new Array();

function setPuzzle() {
    var puzzleTable = document.getElementById("puzzleCells");

    allCells = document.getElementsByTagName("td");
    for (var i =0; i < allCells.length; i++) {
    allCells[i].style.backgroundColor = "white";
    allCells[i].onclick = changeColor;
    }
    document.getElementById("solution").onclick = showSolution;
    document.getElementById("hide").onclick = hideSolution;
    document.getElementById("solution").onclick = showSolution;
    document.getElementById("check").onclick = checkSolution;
    document.getElementById("uncheck").onclick = uncheckSolution;

}


function changeColor(){
    this.style.backgroundColor = (this.style.backgroundColor == "black") ? "white" : "black";
}
 function showSolution(){
    for(var i=0;i<allCells.length; i++) {

    if(allCells.className == "dark"){
    allCells[i].style.backgroundColor = "black";
    } else {
    allCells[i].style.backgroundColor = "white";
    }
  }
    checkCount = 0;
}

 function hideSolution() {
    for(var i=0;i<allCells.length; i++) {
    allCells[i].style.backgroundColor = "white";
    }
    checkCount = " ";
 }

function checkSolution() {
	var checkCount = 0;
	for (var i = 0; i< allCells.length; i++) {
		if (allCells[i].style.backgroundColor == "black" && allCells[i].className != "dark") {
		allCells[i].style.backgroundColor = "red";
		} else if (allCells[i].className == "dark" && allCells[i].style.backgroundColor == "white"){
		checkCount++;
		}
		return checkCount.value;
	}
}

function uncheckSolution() {
	for (var i = 0; i< allCells.length; i++) {
		if (allCells[i].style.backgroundColor == "red") {
		allCells[i].style.backgroundColor = "black";
		}
	    checkCount = " ";
	}
}

I think the `getJSON` should be taking the JSON URL and returning it as a response - The data file has `Author x3 Body x3 and Title x3`. Once it has this it should map it into the `nodes` and give me three nodes for each section of data. However currently its giving me the `console.log` output that I have below and nothing in my `nodes var`

**Console Log:**

Code:

 script.js:7 [Object, Object, Object]0: Object1: Object2: Objectlength: 3__proto__: Array[0]

**Code:**

Code:

    $(document).ready(function(){
    
    	var url 		= "assets/js/data.json";
    
    	$.getJSON(url).done(function(response) {
    
    	var nodes = response.map(function(i) {
        	return $('<div>').append(
            	$('<div>', {class: 'title'}).text(i.title),
            	$('<div>', {class: 'author'}).text(i.author),
            	$('<div>', {class: 'body'}).text(i.body)
        	);
    
        	console.log(response);
    	});
    });
    	
    });//Ready function closed

Reply With Quote




01-08-2015, 10:56 PM #2
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


The data file has `Author x3 Body x3 and Title x3`.


Literally??? That is, it has something like Code:

{
    Author: "Adam",
    Author: "Bob",
    Author: "Carol",
    Body: "Somethhing...",
    Body: "something else ...",
    Body: "more stuff...",
    Title: "Book one",
    Title: "Book two",
    Title: "Book three"
}

???

I'm sure that's not what you meant, but what *DID* you mean? Why not simply copy/paste the contents of "data.json" to here?

i'm working with a javascript on a drupal website, but the saving function seems to work only as soon as i click 2 times on the "save" button. the code that fires the function is:

Code:

var param ="&usuario="+usuario+"&nivel="+nivel+gano+porc_gano+gasto+porc_gasto+tengo+porc_tengo+debo+     porc_debo+plazo_debo;
var s = document.createElement("script");
s.type = "text/javascript"; s.async = true;
s.src = server_direction +"setMisDatos?callback=respuestaGuardarMisDatos&param="+encodeURIComponent(param);
var h = document.getElementsByTagName("script")[0];
h.parentNode.insertBefore(s, h); //or h.appendChild(s);

the chrome console tells me the error is in the last line i copied, but i don't undertand what kind of error it is.

using chrome console (specifically the "network" one), i see that it's written in red, status/text "failed", type "undefined" size/content "13 B / 0 B"; when it works it's: status/text "200/OK", type "text/json", size/content "256 B/ 38B". i'm not an expert with this, is there some more information that could be useful?

the code fires a netbeans function, that stores data to a postgresql database, so i have like 100 variables that has to be stored when i click on the "save button".

Actually before i put parentNode.insertBefore, there used to be appendChild(s), but then i found out this algorithm from google analytics, which seems to be working better than the previous one. Having said that, i can tell you that the GET works after the first time i click perfectly, with some weird things happening, like if i browse another tab for a while, then go back to the page, and click on save, it won't work again (same error).

The variables are written like this:

Code:

var plazo_debo_casa1 = (getValor("plazo_debo_casa1"));
var plazo_debo_casa2 = (getValor("plazo_debo_casa2"));
var plazo_debo_casa3 = (getValor("plazo_debo_casa3"));
var plazo_debo_prestamo1 = (getValor("plazo_debo_prestamo1"));
var plazo_debo_prestamo2 = (getValor("plazo_debo_prestamo2"));
var plazo_debo_prestamo3 = (getValor("plazo_debo_prestamo3"));
var plazo_debo ="&plazo_debo_casa1="+plazo_debo_casa1+"&plazo_debo_casa2="+plazo_debo_casa2+"&plazo_debo_casa3="+plazo_debo_casa3+"&plazo_debo_prestamo1="+plazo_debo_prestamo1+"&plazo_debo_prestamo2="+plazo_debo_prestamo2+"&plazo_debo_prestamo3="+plazo_debo_prestamo3;

and then together in the "param" variable. Is it clearer now?

i tried to copy

document.head.appendChild(s);
instead of parentNode.insertBefore(s,h), but it still behaves the same way.

Still not any suggestions? This is part of the javascript file loading on my page, and since the function setMisDatos is in netbeans and it works correctly as soon as it's fired (at least, that's what i notice after the first click), i don't think it's worth copying part of it here, right? are there maybe too many variables for the GET method? is there a way to check GET errors? i'm sorry for not being an expert but i would really like some help here.

I have a CSS file associated with this that sets the width at "200px." However, I am getting a 40px wide dropdown. Can anybody catch an error in here?

Using console.log, I found that el, as soon as it is defined, is = div.dropdown. As soon as .width comes into the picture, it returns as six consecutive 101px and a ton of 40px after that... and continues returning those values till the end.

I appreciate any input!!


Code:

var Dropdown = function(el) {
 
    this.el = el;
 
    this.handle = el.find("div.dropdown-text");
    this.options = el.find("div.dropdown-options");
    this.optionsWrap = this.options.parent();
    this.action = el.attr("action");
    this.type = el.attr("type");
    this.target = el.attr("target");
 
    this.Init();
}
 
Dropdown.prototype.Init = function() {
    var self = this;
 
    var extraPadding = 40;
 
    this.isShown = false;
 
    console.log(this);
 
    this.width = this.options.outerWidth() + extraPadding;
    this.height = this.options.outerHeight();
 
    if (this.height > 300) {
        this.height = 300;
        this.options
                  .height(300)
                  .width(this.width + 12)
                  .addClass("scroll-pane")
                  .jScrollPane({
                      showArrows: true,
                      scrollbarWidth: 9
                  })
        this.width += 12;
 
    } else {
        this.options.width(this.options.width() + extraPadding);
 
    }
 
    var newWidth = (this.width < 220) ? this.width : 220;
 
    this.el.width(newWidth);
 
    this._AddShadow();
 
    this.optionsWrap.css({
        display: "none",
        visibility: "visible",
        width: this.width + 5,
        height: this.height + 5
    });
 
    this._SetEvents();
};
 
Dropdown.prototype.Toggle = function(force) {
     
      if (this.isShown && !force) {
            this.optionsWrap.hide();
            this.isShown = false;
           
      } else if (!this.isShown && false !== force){
            this.optionsWrap.show();
            this.isShown = true;
      }    
}
 
Dropdown.prototype._AddShadow = function() {         
      var shadowWidth = 5, layer;
     
    for (var i = 0; i < shadowWidth; i++) {
        layer = $('<div class="shadow_layer">&nbsp;</div>');
      
        layer.css({
            opacity: 0.055 * (i + 1),
            top: (shadowWidth - i),
            left: (shadowWidth - i),
            height: this.height,
            width: this.width
        });
       
        this.optionsWrap.prepend(layer);
    }
}
 
Dropdown.prototype._SetEvents = function() {
    var self = this;
 
    this.el.bind('click', function(e) {
        var current = $(e.target);
        var type = current.attr("type");
 
        if (current.hasClass('dropdown-text') || current.hasClass('dropdown-arrow')) {
 
            if (!self.isShown) {
                page.HideAllDropdowns();
            }
 
            self.Toggle();
            return false;
        }
 
        if (current.hasClass('dropdown-opt')) {
            switch (type) {
                case 'auto': case 'basic':
                    var html = current.html();
                    self.handle.html(html);
 
                    self.options.find('a.dropdown-opt').each(function() {
                        $(this).removeClass('selected');
                    });
 
                    if ('auto' == type) {
                        page.common.Update({
                            url: current.attr('path'),
                            params: current.attr('params'),
                            target: self.target,
                            parent: true,
                            method: "POST",
                            handler: {
                                handler: function(results) {
                                    var action = this.attr("action");
                                    if (action) { page.events.Fire(action, this, results) };
                                },
                                context: current
                            }
                        });
                    }
 
                    current.addClass('selected');
                    self.Toggle();
                    return false;
 
                case 'multi':
                    current.toggleClass('selected');
                    break;
 
                case 'function':
                    var html = current.html();
                    self.handle.html(html);
 
                    current.Fire();
                    self.Toggle(false);
                    break
            }
        }
 
        return false;
    });
 
}

Hello all, I made a fade script that will fade any element in or out. Works great on all browser I've tested but IE 7. With IE I have only tested this will IE 8 and IE 7. IE 7 the effect doesn't work. No error message or anything. I'm unsure what to do from here. I was hoping I could find some help here.

Code:

function fade(obj, duration, toggle) {
	steps = 1000;
	elem = document.getElementById(obj);
		
	function fadeIn() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ i +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ i * 102 +")'", i * duration);
		}
	}
	
	function fadeOut() {
		for(var i = 0; i <= 1; i+=(1/steps)) {
				setTimeout("elem.style.opacity = "+ (1-i) +"", i * duration);
				setTimeout("elem.style.filter='alpha(opacity="+ (1-i) * 102 +")'", i * duration);
		}
	}
	
	/* One for Fade in and anything will be fade out*/
	if(toggle == 1) {
	fadeIn();
	}
	else {
	fadeOut();
	}
	
}

Thanks,
Jon W

My issue is that I have a javascript function applied on page load via an addLoadEvent function call in the head to every row (dynamic number of records retrieved) on a table. On every row of the table I also have an element (image or button) that performs a different function that is assigned on the element itself. Unfortunately, when I click the element it also performs the function that was applied to the row in the page load. Is there any way to not call this function on element click? I know usually you include code, but due to the nature of the work I am limited in that respect. Basically its:

Code:

<script type="text/javascript">
  addLoadEvent(function() { function1(1); })
  //function1 makes the table rows do something appearance wise.
</script>

<tr>
  <td></td>
  <td></td>
  <td>
    <img src="pics/delete.png" alt="Delete" onclick="function2();">
  </td>
</tr>

I apologize if my post doesn't conform to the general guidelines of proper posting on this board. I'm new on this site.

hi guys i having some problems with jquery plugin table sorter on a dynamic table.
if i use it on a regular html table it works fine,but on my dynamic table its not working.
if someone could look at my code and see if i done something wrong i would appreciate it .

Thanks will43
Code:

<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery-latest.js" ></script> 
<script type="text/javascript" src="table sorter/jquery.tablesorter/jquery.tablesorter.js" ></script>
<script  type="text/javascript"/>
$(document).ready(function()    
 {   
 $("#myTable").tablesorter();    
  }
   ); 
</script>

 <form id="form1" name="form1" method="post" action="">
      <label for="Position">Position</label>
      <select name="Position" id="Position">
        <option>QB</option>
        <option>HB</option>
        <option>FB</option>
        <option>WR</option>
        <option>TE</option>
        <option>RG</option>
        <option>RT</option>
        <option>C</option>
        <option>LG</option>
        <option>LT</option>
        <option>CB</option>
        <option>LB</option>
        <option>SS</option>
        <option>FS</option>
        <option>DE</option>
        <option>DT</option>
        <option>P</option>
        <option>K</option>
      </select>
      <input type="submit" name="Summit" id="Summit" value="Submit" />
    </form>
    <p>&nbsp;</p>
    <p>&nbsp;</p>
    <table width="950" border="1" cellpadding="3" cellspacing="3" class="tablesorter" id="myTable">
      <thead>
      <tr>
        <th bgcolor="#FF0000">id</th>
        <th bgcolor="#FF0000">Team</th>
        <th bgcolor="#FF0000">FirstName</th>
        <th bgcolor="#FF0000">LastName</th>
        <th bgcolor="#FF0000">Position</th>
        <th bgcolor="#FF0000">Year</th>
        <th bgcolor="#FF0000">Overall</th>
        <th bgcolor="#FF0000">Speed</th>
      </tr>
      </thead>
      <?php do { ?>
      <tbody>
        <tr>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['id']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Team']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['FirstName']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['LastName']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Position']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Year']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Overall']; ?></td>
          <td bgcolor="#FFFF00"><?php echo $row_Recordset1['Speed']; ?></td>
        </tr>
        </tbody>
        <?php } while ($row_Recordset1 = mysql_fetch_assoc($Recordset1)); ?>
    </table>

Hello all
i have to implement simple LIFO algorithm ( if i can call it like this .. )
say i have html table and and i fetching data i like thet the last data that fetched to be the first record in the table
for example :
im fetching the string "111" so it will be the first record
next im fetching the string "222" now the string "111" will be the second
and the string "222" will be the first .. and so on

hi all,

i have a table, just a basic table with 6 rows.

depending on the value of the first <td>thevalue</td> i want to start a end the existing table and start a new one.

the newly added table (i hope) will contain all the remaining <tr><td></td></tr> nodes until i run into the next check that will close the newly added table and begin a new table again etc....

i can get the correct node (tr) after i find the value in the td im looking for, and then try a : document.createElement("table"); , but my problem is that this newly created table tag comes with an automatically created </table> element / tag, so i end up with just inserting a new blank table after a row instead of inserting a new table tag that has all the remaining tr and tds under it.

hope that makes sense.

my entire test page is:
(click the text link and an alert will show the output with the new <table></table> after the row that my check is looking for (first td with a 2)
--------------------------------------------------------------------

Code:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
	<title>Untitled</title>
	
<script type="text/javascript">
	function reformatMe() {
	    var divObj = document.getElementById('reformatMe');
	    var numRows = document.getElementsByTagName("tr");
	    var z = "1";
	    for (i = 0; i < numRows.length; i++) {
	        if (numRows[i].childNodes[0].innerHTML == "2") {
	            var markStart = numRows[i];
	            alert(markStart.nextSibling);	        	        
	            var closeTable = document.createElement("/table");
	            var addTable = document.createElement("table");
	            //var tbody = document.createElement("tbody");
	            //addTable.appendChild(tbody);
	            addTable.setAttribute("id", "subOptionID" + z);
	                if(numRows[i+1] != null){
	                    numRows[i].parentNode.insertBefore(addTable, numRows[i+1]);
	                }
	            z++;
	        }
	    }
	    alert(divObj.innerHTML);
	}
</script>
	
</head>

<body>
<a href="#" onclick="reformatMe();">reformat table</a>
<div id="reformatMe">
	<table border="1" cellpadding="4" cellspacing="2" id="menuItemID1">							
		<tr><td>1</td>	<td>1</td>	<td>How would you like your food prepared?</td>	<td>1</td>	<td>1</td>	<td>0</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>Choose two of the following sides</td>	<td>0</td>	<td>2</td>	<td>0</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>What do you want on your Baked Potato?</td>	<td>0</td>	<td>2</td>	<td>1</td></tr>
		<tr><td>2</td>	<td>1</td>	<td>What type of dressing do you want on your salad?</td>	<td>1</td>	<td>1</td>	<td>1</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>Do you want fries?</td>	<td>1</td>	<td>1</td>	<td>0</td></tr>
		<tr><td>1</td>	<td>1</td>	<td>Do you want ketchup on your fries?</td>	<td>1</td>	<td>1</td>	<td>1</td></tr>
	</table>
</div>	
</body>
</html>

I have a master page with a table that contains main content and side bar content. The main content is where the different pages of the site are shown, and the side bar content has stuff like email and friends lists.

The mail list is on a model popup and when opened will ajax populate the table with rows containing image, subject, sender, time, all in different td's. When I click a row, the message pops up. From the message I can choose to reply or delete. When I delete I want to fade out the row that was deleted. I can wait the 10 seconds until the list does a refresh but I would rather have this cool visual effect.

My problem is I am having difficulty selecting the tr I want. My table has an id of MainMailTable and when I check it does not have the ct100: added in front.

Here is what I am trying:
Code:

$('#MainMailTable:tr:has(td:contains(' + subject + '))').fadeOut(1000);

I am trying to find the row that contains the subject of the message I want to delete. I guess that isnt really unique, and maybe I should add a hidden td with an id to the row (can Jquery get a hidden field?). But I would like to be able to get this first step to work.

When I try:

Code:

$('tr:has(td:contains(' + subject + '))').fadeOut(1000);

the whole page disappears, so I think I may be close.

Thank you in advance for any assistance.

I've tried using this to do it, but it isn't working...

string.replace(/(<table([^>]+)table>)/ig,"");