I need some guidelines for the following:

Case scenario: I have an implemented list like the "blog_list" in the Couch Documentation. The list has thumbnails with a hyperlinked <a> tag. On clicking the thumbnail, a pop up is displayed to either sign-up or login. Once a registered user (validation checked through javascript) enters their email address and clicks login, I want to navigate the user to the URL which is part of the editable tag.

<cms:editable name='post_link' label="Post Link" type='text' />
<a href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('fade').scrollIntoView(true)" data-fancybox-group="gallery"><img src="<cms:show my_image_thumb />" alt="" class="fade"></a>

This will bring the pop-up to sign-in. If I need to access a link directly I have successfully done through in the JavaScript as:
window.location='http://www.abc.com/SF/def/xyz.php';

However, how should I now reference the URL of CMS:Editable in the javascript function. The JavaScript function is in a javascript file placed in the "js" folder

[KK]

If I understood it right, the problem is how to access Couch variables (regions also set variables) from a JS file which is not a Couch managed template.

Our Shopping Cart tutorial (http://www.couchcms.com/docs/concepts/s ... art-1.html) faced a similar problem and used the following solution

Code: Select all

<script type="text/javascript">
    // Set global values for 'js/cart-modal.js' that follows
    var cart_link = "<cms:link "<cms:pp_config 'tpl_ajax_cart' />" />";
    var checkout_link = "<cms:pp_checkout_link />";
</script>

<script src="js/cart-modal.js" type="text/javascript"></script>

Quoting from the tutorial -

Please notice that we are setting some global variables for the JS code in 'cart-modal.js' to make use of. We do so here in index.php because we use Couch tags to get the values and these tags can only be used within Couch-managed templates.
These global variables are the URLs of the checkout template and a template (we'll come to it a little later) used to display the cart in the pop-up window.

The cart-modal.js then used the variables like this (see the 'checkout_link' variable) -

Code: Select all

// Handle 'Checkout' link
$(document).on('click', '.checkout-button', function(e) {
    e.preventDefault();
    
    // Action begins - fade out
    cart_fade_out();
    document.location.href = checkout_link;
});

I think you can use the same method.

Does this help?

Can you elaborate more? Do I need a js file that will be couch configured? Do I write a js file like the js/cart-modal.js? How do I pass values of the cms:editable from my php file to this js file? After capturing values in the cart-modal.js I will make a call to the variables in my js file with the ajax post, how will that be done? I am sorry but I am lost

I have a pop-up div, not a post form, on the same page as the couch tags. This pop-up div has a submit button that calls on a js. The js uses ajax to do a post function and display the results accordingly. Again, how is the cms:editable from the php file passed on to the js or ajax?

[KK]

Do I need a js file that will be couch configured? Do I write a js file like the js/cart-modal.js?

No. My example was just to illustrate a way of passing Couch variables to JS files. You'll have to use the JS that you currently have (just modify it little to use the global JS variable set by the host template (as explained below)).

How do I pass values of the cms:editable from my php file to this js file?

I tried to explain that in the last post. Will try a simplified example now -
Suppose following is a Couch template (say, index.php) having a single editable region named 'test_region'

Code: Select all

<cms:template >
    <cms:editable name='test_region' type='text' />
</cms:template>

<h1><cms:show k_page_title /></h1>

<script type="text/javascript">
    // Set global values for 'js/test.js' that follows
    var my_test_variable = "<cms:show test_region />";
</script>

<script src="js/test.js" type="text/javascript"></script>

The code above is simply setting a global JS variable named 'my_test_variable' using the value in the editable region (which is what you want).

The js/test.js that follows can then use the global variable 'my_test_variable' to do whatever it needs e.g, redirect as follows -

Code: Select all

window.location=my_test_variable;

Does that clarify things somewhat?

Thank you very much. This makes much sense now.

My page is similar to the "Blog" example. Since the call to the javascript for the pop-up is in the "blog_list" page, where would it be appropriate to write the global variable script since the actual cms:editable is defined in the "blog" page. Would adding it inside the <page> tab be sufficient?

<ul class="pf-container block-grid four-up">
<cms:pages masterpage='blog.php' limit='2' paginate='1'>
<li class="web motion">
<span class="link-zoom">
<a id="register" href = "javascript:void(0)"
onclick = "document.getElementById('light').style.display='block';document.getElementById('fade').style.display='block';document.getElementById('fade').scrollIntoView(true)"><img src="<cms:show my_image_thumb />" alt="" class="fade"></a>
</span>
</li>
<cms:paginator />
</cms:pages>
</ul>
<script type="text/javascript">
// Set global values for 'js/test.js' that follows
var my_test_variable = "<cms:show post_link />";
</script>
<!--whitepaper ends -->
</div>
I am unable to get the value of the cms:editable. Is the call to the script in the wrong file?

[KK]

The values for the editable regions will become available within the cms:pages tag block.
Problem is, if we set the variable in there, since it is a loop, the value set by the last page will be the final value. That is not what you'd want.

Can you send me a working static (i.e. just HTML/JS/CSS) copy that shows the popup and redirects to a fixed url?
Allow me to study the code to try and devise a solution.

Thanks.

[KK]

Thanks.

Following seems to be working for me -

Code: Select all

<script type="text/javascript">
    var my_global_link = '';
    
    function show_login( link ) {
         // set global value for 'js/whitepaper-login.js' ..
        my_global_link = link;
        
        // .. then show login modal that uses 'js/whitepaper-login.js'
        document.getElementById('light').style.display='block';
        document.getElementById('fade').style.display='block';
        document.getElementById('fade').scrollIntoView(true);
    }
</script>  

<cms:pages masterpage='blog.php' limit='2' paginate='1'>

    <a id="register" href="javascript:void(0)" onclick="show_login('<cms:show post_link />');" >
        <img src="<cms:show my_image_thumb />">
    </a>

</cms:pages>

The success condition of AJAX code in the JS file then can use -

Code: Select all

window.location = my_global_link;

Hope this helps.

Thank you very much. Very helpful.

[KK]

You are welcome