Get views as objects with jquery in cakephp

Question

Get views as objects with jquery in cakephp

Navigation

#1 by (0 votes)

1

I have the following divs:

<div id="divNeeds" class="row" >
        <div class="col-md-6">
            <h1 id="h1NeedsTitle" class="lang" key="h1NeedsTitle">Descubrir necesidades</h1>
            <h4 class="lang" key="h4FNeedsFirstText">
                El comienzo de una estratégia funcional es conoces nuestro <br>
                objetivo y que necesidades queremos resolver, de esta forma <br>
                nuestro equipo a través de un laboratorio enlaza un vínculo con <br>
                la marca y da comienzo al plan estrategico.
            </h4>
        </div>
        <div class="col-md-6" >
            <?php
            echo $this->Form->create('Need', array('class' => '', 'id' => 'msform'));
            ?>
            <label class="lang" key="h1NeedForm">Aprovechemos el tiempo y comencemos</label>
            <?php
            echo $this->Form->input('client', array('label' => array('text' => "¿Para que marca vamos a trabahar?",
                    'key' => 'lblClient', 'class' => 'lang'), 'placeholder' => 'Dinos el nombre de tu empresa',
                'class' => 'validador txtClient lang', 'key' => 'txtClient'));
            echo $this->Form->input('need', array('label' => array('text' => "Escríbenos acerca de tu necesidad",
                    'key' => 'lblNeed', 'class' => 'lang'), 'placeholder' => 'Agradecemos nos detalles muy bien la necesidad, '
                . 'es nuestro punto de partida para generar ideas quer fortalezcan la estrategia para resolverla.',
                'rows' => '4', 'class' => 'validador txtNeed lang', 'key' => 'txtNeed', 'style' => 'resize: none;'));
            echo $this->Form->input('objective', array('label' => array('text' => "¿Cuál es el objetivo?",
                    'key' => 'lblObjective', 'class' => 'lang'), 'placeholder' => 'Que se quiere alcanzar con la'
                . 'solución de la necesidad, ¿Adquirir usuario? ¿Mejorar ventas? ¿Posicionar la marca? ... entre otros.'
                . ' Agradecemos nos detalles muy bien el objetivo.', 'rows' => '4',
                'class' => 'validador txtObjective lang', 'key' => 'txtObjective', 'style' => 'resize: none;'));
            ?>
            <?php
            $options = array(
                'class' => 'lang',
                'label' => 'Enviar y continuar',
                'key' => 'btnFormNeed'
            );
            echo $this->Form->end($options);
            ?>
        </div>
    </div>


<div id="divHome" class="row">
        <div class="col-md-6">
            <h1 id="h1HomeTitle" class="lang" key="h1HomeTitle">Laboratorio estrategico</h1>
            <h4 class="lang" key="h4FHomeFirstText">
                Diseñamos a través de las necesidades de <br> marca la mejor ruta 
                para cumplir con sus <br> objetivos y alcanzar resultados.
            </h4>
        </div>
        <div class="col-md-6">
            <?php
            echo $this->Html->image('Procesos.png', array('alt' => 'Proceso', 'key' => 'imgProcess',
                'class' => 'lang', "width" => "650", "height" => "650"));
            ?>
        </div>

    </div>

The idea is that eventually you will have several div not only those two, but in the view you will only see those that are inside:

<div class="principal visible"></div>
<div class="secundario oculto"></div>

So with jquery I'm always changing the info of those divs, with html ();

Like this:

var htmlDivSecundary = "<div id='div"+id+"' class='row' >"+$("#div"+id).html()+"</div>";
//                alert(htmlDivSecundary);
                $(".oculto").html(htmlDivSecundary);

In that full div with hidden class with the info of the div that is hidden and the same thing I will do with the div that contains the visible class

The thing is that I want to create a cpt file for each div, my question is from jquery as I load the cpt as an object from jquery to put it to the div with .html (object);

Thanks for the help.

jquery div cakephp

asked by Andrés Vélez 12.04.2018 в 22:56

source

1 answer

how to get data in a stock slider in angular 4 Content of a Function within a Modal

score 0 · Answer 1

You can achieve what you want by using the Elements by CakePHP.

My example is mainly based on version 3.x but I will try to specify for both versions.
You can create them in src/Template/Element for version 3.x or in app/View/Elements for 2.x

You add the elements you need, for example: step_1.ctp, step_2.ctp, step_3.ctp, step_4.ctp.

In each of them you put the code you want to present

step_1.ctp (Illustrative example)

<div class="step-1">
    <h1>Paso 1</h1>
    <p>
        En gr abordar de pedirle dominio palabra le poetico. Para tono ya ma pais peor otro. Pedazos tuviera yo ah audacia piernas. Marcar saludo sea mismos apenas dio doy nos. Etc por extremos obligaba creencia solteras cuidarla han declarar rio. Conquistas alambicado decoracion la ni implacable el. Reyes morir eso monte mal. Forma susto ex te nuevo el cogio en. 
    </p>
</div>

Since we are going to call the elements with the function load() of jQuery we do not need everything that calls default.ctp therefore we can tell CakePHP not to call any layout.

In this case I will do it in PagesController.php receiving as a parameter the step I want to call and setting it in a variable to be able to use it in the view

PagesController.php

class PagesController extends AppController
{
    // Resto del código

    public function steps($step) {
        // 2.x
        $this->layout = false;
        // 3.x
        $this->viewBuilder()->setLayout(false);

        $this->set('step', 'step_' . $step);
    }
}

And in our view we call the element we want

pages.ctp

<?= $this->element($step) ?>

Wherever you want to call them you can do so with the load() function mentioned above.

Prepare this example that calls a URL in the cloud that uses exactly the same code described above

// Función que llamará los distintos elementos
function handleClick(event) {
  event.preventDefault();
  $('.step').load(this.href);
}

// Aplicamos un listener a todos los botones que llamarán al elemento
$('body').on('click', '.steps', handleClick);

<script src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.0/css/bootstrap.min.css">

<div class="container">
  <div class="row">
    <div class="col text-center">
      <div class="btn-group btn-group-toggle" data-toggle="buttons">
        <a href="https://kacos.pro/pasos/1" class="steps btn btn-primary text-white">Paso 1</a>
        <a href="https://kacos.pro/pasos/2" class="steps btn btn-primary text-white">Paso 2</a>
        <a href="https://kacos.pro/pasos/3" class="steps btn btn-primary text-white">Paso 3</a>
        <a href="https://kacos.pro/pasos/4" class="steps btn btn-primary text-white">Paso 4</a>
      </div>
    </div>
  </div>
  <div class="row mt-3">
    <div class="col step"></div>
  </div>
</div>