html onclick event: how to update a value based on argument given to the onclick Ask Question

I’m reviewing some javascript interview questions, and came upon a codepen with the following line:

<form oninput="result2.value=add(parseInt(c.value))(parseInt(d.value))">

I’ve tried to do something similar with a button press, and know see that I don’t understand the proper syntax to update my output value upon the button-press. It works fine in the codepen example I was emulating. Does anyone know what I’m missing here?

I know I could create a js function that specifically updates my result.value by referencing it directly, but I’m trying to make my add function general so that don’t have to rewrite function for future input and output id’s.

HTML:

<input id="inputA" type="number"/><br>
<input id="inputB" type="number"/><br>
<button onclick="result.value=add(inputA.value, inputB.value)">
Add A and B
</button>
<br>
<output id="result" value=""></output>

JS:

$(document).ready(function() {
    function add(a,b) {
    return a+b;
  }
});

can't get array of images using JQuery, js, jsp Ask Question

I have jsp page where I get products from database and for each product i have several images. i want to create simple image slider in JS for each product, but i can’t get an array of images on JS. i try to do it by id in img tag, but have null. i understand that i need to use JQuery and i need to get a link on every product img, but don’t know how, maybe somebody can help me.

Jsp

<c:forEach items="${produkt}" var="produkt">
<div class="produkt-container" style=" border: 1px solid #ccc; display: inline-block;text-align:left;">
<a   href="produkt${produkt.id}" >${produkt.model}</a>
<%--<img src="${produkt.images[o]}" alt="">--%>
 <div id="img-container"  style="max-width: 280px">
   <button class="btnClass" id="prev" onclick="plusImg(-1)">❮ 
</button>
<c:forEach  items="${produkt.images}" var="image">
    <img src="${image}"  id="img-list"  alt="" style="border: 1px solid black; width: 260px">
</c:forEach>
   <button class="btnClass" id="next" onclick="plusImg(1)">❯</button>
</div>
</div>
</c:forEach>

simple slider in js

<script>

var count = 1;
sliderImg(count);

function plusImg(n) {
sliderImg(count += n);
}

function sliderImg (n) {
    var i;
 //  var ar  = $('.produkt-container').find('a');
 //  var x = $(this).attr('href');

var x = document.getElementsByClassName(".img-list");
if(n > x.length){count =1}
if(n < 1){count = x.length}
for (i =0; i<x.length; i++){
    x[i].style.display ="none";
}
x[count-1].style.display = "block";

console.log(x);
}

How to store and reuse a combination of selector and context expressions in a single variable? Ask Question

I’ve recently come to enjoy using this pattern of JQuery selector that I suppose you could describe as a syntactical shortcut for the .find() API:

$('.some-element', '.within-context')

There’s a discussion about it on SO here

Anyway, I find myself in the situation where I’d like to store this selector as a variable that I can use in multiple places in my script.

Obviously I can’t do this: var selector = '.some-element', '.within-context' as that would just leave me with a variable holding '.within-context'

'.some-element, .within-context' is something entirely different…

And despite sleuthing around the docs and SO, I’m not even sure what this does: $(['.some-element', '.within-context'])

Not really sure what else to try, should I just make two variables?

Ajax template function Ask Question

            $.ajax({
                type: "POST",
                url: "<?php echo base_url('profile/update_user_password'); ?>",
                cache: false,
                data: $('#form_changepassword').serialize(),
                dataType: "json",
                beforeSend: function () {
                    $('#btn_updatepassword').addClass('disabled');
                    $('#btn_updatepassword').attr('disabled', true);
                    $('#btn_updatepassword').html("<i class='fa fa-spinner fast-spin'></i>");
                },
                complete: function () {
                    $('#btn_updatepassword').removeClass('disabled');
                    $('#btn_updatepassword').attr('disabled', false);
                    $('#btn_updatepassword').html(' <?php echo lang('update_password_button_text') ?>');
                },
                success: function (response) {

                }
            });

This above is a function of ajax.
I want to make a function that take beforesend as a parameter
like below

function myAjax(ajax_url, ajaxcallback , dataType = "json" , cache = false , reqtype = "POST" , data = "" , errorId = "" ) {
    type: reqtype,
    url: ajax_url,
    cache: cache,
    data : data,
    dataType: dataType,
    success:ajaxcallback ,

}

I want to call this function with before function as a parameter in function

myAjax("url " , clouse_fun_for_success, "" , false , "POST" , data , "#error" )

How can I set some setting before call this AJAX template function because every time login in before function would be change

jQuery table add class for the first matching tbody and add class for last matching tbody Ask Question

I have my markup like this

<table class="section-table">
        <thead class="found">
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found">
            <tr>
                <td>data test</td>
            </tr>
        </tbody class="found">
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <thead class="found">
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found">
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found">
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
    </table>

Now here you can see that in some thead there is class called found. Here in the tbody there is also some tbody has class found. Now I want in jQuery after the thead which has class found it will get the next first tbody which has class found tbody and add class first-row and the last tbody which has class found will be last-row. So basically the out put should be like

<table class="section-table">
        <thead class="found">
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found first-row">
            <tr>
                <td>data test</td>
            </tr>
        </tbody class="found last-row">
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <thead>
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <thead class="found">
            <tr>
                <th>data 1</th>
            </tr>
        </thead>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found first-row">
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody>
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
        <tbody class="found last-row">
            <tr>
                <td>data test</td>
            </tr>
        </tbody>
    </table>

