jquery ui dialog not working with diferent sdiptis
hello there
i have a problem using jQuery UI dialog
i have the page as follow.
<script type="text/javascript" language="javascript" src="../javascripts/jquery.js"></script>
<script type="text/javascript" language="javascript" src="../javascripts/jquery-ui.js"></script>
</head>
<body>
<select style="width:100%;" id="id_tour" name="id_tour" onChange="get_trip();" ><option id="0" name="0" value="0">Изберете</option><option id="2" name="2" value="2" title="Втора ексурзия описание">Шумен - Атина</option><option id="1" name="1" value="1" title="Първа ексуризя">шумен - софия</option></select>
<div id="dialog-tourism_tour-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
$(function() {
$("#dialog-tourism_tour-form").dialog({
height: 533.33333333333,
width: 853.33333333333,
title: 'Въвеждане',
modal: true,
resizable: true,
autoOpen : false,
show: 'explode',
hide: 'explode',
buttons: {
"Create an account": function() {
alert('open-tourism_tour INSIDE'); $( this ).dialog( "close" );
},
"Отказ" : function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
});
$( "#open-tourism_tour" ).click(function() {
alert('open-tourism_tour');
$( "#dialog-tourism_tour-form" ).dialog( "open" );
});
</script>
<img id="open-tourism_tour" type="image" src="../images/details_open.PNG" title="Добавяне на нов ред" alt="Добавяне на нов ред" />
<div id="div_trip">
<select style="width:100%;" id="id_trip" name="id_trip" onChange="get_trip();" >
<option id="0" name="0" value="0">Изберете</option>
</select>
<div id="dialog-tourism_tour_trip-form" title="Create new user">
<p class="validateTips">All form fields are required.</p>
<form>
<fieldset>
<label for="name">Name</label>
<input type="text" name="name" id="name" class="text ui-widget-content ui-corner-all" />
<label for="email">Email</label>
<input type="text" name="email" id="email" value="" class="text ui-widget-content ui-corner-all" />
<label for="password">Password</label>
<input type="password" name="password" id="password" value="" class="text ui-widget-content ui-corner-all" />
</fieldset>
</form>
</div>
<img id="open-tourism_tour_trip" type="image" src="../images/details_open.PNG" title="Добавяне на нов ред" alt="Добавяне на нов ред" />
</div>
<script type="text/javascript" language="javascript" charset="utf-8">
$(function() {
$("#dialog-tourism_tour_trip-form").dialog({
height: 533.33333333333,
width: 853.33333333333,
title: 'Въвеждане',
modal: true,
resizable: true,
autoOpen : false,
show: 'explode',
hide: 'explode',
buttons: {
"Create an account": function() {
alert('dialog-tourism_tour_trip-form INSIDE'); $( this ).dialog( "close" );
},
"Отказ" : function() {
$( this ).dialog( "close" );
}
},
close: function() {
}
});
});
$( "#open-tourism_tour_trip" ).click(function() {
alert('dialog-tourism_tour_trip-form');
$( "#dialog-tourism_tour_trip-form" ).dialog( "open" );
});
</script>
</div>
</body>
as you can see the javascript part is separated in two pieces. One for each image and for each dialog.
where is the problem? this is not working! help !