Jquery onClick load

Door Donny Wie weet op 09-09-2013 10:40 gewijzigd op 09-09-2013 10:40

1.078 views

Hoi allemaal,

Ik gebruik onderstaand script om in te loggen. Deze wil ik gaan ombouwen naar het volgende:

Als ik op een link USERS klik, wil ik dat de pagina users.php geladen word. Echter is het punt wel dat de pagina ook een GET waarde kan bevatten. Hoe los ik dit op?

Dit is een voorbeeld met POST. Hoe kan ik dit veranderen?

Groet Donny


    <script>
// listen for click
$('.login_form').on('submit', function(e) {
    $.post( 'pages/index/login.php', $(this).serialize(), function(response) {
        $("#login_message").html( response );
    });
    // disable default action
    e.preventDefault();
});
</script>

Kris Peeters

09-09-2013 11:01

Donny Wie weet op 09/09/2013 10:40:39

... om in te loggen. Deze wil ik gaan ombouwen ...

Veel zal er niet van over blijven, hoor.

Een login doe je met post.
Een link (met de id van een gebruiker) doe je niet met post. Dat gebeurt gewoon met GET.

Okay, hoe zien die links er uit?
Je laat die genereren met gegevens van de database
Iets als dit?

echo '<a href="users.php?id=' . $row['id'] . '">' . $row['username'] . '</a>'

Donny Wie weet

09-09-2013 13:23

Kris,

De links zien er inderdaad uit als zoals jouw voorbeeld. Soms kan het wel zijn dat de GET waarde van ID veranderd in wat anders. Het kan dus meerdere soorten GET bevatten.

De link kan van 1 tot 7 verschillende GET waardes bevatten.

Kris Peeters

09-09-2013 13:35

Data toevoegen aan een HTML element kan altijd in het data- attribute.
Je kan daar ook meerdere dingen kwijt ...

bv.


<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function() {
  // elementen cashen
  var links = $('#userlink li');
  var responseDiv = $('#response');
  
  // events
  links.click(function(e) {
    id = $(this).data('id');  // met het data- atttribute
    $.ajax({
      url: 'users.php',
      data: {id: id},      // object-notatie, waarmee je zowel GET als POST data kan toevoegen
      success: function(data) {
        responseDiv.html(data);
      }
    });
  });
});
</script>
<style>
  #userlink li {
    cursor: pointer;
  }
</style>
<ul id="userlink">
  <li data-id="15">Freddy</li>
  <li data-id="22">Tom</li>
  <li data-id="23">Jan</li>
  <li data-id="27">Cindy</li>
</ul>
<div id="response"></div>

users.php


<?php
$user = !empty($_GET['id']) ? (int) $_GET['id'] : 0;
// jij doet dit met een SQL ...  WHERE id = " . $user . ", ik doe het voorlopig met een array
$users = array(
  15 => 'Freddy zijn pagina ...',
  22 => 'Tom zijn pagina ...',
  23 => 'Jan zijn pagina ...',
  27 => 'Cindy haar pagina ...',
);
if (isset($users[$user])) {
  echo $users[$user];
  exit;
}
?>

Reageren

Inloggen om te reageren