CanvasJS - update on URL parameter OR when form selectmenuchange

Discussion in 'jQuery' started by PoPSiCLe, Jun 12, 2016.

  1. #1
    Okay, my brain isn't working today, so I'm looking for a bit of help on this.

    I have a page where I'm using CanvasJS to show statistics about the page. That works fine.

    However, I'm trying to make it so that users can, if they want, bookmark the page with an URL parameter for which chart they want to see - which also works fine (it updates the url on formchange).

    However, when it comes to loading the whole thing via the javascript, I have a problem. Currently, I'm checking to see if there is a parameter in the URL, and if it is, set the value of a variable to match that. This works.

    However, since I'm using jQuery UIs selectmenu to style the selectboxes, I have a function to get the values from the select - which, since it's within a function of itself, doesn't return anything to the outerlying function that updates the CanvasJS.

    Currently, the code is like this:
    
    $(function() {
         var selectedMethod = '',
         statisticsType = '';
         if (GetURLParameter('chart')) {
           selectedMethod = GetURLParameter('chart'); // this works
         }
         $('#method').on('selectmenuchange',function() {
           var $this = $(this);
           selectedMethod = $('#'+$this.prop('name')+' option:selected').val().toLowerCase();
           URL = window.location,
           baseURL = URL['href'].split('&');
           window.history.pushState('', 'Methodselection '+selectedMethod+'', ''+baseURL[0]+'&chart='+selectedMethod+''); //this also works, however the selectmethod-variable isn't returned to the outer function, naturally
         })
         if (selectedMethod.length != 0) {
           $.post('/get_settings.php',{getsetting:true,settingsvalue:'statistics_type'}, function(data) {
             data = $.parseJSON(data);
             selectedType = data.returnstatus;
           })
           $.post('/statistics_processing.php',{chartmethod:selectedMethod}, function(data) {
    // in here all the pulling of the canvasjs-content goes, among other things, this is where the "selectedMethod" should be assigned
    
    Code (markup):
    I have found one solution, which works, but sort of defeats the purpose (window.location.reload within the onchange function). I also know I could duplicate the javascript-code, but that just doesn't work for me.

    Anyone have a tip on how to do this the easiest way?

    Short version: make it so BOTH selectmenuonchange AND existing URL parameter triggers the function for displaying CanvasJS
     
    PoPSiCLe, Jun 12, 2016 IP
  2. PoPSiCLe

    PoPSiCLe Illustrious Member

    Messages:
    4,623
    Likes Received:
    725
    Best Answers:
    152
    Trophy Points:
    470
    #2
    Nevermind. My brainfart went away, and I put the rendering code inside a named function with a parameter, which I call when needed.
     
    PoPSiCLe, Jun 12, 2016 IP