Forum PHP Romania - Discutii despre PHP, MySQL, Javascript, AJAX, etc

Scris: **Vin Apr 04, 2014 3:27 pm**

Salut

Am si eu o problema, incerc sa generez din jquery niste campuri html care contin si un link de forma
<a href='#' onclick="remove_cell(123)">clic aici pentru stergere celula</a>

problema e ca nu am reusit sa fac sa mearga functia de la onclick fara sa ia si a href-ul (adica ma intereseaza cand dau click sa execute functia remove_cell() dar sa nu ma redirecteze la a href="#" (un fel de preventdefault))

codul demo l-am pus la http://jsfiddle.net/ggn6L/7/

ceva idei de abordare a problemei?

Scris: **Vin Apr 04, 2014 9:22 pm**

Salut

1)

Cod: Selectaţi tot

<html>

<script type="text/javascript" src="js/jquery-1.9.1.js"></script>
<div id="content">
    <form action="blabla" method="post">
        <a href="#" id="genereaza" onclick="genereaza(); return false;">click aici pentru generare</a>
        <span id="tr_cell_0"></span>
        <input name="total_cels" id="total_cels" type="hidden" value="0">
    </form>
</div>

<script>
<!-- $(document).ready(function() { -->
    <!-- $('#genereaza').click(function(event) { -->
   function genereaza ()
   {
        <!-- event.preventDefault; -->
        var total_cels = parseInt( $('#total_cels').val() );
        var new_cell = total_cels + 1;
        var content_cell = generate_cell(new_cell);
        $("#tr_cell_"+total_cels).append(content_cell);
        $("#tr_cell_"+total_cels).after("<span id='tr_cell_"+new_cell+"'></span>");
        $("#total_cels").val(new_cell);
   }
    <!-- }); -->
<!-- }); -->

function generate_cell(new_cell) {
    return "<br><a href='#' onClick='remove_cell("+new_cell+"); return false;'>click aici pentru a sterge celula "+new_cell+"</a>" + 
        "<br><label for='label_"+new_cell+"'>Label celula "+new_cell+"</label>" + 
        "<input name='label_"+new_cell+"' type='text' id='label_"+new_cell+"'>";
}

function remove_cell(id_cell) {
    alert(id_cell);
    //$( "#tr_cell_"+id_cell).remove();
}
</script>
</html>

2) Daca nu vrei sa mai faci inca o functie ->
event.preventDefault; ==> event.preventDefault();
In functia generate_cell() tot trebuie sa pui return false la onclick.

Nici nu mai e nevoie de acel '#' la href.

Scris: **Vin Apr 04, 2014 9:32 pm**

in afara ca ai pus genereaza() intr-o functie nu inteleg ce ai facut in plus?

pe mine ma intereseaza sa functioneze linia asta

return "<br><a href='#' onClick='remove_cell("+new_cell+"); return false;'>click aici pentru a sterge celula "+new_cell+"</a>" +

problema e ca in teste nu imi ia return false ci imi ia direct a href-ul...
vezi in exemplul meu cum functioneaza si testeaza acolo, eu nu am reusit

Scris: **Vin Apr 04, 2014 10:00 pm**

Am facut functia genereaza() ca sa o pun la onclick la linkul acela.

Am facut test pe jsfiddle, dar acolo nu imi pune # la url, de aceea am pus codul la mine pe localhost ca sa testez.

La click, pe 'click aici pentru generare' iti adauga inca un input, iar la click pe 'click aici pentru a sterge celula' iti afiseaza un alert deocamdata.
Asta si ar trebui sa faca...

Ca sa nu mai schimbe url-ul in browser (sa puna acel #) pui 'return false;' la onclick.
La actiunea de onlclick din jquery trebuie sa modifici event.preventDefault; in event.preventDefault();

Cand dai click pe primul link iti pune '#' in browser daca pui event.preventDefault() ?

EDIT: Pe jsfiddle da o eroare de JS. Zice ca nu exista functia remove_cell();

Scris: **Vin Iul 11, 2014 11:57 pm**

Salutare,

Daca nu ma insel, din punctul de vedere al <a href='#' onClick='remove_cell("+new_cell+"); return false ...... remove_cell() nu exista.
In jsfiddle mi-a mers codul de mai jos.

Cod: Selectaţi tot

$(document).ready(function() {
    $('#genereaza').click(function(event) {
        event.preventDefault;
        var total_cels = parseInt( $('#total_cels').val() );
        var new_cell = total_cels + 1;
        var content_cell = generate_cell(new_cell);
        $("#tr_cell_"+total_cels).append(content_cell);
        $("#tr_cell_"+total_cels).after("<span id='tr_cell_"+new_cell+"'></span>");
        $("#total_cels").val(new_cell);
    });
    
        
    $("body").on('click','.rm',function(evt){
        console.log(evt)
        console.log($(this).data('cell'))
        
    });
    
    
});

function generate_cell(new_cell) {

// Am adaugat la link class='rm' si  
// data-cell='new_cell'  pentru a transmite informatia mai departe

    return "<br><a href='#' class='rm' data-cell='"+new_cell+"' >click aici pentru a sterge celula "+new_cell+"</a>" + 
        "<br><label for='label_"+new_cell+"'>Label celula "+new_cell+"</label>" + 
        "<input name='label_"+new_cell+"' type='text' id='label_"+new_cell+"'>";
}

Forum PHP Romania - Discutii despre PHP, MySQL, Javascript, AJAX, etc

problema rulare jquery sau problema de logica?

problema rulare jquery sau problema de logica?

Re: problema rulare jquery sau problema de logica?

Re: problema rulare jquery sau problema de logica?

Re: problema rulare jquery sau problema de logica?

Re: problema rulare jquery sau problema de logica?