[ASK] Alphabetic Sort Menu


Status
Not open for further replies.
zongvoc

zongvoc

Beginner 2.0
belom ada yg online Tuan...
jelasin step per step aja ya Tuan, maklum saya nubi.

contoh ke 1 punya Tuan vkios yg tadi saya copas dan saya rangkai menjadi:
<html>
<head>
<style type="text/css">
#klik li{display:inline; padding-left:5px; cursor:pointer;}
</style>

<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>


<script>

$("#klik li").click(function(){
var abjad = $(this).text();
alert(abjad);
$.ajax({
type: "POST",
url: 'algoritma.php',
data: 'abjad='+abjad,
success: function(html) {
$("#hasil").text("tampilkan data huruf : "+abjad+"<br />"+html);
}
});

});

</script>
</head>
<body>
<ul id="klik">
<li>A</li>
<li>B</li>
<li>C</li>
<li>D</li>
<li>E</li>
<li>Z</li>
</ul>
<div id="hasil"></div>
</body>
</html>
Click to expand...

tapi alert abjadnya tdk muncul. jujurnya sih saya lom faham alurnya om T_T
 
vkios01

vkios01

Expert 1.0
zongvoc said:
belom ada yg online Tuan...
jelasin step per step aja ya Tuan, maklum saya nubi.

contoh ke 1 punya Tuan vkios yg tadi saya copas dan saya rangkai menjadi:


tapi alert abjadnya tdk muncul. jujurnya sih saya lom faham alurnya om T_T
Click to expand...

HTML: 
<script type="text/javascript">
$(function(){
$("#klik li").click(function(){
var abjad = $(this).text();
alert(abjad);
$.ajax({
type: "POST",
url: 'algoritma.php',
data: 'abjad='+abjad,
success: function(html) {
$("#hasil").text("tampilkan data huruf : "+abjad+"<br />"+html);
}
});

});
});
</script>

coba replace dengan ini, itu karena belum dianggap sebagai function.
itu harus ada dulu file algoritma.php nya. coba dibawah ini save jadi algoritma.php
ini nanti bisa disesuaikan sendiri kalau ingin ambil dari database

PHP: 
<?php
$abjad = $_REQUEST['abjad'];
echo 'isi dari huruf '.$abjad.' adalah blabla';
?>


output kira2 klik D:

tampilkan data huruf : D
isi dari huruf D adalah blabla
 
zongvoc

zongvoc

Beginner 2.0
SUkses!

Udah bisa Tuan thx, nie penampakannya Tuan:
Capture.PNG

nie kodingan saya:

Proses.php
Code: 
<?php

$host="localhost"; 
$username="root"; 
$password=""; 
$database="game"; 
$connect=mysql_connect($host,$username,$password); 
mysql_select_db($database,$connect); 


$alfa = $_POST['abjad'];   

$qry=mysql_query("SELECT post_title FROM plsgms_posts WHERE LEFT( post_title, 1 ) =  '".$alfa."' LIMIT 0 , 10 ");   
if (!$qry) {
		die("Query gagal ditampilkan");
	}

while($fetch = mysql_fetch_array($qry)){
		
        echo $fetch['post_title'];
		echo '<br>';
}
 
?>

test3.php
Code: 
<html>
<head>
<style type="text/css">
#klik li{display:inline; padding-left:5px; cursor:pointer;}
</style>


<script src="js/jquery-1.7.2.js" type="text/javascript"></script>
<script src="js/jquery-1.7.2.min.js" type="text/javascript"></script>



</head>
<body>

<div id="klik">

  <ul>
  <?php foreach(range('A','Z') as $i) echo '<li>'.$i.'</li>'; ?> 
  </ul>
  
 </div>
  <div id="hasil"></div>
<script type="text/javascript">
			
$("#klik li").click(function(){
	
    var abjad = $(this).text();
   // alert(abjad);
    $.ajax({
        type: "POST",
        url: 'proses.php',
        data: 'abjad='+abjad,
        success: function(data) {
		 $("#hasil").html(data);
            //$("#hasil").text("tampilkan data huruf : "+abjad+"<br />"+html);
      }
    });
   
});

</script>

</body>
</html>

Nah sekarang saya mw buat, secara default begitu di load huruf A yg terkirim. sebelumnya khan hasil di klik2 terlebih dahulu.

Nanti saya kirim hasilnya lagi Tuan...

:8: www.diskusiwebhosting.com
 
vkios01

vkios01

Expert 1.0
Nah sekarang saya mw buat, secara default begitu di load huruf A yg terkirim. sebelumnya khan hasil di klik2 terlebih dahulu.

Nanti saya kirim hasilnya lagi Tuan...

:8: www.diskusiwebhosting.com
Click to expand...



HTML: 
<script type="text/javascript">
---script yang sudah ada---

$(document).ready(function (){
  $.ajax({type: "POST",url: 'proses.php',data: 'abjad=A',success: function(data) {$("#hasil").html(data);}});
});
</script>


coba ditambahin script diatas, $(document).ready() bisa tidak dipakai sih sebetulnya. artinya isi dari scriptnya tidak ditampilkan/dieksekusi dulu sampai semua halaman web terload semua.

kode saya jadikan satu baris, sepertinya sudah mulai mengerti :D
 
zongvoc

zongvoc

Beginner 2.0
vkios01 said:
HTML: 
<script type="text/javascript">
---script yang sudah ada---

$(document).ready(function (){
  $.ajax({type: "POST",url: 'proses.php',data: 'abjad=A',success: function(data) {$("#hasil").html(data);}});
});
</script>


coba ditambahin script diatas, $(document).ready() bisa tidak dipakai sih sebetulnya. artinya isi dari scriptnya tidak ditampilkan/dieksekusi dulu sampai semua halaman web terload semua.

kode saya jadikan satu baris, sepertinya sudah mulai mengerti :D
Click to expand...

saya pake ini Tuan berhasil juga sih:

Code: 
$(window).load(function () {
  var abjad = "a";
   // alert(abjad);
    $.ajax({
        type: "POST",
        url: 'proses.php',
     data: 'abjad='+abjad,
        success: function(data) {
		 $("#hasil").html(data);
            //$("#hasil").text("tampilkan data huruf : "+abjad+"<br />"+html);
      }
    });
});

Simple punya Tuan keknya hehehe...
 
Status
Not open for further replies.

Top