How to call a function within a Jquery dialog box?

Question

I have been trying to call a javascript function within a jquery dialog box, which I have been successful at. The complication comes when I create a dynamic form within the dialog box by passing in data from a listbox to a php page that calls the database. I am trying to first, disable the second dropdown when a value in the first dropdown is selected. Secondly, I would like to validate a textbox to see if a username exists.

I have created a JSbin http://jsbin.com/etuhur/4/edit but I am not sure how to replicate the PHP portions. The current JSbin is working in regards to the first dropdown disabling the second dropdown. I am unable to replicate this functionality when the form is created by a php page that I pass into the dialog box.

Does anyone have any tips, pointers or an example? I have been trying to get this to work for the past two weeks, but to no avail :(

EDIT : I think it has something to do with the DOM not recognizing the PHP form data being created by another page, does anyone know how I would have it register with the DOM?

so u copy html first and then paste it into dialog div right?? — Vishal Sharma
– Vishal Sharma, Commented Apr 5, 2013 at 13:17
If you already have your form on the page as a hidden item, then reveal it with a click action, that may work out better for you. — klewis
– klewis, Commented Apr 5, 2013 at 13:18
...also, if your external form requires its own JavaScript in order to function, make sure the scripts are already loaded on the parent page, or loaded onto the page with getScript(). — klewis
– klewis, Commented Apr 5, 2013 at 13:19
everything within the div "dialogbox" will be generated by a php page when you click the "opendialogbtn" id which calls "passtophp(...). — rawrPowershell
– rawrPowershell, Commented Apr 5, 2013 at 13:28

rawrPowershell · Accepted Answer · 2013-04-10 19:06:14Z

1

In the select dropdown you want to add an onclick call. You then want to make everything in the javascript a function that you call from the onclick. An updated JSbin is with the answer is here : http://jsbin.com/etuhur/13/edit

answered Apr 10, 2013 at 19:06

rawrPowershell

1241 silver badge11 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

bipen · Accepted Answer · 2013-04-05 12:57:56Z

0

delegate your change event with on

  $(document).on('change','select',function(){
   ....
  });

answered Apr 5, 2013 at 12:57

bipen

36.6k9 gold badges51 silver badges62 bronze badges

1 Comment

rawrPowershell Over a year ago

gave that a shot, but unfortunately no response from either dropdown.

Onur Kucukkece · Accepted Answer · 2013-04-06 09:41:39Z

0

Can you try to load your form functions after the dialog window opens

EDIT I have placed $(this).dialog('close'); above return false

$( "#dialogbox" ).dialog({

        autoOpen: false,
        modal: true,
        width: 'auto',
        show: {
            effect: "blind",
            duration: 1000
        },
        hide: {
            effect: "explode",
            duration: 1000
        },

        buttons: {
            //This function handles passing in the form data generated by getdialogbox.php 
            'Submit' : function(){
                $.ajax({
                    type: "POST",
                    url: "include/insertToDB.php",
                    data: $("#htmlform").serialize(),

                    success: function(){
                        $("#htmlform").submit();
                    }
                });
                $(this).dialog('close');
                return false;


            }
        },
        open: function( event, ui ) {    
            var $inputs = $('select.titans');
            var $controller = $('select.controller');
            $('select').change(function(){
                if($controller.val() !== ''){
                    $inputs.prop('disabled', $(this).val() !== '');
                    $inputs.val('');
               }else            {
                    $inputs.prop('disabled',false); 
               }
           });
        }

    });

edited Apr 6, 2013 at 9:41

answered Apr 5, 2013 at 13:50

Onur Kucukkece

1,7881 gold badge21 silver badges48 bronze badges

3 Comments

rawrPowershell Over a year ago

yep, gave that a shot. Still doesn't seem to recognize the function.

Onur Kucukkece Over a year ago

there is an undefined function called passtophp() in your jsbin document which causes to malfunction of your code. is it defined in your original document?

rawrPowershell Over a year ago

passtophp() is defined, but not in the JSBin as I'm not sure how to recreate php pages in JSbin, but it basically creates a form similar to what is in the JSbin. I've tried the updated answer, but the dropdowns are still not disabling the other one. I appreciate your help!

Collectives™ on Stack Overflow

How to call a function within a Jquery dialog box?

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

1 Comment

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related