FOSS Hosting

Dobrodošli na FOSS Srbija

Free and Opensource Srbija je skup entuzijasta i ljubitelja slobodnog i otvorenog koda. Cilj nam je okupiti sve istomišljenike na jednom mestu i stvoriti najveći globalni OpenSource projekat u Srbiji i šire!

  1. This site uses cookies. By continuing to use this site, you are agreeing to our use of cookies. Learn More.

Mala pomoć oko JavaScript-a

Discussion in 'Programiranje' started by Prizma, 11.08.2018.

  1. Prizma

    Korisnik

    Joined:
    13.02.2017
    Messages:
    226
    Likes Received:
    167
    Location:
    Belgrade
    Okruženje:
    XFCE
    Sistem:
    OpenSuse
    Из неког разлога, ова функција ми је увек правила проблеме. Те ради те не ради, па ко има искуства, ако може мала помоћ :)

    Хоћу да променим text-shadowing у једном диву за сва слова у њему. Све се одвија на једној html страници. Диву сам дао id="main". Унутар style тага сам ставио:
    text-shadow: 5px 5px 1px limegreen;
    То ради.
    Хоћу да се то мења на 3 милисекунде. Ево га цео script таг:
    Code:
    <script>
            var con = 0;
            function change()
            {
                setInterval(
                function()
                {
                    var d = document.getElementByID("main");
                    if( con == 1)
                    {
                        d.style.textShadow = "5px 5px 1px limegreen";
                        con = 0;
                    }
                    else
                    {
                        d.style.textShadow = "5px 5px 1px red";
                        con = 1;
                    }
                }
                , 300);
            }
        </script>
    Ето, то је то. Не видим где грешим.
    Наравно, у див сам ставио onload="change()"...
     
  2. SickDope

    Korisnik

    Joined:
    22.07.2015
    Messages:
    86
    Likes Received:
    54
    Okruženje:
    XFCE
    Sistem:
    Fedora
    @Prizma
    Div tag ne podrzava onload funkciju - onload Event
    Pogledaj i ovu diskusiju How to add onload event to a div element?

    Jedno resenje:
    HTML:
    <html>
        <head>   
        </head>
        <body>
            <div id="main">
                <h2>
                    Hello World!
                </h2>
            </div>
        </body>
        <script>
            document.getElementById("main").onload = change();
            var con = 0;
            function change()
            {
                setInterval(
                function()
                {
                    var d = document.getElementById("main");
                    if( con == 1)
                    {
                        d.style.textShadow = "5px 5px 1px limegreen";
                        con = 0;
                    }
                    else
                    {
                        d.style.textShadow = "5px 5px 1px red";
                        con = 1;
                    }
                }
                , 300);
            };
        </script>
    </html>
     
    Prizma likes this.
  3. Prizma

    Korisnik

    Joined:
    13.02.2017
    Messages:
    226
    Likes Received:
    167
    Location:
    Belgrade
    Okruženje:
    XFCE
    Sistem:
    OpenSuse
    Аааааааа. То објашњава те ради те не ради моменат.
    Фала пуно.
     
  4. Prizma

    Korisnik

    Joined:
    13.02.2017
    Messages:
    226
    Likes Received:
    167
    Location:
    Belgrade
    Okruženje:
    XFCE
    Sistem:
    OpenSuse
    Ај да не отварам нову, мада се овде ради о jquery (исто му се 'вата)...

    Дакле имам једну web страницу коју рендерује сервер. У самој страници, имам један partial view (када се учита основна страница, позива се ајакс и он добавља податке да у одређени <div> тутне још малко html-a).

    У основној страници имам један <select id="view_mode"> таг са пар опција. У парцијалном делу се рендерује други селект (<select id="page_size">) са пар других опција. Таг за скрипту коју сам прикачио на ову основну страницу иде овако:
    Code:
    <script>
            /* loading func */
            $(function ($) {
                ajaxing(0);
                $('#view_mode').change(function () {
                    ajaxing(0);
                });
              
                /*why this doesn't work as an event listener? */
                $('#page_size').change(function () {
                    ajaxing(0);
                });
            });
            // page changing (button click) //
            function changePage(action) {
                ajaxing(action);
            }
            /* ajaxing? */
            function ajaxing(action) {
                var data = {
                    ViewType: $('#view_mode').val(),
                    UserStatusHash: $('#usr_hash').val(),
                    UserName: '@Model.UserName',
                    OldPageSize: $('#old_page_size').val(),
                    PageSize: $('#page_size').val(),
                    CurrentPage: $('#current_page').val(),
                    TotalPages: $('#total_pages').val(),
                    Paginate: $('#paginate').val(),
                    DirectionVal: action
                }
                $.ajax({
                    url: '/Article/Index_GetData',
                    type: 'GET',
                    cache: false,
                    data: data
                }).done(function (result) {
                    $('#left_content').html(result);
                });
            }
        </script>
    Дакел проблем је што када се промени вредност у view_mode селекту, ајакс се позове нормално и део странице се изрендерује, као што је предвиђено. Међутим, ајакс уопште не реагује на промену вредности page_size селекта. Ово сам решио тако што сам у page_size селект додао:
    <select id="page_size" onchange="ajaxing(0)">
    али ми иде на ганглије што не могу да провалим зашто му не чита вредност сам, већ морам у сам таг да стављам позив на ф-ју.
    За додатне детаље, питајте офскроз :cool:
     
  5. webad

    Korisnik

    Joined:
    06.01.2016
    Messages:
    71
    Likes Received:
    35
    Okruženje:
    Gnome 3
    Sistem:
    Ubuntu
    moguce je da ti zakacis onchange handler na page_size, ali nakon renderovanja tog parcijalnog dela, nakon rekreiranja celog dela se rekreira i page_size element, tj stari se unistava i kreira se novi. potencijalno taj novi nema zakacen onchange handler.
    view_mode promena funkcionise jer taj deo ne unistavas i pravis ponovo, on ostaje sa zakacenim handler-ima.

    ako je moja pretpostavka tacna, imas dve opcije:
    1. nakon insert-ovanja html-a da pokacis ponovo handler-e koji ti trebaju
    2. da handler-e ne kacis na konretne elemente vec na body
      • $('body').on('change', '#page_size', function(e){ $(this) // element });
    ako se odlucis za 2. opciju, javi da li ti radi. ovo je potencijalno velika optimizacija za onclick ako na strani imas mnogo slicnih dugmica. opterecujece je imati mnogo onclick handler-a, ovako se napravi samo jedan, jedino sto u telu f-je handler-a treba obraditi situaciju u odnosu na kliknuti element
     
    Prizma likes this.
  6. Prizma

    Korisnik

    Joined:
    13.02.2017
    Messages:
    226
    Likes Received:
    167
    Location:
    Belgrade
    Okruženje:
    XFCE
    Sistem:
    OpenSuse
    Вероватно ћу тако. Имам само два селекта и још 5~6 дугмади (button) за сада, ал на њих сам ставио да се изрендерују са onclick функцијом и неопходним параметрима.
    Чим стигнем да се позабавим тиме, јављам резултате,
    хвала
     
  7. Prizma

    Korisnik

    Joined:
    13.02.2017
    Messages:
    226
    Likes Received:
    167
    Location:
    Belgrade
    Okruženje:
    XFCE
    Sistem:
    OpenSuse
    Code:
    $('body').on('change', '#page_size', function () {
                    ajaxing(0);
                });
    Ради :).
    Не волим да држим позиве ф-ја у самим таговима. Овако бациш поглед на скрипту и одмах знаш шта ту отприлике има на страници.

    Не знам те детаље функционисања јаваскрипта, тј кад он повезује (скенира?) DOM елементе... Додуше, до сад нисам имао потребе да се таквим стварима бавим.
     
FOSS Hosting