Gå til innhold

Trenger litt Javascript hjelp


Anbefalte innlegg

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.

Lenke til kommentar
Videoannonse
Annonse

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 av Strauman
Lenke til kommentar

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

Lenke til kommentar

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 av Crowly
  • Liker 1
Lenke til kommentar

Opprett en konto eller logg inn for å kommentere

Du må være et medlem for å kunne skrive en kommentar

Opprett konto

Det er enkelt å melde seg inn for å starte en ny konto!

Start en konto

Logg inn

Har du allerede en konto? Logg inn her.

Logg inn nå
×
×
  • Opprett ny...