✔ $function per onclick ansprechen

D

Dworrak

Grünschnabel
Code: 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Test</title>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
  <script type="text/javascript">

$(function check () {
		$("#test").dialog({
			bgiframe: true,
			resizable: false,
			height:140,
			modal: true,
			overlay: {
				backgroundColor: '#000',
				opacity: 0.5
			},
			buttons: {
				'Fortfahren': function() {
					$(this).dialog('close');
				},
				'Abbrechen': function() {
					$(this).dialog('close');
				}
			}
		});
	});

  </script>

</head>

<body style="font-size:62.5%;">
  
<div id="test" title="Sicherheitsabfrage">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Die Änderungen werden dauerhaft gespeichert. Wollen sie fortfahren?</p>
</div>


<form onClick="return .check ();">
	<input type="submit" value="Speichern"/>
</form>


</body>
</html>


Hallo Leute,

Ich habe bei dem obenstehenden Code folgendes Problem:

Ich würde gerne die Funktion $(function check() per <form onclick="return check () ;">
ansprechen.

Das Problem ist jedoch, dass sich das Dialogfenster sofort beim Laden der Seite öffnet und nciht erst, wenn ich den Button klicke.

Zur Info: Ich habe externe jQuery Datanbanken eingebunden und nutze auch deren Funktionen.


Vielen dank für eure Hilfe.


Mfg

Dworrak
 
Hi.

Du hast deine Funktion als onLoad Funktion angegeben. Deshalb wird sie auch ausgeführt wenn das Dokument fertig geladen ist.

Du darfst die Funktion nicht innerhalb der $( ) angeben.

Ein form Element besitzt übrigens keinen onclick Handler. Entweder du nimmst das onsubmit Attribut des form Elementes oder du fügst einfach ein button Element mit onclick Attribut ein.

Gruß
 
Danke für deine wirklcih schnelle Antwort, aber ich kann mir grad nicht vorstellen wie du das meinst.

Könntest du das was du dir vorstellst vll. in meinen Code einbaun?


Mfg

Dworrak
 
HTML: 
<script type="text/javascript">

function check () {
  // bla bla
}
</script>

...

<form action="..." method="..." onsubmit="return check()">
  <input type="submit" value="Speichern">
</form>
Gruß
 
Jetzt tritt ein anderes Problem auf:

Wenn ich den Code
Code: 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Test</title>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>
  <script type="text/javascript">

function check () {
		$("#test").dialog({
			bgiframe: true
			resizable: false,
			height:140,
			modal: true,
			overlay: {
				backgroundColor: '#000',
				opacity: 0.5
			},
			buttons: {
				'Fortfahren': function() {
					$(this).dialog('close');
				},
				'Abbrechen': function() {
					$(this).dialog('close');
				}
			}
		});
	};

  </script>

</head>

<body style="font-size:62.5%;">
  
<div id="test" title="Sicherheitsabfrage">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Die Änderungen werden dauerhaft gespeichert. Wollen sie fortfahren?</p>
</div>


<form onSubmit="return .check ();">
	<input type="submit" value="Speichern"/>
</form>


</body>
</html>
ausführe, wird der Text aus dem <span> Teil, der eigentlich im Dialog drinstehen sollte, über dem Button angezeigt.
Außerdem öffnet sich der Dialog bei betätigen des Buttons nicht mehr.
 
Zuletzt bearbeitet:
Ok, anders:
HTML: 
<script type="text/javascript">

function check () {
  $('#test').dialog('open');
}

$(function () {
  $("#test").dialog({
			bgiframe: true
			resizable: false,
			autoOpen: false;
			height:140,
			modal: true,
			overlay: {
				backgroundColor: '#000',
				opacity: 0.5
			},
			buttons: {
				'Fortfahren': function() {
					document.forms['bla'].submit();
				},
				'Abbrechen': function() {
					$(this).dialog('close');
				}
			}
		});
});

</script>

...

<form name="bla" method="..." action="...">
  <button onclick="check()">Speichern</button>
</form>
Gruß
 
Hi,

der Name des Formulars:
HTML: 
<form name="bla" method="..." action="...">


mfg Maik
 
Also mein Code sieht jetzt wie folgt aus:

Code: 
<!DOCTYPE html>
<html>
<head>
<title>JavaScript Test</title>
  <link type="text/css" href="http://jqueryui.com/latest/themes/base/ui.all.css" rel="stylesheet" />
  <script type="text/javascript" src="http://jqueryui.com/latest/jquery-1.3.2.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.core.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.draggable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.resizable.js"></script>
  <script type="text/javascript" src="http://jqueryui.com/latest/ui/ui.dialog.js"></script>

<script type="text/javascript">

function check () {
  $('#test').dialog('open');
}

$(function () {
  $("#test").dialog({
			bgiframe: true
			resizable: false,
			autoOpen: false;
			height:140,
			modal: true,
			overlay: {
				backgroundColor: '#000',
				opacity: 0.5
			},
			buttons: {
				'Fortfahren': function() {
					document.forms['submitButton'].submit();
				},
				'Abbrechen': function() {
					$(this).dialog('close');
				}
			}
		});
});

</script>


</head>

<body style="font-size:62.5%;">

<div id="test" title="Sicherheitsabfrage!">
	<p><span class="ui-icon ui-icon-alert" style="float:left; margin:0 7px 20px 0;"></span>Die Änderungen werden dauerhaft gespeichert. Wollen sie fortfahren?</p>
</div>


<form action="http://www.web.de" name="submitButton">
<button onClick="check ();">Speichern</button>
</form>

</body>
</html>

Und das ist die dazu passende Ausgabe im Browser vor Betätigung des Buttons.
http://img507.imageshack.us/img507/5123/prebutton.png

Betätige ich den Button wechselt er nur auf die im <form action=""> angegebene Seite und öffnet auch das Dialogfenster nicht.
 
Probier's mal hiermit:
Code: 
$(function () {
  $("#test").dialog({
                        bgiframe: true,
                        resizable: false,
                        autoOpen: false,
                        height:140,
                        modal: true,
                        overlay: {
                                backgroundColor: '#000',
                                opacity: 0.5
                        },
                        buttons: {
                                'Fortfahren': function() {
                                        document.forms['submitButton'].submit();
                                },
                                'Abbrechen': function() {
                                        $(this).dialog('close');
                                }
                        }
                });
});


mfg Maik
 
Um antworten zu können musst du eingeloggt sein.

Neue Beiträge

Zurück