[JavaScript] JSON lesen - Seite 3

Seite 3 von 4 - Forum: Coding Stuff auf overclockers.at

URL: https://www.overclockers.at/coding-stuff/javascript_json_lesen_216704/page_3 - zur Vollversion wechseln!

Hm, da hab ich was vergessen zu schreiben.

Um die JSON Daten im HTML Dokument zu haben, verwende ich

Code:

<div id="myJSONData">${myJSONData}</div>

Code:

modelAndView.addObject("myJSONData", myJSONString);

Und was würde gegen

Code:

<script type="text/javascript">var myJSON = ${myJSONData};</script>

Nichts handfestes, weil ich es noch nicht probiert habe.

Mein Bedenken war, dass wegen dem Start mit ${... sich jQuery einschalten wird. (--> ${document}.ready(), ${"myJSONData").html()...) Andererseits habe ich ja schon auf jQuery.noConflict() umgestellt, also ist es einen Versuch wert

Ich hab praktisch keine Erfahrung mit JSP, aber ich nehme doch stark an, dass der Client nichts von der ${}-Syntax sehen wird. Das sind doch nur Platzhalter in den Templates und werden serverseitig ersetzt (?).

Außerdem ist die Syntax für Selektoren bei jQuery eh $()

Zitat von jives

Außerdem ist die Syntax für Selektoren bei jQuery eh $()

ZOMG DAS FUNKTIONIERT

Glad to help

Ihr seid echt eine große Hilfe, danke

Ich hätt wieder etwas. Und zwar versuche ich grad ein Autocomplete-Feature zu schreiben. Was ich dafür machen müsste, wäre in einem text input Teile markieren zu können. Oder noch schärfer, wenn die Autocomplete-Vorschläge nicht markiert, sondern so ausgegraut wären. Leider hab ich nicht wirklich was gefunden, aber das geht doch!

//Edit: Ausgrauen wird vermutlich nur mit Flash, Silverlight oder sowas gehen, hab ich recht? Dann lass ich das raus. JS+HTML only!

Bisheriger Code (mehrere Suchbegriffe durch whitespaces getrennt):

Code:

var $j = jQuery.noConflict();
var allSug = jsonSI; //alle verfügbaren suchbegriffe
var oldSug = allSug; //suchbegriffe, die den bisherigen string gematched haben

function suggestSearchItem() {
	var typed = $j("#searchString").val();
	console.log(typed);
	console.log(oldSug);
	if (typed=="Enter your search here"){
		return;
	}
	var newSug = "[";
	var suggestion = typed;
	//whitespace separates search items
	if (typed.charAt(typed.length-1)==' ') {
		oldSug = allSug;
		console.log("skipped character");
		return;
	}
	//if there are more than 1 search item, take only the last one
	if (typed.lastIndexOf(" ")!=-1){ //more than one search item
		console.log("more than one search string");
		typed = typed.substring(typed.lastIndexOf(" ")+1);
		console.log("using "+typed);
	}
	//go through old suggestions
	for (var i=0; i<oldSug.length-1; ++i) {
		//if smth from old suggestions matches the char, add it to new suggestions
		console.log("check "+oldSug[i].name.charAt(typed.length-1)+" and "+typed.charAt(typed.length-1));
		if (oldSug[i].name.charAt(typed.length-1)==typed.charAt(typed.length-1)) {
			newSug+="{\"name\":\""+oldSug[i].name+"\"},";
		}
		console.log(newSug);
	}
	//if there were new suggestions, overwrite old ones 
	if (newSug.length>1) {
		console.log("parse suggestions");
		newSug = newSug.substring(0, newSug.length-1);
		newSug+="]";
		console.log("--> "+newSug);
		oldSug = JSON.parse(newSug);
	}
	//write it in input field
	suggestion+=oldSug[0].name.substring(suggestion.length);
	console.log("suggesting: "+suggestion);
	$j("#searchString").val(suggestion);
}

Du möchtest kein Dropdown-Menü so wie hier http://docs.jquery.com/UI/Autocomplete oder? Hab ich das richtig verstanden dass im Input einfach auf den nächsten Vorschlag vervollständigt wird - also z.B. Input: jq wird zu jQery, wobei der letzte Teil markiert ist/eine andere Farbe hat?

Das wäre auch schön. Aber kann ich da mehrere auswählen und zB mit Komma oder Blank trennen?

//Ich habs nämlich gestern mit dem Plugin versucht, aber da hat sich jQueryUI beschwert. "Property source is not a function" oder so.

Passt, ich steh wieder mal auf der Leitung.

Ich will ein simples Verwaltungssystem für die verfügbaren Tags machen. Am Anfang ist ein Suchfeld mit Autocomplete und ein "Manage" Button. Nach Klick auf "Manage" verschwindet dieser und es erscheinen 2 Buttons "Edit" und "Delete". Die sollen dann auch genau das machen und submitten alten und neuen Namen des Tags mit POST ans Servlet.

Code:

<script type="text/javascript">
 function createEditInput() {
	 var search = newItemName.value; //alter inhalt des autocomplete feldes
	 $j("#searchButton").remove(); // managebutton entfernen
	 $j("#editForm").append("<INPUT type='hidden' value='"+search+"' id='oldName'/><INPUT id='editButton' name='editButton' type='submit' value='Edit'/><INPUT id='editButton' name='editButton' type='submit' value='Delete'/>" ); //andere 2 buttons hinzufügen
 }
</script>

Code:

<form id="editForm" action="searchItems" method="POST">
<INPUT type="text" id="newItemName" name="newItemName" value="Type desired search item to edit"/>
<INPUT type="button" id="searchButton" onClick="createEditInput();" value="Manage"/>

Ein paar kurze Tipps, die ich so gesammelt habe, während ich mit jQuery gearbeitet hab:
Der Selector ist wie schon gesagt $(), nicht $j() und wenn man mit jQuery arbeitet sollte der gesamte JavaScript-Code zwischen $({ ... }); stehen, selbst Funktionsdefinitionen.
z.B:

Code:

<script type="text/javascript">
$({
	function foo()
	{
		alert("bar");
	}

	$(".button").click(function() { foo(); });
});
</script>

Hättest ein paar Posts weiter oben gelesen, wüsstest du dass das $j fürs JQuery.NoConflict() da ist Danke für die Mühe, aber hilft mir nicht...

Zitat von prayerslayer

Hättest ein paar Posts weiter oben gelesen, wüsstest du dass das $j fürs JQuery.NoConflict() da ist

Hm, ich war der Meinung dass name optional ist, wenn man schon id hat. Aber ich probiers gleich...

overclockers.at v4.thecommunity
© all rights reserved by overclockers.at 2000-2025