» »

Jquery

Jquery

snooze77 ::

Problem je sledeč. Narišem tabelo, ki jo lahko nato manipuliram tako, da z klikom na okvirček (td) spremeni barvo. Uporabnik lahko nato izbere kakšne bodo dimenzije tabele. Jaz jo na novo naredim tako, da iz obstoječe tabele izbrišem tr in na novo naredim tr in td. Problem pride po risanju novih dimenzij tabele, saj se Jquery funkcija click ne sproži več(ne morem več barvat).
// tuki manipuliram tabela, ki ima barvno lestvico
$("#tabela1 > tr >td").click(function() {
        
        
                $("#b > td").css("border","1px solid white");
                
                 $(this).css('border', '2px solid red');

    });
    

$("#risalna_povrsina > tr >td").click(function() {//Barvanje risalne površine 1 kvadratek
 
 
             var table = document.getElementById("tabela1");
              
               
               for (var i = 0, row; row = table.rows[i]; i++) 
               {
 
                      for (var j = 0, col; col = row.cells[j]; j++) 
                      {

                           var rdeca=col.style.borderColor;
              
                            if(rdeca=="red")
                                {                                  
                                  var ozadje=col.style.backgroundColor;
                                 
                                  $(this).css("backgroundColor",ozadje);
                                }
                      }   
                 } 


function Izrisi()// risanje poljubne tabele
{   
    var sirina=document.getElementById("polje").value;
    var tabela = document.getElementById("risalna_povrsina");
         
            
            for(var i = tabela.rows.length - 1; i >= 0; i--)
            {              
                tabela.deleteRow(i);
            }
                             
       ///Narišem na novo tabelo    
           for (var j = 0; j < sirina; j++) 
                 {                   
                     var vrstica = document.createElement("tr");
  
                    for (var i = 0; i < sirina; i++) 
                     {
     
                       var celica = document.createElement("td");   
                       vrstica.appendChild(celica);
                      }                
                 tabela.appendChild(vrstica);
                }              
}
    });

celebro ::

Poskusi tako (pomembna je sprememba v prvi vrstici):
$("#tabela1 > tr >td").on("click", function() {
    $("#b > td").css("border","1px solid white");
    $(this).css('border', '2px solid red'); 
});

in isto pri drugi funkciji.

snooze77 ::

Ne dela. Pred spremembo vrstic dela, ko pa vrstice spremenim pa ne. Sem bral, da je treba na novo ustvarjene vrstice dodat v jquery kolekcijo in da je treba uporabit on funkcijo ampak nikakor ne dela.

Zgodovina sprememb…

  • spremenil: snooze77 ()

Lion29 ::

to je zato, ker dodas novo vrstico a ne obesis eventa nanjo


$("#tabela1 > tr >td").on("click", function() {
    $("#b > td").css("border","1px solid white");
    $(this).css('border', '2px solid red'); 
});


zamenjaj on z live, ampak to je deprecated, tak da raje naredi tako

$("#tabela1 > tr >td").off("click").on("click", function() {
    $("#b > td").css("border","1px solid white");
    $(this).css('border', '2px solid red'); 
});


vsakic ko dodas novo vrstico... ni najbolj elegantno, but it gets things done
Lead Angular & UI/UX developer

snooze77 ::

Ne dela. Glej tole kodo. Tam ko izbiram barve je use uredu. Jaz na novo narišem risalno površino.
Tuki je začetno risalno polje, ki se nariše ob nalaganju(to polje potem spremenim).
$("#risalna_povrsina > tr >td").click(function() {//Barvanje risalne površine 1 kvadratek
  
  
             var table = document.getElementById("tabela1");
               
                
               for (var i = 0, row; row = table.rows[i]; i++) 
               {
  
                      for (var j = 0, col; col = row.cells[j]; j++) 
                      {
 
                           var rdeca=col.style.borderColor;
               
                            if(rdeca=="red")
                                {                                  
                                  var ozadje=col.style.backgroundColor;
                                  
                                  $(this).css("backgroundColor",ozadje);
                                }
                      }   
                 } 


Tuki se na novo nariše risalno polje
function Izrisi()// risanje poljubne tabele
{   
    var sirina=document.getElementById("polje").value;
    var tabela = document.getElementById("risalna_povrsina");
          
             
            for(var i = tabela.rows.length - 1; i >= 0; i--)
            {              
                tabela.deleteRow(i);
            }
                              
       ///Narišem na novo tabelo    
           for (var j = 0; j < sirina; j++) 
                 {                   
                     var vrstica = document.createElement("tr");
   
                    for (var i = 0; i < sirina; i++) 
                     {
      
                       var celica = document.createElement("td");   
                       vrstica.appendChild(celica);
                      }                
                 tabela.appendChild(vrstica);
                }              
}
    });

Lion29 ::

