Store variable associated with button click with jquery

Question

I am trying to store the variable associated with a given button, that can then be used as one of the parameters in the data field of an ajax PUT. I have the following, but can't figure out why its not storing the value of ratio:

HTML

<li class="imgly-controls-item-square">SQUARE</li>
<li class="imgly-controls-item-16-9">16-9</li>
<li class="imgly-controls-item-9-16">9-16</li>

jQuery

$(".imgly-controls-item-square").click(function () {
    var ratio = "square";
    alert(ratio);
});
$(".imgly-controls-item-16-9").click(function () {
    var ratio = "16-9";
    alert(ratio);
});
$(".imgly-controls-item-9-16").click(function () {
    var ratio = "9-16";
    alert(ratio);
});

//Will store value of selected image crop orientation, that can then be appended to ajax data parameter below
var imageOrientation = ratio;

Current JSFiddle: LINK

Uncaught ReferenceError: dataUrl is not defined. And check the scope of ratio. — j08691
– j08691, Commented Apr 15, 2015 at 14:15
what is dataUrl in var saveImage = encodeURIComponent(dataUrl); and data in url: urlLocation + data, — ozil
– ozil, Commented Apr 15, 2015 at 14:19
@ozil, its not important for the purposes of my question and can be removed/ignored. — Matt
– Matt, Commented Apr 15, 2015 at 15:54

T.J. Crowder · Accepted Answer · 2015-04-16 06:49:11Z

3

Because your ratio variable is a local variable in the event handler functions. Just set imageOrientation directly:

var imageOrientation = /* default value here */;
$(".imgly-controls-item-square").click(function () {
    imageOrientation = "square";
});
$(".imgly-controls-item-16-9").click(function () {
    imageOrientation = "16-9";
});
$(".imgly-controls-item-9-16").click(function () {
    imageOrientation = "9-16";
});

// ...

That said, I would use radio buttons and read from the selected radio button rather than using lis. You can style radio buttons to a very significant degree with modern browsers.

Live example:

// A scoping function to avoid creating globals
(function() {
  // Declare the variable, set a default value
  var imageOrientation = "default value";
  
  // Respond to clicks on the list items but remembering an updated value
  $(".imgly-controls-item-square").click(function() {
    imageOrientation = "square";
  });
  $(".imgly-controls-item-16-9").click(function() {
    imageOrientation = "16-9";
  });
  $(".imgly-controls-item-9-16").click(function() {
    imageOrientation = "9-16";
  });
  
  // Sample code using the updated value
  $("input[type=button]").click(function() {
    snippet.log("Current orientation: " + imageOrientation);
  });
})();

<ul>
  <li class="imgly-controls-item-square">SQUARE</li>
  <li class="imgly-controls-item-16-9">16-9</li>
  <li class="imgly-controls-item-9-16">9-16</li>
</ul>
<input type="button" value="Do Something">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<!-- Script provides the `snippet` object, see http://meta.stackexchange.com/a/242144/134069 -->
<script src="http://tjcrowder.github.io/simple-snippets-console/snippet.js"></script>

edited Apr 16, 2015 at 6:49

answered Apr 15, 2015 at 14:18

T.J. Crowder

1.1m201 gold badges2k silver badges2k bronze badges

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

2 Comments

Matt Over a year ago

Because of the way the app works, its best to keep the current UI. I tried your implementation, but it doesn't seem to be storing the value of the selected button, and I can't retrieve it in the console either. Any suggestions?

T.J. Crowder Over a year ago

@Matt: As I said, you can style radio buttons dramatically. But you can use the lis as well, I've added a live example.

blue112 · Accepted Answer · 2015-04-15 14:16:49Z

0

You ratio is a local variable. I won't exist outside your event handler.

Declaring global variable isn't great, because it will soon pollute your global namespace.

You could modify your code to make a function :

