问:
How to make css for class in single page?
Here is my style:

```<code><style>
      ul {
          padding:0 0 0 0;
          margin:0 0 0 0;
      }
      ul li {
          list-style:none;
          margin-bottom:25px;
      }
      ul li img {
          cursor: pointer;
      }
      .modal-body {
          padding:5px !important;
      }
      .modal-content {
          border-radius:0;
      }
      .modal-dialog img {
          text-align:center;
          margin:0 auto;
      }
    .controls{
        width:50px;
        display:block;
        font-size:11px;
        padding-top:8px;
        font-weight:bold;
    }
    .next {
        float:right;
        text-align:right;
    }
      /*override modal for demo only*/
      .modal-dialog {
          max-width:500px;
          padding-top: 90px;
      }
      @media screen and (min-width: 768px){
          .modal-dialog {
              width:500px;
              padding-top: 90px;
          }
      }
      @media screen and (max-width:1500px){
          #ads {
              display:none;
          }
      }

        .dock {
            border: 4px dotted #cccccc;
            background-color: #ededed;
            width: 600px;
            height: 300px;
            color: #aaa;
            font-size: 18px;
            text-align: center;
            padding-top: 100px;
        }
        .dock_hover {
            border: 4px dotted #4d90fe;
            background-color: #e7f0ff;
            width: 600px;
            height: 300px;
            color: #4d90fe;
            font-size: 18px;
            text-align: center;
            padding-top: 100px;
        }
  </style>
</code>```

And I want to control

```<code>ul li {
          list-style:none;
          margin-bottom:25px;
      }
</code>```

without making change for my default page. margin-bottom must be 0px
And here is my ul li

```<code><ul class="row">
    <li class="col-lg-3 col-md-3 ">
    <img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
    </li>
    <li class="col-lg-3 col-md-3 ">
    <img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
    </li>
    <li class="col-lg-3 col-md-3 ">
    <img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
    </li>
</ul>
</code>```

Is it possible to change margin-bottom:0px through given class to ul li ? I've read the reference css style change just for one page but I don't know how to implement its code. That's why I ask a question for this.
Here is the page while margin-bottom:0px

Here is the page while margin-bottom:25px

I want to fix the picture with margin-bottom:25px but I don't want to change totally of the page.
Here's full of my script page:

```<!DOCTYPE html>
<?php include('akses.php'); ?>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Basarnas</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <link href="../css/sb-admin.css" rel="stylesheet">

    <link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    Toggle navigation

                </button>
                Operator Komunikasi

                     <?php echo $_SESSION['operatorkomunikasi']; ?>

                             Settings

                             Log Out

                         Home

                         Informasi Bencana

                         Monitoring Operasi SAR

    Direktorat Operasi dan Latihan
                  BASARNAS

                            Data Informasi Bencana

                                  List Informasi Bencana

                                 Berita SAR

        <?php  if (isset($_POST['submit'])) {
        $key = md5('vxcygnusloiv');
        function encrypt($string, $key){
        $string = rtrim(base64_encode(mcrypt_encrypt(MCRYPT_RIJNDAEL_256, $key, $string, MCRYPT_MODE_ECB)));
        return $string;
        }

        $conn = new Mongo();
        $db = $conn->selectDB('basarnas');

        $id = $_POST['id'];
        $kategori = $_POST['kategoribencana'];
        $kepalaoperasi = $_POST['kepalaoperasi'];
        $kepalaoperasii = $_POST['kepalaoperasii'];

        $query = $db->informasi_bencana;
        $queryy = $db->user;
        $queryyy = $db->pegawai;
        if ($kategori == "Bencana Besar") {
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasi, $key), "level"=>encrypt("Kepala Kantor Pusat BASARNAS", $key)));
        $nResults = $cursor->count();
        if ($nResults == 0){
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR gagal dikirim karena tidak ada yang menjabat sebagai (Kepala '.$kepalaoperasi.').

';
        }else {
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasi, $key), "level"=>encrypt("Kepala Kantor Pusat BASARNAS", $key)));
        foreach($cursor as $doc){
        $selected = array('_id'=> new MongoId($doc['idpegawai']));
        $cursorr=$queryyy->find($selected);
        foreach($cursorr as $docc){
        $nip_kepala = decrypt($docc['nip'], $key);
        $nama_kepala = decrypt($docc['nama'], $key);
        $query->update(array("_id"=>new MongoId($id)), array('$set'=>array("status"=>encrypt("berita", $key), "status_berita"=>encrypt("Pending Berita SAR", $key), "kategori"=>encrypt($kategori, $key), "smc"=>encrypt($kepalaoperasi, $key), "nip_kepala"=>encrypt($nip_kepala, $key), "nama_kepala"=>encrypt($nama_kepala, $key), "chat_pusat_daerah"=>encrypt("", $key), "status_chat_pusat"=>0, "status_chat_daerah"=>0)));
        if ($query){
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR berhasil dikirim ke ('.$kepalaoperasi.').

';
        }else {
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR gagal dikirim ke ('.$kepalaoperasi.').

';
        }
        }
        }
        }
        } elseif ($kategori == "Bencana Kecil"){
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasii, $key), "level"=>encrypt("Kepala Kantor SAR Daerah", $key)));
        $nResults = $cursor->count();
        if ($nResults == 0){
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR gagal dikirim karena tidak ada yang menjabat sebagai (Kepala '.$kepalaoperasii.').

';
        }else {
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasii, $key), "level"=>encrypt("Kepala Kantor SAR Daerah", $key)));
        foreach($cursor as $doc){
        $selected = array('_id'=> new MongoId($doc['idpegawai']));
        $cursorr=$queryyy->find($selected);
        foreach($cursorr as $docc){
        $nip_kepala = decrypt($docc['nip'], $key);
        $nama_kepala = decrypt($docc['nama'], $key);
        $query->update(array("_id"=>new MongoId($id)), array('$set'=>array("status"=>encrypt("berita", $key), "status_berita"=>encrypt("Pending Berita SAR", $key), "kategori"=>encrypt($kategori, $key), "smc"=>encrypt($kepalaoperasii, $key), "nip_kepala"=>encrypt($nip_kepala, $key), "nama_kepala"=>encrypt($nama_kepala, $key), "chat_pusat_daerah"=>encrypt("", $key), "status_chat_pusat"=>0, "status_chat_daerah"=>0)));
        if ($query){
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR berhasil dikirim ke ('.$kepalaoperasii.').

';
        }else {
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR gagal dikirim ke ('.$kepalaoperasii.').

';
        }
        }
        }
        }
        } else {
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR gagal dikirim.

';
        }
        }
        $key = md5('vxcygnusloiv');
        function decrypt($string, $key){
        $string = rtrim(mcrypt_decrypt(MCRYPT_RIJNDAEL_256, $key, base64_decode($string), MCRYPT_MODE_ECB));
        return $string;
        }
        $conn = new Mongo();
        $db = $conn->selectDB('basarnas');
        $query = $db->informasi_bencana;
        $cursor=$query->find(array("_id"=>new MongoId($_GET['id'])));
        foreach($cursor as $id=>$doc){
        if (decrypt($doc['jenis_kejadian'], $key) == "" || decrypt($doc['lokasi_kejadian'], $key) == "" || decrypt($doc['no_telp_lain'], $key) == "" || decrypt($doc['catatan'], $key) == "") {
        $status = "disabled";
        }else{
        $status = "";
        }
        ?>

 Form Pembuatan Berita SAR

                                <form class="form-signin" action="" method="post">

                                            Waktu Kejadian:<input type="hidden" name="id" value="<?php echo $doc['_id']; ?>"/>
                                            <input type="text" class="form-control" name="waktulaporan" value="<?php echo date('Y/m/d, H:i', $doc['waktu_laporan']->sec); ?>" disabled/>

                                            Nama Pelapor:
                                            <input type="text" class="form-control" name="namapelapor" value="<?php echo decrypt($doc['nama_pelapor'], $key); ?>" disabled/>

                                            No Telepon Pelapor:
                                            <input type="text" class="form-control" name="notelp" value="<?php echo decrypt($doc['no_telp'], $key); ?>" disabled/>

                                            Jenis Kejadian:
                                            <input type="text" class="form-control" name="jeniskejadian" value="<?php echo decrypt($doc['jenis_kejadian'], $key); ?>" disabled/>

                                            Lokasi Kejadian:
                                            <input type="text" class="form-control" name="lokasikejadian" value="<?php echo decrypt($doc['lokasi_kejadian'], $key); ?>" disabled/>

                                            No Telepon Lain Yang Bisa Dihubungi:
                                            <input type="text" class="form-control" name="notelplain" value="<?php echo decrypt($doc['no_telp_lain'], $key); ?>" disabled/>

                                            Catatan Tambahan:
                                            <textarea class="form-control" rows="3" name="catatan" disabled><?php echo decrypt($doc['catatan'], $key); ?></textarea>

                                            Kategori Bencana:
                                            <select class="form-control" name="kategoribencana" onchange="kategori(this);" required>
                                                <option value=""></option>
                                                <option value="Bencana Besar">Bencana Besar</option>
                                                <option value="Bencana Kecil">Bencana Kecil</option>
                                            </select>

<input type="hidden" name="kepalaoperasi" value="Kantor Pusat BASARNAS"/>
                                            <input type="text" class="form-control" value="Kantor Pusat BASARNAS" disabled/>

                                            Pilih Kantor SAR:
                                            <select class="form-control" name="kepalaoperasii" required>
                                                <option value="Kantor SAR Daerah Aceh">Kantor SAR Daerah Aceh</option>
                                                <option value="Kantor SAR Daerah Medan">Kantor SAR Daerah Medan</option>
                                                <option value="Kantor SAR Daerah Padang">Kantor SAR Daerah Padang</option>
                                                <option value="Kantor SAR Daerah Pekanbaru">Kantor SAR Daerah Pekanbaru</option>
                                                <option value="Kantor SAR Daerah Jambi">Kantor SAR Daerah Jambi</option>
                                                <option value="Kantor SAR Daerah Tanjung Pinang">Kantor SAR Daerah Tanjung Pinang</option>
                                                <option value="Kantor SAR Daerah Pangkal Pinang">Kantor SAR Daerah Pangkal Pinang</option>
                                                <option value="Kantor SAR Daerah Bengkulu">Kantor SAR Daerah Bengkulu</option>
                                                <option value="Kantor SAR Daerah Palembang">Kantor SAR Daerah Palembang</option>
                                                <option value="Kantor SAR Daerah Lampung">Kantor SAR Daerah Lampung</option>
                                                <option value="Kantor SAR Daerah Jakarta">Kantor SAR Daerah Jakarta</option>
                                                <option value="Kantor SAR Daerah Bandung">Kantor SAR Daerah Bandung</option>
                                                <option value="Kantor SAR Daerah Semarang">Kantor SAR Daerah Semarang</option>
                                                <option value="Kantor SAR Daerah Surabaya">Kantor SAR Daerah Surabaya</option>
                                                <option value="Kantor SAR Daerah Denpasar">Kantor SAR Daerah Denpasar</option>
                                                <option value="Kantor SAR Daerah Mataram">Kantor SAR Daerah Mataram</option>
                                                <option value="Kantor SAR Daerah Kupang">Kantor SAR Daerah Kupang</option>
                                                <option value="Kantor SAR Daerah Banjarmasin">Kantor SAR Daerah Banjarmasin</option>
                                                <option value="Kantor SAR Daerah Balikpapan">Kantor SAR Daerah Balikpapan</option>
                                                <option value="Kantor SAR Daerah Merauke">Kantor SAR Daerah Merauke</option>
                                                <option value="Kantor SAR Daerah Pontianak">Kantor SAR Daerah Pontianak</option>
                                                <option value="Kantor SAR Daerah Palu">Kantor SAR Daerah Palu</option>
                                                <option value="Kantor SAR Daerah Makassar">Kantor SAR Daerah Makassar</option>
                                                <option value="Kantor SAR Daerah Kendari">Kantor SAR Daerah Kendari</option>
                                                <option value="Kantor SAR Daerah Ternate">Kantor SAR Daerah Ternate</option>
                                                <option value="Kantor SAR Daerah Ambon">Kantor SAR Daerah Ambon</option>
                                                <option value="Kantor SAR Daerah Jayapura">Kantor SAR Daerah Jayapura</option>
                                                <option value="Kantor SAR Daerah Sorong">Kantor SAR Daerah Sorong</option>
                                                <option value="Kantor SAR Daerah Biak">Kantor SAR Daerah Biak</option>
                                                <option value="Kantor SAR Daerah Timika">Kantor SAR Daerah Timika</option>
                                                <option value="Kantor SAR Daerah Manokwari">Kantor SAR Daerah Manokwari</option>
                                                <option value="Kantor SAR Daerah Merauke">Kantor SAR Daerah Merauke</option>
                                            </select>

                                                    Upload Dokumen Foto Pendukung

0%

Drag & Drop Photos Here

                                    <button class="btn btn-primary" name="submit" <?php echo $status;?>>Kirim Berita </button>

                                </form>

                                <?php } ?>

 Informasi Pengiriman Berita SAR

Jika tombol (Kirim Berita) dalam keadaan "disabled" maka pastikan untuk mengisi semua kolom data informasi bencana secara lengkap. Karena syarat untuk pengiriman berita SAR diharuskan untuk mengisi
                                    form secara lengkap meskipun pada catatan tambahan tidak ada yang perlu untuk diisi tetapi usahakan untuk mengisinya seperti "Tidak ada". Untuk mengisi kolom data informasi bencana yang belum diisi dapat menuju link ini <?php echo "" ?>Edit Informasi Bencana

```

