Προς το περιεχόμενο

Refresh απο μονο του.

DestinyGR

Από τον DestinyGR
στο Web Design - Development

 Share

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

DestinyGR Rising Star

DestinyGR

Δημοσ.
Δημοσ.

Καλησπέρα στο forum. Μπαίνω στο ψητό.

Δοκίμασα να τρέξω ένα απλό παράδειγμα AJAX. Εχω δύο αρχεία. Το ένα είναι ένα απλό αρχείο php το οποίο εμφανίζει τον δοθέντα αριθμό και του προσθέτει 3. Το άλλο είναι ένα αρχείο html το οποίο έχει ένα πεδίο κειμένου και ένα κουμπί. Ο χρήστης γράφει ένα αριθμό στο πεδίο, το AJAX script το στέλνει στο αρχείο της php και αυτο με την σειρά του επιστρέφει τον αριθμό αυξανόμενο κατα 3, Δηλαδή αν ο χρήστης δώσει 5, θα επιστρέψει 8, Το πρόβλημα είναι οτι μετά την εκτέλεσει δεν μένει το αποτέλεσμα αλλα κάνει(η ιστοσελιδα??) refresh αυτόματα στην αρχική της κατάσταση. Τι μπορώ να κάνω για να παραμείνει εμφανής το αποτέλεσμα? 

<!DOCTYPE html>
<html>
<head>
<script>
function showUser(str) {
   str=document.getElementById("zoo").value;
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","returning.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input id="zoo" type="text">
<button onclick="showUser(document.getElementById('zoo').value)">Click me</button>
</form>
<br>
<div id="txtHint"><b>This text will change</b></div>

</body>
</html>
<?php
$q=intval($_GET['q']);
$q=$q+3;
echo $q;
?>

 

alou Proficient

alou

Δημοσ.
Δημοσ.

Δεν έχει event listener άρα δεν υπάρχει event, οπότε απλά φεύγουν τα form tags και δεν γίνεται submit κάτι. Η, ακόμα καλύτερα, ένα id στο button πχ #mybutton προσθέτεις στην αρχή του script 

document.getElementById("mybutton").addEventListener('click', showUser);

και αλλάζεις λίγο τη function με αυτό που λέει ο Predatorkill

  

function showUser (e) {
   e.preventDefault()
   ...
}

Το str value έτσι και αλλιώς το ξαναπαίρνεις μέσα στη συνάρτηση, δεν χρειαζόταν ούτε πριν να το περάσεις στο onclick ή σαν argument, τώρα βγάζεις τελείως το  

onclick="showUser(document.getElementById('zoo').value)"

Δεν είναι κακό που το μαθαίνεις αλλά να ξέρεις, αυτό είναι προσέγγιση 10 χρόνια πριν

  • Thanks 1
DestinyGR Rising Star

DestinyGR

Δημοσ.
  • Μέλος
Δημοσ. (επεξεργασμένο)
25 λεπτά πριν, alou είπε

Δεν έχει event listener άρα δεν υπάρχει event, οπότε απλά φεύγουν τα form tags και δεν γίνεται submit κάτι. Η, ακόμα καλύτερα, ένα id στο button πχ #mybutton προσθέτεις στην αρχή του script 


document.getElementById("mybutton").addEventListener('click', showUser);

και αλλάζεις λίγο τη function με αυτό που λέει ο Predatorkill 


function showUser (e) {
   e.preventDefault()
   ...
}

Το str value έτσι και αλλιώς το ξαναπαίρνεις μέσα στη συνάρτηση, δεν χρειαζόταν ούτε πριν να το περάσεις στο onclick ή σαν argument, τώρα βγάζεις τελείως το  


onclick="showUser(document.getElementById('zoo').value)"

Δεν είναι κακό που το μαθαίνεις αλλά να ξέρεις, αυτό είναι προσέγγιση 10 χρόνια πριν

Μπορείς να εξηγήσεις που μπαίνει ακριβώς το document.getElementById("mybutton").addEventListener('click', showUser); ? Επισης μπορείς παρακαλω να μου παραθέσεις καμία νεότερη τεχνική? Προσπαθώ να δημιουργήσω ένα απλό login/registration form το οποίο να συμπληρώνεται απο το χρήστη και μέσω ajax/php να πραγματοποιήτε η εισαγωγή στην βάση δεδομένων.

Επεξ/σία από DestinyGR
alou Proficient

alou

Δημοσ.
Δημοσ.

Κάπως έτσι, όλο μαζί. Το κομάτι του κώδικα που είναι για να υποστηρίζει IE5 / 6 σίγουρα δεν το χρειάζεσαι οπότε το έβγαλα 

<!DOCTYPE html>
<html>
<head>
<script>
document.getElementById("mybutton").addEventListener('click', showUser);

function showUser(e) {
   e.preventDefault();
   str=document.getElementById("zoo").value;
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return;
  } 

  var xmlhttp = new XMLHttpRequest();

  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","returning.php?q="+str,true);
  xmlhttp.send();
}
</script>
</head>
<body>

