CODEWITHSUNDEEP
javascriptphpjquerysymfony
Koen van de Sande
Koen van de Sande

Reputation: 223

Jquery change the url of a button with a twig value

I have written some code to chance the href attribute of my button using Jquery, Twig, Laravel and Symfony. I have some problems with changing the current href into the result of the on chance method.

This is my code:

<div class="modal-content">
        <div class="modal-header">
        </div>
        <div class="modal-body">
            <select id="select">
                {% for relation in relations %}
                    <option value="{{ relation.id }}">{{ relation.company }}</option>
                {%  endfor %}
            </select>
        </div>
        <div class="modal-footer">
            <a role="button" id="js-save-button"  data-method="POST" data-remote="true" data-disable-with="Saving..." href="{{ route('exportRelationFromPhonebook', [item.id]) }}" class="btn btn-primary">New Relation</a>
            <a role="button" id="edit-button" class="btn btn-primary" href="/phonebook/{{ item.getKey() }}/1">Existing relation</a>
            <button type="button" class="btn btn-secondary" data-dismiss="modal">Close</button>
        </div>
    </div>

The href that I'm trying to chance is the one to belongs to the button with the id edit-button. 

<script>
$(function(){
    $('#select').on('change', function(e)
    {
        $('#edit-button').attr("href", "/phonebook/{{ item.getKey() }}/"+$(this).val());
        console.log($('#edit-button').attr("href"));
    });
});</script>

When I use console.log($('#edit-button').attr("href"); it returns the exact value that I want it to be.

Examples:

/phonebook/191/5

or

/phonebook/191/22

But for some reason, the url doesn't change. It is still /phonebook/191/1. What am I doing wrong here?

Upvotes: 0

Views: 600

Answers (1)

yun
yun

Reputation: 86

You should store the {{ item.getKey() }} in some other attribute for example data-key. After that only get the key to update the href.

for example <a role="button" id="edit-button" class="btn btn-primary" data-key="{{ item.getKey() }}" href="/phonebook/{{ item.getKey() }}/1">Existing relation</a>

in script var key = $('#edit-button').attr("data-key"); $('#edit-button').attr( "href", "/phonebook/"+key+"/"+$(this).val() );

Upvotes: 1

Related Questions