答:
HTML:

```<code><ul id="pageID" class="row">
    <li class="col-lg-3 col-md-3 ">
        <img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
    </li>
    <li class="col-lg-3 col-md-3 ">
        <img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
    </li>
    <li class="col-lg-3 col-md-3 ">
        <img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
    </li>
</ul>
</code>```

CSS:

```<code>  #pageID li {
      list-style:none;
      margin-bottom:25px;
  }
</code>```

Hope I understood your question correctly. You want to change the ul > li class to margin-bottom: 25px; but only for the given page. Then this should work.

Body:
Here is my style:

And I want to control

ul li {
          list-style:none;
          margin-bottom:25px;
      }

without making change for my default page. margin-bottom must be 0px
And here is my ul li

Is it possible to change margin-bottom:0px through given class to ul li ? I've read the reference css style change just for one page but I don't know how to implement its code. That's why I ask a question for this.
Here is the page while margin-bottom:0px

Here is the page while margin-bottom:25px

I want to fix the picture with margin-bottom:25px but I don't want to change totally of the page.
Here's full of my script page:

<!DOCTYPE html>
<?php include('akses.php'); ?>

    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">

    <title>Basarnas</title>

    <link href="../css/bootstrap.min.css" rel="stylesheet">

    <link href="../css/sb-admin.css" rel="stylesheet">

    <link href="../font-awesome/css/font-awesome.min.css" rel="stylesheet" type="text/css">

                <button type="button" class="navbar-toggle" data-toggle="collapse" data-target=".navbar-ex1-collapse">
                    Toggle navigation

                </button>
                Operator Komunikasi

                     <?php echo $_SESSION['operatorkomunikasi']; ?>

                             Settings

                             Log Out

                         Home

                         Informasi Bencana

                         Monitoring Operasi SAR

    Direktorat Operasi dan Latihan
                  BASARNAS

                            Data Informasi Bencana

                                  List Informasi Bencana

                                 Berita SAR

        <?php  if (isset($_POST['submit'])) {
        $key = md5('vxcygnusloiv');
        function encrypt($string, $key){
        $string = rtrim(base64_encode(mcrypt_encrypt(MCRYPT_RIJNDAEL_256, $key, $string, MCRYPT_MODE_ECB)));
        return $string;
        }

        $conn = new Mongo();
        $db = $conn->selectDB('basarnas');

        $id = $_POST['id'];
        $kategori = $_POST['kategoribencana'];
        $kepalaoperasi = $_POST['kepalaoperasi'];
        $kepalaoperasii = $_POST['kepalaoperasii'];

        $query = $db->informasi_bencana;
        $queryy = $db->user;
        $queryyy = $db->pegawai;
        if ($kategori == "Bencana Besar") {
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasi, $key), "level"=>encrypt("Kepala Kantor Pusat BASARNAS", $key)));
        $nResults = $cursor->count();
        if ($nResults == 0){
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR gagal dikirim karena tidak ada yang menjabat sebagai (Kepala '.$kepalaoperasi.').

';
        }else {
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasi, $key), "level"=>encrypt("Kepala Kantor Pusat BASARNAS", $key)));
        foreach($cursor as $doc){
        $selected = array('_id'=> new MongoId($doc['idpegawai']));
        $cursorr=$queryyy->find($selected);
        foreach($cursorr as $docc){
        $nip_kepala = decrypt($docc['nip'], $key);
        $nama_kepala = decrypt($docc['nama'], $key);
        $query->update(array("_id"=>new MongoId($id)), array('$set'=>array("status"=>encrypt("berita", $key), "status_berita"=>encrypt("Pending Berita SAR", $key), "kategori"=>encrypt($kategori, $key), "smc"=>encrypt($kepalaoperasi, $key), "nip_kepala"=>encrypt($nip_kepala, $key), "nama_kepala"=>encrypt($nama_kepala, $key), "chat_pusat_daerah"=>encrypt("", $key), "status_chat_pusat"=>0, "status_chat_daerah"=>0)));
        if ($query){
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR berhasil dikirim ke ('.$kepalaoperasi.').

';
        }else {
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR gagal dikirim ke ('.$kepalaoperasi.').

';
        }
        }
        }
        }
        } elseif ($kategori == "Bencana Kecil"){
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasii, $key), "level"=>encrypt("Kepala Kantor SAR Daerah", $key)));
        $nResults = $cursor->count();
        if ($nResults == 0){
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR gagal dikirim karena tidak ada yang menjabat sebagai (Kepala '.$kepalaoperasii.').

';
        }else {
        $cursor=$queryy->find(array("kantor"=>encrypt($kepalaoperasii, $key), "level"=>encrypt("Kepala Kantor SAR Daerah", $key)));
        foreach($cursor as $doc){
        $selected = array('_id'=> new MongoId($doc['idpegawai']));
        $cursorr=$queryyy->find($selected);
        foreach($cursorr as $docc){
        $nip_kepala = decrypt($docc['nip'], $key);
        $nama_kepala = decrypt($docc['nama'], $key);
        $query->update(array("_id"=>new MongoId($id)), array('$set'=>array("status"=>encrypt("berita", $key), "status_berita"=>encrypt("Pending Berita SAR", $key), "kategori"=>encrypt($kategori, $key), "smc"=>encrypt($kepalaoperasii, $key), "nip_kepala"=>encrypt($nip_kepala, $key), "nama_kepala"=>encrypt($nama_kepala, $key), "chat_pusat_daerah"=>encrypt("", $key), "status_chat_pusat"=>0, "status_chat_daerah"=>0)));
        if ($query){
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR berhasil dikirim ke ('.$kepalaoperasii.').

';
        }else {
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR gagal dikirim ke ('.$kepalaoperasii.').

';
        }
        }
        }
        }
        } else {
        echo '

              <button type="button" class="close" data-dismiss="alert" aria-hidden="true">×</button>
               Berita SAR gagal dikirim.

';
        }
        }
        $key = md5('vxcygnusloiv');
        function decrypt($string, $key){
        $string = rtrim(mcrypt_decrypt(MCRYPT_RIJNDAEL_256, $key, base64_decode($string), MCRYPT_MODE_ECB));
        return $string;
        }
        $conn = new Mongo();
        $db = $conn->selectDB('basarnas');
        $query = $db->informasi_bencana;
        $cursor=$query->find(array("_id"=>new MongoId($_GET['id'])));
        foreach($cursor as $id=>$doc){
        if (decrypt($doc['jenis_kejadian'], $key) == "" || decrypt($doc['lokasi_kejadian'], $key) == "" || decrypt($doc['no_telp_lain'], $key) == "" || decrypt($doc['catatan'], $key) == "") {
        $status = "disabled";
        }else{
        $status = "";
        }
        ?>

 Form Pembuatan Berita SAR

                                <form class="form-signin" action="" method="post">

                                            Waktu Kejadian:<input type="hidden" name="id" value="<?php echo $doc['_id']; ?>"/>
                                            <input type="text" class="form-control" name="waktulaporan" value="<?php echo date('Y/m/d, H:i', $doc['waktu_laporan']->sec); ?>" disabled/>

                                            Nama Pelapor:
                                            <input type="text" class="form-control" name="namapelapor" value="<?php echo decrypt($doc['nama_pelapor'], $key); ?>" disabled/>

                                            No Telepon Pelapor:
                                            <input type="text" class="form-control" name="notelp" value="<?php echo decrypt($doc['no_telp'], $key); ?>" disabled/>

                                            Jenis Kejadian:
                                            <input type="text" class="form-control" name="jeniskejadian" value="<?php echo decrypt($doc['jenis_kejadian'], $key); ?>" disabled/>

                                            Lokasi Kejadian:
                                            <input type="text" class="form-control" name="lokasikejadian" value="<?php echo decrypt($doc['lokasi_kejadian'], $key); ?>" disabled/>

                                            No Telepon Lain Yang Bisa Dihubungi:
                                            <input type="text" class="form-control" name="notelplain" value="<?php echo decrypt($doc['no_telp_lain'], $key); ?>" disabled/>

                                            Catatan Tambahan:
                                            <textarea class="form-control" rows="3" name="catatan" disabled><?php echo decrypt($doc['catatan'], $key); ?></textarea>

                                            Kategori Bencana:
                                            <select class="form-control" name="kategoribencana" onchange="kategori(this);" required>
                                                <option value=""></option>
                                                <option value="Bencana Besar">Bencana Besar</option>
                                                <option value="Bencana Kecil">Bencana Kecil</option>
                                            </select>

<input type="hidden" name="kepalaoperasi" value="Kantor Pusat BASARNAS"/>
                                            <input type="text" class="form-control" value="Kantor Pusat BASARNAS" disabled/>

                                            Pilih Kantor SAR:
                                            <select class="form-control" name="kepalaoperasii" required>
                                                <option value="Kantor SAR Daerah Aceh">Kantor SAR Daerah Aceh</option>
                                                <option value="Kantor SAR Daerah Medan">Kantor SAR Daerah Medan</option>
                                                <option value="Kantor SAR Daerah Padang">Kantor SAR Daerah Padang</option>
                                                <option value="Kantor SAR Daerah Pekanbaru">Kantor SAR Daerah Pekanbaru</option>
                                                <option value="Kantor SAR Daerah Jambi">Kantor SAR Daerah Jambi</option>
                                                <option value="Kantor SAR Daerah Tanjung Pinang">Kantor SAR Daerah Tanjung Pinang</option>
                                                <option value="Kantor SAR Daerah Pangkal Pinang">Kantor SAR Daerah Pangkal Pinang</option>
                                                <option value="Kantor SAR Daerah Bengkulu">Kantor SAR Daerah Bengkulu</option>
                                                <option value="Kantor SAR Daerah Palembang">Kantor SAR Daerah Palembang</option>
                                                <option value="Kantor SAR Daerah Lampung">Kantor SAR Daerah Lampung</option>
                                                <option value="Kantor SAR Daerah Jakarta">Kantor SAR Daerah Jakarta</option>
                                                <option value="Kantor SAR Daerah Bandung">Kantor SAR Daerah Bandung</option>
                                                <option value="Kantor SAR Daerah Semarang">Kantor SAR Daerah Semarang</option>
                                                <option value="Kantor SAR Daerah Surabaya">Kantor SAR Daerah Surabaya</option>
                                                <option value="Kantor SAR Daerah Denpasar">Kantor SAR Daerah Denpasar</option>
                                                <option value="Kantor SAR Daerah Mataram">Kantor SAR Daerah Mataram</option>
                                                <option value="Kantor SAR Daerah Kupang">Kantor SAR Daerah Kupang</option>
                                                <option value="Kantor SAR Daerah Banjarmasin">Kantor SAR Daerah Banjarmasin</option>
                                                <option value="Kantor SAR Daerah Balikpapan">Kantor SAR Daerah Balikpapan</option>
                                                <option value="Kantor SAR Daerah Merauke">Kantor SAR Daerah Merauke</option>
                                                <option value="Kantor SAR Daerah Pontianak">Kantor SAR Daerah Pontianak</option>
                                                <option value="Kantor SAR Daerah Palu">Kantor SAR Daerah Palu</option>
                                                <option value="Kantor SAR Daerah Makassar">Kantor SAR Daerah Makassar</option>
                                                <option value="Kantor SAR Daerah Kendari">Kantor SAR Daerah Kendari</option>
                                                <option value="Kantor SAR Daerah Ternate">Kantor SAR Daerah Ternate</option>
                                                <option value="Kantor SAR Daerah Ambon">Kantor SAR Daerah Ambon</option>
                                                <option value="Kantor SAR Daerah Jayapura">Kantor SAR Daerah Jayapura</option>
                                                <option value="Kantor SAR Daerah Sorong">Kantor SAR Daerah Sorong</option>
                                                <option value="Kantor SAR Daerah Biak">Kantor SAR Daerah Biak</option>
                                                <option value="Kantor SAR Daerah Timika">Kantor SAR Daerah Timika</option>
                                                <option value="Kantor SAR Daerah Manokwari">Kantor SAR Daerah Manokwari</option>
                                                <option value="Kantor SAR Daerah Merauke">Kantor SAR Daerah Merauke</option>
                                            </select>

                                                    Upload Dokumen Foto Pendukung

0%

Drag & Drop Photos Here

                                    <button class="btn btn-primary" name="submit" <?php echo $status;?>>Kirim Berita </button>

                                </form>

                                <?php } ?>

 Informasi Pengiriman Berita SAR

