Hello and welcome to our community! Is this your first visit?
Register
Enjoy an ad free experience by logging in. Not a member yet? Register.
Results 1 to 2 of 2
  1. #1
    New to the CF scene
    Join Date
    Oct 2008
    Posts
    1
    Thanks
    0
    Thanked 0 Times in 0 Posts

    cross browser javascript

    Hi Everyone
    I am really struggling with cross browser support for a project iam doing...

    this code below works perfectly in IE but doesnt work at all in other browsers.

    perhaps someone can look at the code and tell me what i am doing wrong!!

    Code:
    html:
    
    <div style="display: none" id="sqlrow">
                <table>
                    <tr>
                        <td class="longtd">
                            <input type="text" id="txtcolumnname" />
                        </td>
                        <td class="longtd">
                            <select id="ddldatatypes">
                                <option value="0" selected="selected">--Select Datatype--</option>
                                <option value="binary">binary</option>
                                <option value="varbinary">varbinary</option>
                                <option value="char">char</option>
                                <option value="varchar">varchar</option>
                                <option value="nchar">nchar</option>
                                <option value="nvarchar">nvarchar</option>
                                <option value="datetime">datetime</option>
                                <option value="smalldatetime">smalldatetime</option>
                                <option value="decimal">decimal</option>
                                <option value="numeric">numeric</option>
                                <option value="float">float</option>
                                <option value="real">real</option>
                                <option value="bigint">bigint</option>
                                <option value="int">int</option>
                                <option value="smallint">smallint</option>
                                <option value="tinyint">tinyint</option>
                                <option value="money">money</option>
                                <option value="smallmoney">smallmoney</option>
                                <option value="bit">bit</option>
                                <option value="timestamp">timestamp</option>
                                <option value="uniqueidentifier">uniqueidentifier</option>
                                <option value="image">image</option>
                                <option value="ntext">ntext</option>
                                <option value="text">text</option>
                                <option value="sql_variant">sql_variant</option>
                                <option value="xml">xml</option>
                            </select>
                        </td>
                        <td class="longtd">
                            <input type="text" id="txtlength" />
                        </td>
                        <td class="longtd">
                            <input type="text" id="txtxdefault" />
                        </td>
                        <td class="shorttd">
                            <input type="checkbox" id="cbprimarykey" />
                        </td>
                        <td class="shorttd">
                            <input type="checkbox" id="cbnullable" />
                        </td>
                        <td class="shorttd">
                            <input type="checkbox" id="cbcomputed" />
                        </td>
                        <td class="shorttd">
                            <input type="checkbox" id="cbidentity" />
                        </td>
                        <td class="longtd">
                            <input type="button" value="Remove" id="btnremove" onclick="RemoveRow(this)" />
                        </td>
                    </tr>
                </table>
            </div>
            <table id="tblsqldefinition">
                <tr>
                    <td>
                        <table>
                            <tr>
                                <td class="longtd">
                                    Column Name
                                </td>
                                <td class="longtd">
                                    DataType
                                </td>
                                <td class="longtd">
                                    Length
                                </td>
                                <td class="longtd">
                                    Default
                                </td>
                                <td class="shorttd" style="writing-mode: tb-rl; width: 30px;">
                                    Primary Key
                                </td>
                                <td class="shorttd" style="writing-mode: tb-rl; width: 30px;">
                                    Nullable
                                </td>
                                <td class="shorttd" style="writing-mode: tb-rl; width: 30px;">
                                    Computed
                                </td>
                                <td class="shorttd" style="writing-mode: tb-rl; width: 30px;">
                                    Identity
                                </td>
                                <td class="longtd">
                                    Button
                                </td>
                            </tr>
                        </table>
                    </td>
                </tr>
            </table>
            <input type="button" value="Add" onclick="AddRow('sqlrow','tblsqldefinition')" />
    
    JAVASCRIPT:
    
    function get_object(id) {
       var object = null;
       if( document.layers ) {   
        object = document.layers[id];
       } else if( document.all ) {
        object = document.all[id];
       } else if( get_object ) {
        object = get_object(id);
       }
       return object;
      }
    ////--------------------------------------------------DYNAMIC ADD. CB MORTON 20080906 VERSION 1.0
    var addcount = 0
    var tablename = get_object('txttablename')
    var sqltable = tablename.value
    var columnHTML 
    var sqldefinitiontable 
    var table
    var dynamicelements = new Array()
    function GetDynamicElements(childobjid)
    {
    	var dynamicrowtemplate = get_object(childobjid);
    	//go through each tag and see if it has an id....
    	//chris says: there must be a prewritten function to do this.
    	//i am going to cheat a bit. instead of writing a proper recurion function i am 
    	//going to use a regex to get the id of the tags i want. advantages: it is quicker both in development and execution
    	//and it uses less memory. disadvantages: this approach is not elegant - as i said its a cheat.
    	if (dynamicrowtemplate.childNodes.length > 0)
    	{
    		var node = dynamicrowtemplate.childNodes[0]
    		dynamicelements = node.innerHTML.match(/id=[a-z0-9_"]([^\s<>\/]+)/g);
    ///!brilliant: but it has problems. what if your id is ID instead of id or you have an unexpected character for now it is good enough
    }
    }
    function AddRow(childobjid,parentobjid )
    {	
    GetDynamicElements(childobjid);
    	table = get_object(parentobjid);
    	//the following line is to support the sqldefinitiontable
    	sqldefinitiontable = table
    	//end custom table
    	columnHTML = get_object(childobjid).innerHTML
    	addcount ++;
    	var numofrows = sqldefinitiontable.rows.length
    	var newrowHTML =  GetNextRow(addcount)
    	var newrow = document.createElement('tr')
    	newrow.setAttribute('id', sqltable + '_datacolumn_' + addcount)
    	var newcell = document.createElement('td')
    	newcell.innerHTML = newrowHTML
    	newrow.appendChild(newcell)
    	var insertedrow = sqldefinitiontable.insertRow(numofrows)
    	sqldefinitiontable.lastChild.replaceChild(newrow,insertedrow)
    	//var span = get_object('txt')
    	//span.value = newrow.outerHTML +'\n';
    }
    function GetNextRow(rowcount)
    {	var rowid = '_' + parseInt(rowcount);
    	var newrowHTML = columnHTML
    	for (z=0;z<=dynamicelements.length -1;z++)
    	{
    	var elementid = dynamicelements[z].replace('id=','')
    	newrowHTML = newrowHTML.replace(elementid, elementid + rowid)
    	}
    	return newrowHTML;
    }
    function RemoveRow(obj)
    {	
    	var rowid = obj.id.replace('btnremove_',sqltable + '_datacolumn_'  )
    	var currentrow
    	for(z=0; z<=sqldefinitiontable.rows.length; z++)
    	{
    		currentrow = sqldefinitiontable.rows.item(z)
    		if (currentrow.id == rowid)
    		{
    			sqldefinitiontable.deleteRow(z)
    			return
    		}
    	}
    	
    	
    }
    ////--------------------------------------------------------------END DYNAMIC ADD
    if you look at this page in IE then you can see how it is supposed to work:

    http://apps.velociti.biz/velociticodehelpers

    thanks!!!!


    Chris
    Last edited by codrakon; 10-09-2008 at 12:53 PM. Reason: separating code from text

  • #2
    Regular Coder ohgod's Avatar
    Join Date
    Jun 2008
    Location
    Ohio
    Posts
    579
    Thanks
    6
    Thanked 69 Times in 69 Posts
    what kind of errors do you get with other browsers?


  •  

    Tags for this Thread

    Posting Permissions

    • You may not post new threads
    • You may not post replies
    • You may not post attachments
    • You may not edit your posts
    •