✔ jQueryUI: Edit-Fenster

F

FrankWST

Erfahrenes Mitglied
Hallo,

ich möchte mit jQueryUI eine Art Textfeld-Editor realisieren. Das soll etwa so aussehen:
Wenn der Benutzer den Edit-Button drückt, geht ein Dialog auf, in dem er einen Text eingeben kann. Bei OK schliesst sich der Dialog und der Text ist in der Webseite (z.B. in einem Tabellenfeld) zu sehen.

Es soll sich hier also bei dem Textfeld-Editor nicht um ein Formular handeln, das bei Betätigen von OK abgeschickt wird, sondern es soll nur die aktuelle HTML-Seite aktualisiert werden.

Hat jemand von Euch sowas schon mal gemacht?

Danke und Gruß,
Frank
 
Zuletzt bearbeitet:
FrankWST hat gesagt.:
Hallo,

ich möchte mit jQueryUI eine Art Textfeld-Editor realisieren. Das soll etwa so aussehen:
Wenn der Benutzer den Edit-Button drückt, geht ein Dialog auf, in dem er einen Text eingeben kann. Bei OK schliesst sich der Dialog und der Text ist in der Webseite (z.B. in einem Tabellenfeld) zu sehen.

Es soll sich hier also bei dem Textfeld-Editor nicht um ein Formular handeln, das bei Betätigen von OK abgeschickt wird, sondern es soll nur die aktuelle HTML-Seite aktualisiert werden.

Hat jemand von Euch sowas schon mal gemacht?

Danke und Gruß,
Frank
Zum Vergrößern anklicken....

Oder ist für soetwas das jQueryUI-Framework gar nicht geeignet?
 
Moin Frank,

eigentlich geht sowas heutzutage recht einfach(MS sei dank :-))

Man kann Elemente einfach durch das Attribut contentEditable editierbar machen:

