We Keep Coding

Sending the next element of the clicked button into jQuery UI dialog box

After trying to animate an element, when clicking on a button using this script:
$(document).ready(function()
{
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function()
{
// $(this).css('border', "solid 2px red");
// var divs = $("#div_one, #div_two, #div_three, #div_four, #div_five, #div_six, #div_seven, #div_eight, #div_nine, #dive_ten, #div_eleven, #div_twelve, #div_thirteen, #div_fourteen, #div_fifteen, #div_sixteen, #div_lone, #div_ltwo, #div_lthree, #div_lfour, #div_lfive, #div_lsix, #div_lseven, #div_leight, #div_lnine, #dive_lten, #div_leleven, #div_ltwelve, #div_lthirteen, #div_lfourteen, #div_lfifteen, #div_lsixteen");
// $(divs).siblings().slideToggle();
$(this).next().slideToggle();
$(this).siblings().slideToggle();
});
});
I've got some animation unwanted result. So I decided, instead of animating the next element of the clicked button, why I don't send the result into dialog bix using jQuery UI plugin. So I tried the following:
<script src="../include/jquery-1.12.1.min.js"></script>
<script src="../include/jquery-ui.min.js"></script>
<script src="../include/bootstrap.min.js" type="text/javascript"></script>
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
$(this).next().dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
//$(this).dialog("open");
});
});
And here is the html code for only the first 2 buttons, because the cod is too long:
<div class="form-group col-md-12">
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="oone" name="one" alt="button" />
<div id="div_one" class="collapse">3rd Molar:
<?php echo $resTeeth['one'] ?>
</div>
<input class="img1" type="image" style="width:60px;height:60px" src="../images/molar_left_t.png" id="otwo" name="two" alt="button" />
<div id="div_two" class="collapse">
<?php echo $resTeeth['two'] ?>
</div>
So I had this error:
jquery-1.12.1.min.js:2 Uncaught Error: cannot call methods on dialog prior to initialization; attempted to call method 'open'
How to fix this error, and is it possible to send the next() div element into dialog box using jQuery UI, or should I specify id for each div, and create a dialog script for each one of them ?

Your problem is, you're creating the dialog from the next div, but you're trying to open the dialog on the CURRENT div.
You can fix this pretty easy:
$(document).ready(function() {
$("#oone, #otwo, #othree, #ofour, #ofive, #osix, #oseven, #oeight, #onine, #oten, #otwelve, #otwenty, #othirteen, #ofourteen, #ofifteen, #osixteen, #loone, #lotwo, #lothree, #lofour, #lofive, #losix, #loseven, #loeight, #lonine, #laaten, #lotwelve, #lotwenty, #lothirteen, #lofourteen, #lofifteen, #losixteen").click(function() {
var dialog = $(this).next();
dialog.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
width: 800,
modal: true
});
dialog.dialog("open");
});
});

