Actual jQuery/jQueryUI Helper for cakePHP 1.3.x or modal dialog confirmation popup

Question

I spent quite some time figuring out how I can resolve my problem, but didnt find any solution matching my exact problem. My environment is a business application written in cakephp 1.3.13, which I can't easily upgrade to 2.x.

I want to implement some javascript functionality:

I'm thinking of a modal dialog form popping up before submitting a regular post form. The modal dialog shall collect and save some more data from the user.

The concrete situation is:

I have a regular HTTP-POST based edit form for a employee_project model. In this form, you can change some values, set some states and update the record by submitting the form.

<div id="editEmployeesProjectForm">
<?php 
    echo $form->create('EmployeesProject', array('action' => 'updateEmployeesProject'));
    echo $form->input('id', array('type' => 'hidden', 'value' => $e['EmployeesProject']['id']));
    echo $form->input('user_id', array('label' => '', 'options' => $userList, 'selected' => $selected));
    echo $form->input('state', array('options' => $states, 'label' => '', 'selected' => $selection));
    echo $form->submit('update');
?>
</div>

I want to trigger the submit event of this form, if a defined state was selected in the dropdown. A modal dialog shall popup to gather some additional information about the users selection. This Modal Box shall have a submit form on its own to create a 'Statisticlog'-record. After the saving of the modal-form is complete, the hooked submit action shall be processed normally.

I found some ways to achieve this with the jQuery dialog function, working with modal:true. Since I have not very much experience neither with javascript nor with jQuery I was searching for a jquery helper in cakephp 1.3.x, supporting actual versions and features of jquery/jqueryUI, but it seems to exist only for cakephp 2.x.

I already looked into the JsHelper of cakePHP 1.3, but it does support only very limited features of jquery.

So does somebody now how to easily achieve this in an cakePHP 1.3 environment? I'm not restricted to jquery, if there is another straight forward way to do it.

I'm happy for all suggestions to solve my problem. Thanks in advance!

Answer 1

What you could do is make your form, hide it, and use javascript to unhide it and put it in the users face based on certain options.

Example: In view:

    <?php echo $this->Form->input('user_input'); ?>

    <div id="popopen" class="footer_scrolling" style="display:none">
         <?php echo $this->Form->input('test'); ?>
         <?php echo $this->Form->submit(); ?>
    </div>
<input type="submit" value="Submit" onclick = "return toggle_display()">

Javascript:

function toggle_display()
{
popup = document.getElementById("popopen");
user_value = document.getElementById("user_input");
if(user_value.value = 1)
{
     popup.style.display= "block";
     return false;
} else {
     return true;
}
}

In CSS (will make it appear in crazy color at the bottom):

    .footer_scrolling
{
    border:2px solid #404D81;
    height: 35px;
    padding-top: 10px;
    width: 61%;
    margin: 0 auto; 
    position:fixed; left:25.67%; bottom:0px;
    background-color:#FCDD4B;
}