Simple pop up in jQuery for multiple table rows? - javascript

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

Related

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/

Issue with JQuery UI Modal box showing when it shouldn't

So there's a few pieces to this. First of all, here's the Javascript located in the head of the ASPX page:
<!--//**********************************
// Test modal popup
//********************************** -->
<script type="text/javascript">
//Total out of range dialog
$(function () {
$("#dialog").dialog({
modal: true,
// autoOpen: false,
width: 570,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
});
</script>
Then, at the very bottom of he ASPX page (which is rather lengthy...) I have the modal piece:
<div id="dialog" title="ATTENTION">
<table style="width:565px; border-spacing:0px; border-collapse:collapse;">
<tr>
<td style="width:65px; ">
<img src="http://someimage" style="height: 120px; width: 80px" />
</td>
<td style="vertical-align:top">
<p>some text</p>
</td>
</tr>
</table>
</div>
</asp:Content>
Lastly, in the code-behind I have this:
if (!Page.IsPostBack)
{
if (MyServer.Contains("localhost"))
{
ScriptManager.RegisterStartupScript(Page, Page.GetType(), "dlgOutOfRange",
"$(function() {$('#dialog').dialog('open');});", true);
}
Now, I know this all works, it's been tested. However, this modal is displaying even when it's not supposed to, and when I skip through the code it bypasses the Page.IsPostback so it knows it's not a postback. For instance, I have a dropdown that has a SelectedIndexChange function tied to it. When I change the value in the dropdown, this modal becomes visible. Is there something in the div tag that I'm not doing? I tried adding style="Visible: False;" but that just made the text invisible.
<script type="text/javascript">
$(document).ready(function () {
$("#dialog").dialog({
modal: true,
width: 570,
buttons: {
"Ok": function () { $(this).dialog("close"); },
"Cancel": function () { $(this).dialog("close"); }
}
});
});
</script>
Try this..

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.

How to dynamically load content from an external url, inside of a jquery ui modal dialog widget?

I asked this question before, but I don't think I explained properly for what I am trying to accomplish.
There are multiple links on my website and I want to open the content from the link in a jquery ui modal dialog widget.
I'm trying to use 'this' to reference the link that the user selects dynamically.
What am I doing wrong here?
The code I'm using is below:
comment #1
comment #2
comment #3
<div id="somediv"></div>
<script type="text/javascript">
$(document).ready(function() {
$("#somediv").load(this.getTrigger().attr("href")).dialog({
autoOpen: false,
width: 400,
modal: true
});
$("#test").click(function(){$( "#somediv" ).dialog( "open" );});
});
</script>
http://jsfiddle.net/qp7NP/
A couple changes: changed ID to Class and used IFrame.
comment #1<br>
comment #2<br>
<a href="http://ask.com/" class="test" >comment #3</a><br>
<div id="somediv" title="this is a dialog" style="display:none;">
<iframe id="thedialog" width="350" height="350"></iframe>
</div>
<script>
$(document).ready(function () {
$(".test").click(function () {
$("#thedialog").attr('src', $(this).attr("href"));
$("#somediv").dialog({
width: 400,
height: 450,
modal: true,
close: function () {
$("#thedialog").attr('src', "about:blank");
}
});
return false;
});
});
</script>
In case you want to pull in the HTML instead of IFrame, you will have to use Ajax (XMLHttpRequest), something like this: http://jsfiddle.net/qp7NP/1/
You can't have multiple elements with the same Id.
Change your links to to class="test" instead and therefore your click event to $('.test').click().
Also if you still have problems, and I remember I had some similar issues because how JQUery Dialog behaves itself with the DOM. It will literally rip your #somediv out of content and append it to the bottom of a page to display that dialog. I solved my dynamic dialog loading issues with wrapping it in another div.
<div id="somediv-wrap">
<div id="somediv">
</div>
</div>
<script>
$(document).ready(function() {
$("#somediv-wrap").dialog({
autoOpen: false,
width: 400,
height:200,
modal: true
});
$(".test").click(function(event)
{
event.preventDefault();
var link = $(this).attr('href');
$("#somediv").load(link,function(){
$( "#somediv-wrap" ).dialog( "open" );
});
});
});
</script>

Dialog box content empty upon either Jquery Post or Form Submit

I have a view which renders a partial view and in this view there is a dialog box which contains a list of check boxes. This view is called Create.
The process flow of this page is:
1)The first time users opens this page, they upload a file by selecting the file and by hitting the upload button. The action method parses the file and returns the model and displays a set of dates in the dialog box in the form of a check box list.
2) From this dialog box they select/check dates and using the select button in the dialog box, A post request is made to a controller action which based on the selected checboxes calculates a few form fields and returns the partial view.
3)Once users are okay with the pre-populated fields returned they click save and record is saved.
Everything works fine on the Create page. In the edit page it seems to be a different story. When the page is loaded the first time, the list which was saved upon create, is present in the dialog box. However when they hit Select within the dialog box, the post to the action method receives this list as empty. I am not sure why it is null. Not sure what exactly I am doing wrong but the code for edit is as follows.
Thanks!!
THE JS FILE:
var RunDialog;
$(document).ready(function () {
$(document).ajaxStart($.blockUI).ajaxStop($.unblockUI);
RunDialog = $("#runDatestreeview").dialog({ closeOnEscape: true, stack: false, autoOpen: false,
modal: false, resizable: true, draggable: true, title: 'Select Run Dates to Auto-Populate Form Fields:',
width: 600, height: 500, position: 'center',
buttons: { Select: function () {
$.post("/RunLogEntry/LogFileConfirmation",
$("#form").serialize(),
function (data) {
$("#runDatestreeview").remove();
$("#testExceptiontreeview").remove();
$("#main").html(data);
$(RunDialog).dialog("close");
}, "html");
},
Cancel: function () {
$(this).dialog("close");
}
}
});
RunDialog.closest("div.ui-dialog").appendTo("#form");
$('#RunDatesChildDialogLink').click(function () {
$(RunDialog).dialog("open");
});
//Region Auto-Open Modal Box
var modalOpen = $("#LogModals").val();
if (modalOpen == "0") {
$("#runDatestreeview").dialog({ autoOpen: true });
}
//End Auto Open Modab Box Regiom
});
EDIT VIEW
#model RunLog.Domain.Entities.RunLogEntry
#{
ViewBag.Title = "Update";
Layout = "~/Views/Shared/_Layout.cshtml";
}
<script src="#Url.Content("~/Scripts/jquery.validate.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.validate.unobtrusive.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/runLogEntry.js")" type="text/javascript"></script>
<script type="text/javascript">
var runlogListErrorsUrl = '#Url.Action("ListErrorCodes", "RunLogEntry")';
</script>
#using (Html.BeginForm("Edit", "RunLogEntry", FormMethod.Post, new { enctype = "multipart/form-data" }))
{
<div id="main">
#Html.Partial("_RunLogEntryPartialViewEdit", Model)
</div>
}
<script src="#Url.Content("~/Scripts/exitCode.js")" type="text/javascript"></script>
Partial View for Edit I am not posting the entire model for the sake of readability. The Dialog div is called runDAtestreeview.
#model RunLog.Domain.Entities.RunLogEntry
<script src="#Url.Content("~/Scripts/runDates.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/testexception.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/jquery.blockUI.js")" type="text/javascript"></script>
#Html.ValidationSummary(true)
<div class="bodyContent">
#if (Model.RunDatesDisplay != null && Model.RunDatesDisplay.Count() > 0)
{
<span class="leftContent">
#Html.Label("Run Dates")
</span><span class="rightContent"><span id="RunDatesChildDialogLink" class="treeViewLink">
Click here to Select/View Run Dates</span>
<br />
<span id="RunDatesDisplayy" style="cursor: pointer; text-decoration: underline;">
</span></span>
}
</div>
<div id="runDatestreeview" title="Dialog Title" style="font-size: 10px; font-weight: normal;
overflow: scroll; width: 400px; height: 450px; display: none;">
<table class="grid" style="width: 600px; margin: 3px 3px 3px 3px;">
<thead>
<tr>
<th>
Run Dates:
</th>
<th>
Minimum Replicate:
</th>
</tr>
</thead>
<tbody>
#Html.EditorFor(x => x.RunDatesDisplay)
</tbody>
</table>
</div>
Ok this seems to trivial but changing the form to the following by including "id = form" made it work. Looks like Earlier when I was clicking the select button, the form was null.
#using (Html.BeginForm("Create", "RunLogEntry", FormMethod.Post, new { id = "form", enctype = "multipart/form-data" }))
{

Categories