Home/ Questions/Q 8444183
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-10T09:20:27+00:00

I am working on a project and I’d like to use Jquery UI for

  • 0

I am working on a project and I’d like to use Jquery UI for some of the forms like adding and updating stuff instead of normal pages. I designed the dialog, set up the form but it works only if the form/div is in the same file as the button. I am using CodeIgniter for this project by the way.

So I have few questions:

  1. Does JQuery UI dialogs support using divs from separate files? (if the button is not in the same file as the form/div)
  2. If it does, how can I use a div that is in a different file (instead of placing the div in the same file with the button where I have few other components)?

Example:

index.php

<body>
<input type="button" id="add_new"  value="add new" />
 </body>

form.php

<body>
<div id='"new_user_form'> 
        <input type="text" id="name" />
        <input type="text" id="username" />
        <input type="password" id="password" />
        <input type="button" id="add_user"  value="add new" />
</div> 
</body>

custom.js

$(document).ready(function () 
{
    $('# add_new ').click (function ()
    {

            $("# new_user_form ").dialog
            ({

                title: 'Add new user',
                height: 400,
                width: 600,
                resizable: false,
                modal: true,
                draggable: false,
                buttons:
                    [
                        {
                            text: 'add new',
                            id: ' add_user ',
                            click: function()
                            {
                                alert("Testing 123...");
                            }
                        },
                        {
                            text: 'cancel',
                            click: function()
                            {
                                $(this).dialog('close');
                            }
                        }

                    ]

            })

         })

      })

thanks for reading, hope someone can help me!

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    I don’t know why the load() function didn’t work but I found a better way to fix this problem.

    How I did it:

    users_view.php (previously index.php)

    <body>
<input type="button" id="add_new"  value="add new" />

<div id="new_user_form">
   <?php $this->load->view('add_user_form'); ?>
</div>

</body>

    add_user_form.php (previously form.php)

      <div> 
    <input type="text" id="name" />
    <input type="text" id="username" />
    <input type="password" id="password" />
    <input type="button" id="add_user"  value="add new" />
    <input type="button" id="cancel"  value="cancel" />
 </div>

    custom.js

    $(document).ready(function ()
{

      $("#new_user_form").dialog
      ({

              title: 'Add new userт',
              height: 400,
              width: 600,
              resizable: false,
              modal: true,
              draggable: false,
              autoOpen: false

      })

      $('#add_new').click (function ()
      {
          $("#new_user_form").dialog("open");
      })

      $('#cancel').click(function()
      {
        $("#new_user_form").dialog("close");
      });
 })

    Thanks for the answers! I hope this will help other people 🙂

    • 0