<form>
<input id="zoo" type="text">
<button id="mybutton">Click me</button>
</form>
<br>
<div id="txtHint"><b>This text will change</b></div>

</body>
</html>

 

Αν απλά θες να κάνεις αυτή τη δουλειά άστο όπως είναι, αν θες να δεις εναλλακτικές, ρίξε μια ματιά στο fetch αλλά και στους brower που το υποστηρίζουν

Για να μη βγάλεις τον ΙΕ από το παιχνίδι, υπάρχουν διάφορα polyfill

 

Πχ 

function showUser(e) {
   e.preventDefault();
   str = document.getElementById("zoo").value;

   if (str) {
     fetch('returning.php?q=' + str)
      .then(function(response) {
        return response.json();
      })
      .then(function(data) {
        document.getElementById("txtHint").innerHTML = data;
      });

   } else {
     document.getElementById("txtHint").innerHTML="";
   } 

}

 

  • Like 1
t(o.ot) Contributor

t(o.ot)

Δημοσ.
Δημοσ.

Αυτό που χρειάζεται είναι ένα type="button" στο button tag και τίποτα άλλο. Χωρίς αυτό, η HTML θεωρεί ότι το κουμπί είναι submit button και κάνει submit τη φόρμα μόλις το πατήσεις, εξ ου και η ανανέωση της σελίδας.

ajaxmonkey4hire Contributor

ajaxmonkey4hire

Δημοσ.
Δημοσ.

απλά βάζεις ένα 

return false;

στην showUser function (έχει το ίδιο αποτέλεσμα με το preventDefault) 

function showUser(str) {
   str=document.getElementById("zoo").value;
  if (str=="") {
    document.getElementById("txtHint").innerHTML="";
    return false;
  } 
  if (window.XMLHttpRequest) {
    // code for IE7+, Firefox, Chrome, Opera, Safari
    xmlhttp=new XMLHttpRequest();
  } else { // code for IE6, IE5
    xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
  xmlhttp.onreadystatechange=function() {
    if (this.readyState==4 && this.status==200) {
      document.getElementById("txtHint").innerHTML=this.responseText;
    }
  }
  xmlhttp.open("GET","returning.php?q="+str,true);
  xmlhttp.send();

  return false;
}

 

alou Proficient

alou

Δημοσ.
Δημοσ. (επεξεργασμένο)
3 ώρες πριν, ajaxmonkey4hire είπε

απλά βάζεις ένα 

return false;

στην showUser function (έχει το ίδιο αποτέλεσμα με το preventDefault)

Δε νομίζω, αν ήταν event callback  θα ήταν πρακτικά το ίδιο με preventDefault + stopPropagation που ιμχο είναι κακή πρακτική (για το return false εννοώ) αν δεν καταλαβαίνεις τι και γιατί το κάνεις, θα τύχει να ψάχνεις να λύσεις bug και δεν θα σου πάει το μυαλό ποτέ εκεί. Πχ, αν έχεις ένα modal και ένα event listener στο body για να κλείσει, αν κάνεις κλικ στο κουμπί που έχει return false δεν θα το ακούσει ποτέ το body listener.

Αν το fn δεν αντιστοιχεί σε event listener callback, to return false λογικά δε θα σταματήσει τη φόρμα να γίνει submit.

Επεξ/σία από alou
  • Like 1
DestinyGR Rising Star

DestinyGR

Δημοσ.
  • Μέλος
Δημοσ.
Στις 30/5/2018 στις 9:12 ΠΜ, t(o.ot) είπε

Αυτό που χρειάζεται είναι ένα type="button" στο button tag και τίποτα άλλο. Χωρίς αυτό, η HTML θεωρεί ότι το κουμπί είναι submit button και κάνει submit τη φόρμα μόλις το πατήσεις, εξ ου και η ανανέωση της σελίδας.

Δούλεψε :). Επίσης δούλεψε και η η πρόταση με το event.preventDefault(). Μιας και έχω το thread ανοικτό, υπάρχει κάποιο εργαλείο που να με βοηθήσει με το front-end κομμάτι? Γενικά ώστε να παρω ιδέα πως να μορφοποιήσω την ιστοσελίδα.

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

Πρέπει να είστε μέλος για να αφήσετε σχόλιο

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

Εγγραφείτε με νέο λογαριασμό στην κοινότητα μας. Είναι πανεύκολο!

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

Σύνδεση

Έχετε ήδη λογαριασμό; Συνδεθείτε εδώ.

Συνδεθείτε τώρα
 Share
Προς την λίστα θεμάτων
  • Δημιουργία νέου...