I have tried this

jQuery('table.section-table').find('thead.found').each(function() {
    jQuery(this).next('tbody.found').addClass('first-row');
    jQuery(this).prev('tbody.found').addClass('last-row');
  });

Laravel Javacript – Check if theme exists in session, add class Ask Question

I’m working on a system where the user can select a product and go to the next page. This product then gets saved in the session using laravel sessions. When the user decides to go to the next page and come back. The chosen product is indeed saved in the session, but the is no way for them to see what product they have chosen because the class isn’t applied to the product that was chosen.

The code may clarify it better:

@foreach($themes as $theme)
    <div class="col-md-4 mb-4">
        <div class="card theme-card card-hover depth-2 border-0" id="theme-id-{{$theme->id}}">
            <a href="" class="theme-link" data-toggle="modal" data-target="#theme{{ $theme->id }}">
               <div class="card-image" style="height: 200px; background-image: url('/uploads/{{ $theme->thumbnail }}'); background-size: cover; background-position: center center;"></div>
               <div class="card-body">
                    <div class="row">
                        <div class="col-md-2 vertical-center">
                            <i class="fab fa-magento fa-lg"></i>
                        </div>
                        <div class="col-md-10">
                            <p class="m-0">{!! str_limit($theme->name, $limit =  32, $end = '...') !!}</p>
                            <small class="text-muted">{{ $theme->productable_type }}</small>
                        </div>
                    </div>
                </div>
            </a>
            <div class="card-footer bg-white border-0 text-right pt-0">
                <div class="row">
                    <div class="col-md-6 text-left">
                        <input type="hidden" class="theme-name" name="theme[{{$theme->id}}]">
                        {{--<input type="hidden" value="{{ $theme->composer_package }}">--}}
                        <button data-card-id="{{$theme->id}}"  class="btn btn-orange btn-sm btn-theme-choice">Kiezen</button>
                    </div>
                    <div class="col-md-6 text-right">
                       <span style="font-size: 20px;" >€ {{ $theme->price }} EUR</span>
                    </div>
                </div>
            </div>
        </div>
    </div>
@endforeach

In the above code, I for each trough every so-called “Theme” and I’m giving the ID of the theme as a data target and as ID. Then in my Javascript code, I do the following:

$('.btn-theme-choice').on('click', function (event) {

    event.preventDefault();
    newSelectedCardId = $(event.target).data('card-id');

    if(cardId === null) {
        cardId = newSelectedCardId;
    } else if (cardId !== newSelectedCardId) {
        $('#theme-id-' + cardId).removeClass('theme-chosen').find("input[name='theme["+cardId+"]']").val('');
        cardId = null;
    }

    var card = $('#theme-id-' + cardId );
    card.toggleClass('theme-chosen');
    selectedCardInput = card.find("input[name='theme["+cardId+"]']");

    if( !$('.theme-card').hasClass('theme-chosen') ) {
        selectedCardInput.val('');

    } else if ( $('.theme-card').hasClass('theme-chosen') ) {
        selectedCardInput.val('selected');
    }

    console.log(selectedCardInput);
});

Here I add the class to the card so the user can See which card they’ve selected. This choice then gets saved in the session using some PHP code in the controller

if( $theme == null ) {

    return redirect('plugins');

} elseif( $theme != null ) {

    foreach($this->predefinedArray as $value) {
        $request->session()->put('chosen_theme.' . $value, $theme->$value);
    }

    $request->session()->put('chosen_theme.composer_package', $theme->productable->composer_package);

    return redirect('plugins');
}

problem

How can I read the session and add the class to the card with the IDs that were stored in the session so if the person leaves the page and comes back, they can see what cards they’ve selected?

Thanks in advance

Jquery on window resize append one time error Ask Question

i have a problem on window resize. I should to append one time on resize an element to anather div but it appedn more times. How can i fix it ?
Here you can find an example, resize window more time and after that click on first div and you will see the problem :

$(window).on('resize', function() {
    var windowW = $(window).width();

console.log(windowW);
        if(windowW <= 670){
          
           $('.take').on('click touchstart', function(){
                var info = $(this).text();
                $('.add').append('<p>Inormation :'+info+'</p>');
                });

          } else {
            $('.add').empty();

        }
    });
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.10.0/jquery.min.js"></script>

<div class="take">Some information </div>
<div class="add"> </div>

How to hidden selector is showing by click any different selector Ask Question

i want create notify look like FaceBook, look this image ,i was created, in my code, i’m using event onClickfor icon notify then addClass('open') for . when <ul class="notify-content dropdown-menu open"> is open, i want to click anywhere (note: different selector) in this window will removeClass('open'). how to do that?

Here is my code:

$('#layout-topbar-right .notify-warring').on('click', function() {
    var dom = $('layout-topbar-right .dropdown-menu');
    if ($(dom).hasClass('open')) {
        $(dom).removeClass('open');
    } else {
        $(dom).addClass('open');
    }
});

How to set cookie value in JavaScript and get it in Rails controller Ask Question

Using Ruby on Rails 5.0.3 .

I want to set some value in cookie using JavaScript (when button clicked), and get it in Rails.

I know how to access session in Rails, which is session[:some_key] or cookies.

But I don’t know how to do in JavaScript. (it must be able to accessed from Rails session or cookies.)

How can I do it in JS?

Or any other ways to save some value in JS, and get it later in Rails ?