www.webdeveloper.com
Results 1 to 2 of 2

Thread: inner html limit

Hybrid View

  1. #1
    Join Date
    Jul 2014
    Posts
    1

    inner html limit

    Hi All,

    I have one select box on html page. Code is pasted below.
    list has 230 objects in it. if objects are 224 then page get displayd successfully but if objects exceeds then 224 it does not get displayed. please help.

    var r = new Array();
    r = document.getElementById(subdivtag).rows;
    var q = r.length;
    var x=document.getElementById(subdivtag).insertRow(q);
    var spreqtype=x.insertCell(1);
    spreqtype.className="black_ar_s";
    sname="";
    var identifier = "value(ParticipantMedicalIdentifier:" + (q+1) +"_id)";
    sname = sname + "<input type='hidden' name='" + identifier + "' value='' id='" + identifier + "'>";
    var name = "value(ParticipantMedicalIdentifier:" + (q+1) + "_Site_id)";
    sname = sname +"<select name='" + name + "' size='1' class='formFieldSized12' id='" + name + "' onmouseover=showTip(this.id) onmouseout=hideTip(this.id)>";
    <%if(siteList!=null)
    {
    Iterator iterator = siteList.iterator();
    while(iterator.hasNext())
    {
    NameValueBean bean = (NameValueBean)iterator.next();%>
    sname = sname + "<option value='<%=bean.getValue()%>'><%=bean.getName()%></option>";
    <%}
    }%>
    sname = sname + "</select>";
    spreqtype.innerHTML="" + sname;


    any help would be great.

  2. #2
    Given what it looks like you're doing, you REALLY shouldn't be using innerHTML for this. On the whole we're really supposed to have stopped using innerHTML a decade ago -- but really there are still many cases where its' still way too useful -- to be frank, this isn't one of them.

    Build using the DOM.

    Also, you're making R an array for no good reason; since JS doesn't have typing there's no reason to waste time doing that. Likewise you don't have to keep saying 'var' -- you can comma delimit new variables off one declaration. I'd also store subDivtag for a single get, since getElementById is far slower than variable access.

    Though... the 'rows' attribute is an odd one if that's a DIV. What's the source for that markup being targeted look like?

    I'm guessing wildly here, but really I'd be trying to do that via building the DOM up. One simple "tag making" function and it becomes really easy really quick.

    Code:
    var d = document; // just to make it a bit easier to work with
    
    function makeTag(tagname, content, attribs, parent) {
    	var e = d.createElement(tagName);
    	if (content !== false) e.appendChild(
    		typeof content == 'object' ?
    		content :
    		d.createTextNode(content)
    	);
    	if (attribs) for (var i in attribs) e[i] = attribs[i];
    	if (parent) parent.appendChild(e);
    	return e;
    }
    
    var
    	d = document, // just to make it a bit easier to work with
    	subDivTag = d.getElementById(subdivtag),
    	r = subDivTag.rows,
    	x = subDivTag.insertRow(r.length),
    	spreqtype = x.insertCell(1),
    	prefix = 'value(ParticipantMedicalIdentifier:' + (r.length+1),
    	inputName = prefix + '_id)',
    	selectName = prefix + '_Site_id)';
    	 
    makeTag('input', false, {
    	type : 'hidden',
    	name : inputName,
    	id : inputName
    }, spreqtype);
    
    var newSelect = makeTag('select', false, {
    	name : selectName,
    	id : selectName,
    	size : '1',
    	className : 'formFieldSized12'
    	// your onmouseover stuff looks like something that should be CSS' job!
    }, spreqtype);
    
    <%if(siteList!=null) {
    	Iterator iterator = siteList.iterator();
    	while (iterator.hasNext()) {
    		NameValueBean bean = (NameValueBean)iterator.next();
    		%>
    		makeTag('option', '<%=bean.getName()%>', {
    			value : '<%=bean.getValue()%>'
    		}, newSelect);
    	<%}
    }%>
    Not sure if that would actually run as I'm not sure if that's ASP or XSLT... and I really don't deal with either a whole lot, but should at least show enough for you to figure it out. You've also got a lot of methods and objects in there I flat out don't recognize, so I'm assuming you've got a whole lot of code we're just not seeing here.

    Using the DOM is faster, leaner, cleaner, and will have no such size limit issues. The make method I added to this is based on the one from my elementals.js library.

    Though honestly, if you have more than 12 options in a SELECT, all you are doing is pissing off users.
    Last edited by deathshadow; 07-09-2014 at 07:43 PM.

Thread Information

Users Browsing this Thread

There are currently 1 users browsing this thread. (0 members and 1 guests)

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
  •  
HTML5 Development Center



Recent Articles