jquery modal dialog not working

Collapse
X
 
  • Time
  • Show
Clear All
new posts
  • seeker7805
    New Member
    • Jan 2012
    • 4

    jquery modal dialog not working

    Hello:

    I have tried to implement a jquery modal dialog within an existing form. In my implementation I have had to eliminate the table and modified for use in our form. I have placed a query on the jquery ui forum but no one has answered.

    I am having many issues with the form probably because I am not implementing it correctly. I have read the Nemikor blog and other posts but they have not helped with these issues. First, it appears that by using absolute urls to the jquery ui javascript and style sheets is giving me a 403 forbidden error. Is there a CDN version of these that I can use that will help this form work? I have downloaded the scripts locally but the modal dialog does not work when I do this.

    Second, modifying the javascript creates formatting issues. Here is the code I am using:
    Code:
    f ( bValid ) {
                            $( "#users" ).append(
                                "<br style=\"width:100%;\">" + address.val() + "<br>" + "<br>" +
                               
                                "<br>" + city.val() + "</br>" + "<br>" +
                               
                                "<br>" + state.val() + "</br>" + "<br>" +
                               
                            "<br>" + postalcode.val() + "</br>" + "<br>" +
                           
                            "<br>" + country.val() + "</br>" + "<br>" +
                           
                             "<br>" + companyphone.val() + "</br>" + "<br>" +
                           
                             "<br>" + companyfax.val() + "</br>" +
                             "<br>"); 
                                       
                            $( this ).dialog( "close" );
    ...
    Here is the url to the form:

    http://inetwebdesign.c om/PartnerPortal/update-my-company-information8.ht ml

    Because of all these issues, I am thinking of using an old school version of a modal dialog that I found in this forum today:

    Code:
    <!DOCTYPE html>
    <html>
    <head>
    <title>Data Passing</title>
    
    <script type="text/javascript">
    function abc()
    {
    var wind1=null;
    var tmp=null;
    wind1 = window.open('', 'displayWindow', 'width=200,height=300,status=no,toolbar=no,menubar =no,scrollbars=1');
    wind1.document.write("<script> function alert1(f){");
    wind1.document.write("var frmdst=f.ta.value;");
    wind1.document.write("window.opener.tmp=frmdst;");
    wind1.document.write("window.opener.getValues();") ;
    wind1.document.write("window.close();");
    wind1.document.write("}<\/script>");
    wind1.document.write("<html><body><form action='#' name='myform' action='post'><TEXTAREA rows='4' cols='20' name='ta'></TEXTAREA><br><INPUT type='button' value='save' onclick='javascript:alert1(this.form);'><INPUT type='button' value='cancel' onclick='javascript:window.close();'></form></body></html>");
    }
    function getValues()
    {
    document.forms["source"].elements["srctext"].value = tmp;
    }
    
    </script>
    </head>
    <body>
    <form action="#" name="source" method="get">
    <input type="text" onclick='abc();' name="srctext" value="" style="width:300px;height:200px;" />
    </form>
    <body>
    </html>
    One of the issues I have found with this code is that carriage returns are not reflected when you type in the dialog box. Does anyone know of a way to solve this issue?

    So I have several questions:

    1. Is there a way to fix the 403 forbidden errors in the attached code?

    2. Is there a way to fix the formatting problems in the javascript so it formats properly in the attached code?

    3. Is there a way to have the carriage return/new line reflected correctly in the old school text box?

    Thanks so much for your help.

    Regards,
    seeker
    Attached Files
  • acoder
    Recognized Expert MVP
    • Nov 2006
    • 16032

    #2
    1. Here's Google CDN for jQuery UI:


    2. What kind of formatting errors?

    Comment

    • seeker7805
      New Member
      • Jan 2012
      • 4

      #3
      Thanks for your response. So linking to the CDN does not help, and downloading the images and the code to the local server does not help either. The jquery ui modal images do not work, so I probably have to check the path of each of the images. I became aware of jquery forbidding linking to the jqueryui.com server, so that answered the 403 error problem, however it still does not solve the problem of the images failing to load even though you put them all on the server.

      The formatting problem when the images are loading correctly is that the input from the dialog box pushes the data far down to the center portion of the text area, and the first line is indented by 50pixels.

      Not a good solution. I am working on "plan B" scrapping the jquery modal for an "old school" solution.
      Last edited by seeker7805; Jan 28 '12, 09:01 PM. Reason: left some stuff out.

      Comment

      Working...