We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 38189
    • 31 Posts
    Hello,

    At the time of writing I've scoured around in regards to how AJAX works on it's own if an installation of MODx was not present. I am aware that there's always a need of a "URL" so this information is passed to this url file and then the results are given back to that AJAX request.

    Now along the way of me doing this research I stumble upon the AJAX Revolution package which I will be tackling later with it's package creator to solve an issue I have with my installation. I am hoping I could use this for what I am trying to use, if not then I know I can still create an AJAX request to an empty resource and proceed to do what I need to do with it.


    Why I am making this thread?

    Well I am particularly confused about the part with the URL. I've noticed that at rendering time if I were to put a placeholder or a chunk tag whatever it is within the "url" portion of the .ajax() function or .post() modx does not process the tag.

    What I am trying to get accomplished?

    I have a colorpicker jquery library called Spectrum and I'd like that once I evoke the "change" option that it passes me the value of the color (which is a string) unto my Ajax Resource and then process my desire function (which in this case would be filtering out all the resources that match that color, and then output them on a desire div).


    Currently I have a snippet called [[getColor]] the snippet has getResources within it (not as snippet but it's php code version) basically I want it to sort through the TV of tags to match the desire color. There is additional functionality I need to add further down the road but I want to make sure I am going down the right path when it comes to ajax.

    The main issue I am having within myself logically wise is that I can't grasp my head around how to pass variables if I were to be using the AJAX Revolution package in contrast to the manual way, as I still don't know how'd pass variables / parameters on the ajax call unto my new snippet.

    If someone can be kind enough to push me in the right direction I will greatly appreciate it. Thank you for those that took the time to read this and reply.

    - Tony.

      • 28042 ☆ A M B ☆
      • 24,524 Posts
      The AJAX is done solely by Javascript in the browser. It must have a proper URL to fetch its content from. For example, if you have a snippet in a resource with the alias "test", then the AJAX URL would be domain.com/test.html Other AJAX methods will have different ways of dealing with variables, but they all work on the same principle.

      If you are using JQuery for your AJAX, just pass the variables in the second paramter of the load() function:
      $("#objectID").load("test.php", { 'choices[]': ["Jon", "Susan"] } );


      http://api.jquery.com/load/

      Using JQuery ajax() function:
      $.ajax({
      type: "POST",
      url: "some.php",
      data: { name: "John", location: "Boston" }
      }).done(function( msg ) {
      alert( "Data Saved: " + msg );
      });

      http://api.jquery.com/jQuery.ajax/

      So you would get your color value from the color picker, save it as a Javascript variable, then use that variable as the value of the variable:
      var color = the results of the color picker; perhaps the value of a field?
      ("#objectID").load("test.php", { 'color[]': [color] } );
      



        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 38189
        • 31 Posts
        Susan thank you, not only did you explain it for me for the Color picker but you answer my main question in regards to jquery > ajax > snippet > ajax. Which I was very confused about. Thank you smiley.