show/hide li Jquery

Gio123 · 15 Ιανουαρίου 2015

Καλησπέρα,

Έχω φτιάξει μία σελίδα όπου έχω μία λίστα <u>...</u> και μέσα στο <ul> έχω 4 <li>. Τα 3 από τα 4 είναι hidden. H λίστα είναι sortable δηλαδή μπορεί ο χρήστης να τους αλλάξει σειρά πάνω-κάτω. Όταν ο χρήστης θελήσει να εμφανίσει ένα επιπλέον <li> πατάει ένα κουμπί και εμφανίζεται ακριβώς από κάτω από το ήδη υπάρχον. (πχ είναι σε σειρά 1 - 2). Αν τους αλλάξει σειρά και γίνει 2 - 1 και κάνει hidden το πρώτο δηλαδή το 2 και ξαναπατήσει το κουμπί για να εμφανίσει κάποιο <li>, τότε αυτό εμφανίζεται πάνω από αυτό που υπάρχει ήδη, ενώ εγώ θα ηθέλα κάθε φορά που πατάει το κουμπί (Προσθήκη) να εμφανίζεται κάτω από αυτά που ήδη υπάρχουν. Καμιά ιδέα για το πως μπορεί να γίνει.

Ευχαριστώ.

</ul>

nucleus · 15 Ιανουαρίου 2015

Υπάρχει η append https://api.jquery.com/append/

<script>
$("#b1").on("click",function(){
    $("#sortable").append( "<li class='default'  id='Item_4' style='cursor:pointer'>New item</li>" );
});
</script>

Όταν πατάει το Προσθήκη εμφανίζεται ένα νέο li με όνομα New Item. Πρέπει να βρεις τρόπο να του δίνεις νέο και ξεχωριστό id

Gio123 · 16 Ιανουαρίου 2015

Αν ήθελα να έχω μέσα στο <li>

<select name="SelectName_Pro1" id="SelectName_Pro1" class="SelectRequest" onchange="OnSelectionChange1(this)"> <option id="selected" value="-1" selected>Όνομα-Επώνυμο</option>

<?php

include 'firstname_lastname.php';

$arrayfirst = $_SESSION['arrayfirst'];

$arraylast = $_SESSION['arraylast'];

$arrayidpro = $_SESSION['idpro'];

$length = count($arraylast);

for ($i = 0; $i < $length; $i++) {

echo "<option value=\"$arrayidpro[$i]\">$arrayfirst[$i] $arraylast[$i]</option>\n";

}

?>

</select>

η php με το include firtsname_lastname; πως θα γινόταν μέσα στην εντολή append;

Σε ευχαριστώ για την βοήθεια.

libereas · 16 Ιανουαρίου 2015

δεν ξέρουμε τι έχεις αποθηκεύσει στα array σου αλλά εστω 3 κανονικά array

$arrayfirst = array("mpananes", "mila", "axladia");

$arraylast = array("mpiskota", "axladia", "karota");

$arrayidpro = array(1, 2, 3);

το scriptάκι που θες είναι κάπως έτσι...

<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>

<script>
$(document).ready(function(){
$("#button").click(function(){
$("#menu").append($("#select"));
});
});
</script>
</head>
<body>
<select name="SelectName_Pro1" id="SelectName_Pro1" class="SelectRequest" onchange="OnSelectionChange1(this)">                 
                <option id="selected" value="-1" selected>name</option>
                                           <?php
                                                
                                                $arrayfirst = array("mpananes", "mila", "axladia");
                                                $arraylast = array("mpiskota", "axladia", "karota");
                                                $arrayidpro = array(1, 2, 3);
                                                $length = count($arraylast);
 
                                                for ($i = 0; $i < $length; $i++) {  
                                                    echo "<option id='select' value=\"$arrayidpro[$i]\">$arrayfirst[$i] $arraylast[$i]</option>\n";
                                                }
                                            ?>
                                </select>
<div id="menu">
</div>
<button id="button">append</button>
</body>
</html>

δες περίπου πως δουλεύει.

nucleus · 16 Ιανουαρίου 2015

Δεν μπορώ να καταλάβω τι κάνει ο κώδικας που παρέθεσες.

Θέλεις όταν πατάς το button append να κάνει append ένα option στο select χρησιμοποιώντας php?

Η όταν πατάς το append να βάζει ένα li που περιέχει το select και τα options του και γίνεται generate από τον κώδικα php?

