Ajax results, μετά το κλικ.

[sinikos]

Καλησπέρα. Έφτιαξα ένα πεδίο που μπορώ να κάνω αναζήτηση από την βάση και με ajax μου παρουσιάζει τα αποτελέσματα.

Δηλαδή έχω ένα input πεδίο και με onkeyup ρωτάει την βάση αν υπάρχει αποτέλεσμα. Μετα μου επιστρέφει τα αποτελέσματα.

Η συνταξή μου στην js είναι κάπως έτσι

$(document).ready(function() {
	$("#search").keyup(function() {
		var keyword = $(this).val();
		if(keyword != "") {
			$.ajax({
				url: "<?php echo base_url();?>search_ajax/search",
				data: {keyword : keyword},
				type: "POST",
				success: function(data) {
					if(data != "") {
						$(".result").html(data).show();
					} else {
						$(".result").html("").hide();
					}
				}
			});
		} else {
			$(".result").html("").hide();
		}
	});
	$(document).click(function() {
		$("#search").val("");
		$(".result").html("").hide();
	});
});

και στην php κάπως έτσι
 

public function search(){
        $keyword = sanitize($this->input->post('keyword '));     
        $this->db->select('*');
        $where = "name LIKE '%$keyword%'";
        $this->db->where($where);
        $this->db->from('users');
        $user_result = $this->db->get();
        $users = $user_result->result();
        $user_row = $user_result->row();

        $num_rows = $user_result->num_rows();
        
        echo '<table class="table table-hover"><tbody>';  

        if($num_rows >= 1){
        foreach($users as $user){
            
            echo '<tr><td>';
            echo '<b>'.$user->user_name;      
            echo ' - '.$user->user_realname.'</b><br>';
            echo '</td></tr>';
        }
        } else {      
           echo "The user not found";
        }  
    echo '</table> </tbody>';    
 }

Τα αποτελέσματα εμφανίζονται μια χαρά σαν λίστα κάτω από το search, όπως επίσης και αν δεν βρει αποτελέσματα, εμφανίζεται μια χαρά το "The user not found". Αυτό που δεν μπορώ να κάνω με τίποτα όμως είναι το εξής...

Απο κάτω έχω κάποια πεδία input html, πχ username, realname, surname, phone κλπ. Δεν μπορώ να βρω με τίποτα πως μπορω, αφου επιλέξω μία εγγραφή από τα αποτελέσματα, να μου συμπληρώσει τα πεδία html.

Παράδειγμα: Ανοίγει η σελίδα. Όλα τα πεδία είναι κενά. Αρχίζω να αναζητώ, με το που γράφω S, στα αποτελέσματα μου βγάζει Sinikos, Sfinos κλπ. Με το που πατάω στο Sinikos θέλω να μου συμπληρώσει κάτω τα πεδία.

Username: Sinikos

Realname: Γιαννης

Surname: mpla mpla

Phone: 123456

Δηλαδή στο data που έρχεται, εκτός από το echo μπορώ να στείλω και μεταβλητές? Δοκίμασα να βάλω και στην κάθε εγγραφή ένα href με το id του user. Όταν παταω επάνω όμως, οπως είναι λογικό, πάει να ανοίξει νέα σελίδα και κάνει refresh.

[Predatorkill]

Το onkeyup στα searchbox στελνει αχρηστα request και κατα συνεπεια αχρηστα queries στη βαση. Πρεπει να κανεις debounce, π.χ. http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/  ωστε να στελνει request μονο οταν περασουν πχ 500ms απο το τελευταιο key up του χρηστη. Επισης, καλο θα ηταν η αναζητηση να γινεται μετα απο την εισαγωγη 3-4 χαρακτηρων (αν φυσικα δεν υπαρχουν δεδομενα με 1 ή 2 χαρακτηρες).

 

Επεξ/σία 8 Μαΐου 2019 από Predatorkill

[sinikos]

53 λεπτά πριν, Predatorkill είπε

Το onkeyup στα searchbox στελνει αχρηστα request και κατα συνεπεια αχρηστα queries στη βαση. Πρεπει να κανεις debounce, π.χ. http://benalman.com/code/projects/jquery-throttle-debounce/examples/debounce/