function myRequest(ratio)
{
    var urlLocation = "http://www.url.com/rest/v1/cms/story/";
    var saveImage = encodeURIComponent(dataUrl);

    //Will store value of selected image crop orientation, that can then be appended to ajax data parameter below
    var imageOrientation = ratio;

    $.ajax({
        type: "PUT",
        dataType: 'jsonp',
        url: urlLocation + data,
        data: {
            imageid: imageid.value,
            orientation: ratio,
            image: saveImage,
        },
        success: function (data) {
            $(".share-link").html("<div class='alert alert-success'><p>Success! " + imageid.value + " was posted.</p></div>");
            console.log(data);
        },
        error: function (data) {
            $(".share-link").html("<div class='alert alert-danger'><p>Couldn't send photo: <b>" + imageid.value + "</b></p></div>");
        }
    });
}

$(".imgly-controls-item-square").click(function () {
    var ratio = "square";
    myRequest(ratio);
});
$(".imgly-controls-item-16-9").click(function () {
    var ratio = "16-9";
    myRequest(ratio);
});
$(".imgly-controls-item-9-16").click(function () {
    var ratio = "9-16";
    myRequest(ratio);
});

answered Apr 15, 2015 at 14:16

blue112

57.3k3 gold badges52 silver badges58 bronze badges

2 Comments

Matt Over a year ago

I updated my fiddle, but I'm not able to access the value of ratio stored in imageOrientation. When you try in console, it says its not defined.

Matt Over a year ago

I updated the fiddle, and not seeing the value stored in imageOrientation when I try in console. I added a log to ensure the function is working: jsfiddle.net/mattography/j3dn5/44

maiko · Accepted Answer · 2015-04-16 19:15:31Z

0

Define ratio outside of your functions and click handlers to make it global.

This way it will be accessible throughout your code with the same value.

var ratio;

    $(".imgly-controls-item-square").click(function () {
        ratio = "square";
        alert(ratio);
    });
    $(".imgly-controls-item-16-9").click(function () {
        var ratio = "16-9";
        alert(ratio);
    });
    $(".imgly-controls-item-9-16").click(function () {
      ratio = "9-16";
        alert(ratio);
    });

    var urlLocation = "http://www.url.com/rest/v1/cms/story/";
    var saveImage = encodeURIComponent(dataUrl);

    //Will store value of selected image crop orientation, that can then be appended to ajax data parameter below
    var imageOrientation = ratio;

    $.ajax({
        type: "PUT",
        dataType: 'jsonp',
        url: urlLocation + data,
        data: {
            imageid: imageid.value,
            orientation: ratio,
            image: saveImage,
        },
        success: function (data) {
            $(".share-link").html("<div class='alert alert-success'><p>Success! " + imageid.value + " was posted.</p></div>");
            console.log(data);
        },
        error: function (data) {
            $(".share-link").html("<div class='alert alert-danger'><p>Couldn't send photo: <b>" + imageid.value + "</b></p></div>");
        }
    });

Alternatively, you can do that whole click handler sequence for all of your list items in one line.

var ratio;
$("li").click(function () {ratio = $(this).text().toLowerCase(); alert(ratio);});

edited Apr 16, 2015 at 19:15

answered Apr 15, 2015 at 14:18

maiko

4051 gold badge4 silver badges15 bronze badges

2 Comments

Matt Over a year ago

I updated my fiddle, but I can't retrieve the value of ratio in the developer console. jsfiddle.net/mattography/j3dn5/43

maiko Over a year ago

Hi Matt, per my example above, once you define ratio outside of the functions. Don't define it again. So just change "var ratio = " to "ratio = " and see if those help. Your example is working fine for me currently, however. I'm getting the proper alerts. :) @matt

Matt · Accepted Answer · 2015-04-17 20:38:28Z

0

I found that a much simpler solution was to just add the variable in the switch case built into the plugin doing the cropping:

switch (size) {
  case "square":
    this.options.ratio = 1;
    orientation = "SQUARE";
    break;
  case "9:16":
    this.options.ratio = 9 / 16;
    orientation = "PORTRAIT";
    break;
  case "16:9":
    this.options.ratio = 16 / 9;
    orientation = "LANDSCAPE";
    break;
}

answered Apr 17, 2015 at 20:38

Matt

1,2675 gold badges26 silver badges54 bronze badges

Collectives™ on Stack Overflow

Store variable associated with button click with jquery

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

4 Answers 4

2 Comments

2 Comments

2 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related