Sending variable to presenter on button click via ajax

8 days ago

Big_r
Member | 8
+
0
-

Hello,
I'm new to nette
I have a variable in my template that is changeable on button click
I want to send this variable to the presenter in each click on the button so i can do something with it in php and render the results again to the template.
I have tried this but seems like that I'm missing something

In my template i have

<script>

window.handleChangeVariableUrl = {link ChangeVariable!}

$(".myButton").on("click", function() {
var val = $('myVal').val();

$.ajax({
'url': handleChangeVariableUrl,
'data': {id: val}
});
return false;
});
</script>

In my presenter i have

<?php
class MyPresenter extends BasePresenter {

private $anyVariable;

public function handleChangeVariable($var) {
$this->anyVariable = $var;
// when i try to work with $var here. like print it to see its value, it is always empty
}
?>

Could someone tell me what i'm missing there or if the whole thing is wrong and i ahould rewrite it somehow else.

7 days ago

Ondřej Kubíček
Member | 372
+
0
-

you have wrong url, should be

'url': {link changeVariableUrl!},

second problem, you define variable id, but your handle method has parameter $var

7 days ago

Big_r
Member | 8
+
0
-

Hi @OndřejKubíček

sorry there was some typing mistakes in code because i wrote it from phone
here is another piece copy past from my source code

<script>
    $('.myButton').click(function(){
        var myVal = $('.myVal').val();

            $.ajax({
                'url': {link changeVariable!},
                'data': { id: myVal }
            });
        return false;
    });
</script>
<?php
class MyPresenter extends BasePresenter {

private $anyVariable;

public function handleChangeVariable($id) {
$this->anyVariable = $id;
// when i try to work with $id here. like print it to see its value, it is always empty
}
?>

7 days ago

Roman Halaxa
Member | 38
+
0
-

Big_r wrote:

Hi @OndřejKubíček

sorry there was some typing mistakes in code because i wrote it from phone
here is another piece copy past from my source code

<script>
    $('.myButton').click(function(){
        var myVal = $('.myVal').val();

            $.ajax({
                'url': {link changeVariable!},
                'data': { id: myVal }
            });
        return false;
    });
</script>
<?php
class MyPresenter extends BasePresenter {

private $anyVariable;

public function handleChangeVariable($id) {
$this->anyVariable = $id;
// when i try to work with $id here. like print it to see its value, it is always empty
}
?>

Did you check whether it gets into the handle method at all ?

UPDATE:

I just recreated your example real quick. This works for me

<button class="myButton">MyButton</button>
<input class="myVal" value="5">

<script src="{$basePath}/js/jquery.js"></script>

<script>
    $('.myButton').click(function(){
        var myVal = $('.myVal').val();
            $.ajax({
                'url': {link changeVariable!},
                'data': {
                    id: myVal
                }
            });
        return false;
    });
</script>
use Tracy\Debugger;

class TestPresenter extends BaseSecuredPresenter
{
    private $anyVariable;

