[xTreme pixel-schubsen] html links aus in javaScript generierten innerHtml Sekti

[flaite]

onen?

Hi,

irgendwie funktioniert ein normaler a href-Link nicht aus dynamisch generierten html innerHttml?

Weiss jemand was dadrüber? Wie in dem Bild dargestellt, wird das als Link dargestellt (blau und unterstrich). Nur wenn ich draufklicke, funktioniert es nicht als Link.
Ich kann das lösen, wenn ich per JavaScript den ganzen <div>-Tags, die ich da generiere, einen window.location.href gebe.
Trotzdem find ich das ziemlich verwirrend. Zugegeben ist das vielleicht auch verwirrend zu lesen.
Jemand schon mal  davon gehört oder ähnliche Erlebnisse gehabt?

Gruß Axel

[pete_bla]

Hi Axel,

ganz ist noch nicht bei mir angekommen, was hier Absicht ist.

Gehöhrt der hintere Teil "/vwlookupFilename...." zur beabsichtigten Ausgabe oder ist das auch ein Produkt des Fehlers?

Zuerst hatte ich ja vermutet, dass es wieder so ein **** mit den Eckigen Klammern [ vom domino ist (das wäre aber zu einfach...) und danach sieht auch nicht aus.

Die Anführungszeigen " am Ende der gelinkten Titel sehen aber verdächtig aus...
-> Irgend eine Klammerproblem: ' " ...

Kannst Du den Quelltext des "Vorschlag-Bereichs" mal posten?
(-> Firefox Auswahl-Quelltext anzeigen)

Gruss, Pete(r)

[flaite]

Bedenke bitte, dass es sich hier um keine "normale" select box handelt.
Vielmehr werden über key listener in den Feldern AJAX Calls gegen einen Domino Agenten abgesetzt, der dann Werte-Listen zurückgibt.
Diese Werte werden dann in div-tags getan und dynamisch unter das Feld angehängt. Funktioniert wie google suggest. Tippt der Anwender einen Buchstaben in das Feld werden mögliche Treffer angezeigt, ohne dass eine neue Seite geladen wird (ajax eben).

Die div Tags werden and die Felder angehangen. Interessant ist diese Funktion. Wenn ich in die Zeile

Code

result1.innerHTML = resultArray1[i];
[/a]
ein <a href....> ist das faktisch ein Link (ist korrektes html), er funktioniert aber nicht, wenn man draufklickt. 

Gruß Axel
 
[code]
/**
This is the function that should be returned by the XMLHTTP call. It will
format and display the lookup results.
*/
function showQueryDiv (fieldname, queryString, resultArray1, resultArray2)
{
	
   			doLog("showQueryDiv called:" + fieldname + ":::" + queryString);	
   	
//  var queryField = getQueryField("Titel");
  currentQueryField = document.getElementsByName(fieldname).item(0);
  
  // don't display results  for queries which starts with different Strings than the value of the current active field. Axel Janssen
  strCurrentQueryFieldValue= currentQueryField.value;
  
  // don't display results for queries for a different field than the current active field. Axel Janssen, SP Integration
 if (!isIE) { 
 	if (fieldname != currentQueryField.name) {
 	
  		doLog("wrong  fieldname");
  		return true; 
  }
  
  	if (queryString.substring(0,MIN_CHARS_IN_FIELD) != strCurrentQueryFieldValue.substring(0,MIN_CHARS_IN_FIELD)) {
		doLog("queryString=" + queryString.substring(0,3) + "!= currentQueryField.value=" + strCurrentQueryFieldValue.substring(0,3)); 
  		return true;
 	}
 }
 
 
 doLog("showQueryDiv.queryString=" + queryString);
  
  //var div = getDiv(currentQueryField, queryField.divName);
  var div = getDiv(currentQueryField, currentQueryField.divName);
  // remove any results that are already there

  while (div.childNodes.length > 0)
    div.removeChild(div.childNodes[0]);
  
  // add an entry for each of the results in the resultArray
  for (var i = 0; i < resultArray1.length; i++)
  {
    // each result will be contained within its own div
    var result = document.createElement("div");
    result.style.cursor = "pointer";
    result.style.borderBottom = "1px solid #777777";
    result.style.padding = "3px 0px 3px 0px";
    _unhighlightResult(result);
    result.onmousedown = selectResult1;   // changed
    
    result.onmouseover = highlightResult;
    result.onmouseout = unhighlightResult;
    result.onmouseup = mouseUp;

    var result1 = document.createElement("span");
    result1.className = "result1";
    result1.style.textAlign = "left";
    result1.style.fontWeight = "bold";
    result1.innerHTML = resultArray1[i];
    //result1.onmousedown=selectResult1
    
    var result2 = document.createElement("span");
    result2.className = "result2";
    result2.style.textAlign = "right";
    result2.style.paddingLeft = "20px";
    result2.innerHTML = resultArray2[i];
    
    result.appendChild(result1);
    result.appendChild(result2);
    div.appendChild(result);
  }
  
  // if this resultset isn't already in our cache, add it
  var isCached = cache[fieldname + "!!!" + queryString];
  if (!isCached)
    addToCache(fieldname, queryString, resultArray1, resultArray2);
  
  // display the div if we had at least one result
  //showDiv(queryField, resultArray1.length > 0);
  showDiv(currentQueryField, resultArray1.length > 0);
}

[/code]

[flaite]

[duplikat/]

[pete_bla]

Hi,

AJAX, <DIV>, innerHTML ist klar,

ich wollte darauf raus, wie der resultierene HTML-Source ist.
Mein Firefox stellt dass immer schön da (DOM..)

Gruss, Pete(r)

[flaite]

Guter Punkt. 
Aber das läuft bei meiner Lösung so nicht. Sobald ich versuche in dieser select-Box Dinge auszuwählen, dann verschwindet die ganze Liste. Das ist aber wohl einer der von mir programmierten Event-Handler, den ich allerdings noch suchen muss.
Imho sind das Sachen bei Event Propagation in JavaScript, die irgendwie recht komplex sind (kann mich aber auch irren).

Gruß Axel

[pete_bla]

Hi Axel,

hab jetzt mal Deinen geposteten code eingedampft und getestet,
und es macht bei mir keine Probleme.
(OK ich hab kein XML-Abfrage eingebaut)

Ergebnis:
-> es muss mit den daten der Arrays zusammenhängen,
da machen bestimmt die Anführungszeichen
" ' \"
mucken!

Pete(r)

Code

<html><head><title>test</title>
<script type="text/javascript">
var resultArray1 = new Array();
var resultArray2 = new Array();
resultArray1[0] = '<a href="http://www.google.de">google</a>';
resultArray1[1] = '<a href="http://www.wikipedia.de">wiki</a>';
resultArray2[0] = 'ist das google ?';
resultArray2[1] = 'das ist wiki';
// function showQueryDiv(fieldname, queryString, resultArray1, resultArray2)
function showQueryDiv(fieldname)
{
	
//   			doLog("showQueryDiv called:" + fieldname + ":::" + queryString);	
   	
//  var queryField = getQueryField("Titel");
  currentQueryField = document.getElementsByName(fieldname).item(0);
  
  // don't display results  for queries which starts with different Strings than the value of the current active field. Axel Janssen
  strCurrentQueryFieldValue= currentQueryField.value;
  
  // don't display results for queries for a different field than the current active field. Axel Janssen, SP Integration
/*
 if (!isIE) { 
 	if (fieldname != currentQueryField.name) {
 	
  		doLog("wrong  fieldname");
  		return true; 
  }
  
  	if (queryString.substring(0,MIN_CHARS_IN_FIELD) != strCurrentQueryFieldValue.substring(0,MIN_CHARS_IN_FIELD)) {
		doLog("queryString=" + queryString.substring(0,3) + "!= currentQueryField.value=" + strCurrentQueryFieldValue.substring(0,3)); 
  		return true;
 	}
 }
 
 
 doLog("showQueryDiv.queryString=" + queryString);
*/  
  //var div = getDiv(currentQueryField, queryField.divName);
//  var div = getDiv(currentQueryField, currentQueryField.divName);
var div = document.getElementsByName("textdiv").item(0);
  // remove any results that are already there
 while (div.childNodes.length > 0)
    div.removeChild(div.childNodes[0]);
 
  // add an entry for each of the results in the resultArray
  for (var i = 0; i < resultArray1.length; i++)
  {
    // each result will be contained within its own div
    var result = document.createElement("div");
    result.style.cursor = "pointer";
    result.style.borderBottom = "1px solid #777777";
    result.style.padding = "3px 0px 3px 0px";
/*    _unhighlightResult(result);
    result.onmousedown = selectResult1;   // changed
    
    result.onmouseover = highlightResult;
    result.onmouseout = unhighlightResult;
    result.onmouseup = mouseUp;
*/
    var result1 = document.createElement("span");
    result1.className = "result1";

    result1.style.textAlign = "left";
    result1.style.fontWeight = "bold";
    result1.innerHTML = resultArray1[i];
    //result1.onmousedown=selectResult1
    
    var result2 = document.createElement("span");
    result2.className = "result2";
    result2.style.textAlign = "right";
    result2.style.paddingLeft = "20px";
    result2.innerHTML = resultArray2[i];
    
    result.appendChild(result1);
    result.appendChild(result2);
    div.appendChild(result);
  }
  
  // if this resultset isn't already in our cache, add it
/*  var isCached = cache[fieldname + "!!!" + queryString];
  if (!isCached)
    addToCache(fieldname, queryString, resultArray1, resultArray2);
*/  
  // display the div if we had at least one result
  //showDiv(queryField, resultArray1.length > 0);
//  showDiv(currentQueryField, resultArray1.length > 0);
}
</script>
<head>
<body>
<form>
<input name="text" type="text" value="123">
<a href="#" onclick="javascript:showQueryDiv('text','333')">x</a>
<div name="textdiv" id="textdiv">hallo welt</div>
</form>
</body>

[flaite]

Boah. Fühl mich wie ein alter Trottel.
Auf den Gedanken, dass es SO einfach ist, die Funktionalität zu extrahieren in einen neuen Kontext zu stellen (deine html Seite), bin ich nicht gekommen. Danke.
Scheint aber nicht an dem Link selbst zu liegen.
Bin aber jetzt in einem anderen Projekt. Melde mich auf jeden Fall wieder woran es liegt.

thx 
Axel

[flaite]

Ich weiss jetzt, warum das passiert ist. Wird wieder aktuell, weil mein Workaround sich als Sackgasse herausgestellt hat.

Die einzelnen divs haben einen onblur-Listener. Dieser bewirkt, dass sie auf "hidden" gesetzt werden.
Wenn sie auf hidden gesetzt werden, dann STIRBT AUCH DER LINK, durch dessen klicken dieses hiding überhaupt erst angestossen wurde. 
Bin grad dabei einen Workaround zu programmieren, der dann hoffentlich akzeptiert wird.

In Dom-Scripting bin ich jetzt fitter. Wens interessiert, das Buch von Jeremy Keith ist echt i.O. 
Schwieriger find ich, ein Verständnis zu entwickeln wie Events in den Browsern propagiert werden. 
Ich triggere ein Event, indem ich einen Link klicke.
Der Link geht auf target="_blank" -> neues Fenster, nicht zu verwechseln mit window.open() in Javascript
Die Node, in der der Link ist, wird auf Hidden gesetzt und dabei wird das Event "user hat link geklickt" aufgegessen.

Du hast mich da auf einen richtigen Weg gebracht.

Gruß Axel