Member Avatar for soft_coder

Hi! I am a developer. I am using jquery to create a modal dialog.
I am using the following code snippets. Please tell what is going wrong:

<link rel="stylesheet" type="text/css" href="jquery-ui-1.8.7.custom.css" />
<script type="text/javascript" src="jquery.js"></script>
<script type="text/javascript" src="jquery.min.1.4.js"></script>
<script type="text/javascript" src="jquery-ui.min.1.8.js"></script>
<script type="text/javascript" src="jquery.min.1.3.2.js"></script>
<script type="text/javascript" src="jquery-ui.min.1.7.2.js"></script>
$(document).ready(function () {
        $("#addaccount").dialog({
        height: 'auto',
        width: 'auto',
        modal: true,
        autoOpen: false
    });
    $("#addaccountlink").click(function (e) {
        $('#addaccount').dialog('open');
    });
});

Please help!

  • 2 Contributors
  • 13 Replies
  • 147 Views
  • 1 Day Discussion Span
  • Latest Post Latest Post by soft_coder
Member Avatar for pritaeas

You have 3 jquery scripts and 2 jquery-ui scripts included. You just need one of each, preferably the latest version.

You should show your HTML too.

Member Avatar for soft_coder

Perhaps I should show my full implementation. The following code is an aspx code with the js files in the Scripts:

<%@ Page Language="vb" AutoEventWireup="false" CodeBehind="Default.aspx.vb" Inherits="ModalDialogDemoNew._Default" %>

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">

<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
<script type="text/javascript" src="Scripts/jquery.js"></script>
<link href="Scripts/jquery-ui-1.8.7.custom.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript" src="Scripts/jquery/1.4/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui/1.8/jquery-ui.min.js"></script>
<script type="text/javascript" src="Scripts/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" src="Scripts/jquery-ui/1.7.2/jquery-ui.min.js"></script>
<script type="text/javascript" src="Scripts/addaccount.js"></script>
    <title></title>
</head>
<body>
    <form id="form1" runat="server">
    <a href="#" id="addaccountlink">Add an account</a>
    <a href="Scripts/testNew.html">Redirect</a>
    <div id="addaccount" style="display: none; padding: 5px"></div>
    </form>
</body>
</html>

Please suggest something!

Member Avatar for pritaeas

Start by removing line 7, 11 and 12.

I pasted your code here, and appears to be working: http://jsbin.com/omigu4/edit

Member Avatar for soft_coder

I made the changes but the cross icon is not coming.

Member Avatar for pritaeas

Is your UI folder incomplete perhaps ?

Member Avatar for soft_coder

Can you suggesst which UI files I need to make it work correctly.

Member Avatar for pritaeas

The least you need next to the CSS is the images folder that belongs with it.

Member Avatar for soft_coder

The code works fine when the js files are referenced from internet.
But when I download them in pc and reference locally they don't work properly.
This is the scenario in my case.

Member Avatar for pritaeas

Download a theme and put the images folder where the css is.

Does it work if you use the remote scripts, as on the jsbin link ?

Edited by pritaeas because: n/a
Member Avatar for soft_coder

I did that also it is still not working.
Actually I have to open a web page in side a div tag.
When the dialog is opening automatically, it is working perfectly but when I am opening by using

$("#divid").dialog('open');

it is malfunctioning. What is the probable reason?

Member Avatar for soft_coder

You are right. I downloaded a new theme and implemented the modal dialog and it is working perfectly.
Can you do me one more favour.
How can I enable the help or "?" icon in the modal dialog.
Thanks in advance.
Have a nice day.

Member Avatar for pritaeas

Not sure, perhaps with options/buttons...

Member Avatar for soft_coder

OK. I will do that. Many many thanks for your help.

Be a part of the DaniWeb community

We're a friendly, industry-focused community of developers, IT pros, digital marketers, and technology enthusiasts meeting, networking, learning, and sharing knowledge.