Jika tombol (Kirim Berita) dalam keadaan "disabled" maka pastikan untuk mengisi semua kolom data informasi bencana secara lengkap. Karena syarat untuk pengiriman berita SAR diharuskan untuk mengisi
                                    form secara lengkap meskipun pada catatan tambahan tidak ada yang perlu untuk diisi tetapi usahakan untuk mengisinya seperti "Tidak ada". Untuk mengisi kolom data informasi bencana yang belum diisi dapat menuju link ini <?php echo "" ?>Edit Informasi Bencana

Body:
HTML:

<ul id="pageID" class="row">
    <li class="col-lg-3 col-md-3 ">
        <img class="img-responsive" src="images/photodune-174908-rocking-the-night-away-xs.jpg">
    </li>
    <li class="col-lg-3 col-md-3 ">
        <img class="img-responsive" src="images/photodune-287182-blah-blah-blah-yellow-road-sign-xs.jpg">
    </li>
    <li class="col-lg-3 col-md-3 ">
        <img class="img-responsive" src="images/photodune-460760-colors-xs.jpg">
    </li>
</ul>

CSS:

  #pageID li {
      list-style:none;
      margin-bottom:25px;
  }

Hope I understood your question correctly. You want to change the ul > li class to margin-bottom: 25px; but only for the given page. Then this should work.


来源: stackexchange

问:
What does `(c = *str) != 0` mean?
```<code>int equiv (char, char);
int nmatches(char *str, char comp) {
    char c;
    int n=0;
    while ((c = *str) != 0) {
       if (equiv(c,comp) != 0) n++;
      str++;
    }
    return (n);
}
</code>```

What does "(c = *str) != 0" actually mean?
Can someone please explain it to me or help give me the correct terms to search for an explanation myself?

答:
(c = *str) is an expression and that has a value in itself. It is an assignment, the value of an assignment is the assigned value. So the value of (c = *str) is the value of *str.

The code basically checks, whether the value of *str, which just has been assigned to c is not 0. In case it isn't, then it will call the function equiv with that value.

Once the 0 is assigned, this is the end of the string. The function has to stop reading from the memory, which it does.

ContentLicense: CC BY-SA 3.0

Title: What does `(c = *str) != 0` mean?

Body:
int equiv (char, char);
int nmatches(char *str, char comp) {
    char c;
    int n=0;
    while ((c = *str) != 0) {
       if (equiv(c,comp) != 0) n++;
      str++;
    }
    return (n);
}

What does "(c = *str) != 0" actually mean?
Can someone please explain it to me or help give me the correct terms to search for an explanation myself?


问:
Array.filter first of value
I have a json array based on this structure:

```<code>[
    {property1: "bmw", property2: value, property3: value, property4: value},
    {property1: "mercedes", property2: value, property3: value, property4: value},
    {property1: "bmw", property2: value, property3: value, property4: value},
    {property1: "nissan", property2: value, property3: value, property4: value}
]
</code>```

How can i filter the array to find the first time a new value appears for property1 and store it in a separate array?

I would like the array like: ["bmw", "mercedes", "nissan"]

答:
If you want to store unique values, you should use the JavaScript built in-object Set()

The method .add(value) will append value to your set only if it doesn't already exist

let carNames = new Set();
let cars= [
    { property1: "bmw" },
    { property1: "mercedes" },
    { property1: "bmw" },
    { property1: "nissan" }
];

cars.forEach(car => carNames.add(car.property1));

console.log(carNames.size);
for (let name of carNames) {
   console.log(name);
}```

Title: Array.filter first of value

Body:
I have a json array based on this structure:

[
    {property1: "bmw", property2: value, property3: value, property4: value},
    {property1: "mercedes", property2: value, property3: value, property4: value},
    {property1: "bmw", property2: value, property3: value, property4: value},
    {property1: "nissan", property2: value, property3: value, property4: value}
]

How can i filter the array to find the first time a new value appears for property1 and store it in a separate array?

I would like the array like: ["bmw", "mercedes", "nissan"]


问:
Replacing a array of objects vuejs
I need to replace a reactive array of object with vuejs,
I retrieve data form Api Restful, and then I listen if there is a change on the object.

For example I got a list of users with status (online, offline, busy), if a user changes their status I need to update the object already rendered.

The solution that I found is to find and delete the object then pushed the new data, but in this case I lose the order of elements in the DOM since the new data is appended in the last:

```<code><template>
    <section>
       <div v-for="expert in experts"  :key="expert.id">
            <div class="spinner" :class="expert.status"></div>
       </div>
    </section>