Gio123 · 16 Ιανουαρίου 2015

Το 2, κάθε li περιέχει ένα select και κάποια <input type=tetx>.

Πως θα χρησιμοποιήσω τον παραπάνω κώδικα έτσι ώστε να γεμίζω το select σε σχέση με την append και την php.

Τις τιμές τις παίρνω από το αρχείο include 'firstname_lastname';

nucleus · 16 Ιανουαρίου 2015

Για δοκίμασε μια το παρακάτω

<ul id="sortable">
  <li class="default"  id="Item_1"  style="cursor:pointer">Item_1</li>
  <li class="default"  id="Item_2" style="cursor:pointer">Item_2</li>
  <li class="default" id="Item_3" style="cursor:pointer">Item_3</li>
  <li class="default"  id="Item_4" style="cursor:pointer">Item_4</li>
</ul>
<button id="b1">append</button>
<script>
$("#b1").on("click",function() {
    $("#sortable").append("<?php
        include 'firstname_lastname.php';
        $arrayfirst = $_SESSION['arrayfirst'];
        $arraylast = $_SESSION['arraylast'];
        $arrayidpro = $_SESSION['idpro'];
        $length = count($arraylast);

        $select = "<li><select name='SelectName_Pro1' id='SelectName_Pro1' class='SelectRequest' onchange='OnSelectionChange1(this)'><option id='selected' value='-1' selected>name</option>";
        $htmlToAppend = $select;
        for ($i = 0; $i < $length; $i++) {
            $htmlToAppend = $htmlToAppend . "<option value='$arrayidpro[$i]'>$arrayfirst[$i] - $arraylast[$i]</option>";
        }
        $htmlToAppend = $htmlToAppend . "</select></li>";
        echo($htmlToAppend);
    ?>");
});
</script>

Στην ουσία κάνει generate τον html κώδικα για το select και τα options σε μια php μεταβλητή και μετά απλώς το κάνει echo στην javascript.

Gio123 · 16 Ιανουαρίου 2015

Φίλε ωραίο αυτό σαν απάντηση δουλεύει μια χαρά αλλά έχω πρόβλημα στην εμφάνισει

Αν έχω αυτό τον κώδικα που θέλω να εμφανίζεται κάθε φορά μέσα στο li

 <li title="Πατήστε επάνω για να μετακινήσετε τα πεδία με την σειρά την οποία θέλετε." class="default" value="l1" id="Item_1"  style="cursor:pointer">Επιβλέπων:  
                            <select name="SelectName_Pro1" id="SelectName_Pro1" class="SelectRequest" onchange="OnSelectionChange1(this)">
                                <option id="selected" value="-1" selected>Όνομα-Επώνυμο</option>
                                           <?php
                                                include 'firstname_lastname.php';
                                                $arrayfirst = $_SESSION['arrayfirst'];
                                                $arraylast = $_SESSION['arraylast'];
                                                $arrayidpro = $_SESSION['idpro'];
                                                $length = count($arraylast);

                                                for ($i = 0; $i < $length; $i++) {  
                                                    echo "<option value=\"$arrayidpro[$i]\">$arrayfirst[$i] $arraylast[$i]</option>\n";
                                                }
                                            ?>
                                </select>  Συνεπιβλέπων: <input id="textpro1" type="text" size="25" disabled/><br><br>
                                <div class="ui-widget">
                                        Tίτλος:       
                                        <input type="text" name="textsubj1" id="textsubj1" class="clearable" maxlength="200"  style="border:1 solid #C2C2D6"/>
                                        <br><br>
                                </div>
                                
                                Συνεργάτης:  <input type="number" name="numberid_stud1" disabled id="numberid_stud1" maxlength="50" class="text2" style="border:1 solid #C2C2D6"/>
                                <span class="tab"></span><input type="button" id="mybutton" value="Διαγραφή" disabled onclick="delete_div(this.id)"  style="cursor:pointer"/>
                    </li>

μέσα στην εντολή append σε αντιστοιχία με τα παραπάνω πως πρέπει να γραφτούν γιατί δεν τα εμφανίζει καθόλου ωραία και δεν μπορώ να βρω το λάθος να και ο κώδικας με την append

 $("#sortable").append( "<li class='default'  id='Item_'" + iCnt + "style='cursor:pointer'>Επιβλέπων:  
                            <?php include 'firstname_lastname.php'; 
                            $arrayfirst = $_SESSION['arrayfirst']; 
                            $arraylast = $_SESSION['arraylast'];  
                            $arrayidpro = $_SESSION['idpro']; 
                            $length = count($arraylast); 
                            $select = "<li><select name='SelectName_Pro1' id='SelectName_Pro1' class='SelectRequest' onchange='OnSelectionChange1(this)'>
                            <option id='selected' value='-1' selected>name</option>"; 
                            $htmlToAppend = $select; 
                            for ($i = 0; $i < $length; $i++) {
                                  $htmlToAppend = $htmlToAppend . "<option value='$arrayidpro[$i]'>$arrayfirst[$i] - $arraylast[$i]</option>"; 
                            } 
                            $htmlToAppend = $htmlToAppend . "</select></li>"; echo($htmlToAppend); ?> 
                              Συνεπιβλέπων: <input id='textpro1' type='text size='25' disabled/><br><br><div class='ui-widget'>
                            Tίτλος:       <input type='text' name='textsubj'" + iCnt + " id='textsubj'"+ iCnt +" class='clearable' maxlength='200 style='border:1 solid #C2C2D6'/><br><br></div>
                            Συνεργάτης: <input type='number' name='numberid_stud1' disabled id='numberid_stud1' maxlength='50' class='text2'  style='border:1 solid #C2C2D6'/><span class='tab'></span>
                            <input type='button' id='mybutton' value='Διαγραφή'  onclick='delete_div(this.id)'  style='cursor:pointer'/>

                            </li>" );

nucleus · 16 Ιανουαρίου 2015

'Ανοιξε τα developer tools του browser που χρησιμοποιείς. Google για το που είναι ανάλογα με τον browser σου και κοίτα στην Console.Δες εκεί τα λάθη.

Βλέποντας αυτό

<li title="Πατήστε επάνω για να μετακινήσετε τα πεδία με την σειρά την οποία θέλετε." class="default" value="l1" id="Item_1" style="cursor:pointer">Επιβλέπων:  
<select name="SelectName_Pro1" id="SelectName_Pro1" class="SelectRequest" onchange="OnSelectionChange1(this)">
<option id="selected" value="-1" selected>Όνομα-Επώνυμο</option>
<?php
include 'firstname_lastname.php';
$arrayfirst = $_SESSION['arrayfirst'];
$arraylast = $_SESSION['arraylast'];
$arrayidpro = $_SESSION['idpro'];
$length = count($arraylast);

for ($i = 0; $i < $length; $i++) {
echo "<option value=\"$arrayidpro[$i]\">$arrayfirst[$i] $arraylast[$i]</option>\n";
}
?>
</select>  Συνεπιβλέπων: <input id="textpro1" type="text" size="25" disabled/><br><br>
<div class="ui-widget">
Tίτλος:       
<input type="text" name="textsubj1" id="textsubj1" class="clearable" maxlength="200" style="border:1 solid #C2C2D6"/>
<br><br>
</div>

Συνεργάτης:  <input type="number" name="numberid_stud1" disabled id="numberid_stud1" maxlength="50" class="text2" style="border:1 solid #C2C2D6"/>
<span class="tab"></span><input type="button" id="mybutton" value="Διαγραφή" disabled onclick="delete_div(this.id)" style="cursor:pointer"/>
</li>

Πρώτα απ' όλα το element <li> δεν έχει attribute title. Επίσης αφήνεις κενά με μην ξεχνάς ότι είσαι μέσα σε script (javascript) για το append.

Μήπως καλό είναι να υπάρχει αρχικά η λίστα και απο κάτω σε ξεχωριστή φόρμα τα πεδία που θες να βάλεις μέσα στο li?

Βγαίνει το append και μπαίνει insert.Η δουλειά της φόρμας είναι απλώς να βάζει τα δεδομένα στην λίστα. Μετά φτιάχνεις το order και υπάρχει και εκεί save.

Σύνδεση

show/hide li Jquery

Προτεινόμενες αναρτήσεις

Gio123

nucleus

Gio123

libereas

nucleus

Gio123

nucleus

Gio123

nucleus

Δημιουργήστε ένα λογαριασμό ή συνδεθείτε για να σχολιάσετε

Δημιουργία λογαριασμού

Σύνδεση

Σύνδεση