omg, ma kako lahko uporabljas vanilla JS in jQuery skupaj???

    //var sirina=document.getElementById("polje").value;
    //var tabela = document.getElementById("risalna_povrsina");
    var sirina = $('#polje').val();
    var $tabela = $('#risalna_povrsina');


    //var table = document.getElementById("tabela1");
    //for (var i = 0, row; row = table.rows[i]; i++) 

    var $table = $("#tabela1");
    var $rows = $table.find("tr");
    $rows.each(function(i, el){
        ...
    });


dej prvo se nauci osnove, in kodo spucaj in izkoristi jQuery, ce ga ze uporabljas in ne pisat spagetov, ce ni potrebno
Lead Angular & UI/UX developer

snooze77 ::

Se učim in oprosti ker ne znam vsega takoj=)

mk818764 ::

Eno vprašanje za začetnika.
V formi ni potrebno definirat action="link.php", če to stori ajax preko url-ja, ne?
Nekak mi ni jasno zakaj pol tip določi 2x link na login.php, najprej v formi, pa pol še preko ajaxa. KLIK
Sem kaj spregledal?

Lion29 ::

ja, link.php je za fallback, ce JS ni aktiviran na strani
Lead Angular & UI/UX developer

Matek ::

Problem je v tem, kako bindaš event. Če želiš, da se bo apliciral tudi na vse naknadno dodane elemente, ga moraš v osnovi bindati na parent element (recimo table) in potem podati dodaten selektor kot parameter funkcije .on().

Recimo namesto tega:
$("#tabela1 tr td").on("click", function() {...})
uporabi tole:
$("#tabela1").on("click", "tr td", function() {...})

Tak način je lažji in pravilnejši kot vsakokratno naknadno bindanje direktno na nove elemente po njihovem dodajanju, ki ga je zgoraj predlagal Lion29.
Bolje ispasti glup nego iz aviona.

Zgodovina sprememb…

  • spremenil: Matek ()

mk818764 ::

Malo pomoči bi rabil, ker ne vidim v čem je fora da mi ne dela. Mam na podoben način send mail pa dela, tole pa ne dela, pa ne dela.
html:
<div id="login_form">
	<form name="register" action="#"> 
		<table id="text">
		<tr>
.
.
.
<input type="submit" id="submit" value="Vnesi">
</div>

Pa še jquery
$(document).ready(function(){
	$("#submit").click(function(){
		
		  name=$("#name").val();
		  password=$("#pass1").val();
		  $.ajax({
		   type: "POST",
		   url: "reg1.php",
		   data: "name="+name+"&pass1="+pass1,
		   success: function(html){
			if(html=='ok')
			{
				$("#login_form").fadeOut("normal");
				$("#test").html("bravo, uspelo ti je!");
			}
			else
				$("#test").html("napaka....");
			
		}
	});
  });
});

Lion29 ::

najprej naredi tako:

$("#login_form form").on("submit", function(e){
    e.preventDefault();
    ....
});

pa daj data v $.ajax v obliko data: {"name": name, "pass1":pass1},

pa je reg1.php pravi URL?
Lead Angular & UI/UX developer

mk818764 ::

Naredil tako, pa ne dela.
reg1.php je pravi url.
Edino mogoče index.php in reg1.php sta skupaj. js fajle pa imam v mapi JS. Mogoče ni pravilno linkano? Samo pol mi tudi druge zadeve(counter,dropdown meni,...), ki tudi uporabljam na enak način ne bi delale, pa vse ostalo dela, samo tole ne.

edit: aja, nekaj sem guglal, pa sem nekje našel, da včasih mora biti gumb pod input type definiran pod "button", večinoma pa pod submit. Ne kapiram te razlike, tako da če lahko še to kdo mi razloži.

Zgodovina sprememb…

  • spremenil: mk818764 ()

win64 ::

To nima veze, če narediš na ta način.
Malo povej več, kaj ne dela?

uporabljaš spremenljivko pass1, zgoraj nastaviš pa spremenljivko password

Drugače pa en nasvet, da ti ne crkne pri določenih znakih:
data: "name="+name+"&pass1="+pass1,
spremeni v data: {"name":name,"pass1":password}

Lion29 ::

uporabljaj google developer tools ali firebug za debugat zadeve... tako na pamet je tezko rect, kje ti stvari crknejo
Lead Angular & UI/UX developer

mk818764 ::

Ok,bom drug teden reševal dalje. Sem pustil prenosnika z kodo v službi :)


Vredno ogleda ...

TemaSporočilaOglediZadnje sporočilo
TemaSporočilaOglediZadnje sporočilo
»

Canvas risanje črt - beginPath()

Oddelek: Izdelava spletišč
16736 (536) marjan_h
»

[PHP/JavaScript] tic tac toe

Oddelek: Programiranje
171250 (983) illion
»

JavaScript offsetTop in brskalniki

Oddelek: Izdelava spletišč
8738 (670) shorvat
»

JavaScript - removeChild problem

Oddelek: Programiranje
6788 (741) nemonemo
»

Javascript - izračun razlike v datumih

Oddelek: Programiranje
81523 (1378) kogledom

Več podobnih tem