</template>
    <script>
        import axios from 'axios'

        export default {
            name: 'experts',
            data: () => ({
                experts: [],
                errors: []
            }),
        // Fetches posts when the component is created.
        created() {
            axios.get(`http://siteapi.co/api/v1/users`)
            .then(response => {
          // JSON responses are automatically parsed.
          this.experts = response.data.data
          })
            .catch(e => {
                this.errors.push(e)
            })
        },
        mounted() {
            this.listen();
        },

        methods: {
          listen: function() {
             var self = this
             //Listen if there is a status change
             this.pusher.subscribe('expert-front', channel => {
                channel.bind('edit', (data) => {
                  //Fid the object and deleted
                  self.experts = self.experts.filter(function (item) {
                      return item.id != data.id;
                  });
                   self.experts.push(data)
                });
            });
          }
        }
    }
    </script>
</code>```

答:
Instead of filtering and pushing the data, you can do something like this:

```<code>      listen: function() {
         var self = this
         this.pusher.subscribe('expert-front', channel => {
            channel.bind('edit', (data) => {
              //Find the index of the item chag
              let index = self.experts.findIndex((expert) => expert.id === data.id)

              self.experts = [
                ...self.experts.slice(0, index - 1),
                data,
                ...self.experts.slice(index + 1)
              ]
            });
        });
      }
</code>```

I hope that helps!

Title: Replacing a array of objects vuejs

Body:
I need to replace a reactive array of object with vuejs,
I retrieve data form Api Restful, and then I listen if there is a change on the object.

For example I got a list of users with status (online, offline, busy), if a user changes their status I need to update the object already rendered.

The solution that I found is to find and delete the object then pushed the new data, but in this case I lose the order of elements in the DOM since the new data is appended in the last:

<template>

</template>

Body:
Instead of filtering and pushing the data, you can do something like this:

      listen: function() {
         var self = this
         this.pusher.subscribe('expert-front', channel => {
            channel.bind('edit', (data) => {
              //Find the index of the item chag
              let index = self.experts.findIndex((expert) => expert.id === data.id)

              self.experts = [
                ...self.experts.slice(0, index - 1),
                data,
                ...self.experts.slice(index + 1)
              ]
            });
        });
      }

I hope that helps!


问:
After rendering partial view, HTML code is not removed
I created a View to display some objects in a list and each row has a Delete option. There is also a button called New that creates a new object (here is an example - not one of the best examples).

```<code>                            New

239523   Element1_Title     Delete
196344   Element2_Title     Delete
</code>```

Because Delete and Create actions are on the same page, I am using Modal Popups for a prettier view.

On server side, both public ActionResult Create() and public ActionResult Delete() return a specific partial view with specific result, in my case return PartialView("_create", result) and return PartialView("_delete", result).

In View page, I have the following lines of code used for placing each of the partial views that have been called by Ajax.ActionLink.

```<code><!-- This code is from main view. -->

<div class="modal fade" role="dialog" id="modalPopUp">
    <div class="modal-dialog" id="modalDialog">
    </div>
</div>

<!-- The `New` button has the following code. -->

@Ajax.ActionLink("New", "Create", new object(),
        new AjaxOptions { UpdateTargetId = "modalDialog"},
        new {data_toggle = "modal", data_target = "#modalPopUp"})

<!-- The list with all elements and the `Delete` button. -->

@foreach (var element in Model.Elements)
{
    <tr>
       <td> @Html.DisplayFor(modelData => element.Number) </td>
       <td> @Html.DisplayFor(modelData => element.Title) </td>
       <td> @Ajax.ActionLink("Delete", "Delete",
                new {number = element.Number},
                new AjaxOptions {UpdateTargetId = "modalDialog"},
                new {data_toggle = "modal", data_target = "#modalPopUp"})
       </td>
    </tr>
}
</code>```

.

```<code><!-- This code is from a partial view. -->

@{
     Layout = null;
}

<div class="modal-content" id="modalContent">
    <!-- My popup window content. -->
</div>
</code>```

The problem is when I click the New button, a popup window shows, the code from _create.cshtml is rendered. Then if I leave the window and click the Delete button, the New window shows again, because the modal still has the code rendered from my first click.

If I refresh the page and click one Delete for an element and then I do not delete it, but I want to delete another one, it will delete the first element on which I clicked first.

It is weird the fact that I did the same thing 8 months ago and it worked very well. I still have a part of that code, but it does not work either.

So, all I am trying to do is to make that rendered partial view (the HTML code for PopUp) be removed after I close the PopUp window, not after refreshing the page, so I can bring another partial view with another content.

I have tried

```<code>$("#modalPopUp").on('hidden', function() {
    $("modalContent").remove();
}
</code>```

and it removes the content when I close the PopUp, but when I click again, it does not appear at all, but I don't think this is the right solution.

What am I missing?

Thank you!

答:
There is no problem with the code, as Stephen Muecke said.

I had to include jquery.unobtrusive-ajax.js, but there was no render for this script in my application page.

So the missing code lines

```<code><!-- In BundleConfig.cs -->

bundles.Add(new ScriptBundle("~/bundles/unobtrusive").Include(
       "~/Scripts/jquery.unobtrusive-ajax.js");

<!-- In _Layout.cshtml -->

@Scripts.Render("~/bundles/unobtrusive")
</code>```

The same way things are done for my application scripts that need to be included.

Thank you, Stephen!

Body:
I created a View to display some objects in a list and each row has a Delete option. There is also a button called New that creates a new object (here is an example - not one of the best examples).

                            New

239523   Element1_Title     Delete
196344   Element2_Title     Delete

Because Delete and Create actions are on the same page, I am using Modal Popups for a prettier view.

On server side, both public ActionResult Create() and public ActionResult Delete() return a specific partial view with specific result, in my case return PartialView("_create", result) and return PartialView("_delete", result).

In View page, I have the following lines of code used for placing each of the partial views that have been called by Ajax.ActionLink.

@Ajax.ActionLink("New", "Create", new object(),
        new AjaxOptions { UpdateTargetId = "modalDialog"},
        new {data_toggle = "modal", data_target = "#modalPopUp"})

@foreach (var element in Model.Elements)
{

        @Html.DisplayFor(modelData => element.Number)
        @Html.DisplayFor(modelData => element.Title)
        @Ajax.ActionLink("Delete", "Delete",
                new {number = element.Number},
                new AjaxOptions {UpdateTargetId = "modalDialog"},
                new {data_toggle = "modal", data_target = "#modalPopUp"})

}

.

@{
     Layout = null;
}

The problem is when I click the New button, a popup window shows, the code from _create.cshtml is rendered. Then if I leave the window and click the Delete button, the New window shows again, because the modal still has the code rendered from my first click.

If I refresh the page and click one Delete for an element and then I do not delete it, but I want to delete another one, it will delete the first element on which I clicked first.

It is weird the fact that I did the same thing 8 months ago and it worked very well. I still have a part of that code, but it does not work either.

So, all I am trying to do is to make that rendered partial view (the HTML code for PopUp) be removed after I close the PopUp window, not after refreshing the page, so I can bring another partial view with another content.

I have tried

$("#modalPopUp").on('hidden', function() {
    $("modalContent").remove();
}

and it removes the content when I close the PopUp, but when I click again, it does not appear at all, but I don't think this is the right solution.

What am I missing?

Thank you!

Body:
There is no problem with the code, as Stephen Muecke said.

I had to include jquery.unobtrusive-ajax.js, but there was no render for this script in my application page.

So the missing code lines

<!-- In BundleConfig.cs -->

bundles.Add(new ScriptBundle("~/bundles/unobtrusive").Include(
       "~/Scripts/jquery.unobtrusive-ajax.js");

<!-- In _Layout.cshtml -->

@Scripts.Render("~/bundles/unobtrusive")

The same way things are done for my application scripts that need to be included.

Thank you, Stephen!


问:
Unreasonable route conflict error in python's falcon
Usually falcons have excellent vision. It's weird that falcon in python sees that these two routes as conflicting:

```<code>app.add_route('/verifications/{template}/{email}', code_generation_resource)
app.add_route('/verifications/{email}/code/{code}', code_verification_resource)
</code>```

error message:

ValueError: The URI template for this route conflicts with another route's template.

I can easily work around it, but I'm wondering why they are conflicting.

答:
It's because you are using same base paths.
If you add variables in falcon PATH, it only checks for base.</p>

Body:
Usually falcons have excellent vision. It's weird that falcon in python sees that these two routes as conflicting:

app.add_route('/verifications/{template}/{email}', code_generation_resource)
app.add_route('/verifications/{email}/code/{code}', code_verification_resource)

error message:

ValueError: The URI template for this route conflicts with another route's template.

I can easily work around it, but I'm wondering why they are conflicting.


问:
How can I get certain data from JSON using a JQuery ajax call?
I am making a small finance website as a project but I can't seem to figure out how to get specific data from the JSON that is on this Google Finance site. The code should get only the value associated with l but it gets all of the data instead.

```<code>$(document).ready(function(){
  $.ajax({
    url: 'http://finance.google.com/finance/info?client=ig&q=AMD',
    dataType: 'jsonp',
    data: { get_param: 'l' },
    success: function(json) {
        console.log(json);
    }

  });
});
</code>```

答:
To achieve this you need to access the l property of the returned object. As they are in an array you need to either loop over them or get a specific one by index. Try this:

$.ajax({
  url: 'http://finance.google.com/finance/info?client=ig&q=AMD',
  dataType: 'jsonp',
  success: function(json) {
    console.log(json[0].l); // get the property from the first object
  }
});```
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script></code>```

Body:
I am making a small finance website as a project but I can't seem to figure out how to get specific data from the JSON that is on this Google Finance site. The code should get only the value associated with l but it gets all of the data instead.

$(document).ready(function(){
  $.ajax({
    url: 'http://finance.google.com/finance/info?client=ig&q=AMD',
    dataType: 'jsonp',
    data: { get_param: 'l' },
    success: function(json) {
        console.log(json);
    }

  });
});

Body:
To achieve this you need to access the l property of the returned object. As they are in an array you need to either loop over them or get a specific one by index. Try this:

$.ajax({
  url: 'http://finance.google.com/finance/info?client=ig&q=AMD',
  dataType: 'jsonp',
  success: function(json) {
    console.log(json[0].l); // get the property from the first object
  }
});

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>


问:
machine learning - svm feature fusion techique
for my final thesis i am trying to build up an 3d face recognition system by combining color and depth information. the first step i did, is to realign the data-head to an given model-head using the iterative closest point algorithm. for the detection step i was thinking about using the libsvm. but i dont understand how to combine the depth and the color information to one feature vector? they are dependent information (each point consist of color (RGB), depth information and also scan quality).. what do you suggest to do? something like weighting?

edit:
last night i read an article about SURF/SIFT features i would like to use them! could it work? the concept would be the following: extracting this features out of the color image and the depth image (range image), using each feature as a single feature vector for the svm?

答: What you arrived at is an important open problem. Yes, there are some ways to handle it, as mentioned here by Eamorr. For example you can concatenate and do PCA (or some non linear dimensionality reduction method). But it is kind of hard to defend the practicality of doing so, considering that PCA takes O(n^3) time in the number of features. This alone might be unreasonable for data in vision that may have thousands of features.</p>

ContentLicense: CC BY-SA 2.5


问:
Ethereum private network mining
1) I setup a private ethereum network using the following command

```<code>$geth --genesis <genesis json file path> --datadir <some path to an empty
folder> --networkid 123 --nodiscover --maxpeers 0 console
</code>```

2) Created an account

3) Then, started the miner using miner.start() command.

After a while ethers were getting added automatically to my account, but I don’t have any pending transaction in my private network. So from where could my miners are getting the ethers?

Even though, I didn’t instantiate any transactions in my network, I could see the some transaction being recorded in the logs, once I start the miner.

The log is as follows:

```<code>I0118 11:59:11.696523 9427 backend.go:584] Automatic pregeneration of ethash
DAG ON (ethash dir: /Users/minisha/.ethash)
I0118 11:59:11.696590 9427 backend.go:591] checking DAG (ethash dir:
/Users/minisha/.ethash)
I0118 11:59:11.696728 9427 miner.go:119] Starting mining operation (CPU=4
TOT=5)
true
> I0118 11:59:11.703907 9427 worker.go:570] commit new work on block 1 with 0
txs & 0 uncles. Took 7.109111ms
I0118 11:59:11.704083 9427 ethash.go:220] Generating DAG for epoch 0 (size
1073739904) (0000000000000000000000000000000000000000000000000000000000000000)
I0118 11:59:12.698679 9427 ethash.go:237] Done generating DAG for epoch 0, it
took 994.61107ms
I0118 11:59:15.163864 9427 worker.go:349]
</code>```

And my genesis block code is as follows:

```<code>{
“nonce”: “0xdeadbeefdeadbeef”,
“timestamp”: “0x0”,
“parentHash”:
“0x0000000000000000000000000000000000000000000000000000000000000000”,
“extraData”: “0x0”,
“gasLimit”: “0x8000000”,
“difficulty”: “0x400”,
“mixhash”:
“0x0000000000000000000000000000000000000000000000000000000000000000”,
“coinbase”: “0x3333333333333333333333333333333333333333”,
“alloc”: {
}
}
</code>```

Since my network is isolated and have only one node (no peers), I am quite confused with this behaviour. Any insights would be greatly appreciated.

答: You can try EmbarkJS which can run geth client with mineWhenNeeded option on private network. It will only mine when new transactions come in.

Title: Ethereum private network mining

Body:
1) I setup a private ethereum network using the following command

$geth --genesis <genesis json file path> --datadir <some path to an empty
folder> --networkid 123 --nodiscover --maxpeers 0 console

2) Created an account

3) Then, started the miner using miner.start() command.

After a while ethers were getting added automatically to my account, but I don’t have any pending transaction in my private network. So from where could my miners are getting the ethers?

Even though, I didn’t instantiate any transactions in my network, I could see the some transaction being recorded in the logs, once I start the miner.

The log is as follows:

I0118 11:59:11.696523 9427 backend.go:584] Automatic pregeneration of ethash
DAG ON (ethash dir: /Users/minisha/.ethash)
I0118 11:59:11.696590 9427 backend.go:591] checking DAG (ethash dir:
/Users/minisha/.ethash)
I0118 11:59:11.696728 9427 miner.go:119] Starting mining operation (CPU=4
TOT=5)
true
> I0118 11:59:11.703907 9427 worker.go:570] commit new work on block 1 with 0
txs & 0 uncles. Took 7.109111ms
I0118 11:59:11.704083 9427 ethash.go:220] Generating DAG for epoch 0 (size
1073739904) (0000000000000000000000000000000000000000000000000000000000000000)
I0118 11:59:12.698679 9427 ethash.go:237] Done generating DAG for epoch 0, it
took 994.61107ms
I0118 11:59:15.163864 9427 worker.go:349]

And my genesis block code is as follows:

{
“nonce”: “0xdeadbeefdeadbeef”,
“timestamp”: “0x0”,
“parentHash”:
“0x0000000000000000000000000000000000000000000000000000000000000000”,
“extraData”: “0x0”,
“gasLimit”: “0x8000000”,
“difficulty”: “0x400”,
“mixhash”:
“0x0000000000000000000000000000000000000000000000000000000000000000”,
“coinbase”: “0x3333333333333333333333333333333333333333”,
“alloc”: {
}
}

Since my network is isolated and have only one node (no peers), I am quite confused with this behaviour. Any insights would be greatly appreciated.


问:
Python JSON form Post datas
I want to post a form using Python an request, that form uses JSON

Here is the JSON datas that are sent when sendind the form :

```<code>{"method":"PostMessage",
"params":["6drsebmMzn0xYSogAfd_X4DojKa7OpR9QDYAH41lm80xMYjL225zOeeYow5it1l6TCsiOrGb6cvbU50hN11EzkJF9gtlZ3Wgk3ipOO1zOKdcrFFKIudz-ct95EogJSNu",{"ownerId":256887569,"id":18642094,"type":2},{"posterName":"Lionel",
"isPrivate":false,
"posterUrl":"",
"posterEmail":"monemail@gmail.com",
"body":"Good photos !!"}],
"id":0}
</code>```

My question is how to send this data using python and requests ? Thank you

答:
The easiest way to do it is this:</p>

```<code>import requests