I made the assumption you want the dialog to contain the contents of the next (following) div.
This would do that:
$(document).ready(function() {
var dialog = '<div class="mydialog" title="Basic dialog"><p class="dialogcontent">me</p></div>';
var newDiv = $(dialog);
newDiv.dialog({
autoOpen: false,
hide: "puff",
show: "slide",
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
$(".form-group").on('click', ".img1", function() {
var me = $(this);
newDiv.find('.dialogcontent').html(me.next('.collapse').html())
newDiv.dialog("open");
});
});
Example in action: https://jsfiddle.net/89pyhsuj/

Simple pop up in jQuery for multiple table rows?

I would like to put a simple pop up in my table to display additional details regarding each row. I just want to ask for ideas on how to show the pop up in every row. Currently the pop up is only shown for the first one.
Here's my code:
#foreach (var name in Model){
<table>
<tr>
<td>Name</td>
<td> <button id="#name.id">Show</button></td>
</tr>
</table>
}
Script:
<script type="text/javascript">
$(function() {
$('#').click(function() { //what should I put in the #? considering that it would have different id's?
$("#popupdiv").dialog({
title: "jQuery Popup from Server Side",
width: 430,
height: 250,
modal: true,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
return false;
});
})
View Pop:
<div id="popupdiv" title="Basic modal dialog" style="display: none">
<b> Welcome </b>
</div>

You should use a common class
<td> <button id="#name.id" type="button" class='popup-launcher'>Show</button></td>
Then you can use Class Selector (“.class”)
Selects all elements with the given class.
Script
$('.popup-launcher').click(function() {
//You can access elements id using this object
var id = this.id;
//Rest of your code
$("#popupdiv").dialog({
title: "jQuery Popup from Server Side",
width: 430,
height: 250,
modal: true,
buttons: {
Close: function() {
$(this).dialog('close');
}
}
});
return false;
});

$('button').click(function () {
var row = $(this).closest('tr').index();
alert('In row ' + row)
//$('table').find('tr:eq('+row+')').find('td:nth-child(1)');
//pop code here
})
FIDDLE
This way you can get all the data of the row where you click the button

Hide Button using Jquery Dialog

I use jQuery Dialog on ASP.NET C#. When I click button "Show dialog", the dialog is appeared and button "Show dialog" also display on dialog.
I want to hide this button. Please help me.
This is my code:
<script type="text/javascript">
$(".printt").live("click", function () {
$("#dialog").dialog({
title: "Password Confirm",
buttons: {
Ok: function () {
$("[id*=btnWhatch]").click();
},
Close: function () {
$(this).dialog('close');
}
},
});
return false;
});
</script>
And ASPx
<div id="dialog">
<dx:ASPxButton ID="ShowDialog" CssClass="printt" runat="server" Text="Show Dialog">
</dx:ASPxButton>
</div>
Thank for your help !

Just hide the button after the Show dialog button is clicked.
$('#ShowDialog').hide();

Pop up for further details within a gridview?

I have a gridview which lists items. What i want to be able to do is click a link which will open a pop up to show further details for the specific item. So far I have managed to create a pop-up Div tag which will show the details of the product that is selected in the grid view. Currently the Div tag is opened using a hyperlink outside of the Gridview. When i try to put the link inside a template field in the gridview the pop up does not open.
This is the javascript for the pop up div
<script type="text/javascript">
$(document).ready(function () {
$("#OpenDialog").click(function () {
$("#dialog").dialog({ modal: true, height: 400, width: 500 });
});
});
</script>
The div tag
<div id="dialog" title="CPU Details" onload="false" style="display: none" >
The div tag is then opened using the following which is placed outside of the gridview.
<a id="OpenDialog" href="#">Click here to open dialog</a>

Do it this this way to see the wonders of css selectors.
Mark Up
<ItemTemplate>
<asp:LinkButton ID="lblId" runat="server" Text='<%# Bind("Id") %>' CssClass="opener"></asp:LinkButton>
</ItemTemplate>
<div class="dialog" title="My details" >
Details here
</div>
JqueryCode
$(document).ready(function () {
$(".opener").click(function () {
$(".dialog").dialog("open");
return false;
});
});
I have dropboxed a working example for you here which has a bonus of taking care of update panels.Enjoy.

try the following:
$(document).ready(function () {
$("#OpenDialog").click(function (e) {
$("#dialog").dialog({ modal: true, height: 400, width: 500 });
return false;
});
});
and let me know if it will not work for you.
UPDATED
add a class to link like :
<a id="OpenDialog" class="OpenDialog" href="#">Click here to open dialog</a>
now
$(document).ready(function () {
$('.OpenDialog').click(function (e) {
$("#dialog").dialog({ modal: true, height: 400, width: 500 });
return false;
});
});
try this it will definitely work for you as when ids of control have changed in gridview when it renders in html.

jquery ui popup doesn't work more then once

I am working on mvc project where jquery is heavily used. In one of the views there us accordion control with multiple (three) views inside.
The jquery popup works fine in the first panel, but once I close that panel, the popup doesn't want to work again.
I have no idea what can be, although I used http://blog.nemikor.com/2009/04/08/basic-usage-of-the-jquery-ui-dialog/ and http://jsfiddle.net/DSNt5 as guides.
Please find the code below.
Markup:
<div>
#Html.Hidden("Id", Model.Report.Id)
<div id="accordion">
#foreach (var item in Model.Parameters)
{
<h3>#Html.LabelFor(m => item.Name, item.Prompt)</h3>
<div>
<div class="editor-label">
Search #*Html.TextBox("Search")*#
<input id="#("Search" + item.Name)" type="text" name="q" data-autocomplete="#Url.Action("QuickSearch/" + item.Name, "Report")" />
</div>
<div class="editor-field">
<select multiple id="#("Select" +item.Name)" name="#("Select" +item.Name)"></select>
</div>
<div class="removed" style="clear:both; float:left; margin-left:440px;">
Remove selection
<button id="opener">Open Dialog</button>
<h2 class="demoHeaders">Dialog</h2>
<p><span class="ui-icon ui-icon-newwin"></span>Open Dialog</p>
</div>
</div>
}
</div>
<p style="text-align: right">
<input type="submit" value="Generate Report" />
</p>
</div>
JS:
<script type="text/javascript">
$(document).ready(function () {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function () {
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
</script>
<script type="text/javascript">
$(function() {
$( "#dialog2" ).dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$('#opener').click(openDialog);
})
var openDialog = function(){
$('#dialog2').dialog('option', 'buttons',{
"Cancel":function(){
$('#dialog2').dialog('close');
}
});
$('#dialog2').dialog('open');
</script>
I have the buttons from both samples there, and both of them are doing the same thing.
Every advice will be greatly appreciated.
Thanks in advance, Laziale
UPDATE:
<script type="text/javascript">
$(document).ready(function () {
{
$("#dialog2").dialog({
autoOpen: false,
show: "blind",
hide: "explode"
});
$('#opener').click(openDialog);
}
});
</script>
<script type="text/javascript">
var openDialog = function(){
$('#dialog2').dialog('open');
$('#dialog2').dialog('option', 'buttons',{
"Cancel":function(){
$('#dialog2').dialog('close');
}
});
$('#dialog2').dialog('open');
</script>

You should only initialize your dialog once. You are reinitializing it every time you click.
Initialize it on document ready and then in your click handler just call
$('#dialog2').dialog('open');
EDIT:
You still have dialog initialization happening in your openDialog function. Try this:
<script type="text/javascript">
$(document).ready(function () {
{
$("#dialog2").dialog({
autoOpen: false,
show: "blind",
hide: "explode",
buttons: {"Cancel": function(){
$('#dialog2').dialog('close');
}
});
$('#opener').click(function(){
$('#dialog2').dialog('open');
});
}
});
</script>