Krijg id vanuit input naar ajax

[dudstone]

ten eerste hallo,

ik ben een beetje aan het hobbyen aan mijn eigen CMS systeem, maar ik zit vast bij een stuk ajax script.

Ik wil wat info doorsturen naar een php script, waarbij het php script het id bekijkt en deze dan verwijderd uit de database.

het javascript:
bij "data" wil ik dat hij controleerd op welk button er is geklikt en deze doorstuurd met de "GET" type.
[JS]<script language="javascript" type="text/javascript">
$(document).ready(function(){
$("#deleteid").click(function(){
$test = document.getElementById('number').value,
$.ajax({
"type":"GET",
"url":"delete_articles.php",
//"data""id=".document.getElementById("number").value),
"data": "id="$test"&type="del,
"success": function(data){
$(".msg-ok")
.css({"display":"block"})
.html(data);
}

});
});
});
</script>
[/JS]

Hierbij de php code:

$sql="SELECT * FROM news ORDER BY id DESC";
	$result=mysql_query($sql);
	while($rij = mysql_fetch_array($result)){
		echo('<tr>
	        <td><input type="checkbox" class="checkbox" /></td>
		<td><input type="text" name="id" id="number" class="number" value="'.$rij['id'].'" style="background-color:transparent; border:none; width:10px;" readonly="readonly"  /></td>
		<td><h3><a href="#">'.$rij['title'].'</a></h3></td>
		<td>'.$rij['datum'].'</td>
		<td><a href="#">'.$rij['poster'].'</a></td>
		<td><a href="#" id="deleteid" name="bla">Delete</a> <a href="#" class="login-link">Edit</a></td>
		</tr>');
};

oftewel hij laat alle nieuws die hij kan vinden, zet deze op volgorde onder elkaar en ik zet via de <input> welk id het nieuws is.
Nu probeer ik het id te vinden waar ik op geklikt heb.

Zou iemand mij kunnen vertellen hoe dit mogelijk is?

alvast bedankt!

groet,

Rick Bongers

 

[Robin S]

Ik heb een paar tips:
- Voor stringconcatenatie gebruik je +. Regel 9 van je Javascipt wordt dus "data": "id=" + $test + "&type=" + del,
- Ik zie niet of je een waarde zet voor de variabele del, let daarop. Als del === undefined, dan "" + del == "undefined".
- Op regel 3 en 4 zoek je elementen per id in je DOM. De bedoeling is dat die uniek zijn, terwijl er met je PHP meerdere elementen met hetzelfde id geprint worden. Probeer dus met de jQuery class-selectors te werken
- In een jQuery click-callback kun je met $(this) geloof ik het element vinden waar je op geklikt hebt Je zou zoiets kunnen proberen:
[JS]$test = parseInt($(this).id)[/JS]
Dan moet je natuurlijk alleen je PHP nog even aanpassen zodat 't met elkaar overeenstemt.

Als er iets niet lukt hoor ik 't wel

 

[dudstone]

oke ik heb nu dus:
[JS]$(document).ready(function(){
$("#deleteid").click(function(){
$test = parseInt($(this).id)
$.ajax({
"type":"GET",
"url":"delete_articles.php",
"data": "id="+$test,
"success": function(data){
$(".msg-ok")
.css({"display":"block"})
.html(data);
}

});
});
});[/JS]

nu komt er bij de uitkomt: NaN ?
want om te testen stuur ik de uitkomst naar het php script en echo ik deze post om te zien wat hij doorstuurt.

hoe nu verder?

 

[Robin S]

Gaat de goeie kant op Vooral de PHP nog wat aanpassen, ik zou er zoiets van maken:

$sql="SELECT * FROM news ORDER BY id DESC";
    $result=mysql_query($sql);
    while($rij = mysql_fetch_array($result)){
        echo('<tr>
            <td><input type="checkbox" class="checkbox" /></td>
        <td><input type="text" name="id" class="number" value="'.$rij['id'].'" style="background-color:transparent; border:none; width:10px;" readonly="readonly"  /></td>
        <td><h3><a href="#">'.$rij['title'].'</a></h3></td>
        <td>'.$rij['datum'].'</td>
        <td><a href="#">'.$rij['poster'].'</a></td>
        <td><a href="#" id="delete_'.$rij['id'].'" class="deleteid" name="bla">Delete</a> <a href="#" class="login-link">Edit</a></td>
        </tr>');
};

Hier krijgt iedere delete-link een uniek id, maar ze hebben allemaal de class "deleteid" (regel 10).

[JS]$(document).ready(function(){
$(".deleteid").click(function(){
$test = parseInt($(this).id.match(/\d+/)[0]);
$.ajax({
"type":"GET",
"url":"delete_articles.php",
"data": "id="+$test + "&type=" + (del || "del"), //de waarde in variabele del als default, en de string "del" als de variabele niet gezet is
"success": function(data){
$(".msg-ok")
.css({"display":"block"})
.html(data);
}

});
});
});[/JS]
De elementen met class "deleteid" worden geselecteerd (regel 2), en een click-callback wordt toegevoegd. Wanneer de callback wordt uitgevoerd voor een bepaald element, wordt het nummertje dat in de id staat opgezocht (regel 3) en verstuurd in de data.

 

[dudstone]

als ik $test verander in:
[JS]$test = parseInt($(this).id.match(/\d+/)[0]);[/JS]

werkt het niet meer. dan echo't de php geen waarde terug.
code tot nu toe:

[JS]<script language="javascript" type="text/javascript">
$(document).ready(function(){
$(".deleteid").click(function(){
$test = parseInt($(this).id.match(/\d+/)[0]);
$.ajax({
"type":"GET",
"url":"delete_articles.php",
"data": "id="+$test,
"success": function(data){
$(".msg-ok")
.css({"display":"block"})
.html(data);
}

});
});
});
</script>[/JS]

<a href="#" id="delete_'.$rij['id'].'" class="deleteid" name="bla">Delete</a>
								
								<a href="#" class="login-link">Edit</a>

 

[Robin S]

Hm, misschien moet je dan toch gewoon this gebruiken.
[JS]$test = parseInt(this.id.match(/\d+/)[0]);[/JS]

En mocht 't dan nog steeds niet werken: Wat zou delete_articles.php dan precies moeten doen? Klopt het wel dat eerst de gegeven PHP-code wordt uitgevoerd en daarna het Javascript?

 

[dudstone]

Ook met deze regel geen succes.

hier mijn delete_articles.php :

include('../_dbConnect.php');
include('../_settings.php');

//$type = $_GET['type'];
$id = $_GET['id'];


//mysql_query("DELETE from `login`.`news` WHERE `id` = $id") or die(mysql_error());
//echo('Article has deleted!');
//header("REFRESH:2; URL= index.php");


//echo($type.'<br>');
echo($id);

ik heb de mysql functie uitgezet, omdat ik anders steeds een artikel toe moet voegen.

naar mijn idee moet hij gewoon degene wat hij doorstuurt terug sturen en dat deed hij ook.

 

[Robin S]

Dan weet ik zo niet wat er mis is. De testpagina die ik heb werkt gewoon. Misschien kun je nog eens vergelijken met jouw versie. Anders kun je een debugger proberen - ik gebruik zelf Firefox met FireBug. En als je een online versie hebt kan ik natuurlijk ook voor je kijken

index.php

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js" type="text/javascript"></script>
        <script type="text/javascript">

            $(document).ready(function(){
                $(".deleteid").click(function(){
                    console.log($(this));
                    var $test = parseInt(this.id.match(/\d+/)[0]);
                    $.ajax({
                        "type":"GET",
                        "url":"delete_articles.php",
                        "data": "id="+$test,
                        "success": function(data){
                            $(".msg-ok")
                                .css({"display":"block"})
                                .html(data);
                        }

                    });
                });
            });

        </script>
        <title></title>
    </head>
    <body>
        <table>
            <?php

            for ($i = 1; $i <= 10; $i++) {

            ?>
            <tr>
                <td><input type="checkbox" class="checkbox" /></td>
                <td><input type="text" name="id" class="number" value="<?php echo $i; ?>" style="background-color:transparent; border:none; width:10px;" readonly="readonly"  /></td>
                <td><h3><a href="#"><?php echo $i; ?></a></h3></td>
                <td>##-##-####</td>
                <td><a href="#">Anonymous</a></td>
                <td><a href="#" id="delete_<?php echo $i; ?>" class="deleteid" name="bla">Delete</a>
                    <a href="#" class="login-link">Edit</a></td>
            </tr>
            <?php

            }
            
            ?>
        </table>
        <div class="msg-ok"></div>
        </body>
</html>

delete_articles.php

<?php

echo $_GET["id"];

?>

 

[dudstone]

Ja kijk ik had deze regel er niet in staan:
[JS]console.log($(this));[/JS]

bedankt voor de moeite!!

 

[Robin S]

Dat is een debuggerfunctie. Maar goed, 't gaat erom dat het werkt nu Misschien zat er eerder nog een verkeerde versie in je cache?

 

[dudstone]

zou je me ook uit kunnen leggen wat deze regel precies doet? ik snap wel dat je hier het id opvraagt, maar wat is precies wat?
[JS]$test = parseInt($(this).id.match(/\d+/)[0])[/JS]

 

[That Guy]

.match zoekt in een string naar de regex-param en returnt een array met de resultaten. Zie ook hier. Door er [0] achter te zetten pak je dus alleen het 1e resultaat. parseInt maakt van een string een getal (als dat mogelijk is tenminste).

Daarnaast *moet* parseInt een 2e parameter hebben, de radix. Dit is beter:

[JS]$test = parseInt($(this).id.match(/\d+/)[0], 10)[/JS]

 

[Robin S]

Verder is this het element waar je op geklikt hebt. $(this) (de jQuery-functie uitgevoerd op this), daarentegen, maakt er een jQuery-object van. Zo'n jQuery-object heeft geen eigenschap id, maar het element zelf wel. Daarom gebruik je this.id, en niet $(this).id

http://docs.jquery.com/Types#jQuery

Edit: Nog een reden om FireBug te proberen - 't is heel leerzaam ^^
[JS]console.log(this);
console.log(this.id);
console.log(this.id.match(/\d+/));
console.log(this.id.match(/\d+/)[0]);
console.log(parseInt(this.id.match(/\d+/)[0]), 10);[/JS]