    public function handleChangeVariable($id) {

        $this->anyVariable = $id;
        // when i try to work with $id here. like print it to see its value, it is always empty
        Debugger::barDump('works');
        Debugger::barDump($id);
        Debugger::barDump($this->anyVariable);

    }
}

Outputs

works
5
5

I copied your code pretty much so I don't see why it isn't running, sorry.

Last edited by Roman Halaxa (2019-03-12 10:47)

7 days ago

Big_r
Member | 8
+
0
-

Hi @RomanHalaxa

No it doesn't
Because when i print the $id in handle methode it print nothing.

I tried this and it works and send 20 to the handle method as $id

<script>

$('.myButton').click(function(){

var myVal = $('.myVal').val();

$.ajax({
'url': {link changeVariable! 20},
});
return false;
});

</script>

But i need to send myVal variable. when i write it insted of 20 it send it as string value ‘myVal’ not the value of the variable

Am i missing something ?

7 days ago

Roman Halaxa
Member | 38
+
0
-

Big_r wrote:

Hi @RomanHalaxa

No it doesn't
Because when i print the $id in handle methode it print nothing.

I tried this and it works and send 20 to the handle method as $id

<script>

$('.myButton').click(function(){

var myVal = $('.myVal').val();

$.ajax({
'url': {link changeVariable! 20},
});
return false;
});

</script>

But i need to send myVal variable. when i write it insted of 20 it send it as string value ‘myVal’ not the value of the variable

Am i missing something ?

One thing that crossed my mind now is that you are getting the value with .val which retrieves the value attribute of an element if I recall correctly. You might be looking to retrieve inner html of your element (meaning you should be looking for .text() instead of .val()) Can you try that ?

example of what i mean

<button class="myButton">MyButton</button>
<div class="myVal">5</div>

<script src="{$basePath}/js/jquery.js"></script>

<script>
    $('.myButton').click(function(){
        var myVal = $('.myVal').text();
            $.ajax({
                'url': {link changeVariable!},
                'data': {
                    id: myVal
                }
            });
        return false;
    });
</script>

Last edited by Roman Halaxa (2019-03-12 10:56)

7 days ago

Big_r
Member | 8
+
0
-

@RomanHalaxa
I tried your last example copy/past

The output is
Works
null
null

The problem is not in the value of variable
But i think in ‘data’. Because even when i send constant like that

<script>
'data': { id: 10 }
</script>

It output null

It works good only if i didt ise ‘data’
And i send the constant in link like this

<script>
'Url': {link changeVariable! 10}
</script>

Then the output is
Works
10
10

But there two thinks
I don't think that it is right to do it like that
Second o wasn't successful to send myVal instead of 10 in link

I can't see where is the problem

7 days ago

Roman Halaxa
Member | 38
+
0
-

Big_r wrote:

@RomanHalaxa
I tried your last example copy/past

The output is
Works
null
null

The problem is not in the value of variable
But i think in ‘data’. Because even when i send constant like that

<script>
'data': { id: 10 }
</script>

It output null

It works good only if i didt ise ‘data’
And i send the constant in link like this

<script>
'Url': {link changeVariable! 10}
</script>

Then the output is
Works
10
10

But there two thinks
I don't think that it is right to do it like that
Second o wasn't successful to send myVal instead of 10 in link

I can't see where is the problem

That's really weird… My last guess, which might be completely unrelated but that's what I would check on, is that your jQuery might be outdated, or the nette itself (I'm not completely sure which package manages that). So try to check if you're up to date there

Last edited by Roman Halaxa (2019-03-12 12:54)

7 days ago

Roman Halaxa
Member | 38
+
0
-

Also, if you're using different input than <button> you might need to add event.preventDefault() before your logic. For example, default checkbox on click event handles checking the actual box which might interfere with your custom logic.

Other than that, I really have no other ideas how to solve your issues, sorry mate.

If it is important to you, you can put the project on github and I will have a look at it.

Last edited by Roman Halaxa (2019-03-12 13:08)

7 days ago

Big_r
Member | 8
+
0
-

Ajax nette by @VojtěchDobeš is version 2.3.0

And jquery is version 1.12.4

According to description of nette.sjax in addons website it should work fine with jquery 1.7 and higher.

Last edited by Big_r (2019-03-12 13:17)

7 days ago

Roman Halaxa
Member | 38
+
0
-

Big_r wrote:

Ajax nette by @VojtěchDobeš is version 2.3.0

And jquery is version 1.12.4

According to description of nette.sjax in addons website it should work fine with jquery 1.7 and higher.

That might be the problem actually. Update your jQuery. You're stuck in 2016 there mate :) Nette ajax doesn't even get used in this case that won't be the problem. The examples I've sent have only jQuery linked to them. They work with jQuery 2.2.4 as I have checked right now but you might go for the latest version I think.

Last edited by Roman Halaxa (2019-03-12 13:22)

7 days ago

Big_r
Member | 8
+
0
-

Roman Halaxa wrote:

Big_r wrote:

Ajax nette by @VojtěchDobeš is version 2.3.0

And jquery is version 1.12.4

According to description of nette.sjax in addons website it should work fine with jquery 1.7 and higher.

That might be the problem actually. Update your jQuery. You're stuck in 2016 there mate :) Nette ajax doesn't even get used in this case that won't be the problem. The examples I've sent have only jQuery linked to them. They work with jQuery 2.2.4 as I have checked right now but you might go for the latest version I think.

I'll update it and see. Thank you for all your suggestions.

7 days ago

Roman Halaxa
Member | 38
+
0
-

Big_r wrote:

Roman Halaxa wrote:

Big_r wrote:

Ajax nette by @VojtěchDobeš is version 2.3.0

And jquery is version 1.12.4

According to description of nette.sjax in addons website it should work fine with jquery 1.7 and higher.

That might be the problem actually. Update your jQuery. You're stuck in 2016 there mate :) Nette ajax doesn't even get used in this case that won't be the problem. The examples I've sent have only jQuery linked to them. They work with jQuery 2.2.4 as I have checked right now but you might go for the latest version I think.

I'll update it and see. Thank you for all your suggestions.

No problem. Let me know if it helped

7 days ago

Big_r
Member | 8
+
0
-

Roman Halaxa wrote:

Big_r wrote:

Roman Halaxa wrote:

Big_r wrote:

Ajax nette by @VojtěchDobeš is version 2.3.0

And jquery is version 1.12.4

According to description of nette.sjax in addons website it should work fine with jquery 1.7 and higher.

That might be the problem actually. Update your jQuery. You're stuck in 2016 there mate :) Nette ajax doesn't even get used in this case that won't be the problem. The examples I've sent have only jQuery linked to them. They work with jQuery 2.2.4 as I have checked right now but you might go for the latest version I think.

I'll update it and see. Thank you for all your suggestions.

No problem. Let me know if it helped

Updating JQuery to version 3.3.1 didn't solve the problem
The output is still

Works
null
null

7 days ago

Roman Halaxa
Member | 38
+
0
-

Big_r wrote:

Roman Halaxa wrote:

Big_r wrote:

Roman Halaxa wrote:

Big_r wrote:

Ajax nette by @VojtěchDobeš is version 2.3.0

And jquery is version 1.12.4

According to description of nette.sjax in addons website it should work fine with jquery 1.7 and higher.

That might be the problem actually. Update your jQuery. You're stuck in 2016 there mate :) Nette ajax doesn't even get used in this case that won't be the problem. The examples I've sent have only jQuery linked to them. They work with jQuery 2.2.4 as I have checked right now but you might go for the latest version I think.

I'll update it and see. Thank you for all your suggestions.

No problem. Let me know if it helped

Updating JQuery to version 3.3.1 didn't solve the problem
The output is still

Works
null
null

Oh well… If you can upload the project somewhere so I could take a look at it as a last resort, that'd be nice.