# generate data as string (you may want to automate this line)
data = '{\"method\":\"PostMessage\",\"params\":[\"6drsebmMzn0xYSogAfd_X4DojKa7OpR9QDYAH41lm80xMYjL225zOeeYow5it1l6TCsiOrGb6cvbU50hN11EzkJF9gtlZ3Wgk3ipOO1zOKdcrFFKIudz-ct95EogJSNu\",{\"ownerId\":256887569,\"id\":18642094,\"type\":2},{\"posterName\":\"Lionel\",\"isPrivate\":false,\"posterUrl\":\"\",\"posterEmail\":\"monemail@gmail.com\",\"body\":\"Good photos !!\"}],\"id\":0}'

# post
r = requests.post(url, data=data)

# print result
print r.text.encode('utf-8')
</code>```

Title: Python JSON form Post datas

Body:
I want to post a form using Python an request, that form uses JSON

Here is the JSON datas that are sent when sendind the form :

{"method":"PostMessage",
"params":["6drsebmMzn0xYSogAfd_X4DojKa7OpR9QDYAH41lm80xMYjL225zOeeYow5it1l6TCsiOrGb6cvbU50hN11EzkJF9gtlZ3Wgk3ipOO1zOKdcrFFKIudz-ct95EogJSNu",{"ownerId":256887569,"id":18642094,"type":2},{"posterName":"Lionel",
"isPrivate":false,
"posterUrl":"",
"posterEmail":"monemail@gmail.com",
"body":"Good photos !!"}],
"id":0}

My question is how to send this data using python and requests ? Thank you

Body:
The easiest way to do it is this:

import requests

# generate data as string (you may want to automate this line)
data = '{\"method\":\"PostMessage\",\"params\":[\"6drsebmMzn0xYSogAfd_X4DojKa7OpR9QDYAH41lm80xMYjL225zOeeYow5it1l6TCsiOrGb6cvbU50hN11EzkJF9gtlZ3Wgk3ipOO1zOKdcrFFKIudz-ct95EogJSNu\",{\"ownerId\":256887569,\"id\":18642094,\"type\":2},{\"posterName\":\"Lionel\",\"isPrivate\":false,\"posterUrl\":\"\",\"posterEmail\":\"monemail@gmail.com\",\"body\":\"Good photos !!\"}],\"id\":0}'

# post
r = requests.post(url, data=data)

# print result
print r.text.encode('utf-8')


问:
Date based script not working
I have added a query in my site so that it will show div based on date. I have added 30 div in my site and added display none to them. Used the date based query to make one div active each day. Previously it is working when I have added that for 2 days. But when I am adding that for 30 day basis, it is not working for me. My url is here.

You can check the code is executed here.

```<code><script src="https://code.jquery.com/jquery-3.1.1.min.js"></script>
<script>
window.setInterval(function(){
  var current = new Date();
  var expiry  = new Date("March 26, 2017 12:00:00")
  var expiry2 = new Date("March 27, 2017 12:00:00")
 var expiry3 = new Date("March 28, 2017 12:00:00")
 var expiry4 = new Date("March 29, 2017 12:00:00")
 var expiry5 = new Date("March 30, 2017 12:00:00")
 var expiry6 = new Date("April 01, 2017 12:00:00")
 var expiry7 = new Date("April 02, 2017 12:00:00")
 var expiry8 = new Date("April 03, 2017 12:00:00")
 var expiry9 = new Date("April 04, 2017 12:00:00")
 var expiry10 = new Date("April 05, 2017 12:00:00")
 var expiry11 = new Date("April 06, 2017 12:00:00")
 var expiry12 = new Date("April 07, 2017 12:00:00")
 var expiry13 = new Date("April 08, 2017 12:00:00")
 var expiry14 = new Date("April 09, 2017 12:00:00")
 var expiry15 = new Date("April 10, 2017 12:00:00")
 var expiry16 = new Date("April 11, 2017 12:00:00")
 var expiry17 = new Date("April 12, 2017 12:00:00")
 var expiry18 = new Date("April 13, 2017 12:00:00")
 var expiry19 = new Date("April 14, 2017 12:00:00")
 var expiry20 = new Date("April 15, 2017 12:00:00")
var expiry21 = new Date("April 16, 2017 12:00:00")
var expiry22 = new Date("April 17, 2017 12:00:00")
var expiry23 = new Date("April 18, 2017 12:00:00")
var expiry24 = new Date("April 19, 2017 12:00:00")
var expiry25 = new Date("April 20, 2017 12:00:00")
var expiry26 = new Date("April 21, 2017 12:00:00")
var expiry27 = new Date("April 22, 2017 12:00:00")
var expiry28 = new Date("April 23, 2017 12:00:00")
var expiry29 = new Date("April 24, 2017 12:00:00")
var expiry30 = new Date("April 25, 2017 12:00:00")
  if(current.getTime()>expiry.getTime()){
    $('.panchang_one').hide();
    $('.panchang_two').show();
  }
  else if(current.getTime()>expiry2.getTime()){
       $('.panchang_two').hide();
       $('.panchang_three').show();
   }
  else if(current.getTime()>expiry3.getTime()){
       $('.panchang_three').hide();
       $('.panchang_four').show();
   }
  else if(current.getTime()>expiry4.getTime()){
       $('.panchang_four').hide();
       $('.panchang_five').show();
   }
  else if(current.getTime()>expiry5.getTime()){
       $('.panchang_five').hide();
       $('.panchang_six').show();
   }
  else if(current.getTime()>expiry6.getTime()){
       $('.panchang_six').hide();
       $('.panchang_seven').show();
   }
  else if(current.getTime()>expiry7.getTime()){
       $('.panchang_seven').hide();
       $('.panchang_eight').show();
   }
  else if(current.getTime()>expiry8.getTime()){
       $('.panchang_eight').hide();
       $('.panchang_nine').show();
   }
  else if(current.getTime()>expiry9.getTime()){
       $('.panchang_nine').hide();
       $('.panchang_ten').show();
   }
  else if(current.getTime()>expiry10.getTime()){
       $('.panchang_ten').hide();
       $('.panchang_eleven').show();
   }
  else if(current.getTime()>expiry11.getTime()){
       $('.panchang_eleven').hide();
       $('.panchang_twelve').show();
   }
  else if(current.getTime()>expiry12.getTime()){
       $('.panchang_twelve').hide();
       $('.panchang_thirteen').show();
   }
  else if(current.getTime()>expiry13.getTime()){
       $('.panchang_thirteen').hide();
       $('.panchang_fourteen').show();
   }
  else if(current.getTime()>expiry14.getTime()){
       $('.panchang_fourteen).hide();
       $('.panchang_fifteen').show();
   }
  else if(current.getTime()>expiry15.getTime()){
       $('.panchang_fifteen').hide();
       $('.panchang_sixteen').show();
   }
  else if(current.getTime()>expiry16.getTime()){
       $('.panchang_sixteen').hide();
       $('.panchang_seventeen').show();
   }
  else if(current.getTime()>expiry17.getTime()){
       $('.panchang_seventeen').hide();
       $('.panchang_eighteen').show();
   }
  else if(current.getTime()>expiry18.getTime()){
       $('.panchang_eighteen').hide();
       $('.panchang_nineteen').show();
   }
  else if(current.getTime()>expiry19.getTime()){
       $('.panchang_nineteen').hide();
       $('.panchang_twenty').show();
   }
  else if(current.getTime()>expiry20.getTime()){
       $('.panchang_twenty').hide();
       $('.panchang_twentyone').show();
   }
  else if(current.getTime()>expiry21.getTime()){
       $('.panchang_twentyone').hide();
       $('.panchang_twentytwo').show();
   }
  else if(current.getTime()>expiry22.getTime()){
       $('.panchang_twentytwo').hide();
       $('.panchang_twentythree').show();
   }
  else if(current.getTime()>expiry23.getTime()){
       $('.panchang_twentythree').hide();
       $('.panchang_twentyfour').show();
   }
  else if(current.getTime()>expiry24.getTime()){
       $('.panchang_twentyfour').hide();
       $('.panchang_twentyfive').show();
   }
  else if(current.getTime()>expiry25.getTime()){
       $('.panchang_twentyfive').hide();
       $('.panchang_twentysix').show();
   }
  else if(current.getTime()>expiry26.getTime()){
       $('.panchang_twentysix').hide();
       $('.panchang_twentyseven').show();
   }
  else if(current.getTime()>expiry27.getTime()){
       $('.panchang_twentyseven').hide();
       $('.panchang_twentyeight').show();
   }
  else if(current.getTime()>expiry28.getTime()){
       $('.panchang_twentyeight').hide();
       $('.panchang_twentynine').show();
   }
  else if(current.getTime()>expiry29.getTime()){
       $('.panchang_twentynine').hide();
       $('.panchang_thirty').show();
   }
}, 3000);
$('.panchang_one').show();
</script>
</code>```

Can anyone point me what I am doing wrong?

答:
In your question I found it odd that you were hard coding all of the days. If you are planning to use var current = new Date(); then this gets today's / current date, therefore you will literally have to update those hard coded values every single day for forever.

I took the liberty of converting your code into something more minimalistic. Clicking the Click Me button simulates the passing of days over the next 30 consecutive days relative to today's current date.

// Create an ease of use function to add days to a given date
Date.prototype.addDays = function(days) {
  var dat = new Date(this.valueOf());
  dat.setDate(dat.getDate() + days);
  return dat;
}

// Start with all divs hidden
$('.panchang').hide();

// This will be called when our button is clicked
function start() {
  var today = new Date(); // get today's date
  var expiryDates = new Array();
  for (var i = 0; i < 30; ++i) // store the dates of the next 30 days
    expiryDates.push(new Date().addDays(i));

  // Every 100 milli seconds, simulate the passing of 1 day
  var interval = setInterval(() => {
    var keyDateIndex = null;
    // iterate expiry dates and see which dates we have surpassed
    for (let [index, value] of expiryDates.entries()) {
      if (today.getTime() > value.getTime())
        keyDateIndex = index;
      else
        break;

    }

    if (keyDateIndex == expiryDates.length - 1)
      clearInterval(interval);
    else
      today = today.addDays(1);

    // Show the correct divs
    $('.panchang').hide();
    $('.panchang:eq(' + keyDateIndex + ')').show();

  }, 100);

}```
<pre class="snippet-code-html lang-html prettyprint-override"><code><script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="start()">Click Me</button>
<div class="panchang">1</div>
<div class="panchang">2</div>
<div class="panchang">3</div>
<div class="panchang">4</div>
<div class="panchang">5</div>
<div class="panchang">6</div>
<div class="panchang">7</div>
<div class="panchang">8</div>
<div class="panchang">9</div>
<div class="panchang">10</div>
<div class="panchang">11</div>
<div class="panchang">12</div>
<div class="panchang">13</div>
<div class="panchang">14</div>
<div class="panchang">15</div>
<div class="panchang">16</div>
<div class="panchang">17</div>
<div class="panchang">18</div>
<div class="panchang">19</div>
<div class="panchang">20</div>
<div class="panchang">21</div>
<div class="panchang">22</div>
<div class="panchang">23</div>
<div class="panchang">24</div>
<div class="panchang">25</div>
<div class="panchang">26</div>
<div class="panchang">27</div>
<div class="panchang">28</div>
<div class="panchang">29</div>
<div class="panchang">30</div></code>```

Title: Date based script not working

Body:
I have added a query in my site so that it will show div based on date. I have added 30 div in my site and added display none to them. Used the date based query to make one div active each day. Previously it is working when I have added that for 2 days. But when I am adding that for 30 day basis, it is not working for me. My url is here.

You can check the code is executed here.

Can anyone point me what I am doing wrong?

Body:
In your question I found it odd that you were hard coding all of the days. If you are planning to use var current = new Date(); then this gets today's / current date, therefore you will literally have to update those hard coded values every single day for forever.

I took the liberty of converting your code into something more minimalistic. Clicking the Click Me button simulates the passing of days over the next 30 consecutive days relative to today's current date.

// Create an ease of use function to add days to a given date
Date.prototype.addDays = function(days) {
  var dat = new Date(this.valueOf());
  dat.setDate(dat.getDate() + days);
  return dat;
}

// Start with all divs hidden
$('.panchang').hide();

// This will be called when our button is clicked
function start() {
  var today = new Date(); // get today's date
  var expiryDates = new Array();
  for (var i = 0; i < 30; ++i) // store the dates of the next 30 days
    expiryDates.push(new Date().addDays(i));

  // Every 100 milli seconds, simulate the passing of 1 day
  var interval = setInterval(() => {
    var keyDateIndex = null;
    // iterate expiry dates and see which dates we have surpassed
    for (let [index, value] of expiryDates.entries()) {
      if (today.getTime() > value.getTime())
        keyDateIndex = index;
      else
        break;

    }

    if (keyDateIndex == expiryDates.length - 1)
      clearInterval(interval);
    else
      today = today.addDays(1);

    // Show the correct divs
    $('.panchang').hide();
    $('.panchang:eq(' + keyDateIndex + ')').show();

  }, 100);

}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<button onclick="start()">Click Me</button>
<div class="panchang">1</div>
<div class="panchang">2</div>
<div class="panchang">3</div>
<div class="panchang">4</div>
<div class="panchang">5</div>
<div class="panchang">6</div>
<div class="panchang">7</div>
<div class="panchang">8</div>
<div class="panchang">9</div>
<div class="panchang">10</div>
<div class="panchang">11</div>
<div class="panchang">12</div>
<div class="panchang">13</div>
<div class="panchang">14</div>
<div class="panchang">15</div>
<div class="panchang">16</div>
<div class="panchang">17</div>
<div class="panchang">18</div>
<div class="panchang">19</div>
<div class="panchang">20</div>
<div class="panchang">21</div>
<div class="panchang">22</div>
<div class="panchang">23</div>
<div class="panchang">24</div>
<div class="panchang">25</div>
<div class="panchang">26</div>
<div class="panchang">27</div>
<div class="panchang">28</div>
<div class="panchang">29</div>
<div class="panchang">30</div>


问:
Get Spring Security Principal in JSP EL expression
I am using Spring MVC and Spring Security version 3.0.6.RELEASE. What is the easiest way to get the user name in my JSP? Or even just whether or not the user is logged in? I can think of a couple ways:

1. Using a scriptlet

Using a scriptlet like this to determine if the user is logged in:

```<code><%=org.springframework.security.core.context.SecurityContextHolder.getContext()
    .getAuthentication().getPrincipal().equals("anonymousUser")
    ? "false":"true"%>
</code>```

I'm not a fan of using scriptlets, though, and I want to use this in some <c:if> tags, which requires putting it back as a page attribute.

2. Using SecurityContextHolder

I could again use SecurityContextHolder from my @Controller and put it on the model. I need this on every page, though, so I'd rather not have to add this logic in every one of my Controllers.

I suspect there's a cleaner way to do this...

答:
1) MY CUSTOM USER CLASS with extra field mobile:

```<code> public class SiteUser extends User {

    public SiteUser(String username, String password, Collection<? extends GrantedAuthority> authorities,
            String mobile) {
        super(username, password, true, true, true, true, authorities);
        this.mobile = mobile;
    }

    private String mobile;

    public String getMobile() {
        return mobile;
    }

    public void setMobile(String mobile) {
        this.mobile = mobile;
    }

}
</code>```

2) IN MY UserDetailsServiceImpl.java
I POPULATED THIS CUSTOM SiteUser object.

```<code>public SiteUser loadUserByUsername(String username)  {
        UserInfoVO userInfoVO = userDAO.getUserInfo(username);
        GrantedAuthority authority = new SimpleGrantedAuthority(userInfoVO.getRole());

        SiteUser siteUser = new SiteUser(userInfoVO.getUsername(), userInfoVO.getPassword(),
                Arrays.asList(authority), userInfoVO.getMobile());

        return siteUser;
}
</code>```

3) AND IN VIEW I AM ACCESSING IT AS:

Body:
I am using Spring MVC and Spring Security version 3.0.6.RELEASE. What is the easiest way to get the user name in my JSP? Or even just whether or not the user is logged in? I can think of a couple ways:

1. Using a scriptlet

Using a scriptlet like this to determine if the user is logged in:

<%=org.springframework.security.core.context.SecurityContextHolder.getContext()
    .getAuthentication().getPrincipal().equals("anonymousUser")
    ? "false":"true"%>

I'm not a fan of using scriptlets, though, and I want to use this in some <c:if> tags, which requires putting it back as a page attribute.

2. Using SecurityContextHolder

I could again use SecurityContextHolder from my @Controller and put it on the model. I need this on every page, though, so I'd rather not have to add this logic in every one of my Controllers.

I suspect there's a cleaner way to do this...

Body:
1) MY CUSTOM USER CLASS with extra field mobile:

 public class SiteUser extends User {

    public SiteUser(String username, String password, Collection<? extends GrantedAuthority> authorities,
            String mobile) {
        super(username, password, true, true, true, true, authorities);
        this.mobile = mobile;
    }

    private String mobile;

    public String getMobile() {
        return mobile;
    }

    public void setMobile(String mobile) {
        this.mobile = mobile;
    }

}

2) IN MY UserDetailsServiceImpl.java
I POPULATED THIS CUSTOM SiteUser object.

public SiteUser loadUserByUsername(String username)  {
        UserInfoVO userInfoVO = userDAO.getUserInfo(username);
        GrantedAuthority authority = new SimpleGrantedAuthority(userInfoVO.getRole());

        SiteUser siteUser = new SiteUser(userInfoVO.getUsername(), userInfoVO.getPassword(),
                Arrays.asList(authority), userInfoVO.getMobile());

        return siteUser;
}

3) AND IN VIEW I AM ACCESSING IT AS:

< a href="#" th:text="${#httpServletRequest.userPrincipal.principal.mobile}">


答:
It's looping over every character in the string str, assigning them to c and then seeing if c is equal to 0 which would indicate the end of the string.

Although really the code should use '\0' as that is more obviously a NUL character.

Title: What does `(c = *str) != 0` mean?


问:
Obfuscated class names aren't added to the stylesheet when added to Cells
The obfuscated class name(GPGOA3-B) is indeed being added to the cell, but the class itself isn't being added to any stylesheet.

What am I doing wrong?

```<code>public final class HyperlinkCell extends AbstractCell<HyperlinkCellData> {

    // TODO
    private interface MyCss extends CssResource {
        String red();
    }

    // TODO
    private interface MyResources extends ClientBundle {
        @Source("HyperlinkCell.css")
        MyCss css();
    }

    // TODO
    private static MyResources resources = GWT.create(MyResources.class);

    HyperlinkCell() {
        super("click");
    }

    @Override
    public void onBrowserEvent(Element parent, HyperlinkCellData value,
            Object key, NativeEvent event,
            ValueUpdater<HyperlinkCellData> valueUpdater) {
        // handle click event
        History.newItem(value.targetHistoryToken, true);
    }

    @Override
    public void render(HyperlinkCellData value, Object key, SafeHtmlBuilder sb) {
        String childGroupObfuscatedClass = resources.css().red();
        sb.append(SafeHtmlUtils.fromTrustedString("<a class=\""))
                .append(SafeHtmlUtils
                        .fromTrustedString(childGroupObfuscatedClass))
                .append(SafeHtmlUtils.fromTrustedString("\""))
                .append(SafeHtmlUtils.fromTrustedString(" href=\"#"))
                .append(SafeHtmlUtils.fromString(value.targetHistoryToken))
                .append(SafeHtmlUtils.fromTrustedString("\">"))
                .append(SafeHtmlUtils.fromString(value.text))
                .append(SafeHtmlUtils.fromTrustedString("</a>"));
    }
}
</code>```

HyperlinkCell.css

```<code>.red {
    color: red;
}
</code>```

resulting DOM element

```<code><a href="#target" class="GPGOA3-B">text</a>
</code>```

答:
```<code>MyResources.resources.css().ensureInjected();
</code>```

Calls
  com.google.gwt.dom.client.StyleInjector.injectStylesheet(String)
  to inject the contents of the
  CssResource into the DOM. Repeated
  calls to this method on an instance of
  a CssResources will have no effect.

Body:
The obfuscated class name(GPGOA3-B) is indeed being added to the cell, but the class itself isn't being added to any stylesheet.

What am I doing wrong?

public final class HyperlinkCell extends AbstractCell<HyperlinkCellData> {

    // TODO
    private interface MyCss extends CssResource {
        String red();
    }

    // TODO
    private interface MyResources extends ClientBundle {
        @Source("HyperlinkCell.css")
        MyCss css();
    }

    // TODO
    private static MyResources resources = GWT.create(MyResources.class);

    HyperlinkCell() {
        super("click");
    }

    @Override
    public void onBrowserEvent(Element parent, HyperlinkCellData value,
            Object key, NativeEvent event,
            ValueUpdater<HyperlinkCellData> valueUpdater) {
        // handle click event
        History.newItem(value.targetHistoryToken, true);
    }

    @Override
    public void render(HyperlinkCellData value, Object key, SafeHtmlBuilder sb) {
        String childGroupObfuscatedClass = resources.css().red();
        sb.append(SafeHtmlUtils.fromTrustedString(""))
                .append(SafeHtmlUtils.fromString(value.text))
                .append(SafeHtmlUtils.fromTrustedString(""));
    }
}

HyperlinkCell.css

.red {
    color: red;
}

resulting DOM element

text

Body:
MyResources.resources.css().ensureInjected();

Calls
  com.google.gwt.dom.client.StyleInjector.injectStylesheet(String)
  to inject the contents of the
  CssResource into the DOM. Repeated
  calls to this method on an instance of
  a CssResources will have no effect.


问:
How to use NgFor in Angular 2 to indicate an active item on another html object?
I am using NgFor to iterate through a collection:

```<code>this.articles = [
    {
        id: 1,
        title: “Tile 1“,
        summary: “First Article“
    },
    {
        id: 2,
        title: “title 2“,
        summary: “Summary 2“
    },
    {
        id: 3,
        title: "Title 3”,
        summary: “Summary 3“
    },
    {
        id: 4,
        title: “Title 4“,
        summary: “Summary 4”
    }
];

<p class="controls">
    «
    <a (click)="showPrevArticle()">Previous article</a>
    —
    <a (click)="showNextArticle()">Next article</a>
    »
</p>
<div class="container">
    <template ngFor let-article [ngForOf]="[ selectedArticle ]" let-i="index">
        <ol class="article-indicators text"  [hidden]="articles.length <= 1">
              <li  *ngFor="let article of articles ; let i = index" [class.active]="selectedBundle === true" (click)="select(article)"><strong>id: </strong>{{i}} </li>
        </ol>

        <div [@articleAnimation]="orientation" class="article">
            <div class="name">
                {{ article.title }}
            </div>
            <div class="avatar">id is: <strong>{{i}}</strong></div>
            <div class="meta">
               {{ article.summary }}
            </div>
        </div>
    </template>
</div>
</code>```

I want a list of items to highlight which article is currently being on display in the "article" div above.

```<code><ol class="article-indicators text"  [hidden]="articles.length <= 1">
                  <li  *ngFor="let article of articles ; let i = index" [class.active]="selectedBundle === true" (click)="select(article)"><strong>id: </strong>{{i}} </li>
            </ol>
</code>```

Because the data is not fed through a router, how can I use an equivalent to [routerLinkActive]="['active']" to show which article has been pushed to the front?

///Edited

Component code:

This will probably explain better:

At the beginning I set up the animation orientation:

```<code>type Orientation = ( "prev" | "next" | "none" );
</code>```

My Component code:

```<code>@Component({
  selector: 'app-article-01',
  animations: [
        trigger(
            "articleAnimation",
            [
                transition(
                    "void => prev", // ---> Entering --->
                    [
                        // Maintain a zIndex of 2 throughout the ENTIRE animation
                        style({
                            left: -100,
                            opacity: 0.0,
                            zIndex: 2
                        }),
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: 0,
                                opacity: 1.0,
                                zIndex: 2
                            })
                        )
                    ]
                ),
                transition(
                    "prev => void", // ---> Leaving --->
                    [
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: 100,
                                opacity: 0.0
                            })
                        )
                    ]
                ),
                transition(
                    "void => next", // <--- Entering <---
                    [
                        // Maintain a zIndex of 2 throughout the ENTIRE
                        // animation (but not after the animation)
                        style({
                            left: 100,
                            opacity: 0.0,
                            zIndex: 2
                        }),
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: 0,
                                opacity: 1.0,
                                zIndex: 2
                            })
                        )
                    ]
                ),
                transition(
                    "next => void", // <--- Leaving <---
                    [
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: -100,
                                opacity: 0.0
                            })
                        )
                    ]
                )
            ]
        )
    ],
  templateUrl: './article-01.component.html',
  styleUrls: ['./article-01.component.scss']
})
</code>```

Export my class and create my article collection:

```<code>export class article01Component implements OnInit {
 //indicator states
  selectedArticleId:number;

  isSelected(article): boolean {
       return article.id === this.selectedArticleId;
   }

  public orientation: Orientation;
  public selectedArticle: article;

  private changeDetectorRef: ChangeDetectorRef;
  private articles: article[];

  constructor(changeDetectorRef: ChangeDetectorRef) {

    this.changeDetectorRef = changeDetectorRef;
    this.orientation = "none";

     // Setup the articles collection.
        this.articles = [
            {
                id: 1,
                title: "Article 1 Heading",
                summary: "Summary for article 1"
            },
            {
                id: 2,
                title: "Article 2 Heading",
                summary: "Summary for article 2"            },
            {
                id: 3,
                title: "Article 3 Heading",
                summary: "Summary for article 3"            },
            {
                id: 4,
                title: "Artcile 4 Heading",
                summary: "Summary for article 4"
            }
        ];

          // Randomly(ish) select the initial article to display.
        this.selectedArticle = this.articles[ Math.floor( Math.random() * this.articles.length ) ];

  }
</code>```

Previous button code with implemented method for indicator:

I cycle to the next article in the collection.

```<code>public showNextArticle() : void {

    // Change the "state" of the animation trigger.
    this.orientation = "next";

    // Force the Template to apply the new animation state before we actually
    // change the rendered element view-model. If we don't force a change-detection,
    // the new [@orientation] state won't be applied prior to the "leave" transition;
    // which means that we won't be leaving from the "expected" state.
    this.changeDetectorRef.detectChanges();

    // Find the currently selected index.
    var index = this.articles.indexOf( this.selectedArticle );
    //THIS IS WRONG:highlight indicator, this is not picking up the correct id
    this.selectedArticleId = index;

    //this.indicatorState(newState)

    // Move the rendered element to the next index - this will cause the current item
    // to enter the ( "next" => "void" ) transition and this new item to enter the
    // ( "void" => "next" ) transition.
    this.selectedArticle = this.articles[ index + 1 ]
        ? this.articles[ index + 1 ]
        : this.articles[ 0 ]
    ;

}
</code>```

My indicators

```<code>    <ol class="article-indicators text"  [hidden]="articles.length <= 1">
          <li  *ngFor="let article of articles ; let i = index" [class.active]="isSelected(article)"  (click)="select(article)"><strong>id: </strong>{{i}} </li>
    </ol>
</code>```

There seems to be a problem with how the active class is applied as it is doing it on a random basis rather than picking up the current selectedArticle index:

// Find the currently selected index.

```<code>    var index = this.articles.indexOf( this.selectedArticle );

    this.selectedArticleId = index;

Select the bundle via the indicator (not working):

  public select(selectedArticle){

       selectedArticle.id = this.article.id //property of article does not exist on type 'ArticleComponent'
   }
</code>```

答:
As @Fredrik Lundin said, but I would move the logic to the Component

```<code>export class YourComponent {
   selectedArticleId: int;

   ...

   isSelected(article): boolean {
       return article.id === this.selectedArticleId;
   }

   showNextArticle() {
      ...
      this.selectedArticleId = article.id;
}
</code>```

And html:

```<code><li  *ngFor="let article of articles ; let i = index" [class.active]="isSelected(article)" (click)="select(article)"><strong>id: </strong>{{i}} </li>
</code>```

Body:
I am using NgFor to iterate through a collection:

this.articles = [
    {
        id: 1,
        title: “Tile 1“,
        summary: “First Article“
    },
    {
        id: 2,
        title: “title 2“,
        summary: “Summary 2“
    },
    {
        id: 3,
        title: "Title 3”,
        summary: “Summary 3“
    },
    {
        id: 4,
        title: “Title 4“,
        summary: “Summary 4”
    }
];

    «
    Previous article
    —
    Next article
    »

    <template ngFor let-article [ngForOf]="[ selectedArticle ]" let-i="index">
        <ol class="article-indicators text"  [hidden]="articles.length <= 1">

id: {{i}}

                {{ article.title }}

id is: {{i}}

               {{ article.summary }}

    </template>

I want a list of items to highlight which article is currently being on display in the "article" div above.

<ol class="article-indicators text"  [hidden]="articles.length <= 1">

id: {{i}}

Because the data is not fed through a router, how can I use an equivalent to [routerLinkActive]="['active']" to show which article has been pushed to the front?

///Edited

Component code:

This will probably explain better:

At the beginning I set up the animation orientation:

type Orientation = ( "prev" | "next" | "none" );

My Component code:

@Component({
  selector: 'app-article-01',
  animations: [
        trigger(
            "articleAnimation",
            [
                transition(
                    "void => prev", // ---> Entering --->
                    [
                        // Maintain a zIndex of 2 throughout the ENTIRE animation
                        style({
                            left: -100,
                            opacity: 0.0,
                            zIndex: 2
                        }),
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: 0,
                                opacity: 1.0,
                                zIndex: 2
                            })
                        )
                    ]
                ),
                transition(
                    "prev => void", // ---> Leaving --->
                    [
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: 100,
                                opacity: 0.0
                            })
                        )
                    ]
                ),
                transition(
                    "void => next", // <--- Entering <---
                    [
                        // Maintain a zIndex of 2 throughout the ENTIRE
                        // animation (but not after the animation)
                        style({
                            left: 100,
                            opacity: 0.0,
                            zIndex: 2
                        }),
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: 0,
                                opacity: 1.0,
                                zIndex: 2
                            })
                        )
                    ]
                ),
                transition(
                    "next => void", // <--- Leaving <---
                    [
                        animate(
                            "200ms ease-in-out",
                            style({
                                left: -100,
                                opacity: 0.0
                            })
                        )
                    ]
                )
            ]
        )
    ],
  templateUrl: './article-01.component.html',
  styleUrls: ['./article-01.component.scss']
})

Export my class and create my article collection:

export class article01Component implements OnInit {
 //indicator states
  selectedArticleId:number;

  isSelected(article): boolean {
       return article.id === this.selectedArticleId;
   }

  public orientation: Orientation;
  public selectedArticle: article;

  private changeDetectorRef: ChangeDetectorRef;
  private articles: article[];

  constructor(changeDetectorRef: ChangeDetectorRef) {

    this.changeDetectorRef = changeDetectorRef;
    this.orientation = "none";

     // Setup the articles collection.
        this.articles = [
            {
                id: 1,
                title: "Article 1 Heading",
                summary: "Summary for article 1"
            },
            {
                id: 2,
                title: "Article 2 Heading",
                summary: "Summary for article 2"            },
            {
                id: 3,
                title: "Article 3 Heading",
                summary: "Summary for article 3"            },
            {
                id: 4,
                title: "Artcile 4 Heading",
                summary: "Summary for article 4"
            }
        ];

          // Randomly(ish) select the initial article to display.
        this.selectedArticle = this.articles[ Math.floor( Math.random() * this.articles.length ) ];

  }

Previous button code with implemented method for indicator:

I cycle to the next article in the collection.

public showNextArticle() : void {

    // Change the "state" of the animation trigger.
    this.orientation = "next";

    // Force the Template to apply the new animation state before we actually
    // change the rendered element view-model. If we don't force a change-detection,
    // the new [@orientation] state won't be applied prior to the "leave" transition;
    // which means that we won't be leaving from the "expected" state.
    this.changeDetectorRef.detectChanges();

    // Find the currently selected index.
    var index = this.articles.indexOf( this.selectedArticle );
    //THIS IS WRONG:highlight indicator, this is not picking up the correct id
    this.selectedArticleId = index;

    //this.indicatorState(newState)

    // Move the rendered element to the next index - this will cause the current item
    // to enter the ( "next" => "void" ) transition and this new item to enter the
    // ( "void" => "next" ) transition.
    this.selectedArticle = this.articles[ index + 1 ]
        ? this.articles[ index + 1 ]
        : this.articles[ 0 ]
    ;

}

My indicators

    <ol class="article-indicators text"  [hidden]="articles.length <= 1">

id: {{i}}

There seems to be a problem with how the active class is applied as it is doing it on a random basis rather than picking up the current selectedArticle index:

// Find the currently selected index.

    var index = this.articles.indexOf( this.selectedArticle );

    this.selectedArticleId = index;

Select the bundle via the indicator (not working):

  public select(selectedArticle){

       selectedArticle.id = this.article.id //property of article does not exist on type 'ArticleComponent'
   }

Body:
As @Fredrik Lundin said, but I would move the logic to the Component

export class YourComponent {
   selectedArticleId: int;

   ...

   isSelected(article): boolean {
       return article.id === this.selectedArticleId;
   }

   showNextArticle() {
      ...
      this.selectedArticleId = article.id;
}

And html:

<li  *ngFor="let article of articles ; let i = index" [class.active]="isSelected(article)" (click)="select(article)"><strong>id: </strong>{{i}} </li>


问:
IBM notes java script library or package
I am creating some Java agents, in which I retrieve a HTML post and put it into a variable. In short I have this code:

```<code>      lotus.domino.Document doc = agentContext.getDocumentContext();
      String xml = "";
      Vector items = doc.getItems();
      for (int j=0; j<items.size(); j++)
        {
          Item item = (Item)items.elementAt(j);
          String fldName = item.getName();
          String fldValue = item.getValueString();
           if ( fldName.matches("(?i).*request_content.*") )
                {
                  sb.append( fldValue );
                  xml = sb.toString();
                  xml = xml.replace("&", "&");

                }

                etc..
</code>```

Now for multiple java agents this code is the same.. What would be best practise to do? Put this code in to a script library and java class or put it in to a java package?

And next how do I call a class from out a script library or custom made java package?

thanks

答: IMHO: You should put a java class with this code in the java library and import it to agent (see pic.)

Body:
I am creating some Java agents, in which I retrieve a HTML post and put it into a variable. In short I have this code:

      lotus.domino.Document doc = agentContext.getDocumentContext();
      String xml = "";
      Vector items = doc.getItems();
      for (int j=0; j<items.size(); j++)
        {
          Item item = (Item)items.elementAt(j);
          String fldName = item.getName();
          String fldValue = item.getValueString();
           if ( fldName.matches("(?i).*request_content.*") )
                {
                  sb.append( fldValue );
                  xml = sb.toString();
                  xml = xml.replace("&", "&");

                }

                etc..

Now for multiple java agents this code is the same.. What would be best practise to do? Put this code in to a script library and java class or put it in to a java package?

And next how do I call a class from out a script library or custom made java package?

thanks