Code: 
<html>
<head>
  <script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4/jquery.min.js"></script>
  <style type="text/css">
    .edit{border:2px dotted #000;}
  </style>
  <script>
  $(document).ready(function() {
    $('.editable')
      .prev()
      .toggle(
              function()
              {
                $(this).val('OK');
                $(this).next().attr('contentEditable',true).addClass('edit');
              },
              function()
              {
                $(this).val('EDIT');
                $(this).next().attr('contentEditable',false).removeClass('edit');
              }
            );
  });
  </script>
</head>
<body>
<input type="button" value="EDIT">
<div class="editable">Testtext</div>
</body>
</html>
 
Sven Mintel hat gesagt.:
Man kann Elemente einfach durch das Attribut contentEditable editierbar machen
Zum Vergrößern anklicken....

Hallo Sven,

vielen Dank für den Tipp. Das ist natürlich eine Lösung.

Nun hatte ich mit aber das jQueryUI-Framework angeschaut http://jqueryui.com/demos/dialog/#modal-form.
Die arbeiten mit Formular-Dialogen, die mir für meinen Fall sehr angenehm erscheinen. Mein Problem ist nur, dass mit Bestätigen des Dialogs das Formular sofort abgeschickt wird. Das kann ich in dem Fall nicht so gebrauchen.
Aber da werde ich nochmal hinterher gehen...

Gruß,
Frank
 
Sven Mintel hat gesagt.:
In der von dir genannten Demo wird überhaupt nichts abgeschickt.
Es wird das getan, was dem Button gesagt wird, dass er tun soll, wenn auf ihn geklickt wird....und das ist in der Demo nicht das Senden des Formulars.
Zum Vergrößern anklicken....

Hallo Sven,

sorry, war etwas ungenau beschrieben.
Wenn man in der Demo auf "Create new user" klickt, öffnet sich ein Dialog. Wenn dieser mit OK geschlossen wird, wird das Formular zum Server geschickt.

Aber abgesehen davon habe ich schon eine Ahnung was ich machen muss.

Melde mich wieder...

Gruß,
Frank
 
Ja, ich habe mir das nochmal angeschaut. Kann nicht mehr erklären wie ich darauf kam.
Am besten bitte das ganze Thema löschen.

Danke,
Frank
 
Ich habe jetzt eine kleine Testseite, mit der ich einen Text editieren kann (s.u.).
Kann mir jemand einen Tipp geben, wie ich den aktuellen Text (unten im Beispiel "Ich bin ein Text.") als Default-Wert in das Eingabefeld im Dialog bekomme?

Ehrlich gesagt verstehe ich die Syntax auch nicht richtig: Was bedeutet
Code: 
var name = $("#name")
?
Mit dem Dollar spreche ich ID's im Document an, aber was bedeutet das "#"?

Hier also die gesamte Testseite:

Code: 
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
		<title>jQuery UI Example Page</title>
		<link type="text/css" href="css/start/jquery-ui-1.8.custom.css" rel="stylesheet" />	
		<script type="text/javascript" src="js/jquery-1.4.2.min.js"></script>
		<script type="text/javascript" src="js/jquery-ui-1.8.custom.min.js"></script>
	<style type="text/css">
		body { font-size: 62.5%; }
		label, input { display:block; }
		input.text { margin-bottom:12px; width:95%; padding: .4em; }
		fieldset { padding:0; border:0; margin-top:25px; }
		h1 { font-size: 1.2em; margin: .6em 0; }
		div#users-contain { width: 350px; margin: 20px 0; }
		div#users-contain table { margin: 1em 0; border-collapse: collapse; width: 100%; }
		div#users-contain table td, div#users-contain table th { border: 1px solid #eee; padding: .6em 10px; text-align: left; }
		.ui-dialog .ui-state-error { padding: .3em; }
		.validateTips { border: 1px solid transparent; padding: 0.3em; }
	</style>
  
	<script type="text/javascript">
	$(function() {
		// a workaround for a flaw in the demo system (http://dev.jqueryui.com/ticket/4375), ignore!
		$("#dialog").dialog("destroy");
		
		var name = $("#name"),
			  allFields = $([]).add(name),
			  tips = $(".validateTips");

		function updateTips(t) {
			tips
				.text(t)
				.addClass('ui-state-highlight');
			setTimeout(function() {
				tips.removeClass('ui-state-highlight', 1500);
			}, 500);
		}

		function checkLength(o,n,min,max) {

			if ( o.val().length > max || o.val().length < min ) {
				o.addClass('ui-state-error');
				updateTips("Length of " + n + " must be between "+min+" and "+max+".");
				return false;
			} else {
				return true;
			}

		}

		function checkRegexp(o,regexp,n) {

			if ( !( regexp.test( o.val() ) ) ) {
				o.addClass('ui-state-error');
				updateTips(n);
				return false;
			} else {
				return true;
			}

		}
		
		$("#dialog-form").dialog({
			autoOpen: false,
			height: 300,
			width: 350,
			modal: true,
			buttons: {
				'OK': function() {    // Statt OK kann hier beliebiger Text stehen
					var bValid = true;
					allFields.removeClass('ui-state-error');

					bValid = bValid && checkLength(name,"username",3,16);

					bValid = bValid && checkRegexp(name,/^[a-z]([0-9a-z_])+$/i,"Text may consist of a-z, 0-9, underscores, begin with a letter.");
					
					if (bValid) {
            document.getElementById("users").innerHTML = name.val();
						$(this).dialog('close');
					}
				},
				Cancel: function() {
					$(this).dialog('close');
				}
			},
			close: function() {
				allFields.val('').removeClass('ui-state-error');
			}
		});
		
		
		
		$('#create-user')
			.button()
			.click(function() {
				$('#dialog-form').dialog('open');
			});

	});
	</script>

	</head>
	<body>


<div class="demo">

<div id="dialog-form" title="Schreibe Text">
	<p class="validateTips">Enter a message.</p>
	<form>
	<fieldset>
		<label for="name">Name</label>
		<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
	</fieldset>
	</form>
</div>


<div id="users-contain" class="ui-widget">

		<h1>Aktueller Text:</h1>

    <div id="users" class="ui-widget ui-widget-content">
    Ich bin ein Text.
    </div>
    
</div>

<button id="create-user">Text editieren</button>

</div><!-- End demo -->

	</body>
</html>

Danke,
Frank
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück