We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Add Jquery on ModX Manager to work with MigX

    • 33238
    • 388 Posts
    ysanmiguel Reply #1, 6 years, 9 months ago
    Hello I would like make some modifications in the MigX (Add Itewm) Window using Jquery, so I add jqeury into the manager:

    Plugin: customManagerScript
    OnManagerPageBeforeRender

    <?php
$modx->regClientStartupScript('/assets/web/system/js/jquery.js');
$modx->regClientStartupScript('/assets/web/system/js/customManager.js');
$modx->regClientCSS('/assets/web/system/css/customManager.css');


    Now I have the jquery working but I can't modify anything inside the MigX (Add Itewm) Window, I understand that is happening because it's not in the DOM until you call it but I tried different ways with not success.

    the MigX window is ID="modx-window-mi-grid-update-46"

    So I tried with JS:
    if(document.getElementById("modx-window-mi-grid-update-46")){
    alert("Element exists");
} else {
    alert("Element does not exist");
}


    or Jquery (better for me not very good with js)

    if($('#modx-window-mi-grid-update-46').length >0 ){
    alert("Element exists");
}


    But no luck, any help please?

    thank you!

    This question has been answered by multiple community members. See the first response.

    [ed. note: Ysanmiguel last edited this post 6 years, 9 months ago.]
      --
      ysanmiguel.com
    • discuss.answer
      • 4172
      • 5,888 Posts
      Bruno17 Reply #2, 6 years, 9 months ago
      what is your use-case, exactly? Maybe there is another way to get done, what you are trying. [ed. note: Bruno17 last edited this post 6 years, 9 months ago.]
        -------------------------------

        you can buy me a beer, if you like MIGX

        http://webcmsolutions.de/migx.html

        Thanks!
        • 3749
        • 24,544 Posts
        BobRay Reply #3, 6 years, 9 months ago
        Bruno's question is a good one. There may way be a simpler way to accomplish what you want, but in case not:

        Is your code wrapped in an "ready" function? If not it may be executing before that element exists.

        $(document).ready(function() {
   /* Your code here */
});
          Did I help you? Buy me a beer
          Get my Book: MODX:The Official Guide
          MODX info for everyone: http://bobsguides.com/modx.html
          My MODX Extras
          Bob's Guides is now hosted at A2 MODX Hosting
          • 33238
          • 388 Posts
          ysanmiguel Reply #4, 6 years, 9 months ago
          Hello Bruno and Bob.

          What I'm trying to do is so simple but it has been so complicate to implement.

          I'm creating a system to add different types of content into a page, to do that I'm using MigX.

          (see Image below*) In the first tab (Content Builder) there is a dropdown menu (Add Content Section) where you can select what type of content do you want to add, then there are different tabs with the settings or fields for that content respectively, as you can see in the image below, not all the options into the dropdown menu have a respective tab because in some cases is not necessary.

          *Example: https://drive.google.com/file/d/0B4qE5lYwheXbQjZfT0QtZWtkbU0/view

          - What I need is simple: Because there are so many tabs it's very confusing, so the solution is display only one tab at the time, depending on the selected option
          in the dropdown menu (see Image below**).

          **Example: https://drive.google.com/open?id=0B4qE5lYwheXbdlIwenhodjlPa2c

          My idea was, add Jquery, a custom jS and my own css.

          <?php
$modx->regClientStartupScript('/assets/web/system/js/jquery.js');
$modx->regClientStartupScript('/assets/web/system/js/customManager.js');
$modx->regClientCSS('/assets/web/system/css/customManager.css');


          hide all the tabs with css:

          #modx-window-mi-grid-update-46-tabs .x-tab-panel-header .x-tab-strip li:first-child {
	display: block;
}
#modx-window-mi-grid-update-46-tabs .x-tab-panel-header .x-tab-strip li {
	display: none;	
}


          Then try with Jquery (because I'm so bad with javascript) give some properties to the dropdown menu to change the tab class depending of what option is selected.

          But can'y did it. Because the way how things works, and Yes Bob I tied the $(document).ready(function() but didn't work.

          Any help will be very welcome, thank you very much!!! smiley
            --
            ysanmiguel.com
            • 4172
            • 5,888 Posts
            Bruno17 Reply #5, 6 years, 9 months ago
            the solution is simple. Use the multiple-formtabs feature.
            Could you post your MIGX - config for that TV, please?
              -------------------------------

              you can buy me a beer, if you like MIGX

              http://webcmsolutions.de/migx.html

              Thanks!
              • 33238
              • 388 Posts
              ysanmiguel Reply #6, 6 years, 9 months ago
              Quote from: Bruno17 at Jul 12, 2017, 09:41 AM
              the solution is simple. Use the multiple-formtabs feature.
              Could you post your MIGX - config for that TV, please?

              Bruno, thank you for your answer, I'm using MIGX Management to create everything regarding MigX in the site.

              So, to build the Dropdown:

              I create a MigX:

              name: contentDynamic
              in Formtabs section, I add an Item - Caption: Content Builder (in this area are all the other tabs with the fields/settings for every section)
              insite the tab I added the dropdown Item:

              fieldname: content
              Input TV type: listbox
              Input Option Values: Main Image==Main Image||Social Share==Social Share||Main Content==Main Content||Link Sections==Link Sections||Content Plus==Content Plus||List==List||Slideshow==Slideshow||Gallery==Gallery||Tabs/Accordion==Tabs/Accordion||Facebook==Facebook||Map==Map||Comments==Comments

              The MigX call:

              [[getImageList?
	&tvname=`contentDynamic`
	&tpl=`contentDynamic.tpl`
]]


              contentDynamic.tpl (the code is quite complex but in resume I'm doing something like this for every option:

              [[+content:is=`Main Image`:then=`code here`]]
[[+content:is=`Social Share`:then=`<div class="social"></div>`]]
[[+content:is=`Main Content`:then=`[[*content]]`]]



              Hope this is clear enough Bruno, please ask me for anything else you need.
              Thank you very much.
                --
                ysanmiguel.com
              • discuss.answer
                • 4172
                • 5,888 Posts
                Bruno17 Reply #7, 6 years, 9 months ago
                did you see this one?
                https://docs.modx.com/extras/revo/migx/migx.tutorials/migx.varying-layout-boxes/migx.varying-layout-boxes.configurator-version

                you would have one configuration for each content-type and select them at the main-configuration in the multiple-formtabs field.
                This will create a listbox, which lets the customer switch between the different forms.

                Make sure, you have all unused fields of the other forms as hidden fields. Otherwise allready existing values would get lost while switching between the different forms.

                Thid way. you also don't need all this conditionals in your tpl-chunks, which will slow everything down, but you would have a call like that:

                [[getImageList? &tpl=`@FIELD:MIGX_formname`&tvname=`MultiColumn`]]


                which would switch between tpl-chunks depending on the value of the automatically created field 'MIGX_formname'
                  -------------------------------

                  you can buy me a beer, if you like MIGX

                  http://webcmsolutions.de/migx.html

                  Thanks!
                  • 33238
                  • 388 Posts
                  ysanmiguel Reply #8, 6 years, 9 months ago
                  OK Bruno, let me digest all this info, I will back to you soon.
                  Thank you for your time.
                    --
                    ysanmiguel.com
                    • 42562
                    • 1,145 Posts
                    donshakespeare Reply #9, 6 years, 9 months ago
                    it's not in the DOM until you call it but I tried different ways with not success.
                    That is the problem. You code needs to depend on how you "call" the new element.
                    Mouseenter is a good way to find newly added items to DOM.

                    Or use the not-so-common mutation observer
                    https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

                    Or use ExtJS
                      TinymceWrapper: Complete back/frontend content solution.
                      Harden your MODX site by passwording your three main folders: core, manager, connectors and renaming your assets (thank me later!)
                      5 ways to sniff / hack your own sites; even with renamed/hidden folders, burst them all up, to see how secure you are not.
                      • 33238
                      • 388 Posts
                      ysanmiguel Reply #10, 6 years, 9 months ago
                      Quote from: donshakespeare at Jul 12, 2017, 06:37 PM
                      it's not in the DOM until you call it but I tried different ways with not success.
                      That is the problem. You code needs to depend on how you "call" the new element.
                      Mouseenter is a good way to find newly added items to DOM.

                      Or use the not-so-common mutation observer
                      https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver

                      Or use ExtJS

                      Mate I'm re-building everything using the - MIGX.Varying layout-boxes.Configurator-Version - hahaha quite long name.
                      It has been complicate because it had so many fields, but looks like it's working, but thank you very much for your advice mate.

                      And Thank you Bruno, looks like this is the solution. Really appreciate!!!
                      I will back once I finish.
                        --
                        ysanmiguel.com