YII2. Using URL's in js

Question

I have the following javascript code

$(".order-event-btn").click(function(e) {
$.ajax({
url: "URL",
type: "POST",
data: {
    eventId: $(e.target).attr('data-event-id'),
},
success: function(data) {
    //Some code
},
error: function(data) {
    //Some code
},
});
});

I include this script using "BookAsset".

Here

url: "URL",

I need URL to the action "book-event" in the controller Book.

On the server, I can do this:

 Url::to('/book/book-event')

But how do I get URL on client side?

There is an solution:

1. js file include via BookAsset.

2. in view file I register bundle:

\frontend\assets\BookAsset::register($this);

3. in view file define a bookEventURL variable. Now it is available in the js-file.

$this->registerJs('var bookEventURL = ' . Url::to('/book/book-event') . ';');

But I do not like this solution. What will happen when I use this script in many views. I have to define a variable bookEventURL in each view?

My Question. Is it possible to bind js-variables to my BookAsset. When I register my BookAsset in the view, in page source code automatically insert next code:

<script>var bookEventURL = "http://example.com/book-event/";</script>

Why don't you put that into the layout file instead of views? main.php can have $this->registerJs('var baseUrl = ' . Url::home(true) . ';');. That way, the base url is included everywhere. Then you can build your URL whereever you need. — Gogol
– Gogol, Commented Jun 6, 2016 at 9:45
Because I do not need this variable on all pages, but only a few. If I put it in the main.php, it will be everywhere. — LostDok
– LostDok, Commented Jun 6, 2016 at 9:47
and may be this one is related.. github.com/yiisoft/yii2/issues/7649 — Gogol
– Gogol, Commented Jun 6, 2016 at 9:50
Do you think there will be a good solution to write a controller, which will give the URL's for the Ajax-requests from the client? js function that will get url from server via ajax. — LostDok
– LostDok, Commented Jun 6, 2016 at 9:57

soju · Accepted Answer · 2016-06-06 14:04:55Z

5

A proper way of doing this is to add the needed information in your button tag, e.g. :

<?= Button::widget([
    'label' => 'Order',
    'options' => [
        'class' => 'order-event-btn',
        'data' => [
            'url' => Url::to(['book/book-event']),
        ],
    ],
]) ?>

And in your js code :

$(".order-event-btn").click(function(e) {
    var url = $(this).data('url');
    // ...
});

But if you really want to "bind js-variables" to your BookAsset, you could simply override register() :

public static function register($view)
{
    parent::register($view);
    $view->registerJs('var bookEventURL = ' . json_encode(Url::to(['book/book-event'])) . ';');
}

edited Jun 6, 2016 at 14:04

answered Jun 6, 2016 at 9:59

soju

25.4k3 gold badges70 silver badges71 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

Gogol Over a year ago

It still does not resolve the problem that the code isn't DRY. He is to write that data url everywhere he needs the URL.

Ziyadin Shemsedinov · Accepted Answer · 2016-06-06 13:31:59Z

0

If you wanna use it in different places of your application than I guess you should place it in the layout.

answered Jun 6, 2016 at 13:31

Ziyadin Shemsedinov

3678 silver badges21 bronze badges

Collectives™ on Stack Overflow

YII2. Using URL's in js

2 Answers 2

1 Comment

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

1 Comment

Comments

Your Answer

Sign up or log in

Post as a guest

Related