ααα καταλαβα. Δίνει κάποιο delay για να ψάξει ωστε να μην στέλνει συνέχεια queries. Σε ευχαριστώ!

Στα γρήγορα δοκίμασα κάπως έτσι αλλά δεν δουλεψε. Θα το ψάξω καλύτερα. Τωρα με καει πιο πολύ να λύσω το πρώτο μου πρόβλημα.

$(document).ready(function() {
    $("#search").keyup($.debounce(250, function() {
        var keyword = $(this).val();
        if(keyword != "") {
            $.ajax({
                url: "<?php echo base_url();?>search_ajax/search",
                data: {keyword : keyword},
                type: "POST",
                success: function(data) {
                    if(data != "") {
                        $(".result").html(data).show();
                    } else {
                        $(".result").html("").hide();
                    }
                }
            });
        } else {
            $(".result").html("").hide();
        }
    });
    $(document).click(function() {
        $("#search").val("");
        $(".result").html("").hide();
    });
}));

 

 

Επεξ/σία 8 Μαΐου 2019 από sinikos

[sinikos]

Ή τουλαχιστον καποιο keyword ή μεθοδο, για να το ψαξω.

[Predatorkill]

Για δες εδω

https://stackoverflow.com/questions/32312604/populate-a-form-after-submit-with-jquery-and-ajax-from

[sinikos]

Στις 9/5/2019 στις 4:54 ΜΜ, Predatorkill είπε

Για δες εδω

https://stackoverflow.com/questions/32312604/populate-a-form-after-submit-with-jquery-and-ajax-from

 Με αυτο που μου έστειλες, κατάφερα να το φτάσω μέχρι ένα  σημείο. Δηλαδή ζητάω από την php και μου επιστρέφει τα data με json.

Μετά στο drop down menu μου εμφανίζονται όλα τα αποτελέσματα. Αυτό που μου λείπει τώρα έιναι, πως μπορώ να "τρέξω κάτι όταν κάποιος κάνει κλικ επάνω σε ένα <tr>. Πχ ένα alert με το όνομα που έχει επιλέξει.

Άκυρο, το βρήκα.

 

Ένα τελευταίο, πολύ μικρό προβληματάκι είναι το εξής:

Έφτιαξα σε κάθε row που φτιάχνεται με την js, ένα link που τρέχει μία function και θέλω να περάσω κάποιες παραμέτρους. Όπως το έχω φτιάξει, περνάει μια χαρά το id το οποίο είναι int, αλλά δεν μου περνάει το username επειδή είναι string. Ξέρω οτι κάτι παίζει με τα quotes , αλλά δεν μπορώ να βρω τι θα κάνω. Έχω δοκιμάσει 100 τρόπους αλλά δεν...

var user_html = '<tr style="text-decoration:none"><td><b><a href="#" onclick="user_sec('+user.user_id+','+user.user_name+')">'+user.user_name+surname+'</a>'+phone+phone_sep+mobile+'</td></tr>';
 $("#table_results").append(user_html);

Αυτό user.user_id (ειναι int) το στέλνει στην function κανονικά , αυτό user.user_name (ειναι string) δεν το στέλνει.

Δοκίμασα και με escape string κάπως έτσι onclick="user_sec('+user.user_id+',\"'+user.user_name+'\")" αλλά τίποτα....

Επεξ/σία 12 Μαΐου 2019 από sinikos

[Predatorkill]

Βαλε σε code tags τον κωδικα μαζι με τη συναρτηση να καταλαβουμε τι γινεται

[sinikos]

μην γραφω όλο το js

στο success του ajax

$.each(data.users, function(i, user){
                      var name_f = user.user_name;
                      var user_html = '<tr style="text-decoration:none"><td><b><a href="#" onclick="user_sec('+user.user_id+','+name_f+')">'+name_f+'</a></td></tr>';          
                      $("#table_results").append(user_html);
                      })  

και η function που θέλω να καλέσει με το id και το user_name είναι

function user_sec(user_id,user_namef){
    alert(user_namef);
}

Αν βάλω στο αρχικό name_f κάποιο νουμερο (int),  δηλαδή var name_f = 5; Η συνάρτηση user_sec καλείται και εκτελείται κανονικά. Αν όμως η  name_f έχει string (όπως τώρα που παίρνει το user.user_name), δεν καλείται η συνάρτηση user_sec.