ugrás a tartalomhoz

jquery Block UI + Form

Individual · 2011. Okt. 3. (H), 12.13
Üdv,

a problémám abban merül ki, hogy használok a jquery block UI-t azaz csak használnám, mert ha bele teszem egy formba akkor nem teljesen jelenik meg, és nem veszi figyelembe a timeout értéket sem. Ha formon kívül van akkor teljesen jól működik.

Kód:

$(document).ready(function() {
	$('#FrmID > .input_class').click(function() {
		$.blockUI({
			theme:    true,
			title:    'Címsor',
			message:  'Megjelenítendő írás',
			timeout:   3000
		});
	});   
   });


<form id="FrmID" style="margin:0;" method="post" action="">   
      <input class="input_class" type="submit" name="input_name" value="" />
     </form>
Hogyan bírjam működésre a formon belül?
A válaszokat előre köszönöm!
‹ Helyi fájlrendszer elérése (JavaScript) lenyíló menü nem működik helyesen ›
 ■
1

Micsoda?

Poetro · 2011. Okt. 3. (H), 12.21
Mi nem jelenik meg teljesen? Azt ugye tudod, hogy ha egy submit gombra kattintasz, akkor az elküldi az űrlapot, és ezáltal az oldal újra fog töltődni? Ezért nem fogsz sokat látni abból amit a blockUI mutat, bármi is legyen az. Azt megteheted, hogy megakadályozod a gomb alapértelmezett működését (azaz, hogy elküldi a űrlapot), de akkor az űrlap elküldéséről neked kell gondoskodnod.
2

Igaz, azért nem jelenik meg

Individual · 2011. Okt. 3. (H), 12.28
Igaz, azért nem jelenik meg teljesen, mert közben újratölt az oldal. Hogy a legjobb megoldani, hogy lefusson az a pár másodperc, ami a blockUI futási ideje és csak utána lépjen életbe a form submit?
3

A submit gombra tegyél egy

bb0072 · 2011. Okt. 3. (H), 12.46
A submit gombra tegyél egy olyan onclick-et, hogy return false, vagy ugyanezt a form onsubmit eventjére. Aztán amikor már lehet submitolni, akkor: document.getElementById('FrmID').submit();
4

Odáig remek, hogy return

Individual · 2011. Okt. 3. (H), 13.20
Odáig remek, hogy return false, így ugyebár nem töltődik be a form és szépen lefut a blockUI. A
document.getElementById('FrmID').submit();
elhelyezése még problémát jelent.

most így néz ki:

 $(document).ready(function() {
	$('#FrmID').submit(function() {
		return false;
	});   
	
	$('#FrmID > .input_class').click(function() {

		$.blockUI({
			theme:    true,
			title:    'Cím',
			message:  'Leírás tartalma',
			timeout:   1200
		});
	});
});
5

jQuery(function($) { var

Poetro · 2011. Okt. 3. (H), 13.30
jQuery(function($) {
  var form = $("#FrmID");
  form.children(".input_class").click(function(event) {
    event.preventDefault();
    $.blockUI({
      theme: true,
      title: "Cím",
      message: "Leírás tartalma",
      timeout: 1200,
      onUnblock: function () {
        form[0].submit(); // Blokkolás végén elküldjük a formot.
      }
    });
  });
});
6

Köszönöm a kódot, így most a

Individual · 2011. Okt. 3. (H), 13.42
Köszönöm a kódot, így most a block UI újra "felvillan" és a form sem kerül elküldésre.
7

Mit szeretnél?

Poetro · 2011. Okt. 3. (H), 16.08
Akkor elárulod, mit szeretnél a blockUI-jal? Mert ahogy én látom megjelenik a blockUI doboza is pontosan 1,2 másodpercre, majd elküldi az űrlapot, pont úgy, ahogy megadtuk neki. Ha mást szeretnél, akkor mást kell csinálni.
8

Ha átírom a timeoutot 4

Individual · 2011. Okt. 3. (H), 16.40
Ha átírom a timeoutot 4 másodpercre nálam akkor is csak felvillanás van. Gondolom amit írtál kódot ahhoz nem igazán kell hozzá nyúlni.

Teljesen így néz ki:

 <script type="text/javascript">
 
   jQuery(function($) {  
      var form = $("#FrmID");  
      form.children(".input_class").click(function(event) {  
        event.preventDefault();  
        $.blockUI({  
          theme: true,  
          title: "Cím",  
          message: "Leírás tartalma",  
          timeout: 1200,  
          onUnblock: function () {  
            form[0].submit(); // Blokkolás végén elküldjük a formot.  
          }  
        });  
      });  
    });
</script>  


    <form id="FrmID" style="margin:0;" method="post" action="">     
          <input class="input_class" type="submit" name="input_name" value="" />  
    </form>
Ennek így ahogy van működnie kellene ugye?!
9

Nálam

Poetro · 2011. Okt. 3. (H), 17.59
Nem látom, hogy átírtad volna az időt 4 másodpercre, de íme amit én látok, ha átírom 4 másodpercre.
<!DOCTYPE html>
<html>
<head>
  <meta http-equiv="content-type" content="text/html; charset=UTF-8">
  <title>Demo</title>
  <script type='text/javascript' src='http://code.jquery.com/jquery-1.6.3.js'></script>
  <script type='text/javascript' src="jquery.blockUI.js"></script>
</head>
<body>
  <form id="FrmID" style="margin:0;" method="post" action="">
    <input class="input_class" type="submit" name="input_name" />
  </form>

  <script type='text/javascript'>
  jQuery(function($) {
    var form = $("#FrmID");
    form.children(".input_class").click(function(event) {
        event.preventDefault();
        $.blockUI({
            theme: true,
            title: "Cím",
            message: "Leírás tartalma",
            timeout: 4000,
            onUnblock: function() {
                form[0].submit(); // Blokkolás végén elküldjük a formot.
            }
        });
    });
});
  </script>
</body>
</html>
10

Teljesen jól működik önállóan

Individual · 2011. Okt. 4. (K), 07.13
Teljesen jól működik önállóan nálam is. Amikor beépítem az oldalba akkor már nem akar működni megfelelően. Valami kompatibilitási problémám lehet valami más alkalmazással. A mai nap erről fog szólni...
Mindenkinek köszönöm a segítséget!