Trenger litt Javascript hjelp

[SynT]

Er litt nybegynner på javascript

function addB(str)
{
if (str=="")
  {
  document.getElementById("txtHint").innerHTML="";
  return;
  } 
if (window.XMLHttpRequest)
  {
  xmlhttp=new XMLHttpRequest();
  }
else
  {
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
    document.getElementById("txtHint").innerHTML=xmlhttp.responseText;
    }
  }
xmlhttp.open("GET","./Add.php?"+str,true);
xmlhttp.send();
}

<?php
echo '<div id="txtHint" style="float:right"><a href="#" onclick="addB(\'id='.$_GET['id'].'&sep='.$epc.'&ses='.$sasc.'\'); return false"><img src="./img/plus.png" alt="" width="20px" /></a></div>';
?>

Koden fungere som den skall men siden som genereres kan ha hundrevis av disse og eg vet ikkje helt koss eg ska gjer det.

[Strauman]

Forstår jeg rett, så trenger du en enklere måte å gjøre det på?

Isåfall tror jeg jQuery kan være en vei å gå.

 

Hvis det skal være mange txtHint med linker, så kan er standaren å bruke class istedet for id.

Det jeg skriver under er langt i fra den beste måten å gjøre det på, men hvis du er ny innenfor feltet, så skal jeg gjøre det så likt din kode som mulig.

 

Først kan endre litt på attributtene, slik at det blir mer oversiktlig i jQuery;

<?php
$queryString="id=".$_GET['id']."&sep=".$epc."&ses=".$sasc;
echo '<div class="txtHint" style="float:right">';
echo '<a href="#" class="addB" queryString="'.$queryString.'">';
echo '<img src="./img/plus.png" alt="" width="20px" /></a></div>';
?>

Så i den fila som lastes, kan du legge denne for å laste jquery

<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>

Og få dette scriptet inkludert på ett eller annet vis.

$(document).ready(function() {

    // .addB er for å velge alle som har <... class="addB" ...

    $(".addB").click(function() {
    	// Så henter vi ut queryStringen som legges i elementet fra PHP. (Se phpkoden over)
    	var queryString=$(this).attr("querystring");
        if (undefined!==queryString && queryString==="") {
        	// $(this) er det elementet som ble klikket på
            $(this).html("");
            return;
        }​
        // $.get(URL, success);
        // mer info: http://api.jquery.com/jQuery.get/
        $.get("Add.php?" + queryString, function(response) {
            $(this).html(response);
        });
    });
});

Endret 24. april 2014 av Strauman

[SynT]

Har forklart meg litt dårlig ja

 

Det eg mener er at det kan være mange av denne linjen avhengig av hvor stor databasen er.

<div id="txtHint"><a href="#" onclick="addB('id=75760&sep=16&ses=1')"><img src="./img/plus.png" alt="" /></a></div>
<div id="txtHint"><a href="#" onclick="addB('id=75760&sep=17&ses=1')"><img src="./img/plus.png" alt="" /></a></div>
<div id="txtHint"><a href="#" onclick="addB('id=75760&sep=18&ses=1')"><img src="./img/plus.png" alt="" /></a></div>

Her er Add.php

<?php
$sql='INSERT INTO _alleps (Name, SID, Sep, Ses) VALUES ("' . $name . '","'. $_GET['id'] .'","'.$_GET['sep'].'","'.$_GET['ses'].'")';
if (!mysqli_query($con,$sql)){
   die('Error: ' . mysqli_error());
}
?>
<img src="./img/check.png" alt="" />

Mens alle knapper vil fungere som dei skall vil bare den første id="txtHint" endre seg til

<img src="./img/check.png" alt="" />

Så på en eller annen måte vil eg ha txtHint1, txtHint2, txtHint3 osv, noke som er null problem for meg på PHP/html delen men usikker på koss eg skall gjer det på javascript delen. Svaret vil sikkert være utroligt lett

[Crowly]

Litt små pirk:

 

id skal være unik innenfor en side, så flere <div id="txtHint"> er ugyldig. Da må du som du er inne på gjøre det om til id="txtHint1" osv. Alternativt endre til class="txtHint".

 

ALDRI! sett bruker data rett inn i en sql, slik du gjør med insert'n. Ta en titt på mysqli_real_escape_string() og/eller les deg opp på prepared statements. Kan også være greit å ta en titt på PDO.

 

echo '<div id="txtHint" style="float:right"><a href="javascript: addB('.(int)$_GET['id'].','.$epc.','.$sasc.');"><img src="./img/plus.png" alt="" width="20px" /></a></div>';

Har endret til post i stedet for get, så du må endre fra $_GET til $_POST i php. Ser ingen grunn til å sende dette som en get (via url).

function addB(id,sep,ses){
    // jQuery
    $.post('Add.php',{id: id, sep: sep, ses: ses},function(data){
        console.log(data); // respons fra Add.php ligger i data, behandle responsen i denne funksjonen
    },'html');
}

Prepared statement (modifisert eksempel fra http://www.php.net/manual/en/mysqli.prepare.php)

$sql = "INSERT INTO _alleps (Name, SID, Sep, Ses) VALUES(?,?,?,?)";

if ($stmt = mysqli_prepare($link, $sql)) {

    // vask input data
    $input = array(
        'name'=>filter_var($name,FILTER_SANITIZE_STRING,FILTER_FLAG_STRIP_LOW), // i tillegg fjern alle tegn med ascii verdi <32
        'id'=>(int)filter_input(INPUT_POST,'id',FILTER_SANITIZE_NUMBER_INT),
        'sep'=>(int)filter_input(INPUT_POST,'sep',FILTER_SANITIZE_NUMBER_INT),
        'ses'=>(int)filter_input(INPUT_POST,'ses',FILTER_SANITIZE_NUMBER_INT)
    );

    /* bind parameters for markers */
    mysqli_stmt_bind_param($stmt, "s", $input['name']);
    mysqli_stmt_bind_param($stmt, "i", $input['id']);
    mysqli_stmt_bind_param($stmt, "i", $input['sep']);
    mysqli_stmt_bind_param($stmt, "i", $input['ses']);

    /* execute query */
    if (mysqli_stmt_execute($stmt))
        echo 'Insert ok';
    else
        echo 'Insert feilet';

    /* close statement */
    mysqli_stmt_close($stmt);
}

For å gjøre det riktig (html5) skal slike attributter begynne med data-

 

<?php
echo '<a href="#" class="addB" data-queryString="'.$queryString.'">';
?>

 

Endret 2. mai 2014 av Crowly

[SynT]

 

 

ALDRI! sett bruker data rett inn i en sql, slik du gjør med insert'n. Ta en titt påmysqli_real_escape_string() og/eller les deg opp på prepared statements. Kan også være greit å ta en titt på PDO.

Klar over sikkerhets risikoen med dette, men dette er en kode som kun skall brukes privat