I'm putting together a team page and I have a div for each team member that includes a photo and some employee information. When I click on the picture I want a dialog to popup and use $this context to find the employee data in that same div. I cannot find a way to do this.
I got it working one way, but in that case the dialog box would only pop up once. The way I have it now, all boxes show up by default and once I'm done clicking the x's I can then click on the photo and it opens them all again. I've also tried replacing .employee .employeeData with $(this) and had no luck.
EDIT: I figured out autoOpen: false will keep the dialog from automatically opening, but still doesn't fix my issue.
UPDATED: http://jsfiddle.net/eTBS5/1/
var $dialog = $('.employee .employeeData').dialog({
width: 600,
height: 400,
modal: true,
close: function() {
$(this).dialog("close");
}
});
$('.employee').click(function(){
$dialog.dialog('open');
});
<div class="employee">
<img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
<div class="employeeData">
<p>EMPLOYEE 1 - This is a paragraph about this person.</p>
</div>
</div>
<div class="employee">
<img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
<div class="employeeData">
<p>EMPLOYEE 2 - This is a paragraph about this person.</p>
</div>
</div>
<div class="employee">
<img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
<div class="employeeData">
<p>EMPLOYEE 3 - This is a paragraph about this person.</p>
</div>
</div>
<div class="employee">
<img src="http://static.ddmcdn.com/gif/how-elmo-works-1.jpg" />
<div class="employeeData">
<p>EMPLOYEE 4 - This is a paragraph about this person.</p>
</div>
</div>
The problem is because you are assigning all 4 dialogs at once. Try this instead:
var dialogs = [];
$('.employee .employeeData').each(function() {
dialogs.push($(this).dialog({
width: 600,
height: 400,
modal: true,
autoOpen: false,
close: function() {
$(this).dialog("close");
}
}));
});
$('.employee').click(function() {
dialogs[$(this).index()].dialog('open');
});
Example fiddle
Can be done like this too:
DEMO
var $dialog = $('#dial').dialog({
width: 600,
height: 400,
modal: true,
autoOpen: false,
open: function() {
$(this).html($(this).data('sender'));
}
});
$('.employee').click(function(){
$dialog.data('sender',$('.employeeData',this).html()).dialog('open');
});
Could also do it this way:
jsFiddle
var diagOpts = {
width: 600,
height: 400,
modal: true,
autoOpen: false
};
$('.employee').each(function() {
var $this = $(this),
$dialog = $this.find('.employeeData').dialog(diagOpts);
$this.on('click', function(){
$dialog.dialog('open');
});
});
The .each() call will create a private scope that you can use to cache the $dialog variable which can then be referenced directly in the click handler. You also don't need the close handler.
Your jQuery selector is going to find all "employee" and "employeeData" objects.
You should use the object the specific fired click event is attached to like this:
$('.employee').click(function(){
var empData = $(this).find('employeeData');
... get data from empData and open dialog with just that data
});
Related
I would like to have a jquery pop up with confirmation info when clicking on a specific link in my navigation menu.I have the code below, but the popup does not appear, but the info on the popup display on the page among other page content.
HTML Link
<li>Order </li>
Dialog content
<div id="dialog-confirm">
<div class="message">UI Content goes here</div>
<div class="buttons">
</div>
jquery
<script>
$( function() {
$( "#dialog-confirm" ).dialog({
$( "#order").click({
resizable: true,
height: "auto",
width: 600,
modal: true,
buttons: {
"Yes": function() {
window.location.replace("https://link_here");
},
No: function() {
window.location.replace("https://link_here");
}
}
});
});
} );
When I remove the $( "#order").click({ part of the jquery, it works as a popup for every link clicked, so the issue must be there but I am unable to solve.
You have calling dialog function before click
Please check below code
$(function(){
$('#order').click(function(e){
e.preventDefault();
$( "#dialog-confirm" ).dialog({
resizable: true,
height: "auto",
width: 600,
modal: true,
buttons: {
"Yes": function() {
window.location.replace("https://link_here");
},
No: function() {
window.location.replace("https://link_here");
}
}
});
})
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<script src="https://code.jquery.com/ui/1.11.1/jquery-ui.min.js"></script>
<link rel="stylesheet" href="https://code.jquery.com/ui/1.11.1/themes/smoothness/jquery-ui.css" />
<li>Order </li>
<div id="dialog-confirm" style="display: none;">
<div class="message">UI Content goes here</div>
<div class="buttons">
</div>
1) add autoOpen: false to the dialog settings first, so popup won't be shown automatically on page load.
2) add click method on your link which will be showing the popup.
See this fiddle:
https://jsfiddle.net/4eo9w1cr/
I am looking to dynamically change the image shown in the jQuery Dialog. I am trying to pass the ‘image path’ as parameter which will be used to change the image shown in the jQuery dialog. Please! Check my code below.
By default, it will show ‘images/firstImage.jpg’ in the jQuery Dialog. Now, I am trying to change it to ‘images/secondImage.jpg’ through jQuery Dialog parameter.
<link href="jquery/jquery-ui.css" rel="stylesheet" />
<script src="jquery/jquery-1.10.2.js"></script>
<script src="jquery/jquery-ui.js"></script>
<script>
$(function () {
// this initializes the dialog (and uses some common options that I do)
$("#dialog").dialog(
{
autoOpen: false,
modal: true,
show: "blind",
hide: "blind",
width: "50%",
height: "auto",
resizable: false,
position: 'center',
overflow: "hidden",
});
});
function OpenGallary(photoSrc) {
$("#dialog").dialog("open").data("param", photoSrc);
}
</script>
<body>
<a onclick="OpenGallary('images/secondImage.jpg')">Click ME</a>
<div id="dialog" title="Photo Gallary">
<div id="aa" style="width: 800px;">
hello this is my world.
</div>
<p>
<img src="images/firstImage.jpg" />
</p>
</div>
</body>
Your function OpenGallary (I think you mean Gallery, but I digress) is just setting the data attribute on the dialog div, which is not going to affect the image tag.
The OpenGallary function can be changed to something like:
function OpenGallary(photoSrc) {
// Change the src attribute directly on the img in the dialog:
$("#dialog img").attr("src", photoSrc);
// Now that the dialog html is updated, open the dialog:
$("#dialog").dialog("open");
}
Depending on what you're trying to do, you may want to select the img directly with an id on the tag - the selector used above is just for working with the existing html.
I have a html structure. With the following:
<div class="edit"><a class="formtri" href="#">CHANGE</a>
And:
<div id="user_adr" style="display:none">
I want, when i click CHANGE, get user_adr div on front. Ajax or other solution. I tried jQuery .load function but it's not work. How can i do this?
Demo
You can use toggle() function to show / hide html element.
Live Demo
$('.edit').click(function(){
$('#user_adr').toggle();
});
alternatively you can use toggle functionality.
$('.edit').on('click',function(){
$('#user_adr').toggle();
});
if not toggle. then alternative method of toggle is this.
$('.edit').on('click',function(){
if('#user_adr').is('visible'))
{
$('#user_adr').show();
}
else
{
$('#user_adr').hide();
}
});
//to change display to none
$('#yourDivId).attr('display','none');
you can use jquery ui. dialog() method to show a dialog box. like this. Jquery dialog
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
</head>
<body>
<div id="dialog" title="Basic dialog">
<p>This is an animated dialog which is useful for displaying information. The dialog window can be moved, resized and closed with the 'x' icon.</p>
</div>
<button id="opener">Open Dialog</button>
if in case there is any other div with same class name edit above solutions may not be helpful so better u keep a unique id as "change"
<div class="edit"><a class="formtri" id="change" href="#">CHANGE</a>
$("#change").on("click", function(){
$('#user_adr').show();
});
$("#change").on("click", function(){
$('#user_adr').toggle();
});
I am using the following code to open a dialog box:
<li>
<input type="button" value="Preview" onclick="showPreview('EmailPreview');" />
</li>
<div id="dialog">
</div>
<script type="text/javascript">
//<![CDATA[
$(document).ready(function () {
$('#dialog').dialog({
autoOpen: false,
modal: true,
height: 525,
resizable: false,
width: 600,
dialogClass: 'timer'
});
});
//]]>
</script>
</div>
In my .js file:
function showPreview(action, id) {
$.get("/Manage/Account/" + action + "/" + id, function (data) {
$("#dialog").html(data);
$('#dialog').dialog('open');
$('#Area, #Exchange, #Number').autotab_magic().autotab_filter('numeric');
$("#dialog input[type='button'], #dialog select,#dialog input:checkbox,#dialog input:radio,#dialog input:file").uniform();
});
I use this exact code in 3 locations. In one location everything is perfectly functional. In the other 2 locations, done exactly they same, just in different views, the dialog box will open but not close. Is there something obvious that I am missing?
This is in the dialogbox-view:
<div class="top"><a onclick="$('#dialog').dialog('close'); return false"><img src="/public/images/admin/btn-close.png" /></a></div>
I don't see any dialog closing anywhere, you can close your dialog with this function:
$('#dialog').dialog('close');
More about it: jQueryUI dialog
Also any element has to have unique ID, so it should be something like #dialog-a, #dialog-b, otherwise there will be errors with id selectors etc.
Your dialog element IDs need to be unique, or jQuery won't find the right one.
When I call the function, the dialog doesn't work.
If I move the dialog construction into the showtimes_list function, everything works fine.
I thought that variables declared outside a function were global in context?
var dialog_list = $("<div></div>").dialog({
autoOpen: false,
modal: true,
height: 300, width: 720,
});
function showtimes_list(sid){
dialog_list.html("");
$.get("ajax_showtimes.php?sid="+sid, function(data){
dialog_list.html(data);
}
);
dialog_list.dialog("open");
}
---Edit---
This is being called from an onClick to showtimes_list.
---Edit---
This is working:
function showtimes_list(sid){
$("#stl").dialog("open");
$("#stl").html("");
$.get("ajax_showtimes.php?sid="+sid, function(data){
$("#stl").html(data);
}
);
}
$(function(){
$('<div id="stl"></div>').appendTo(document.body).dialog({
autoOpen: false,
modal: true,
height: 300, width: 720,
});
});
Instead of creating a new empty div, add the div to the document, e.g.:
<body>
<div id="dialog">
<div id="dialogContent"></div>
</div>
</body>
Then, your script will become
var dialog_list = $("#dialog").dialog({ });
Then, when you want to change the HTML of that element, instead of changing the dialog itself, you'd want to change the dialogContent element:
function showtimes_list(sid){
var content = $("#dialogContent");
content.html("");
$.get("ajax_showtimes.php?sid="+sid, function(data){
content.html(data);
}
);
dialog_list.dialog("open");
}
If you don't want these empty divs in your HTML structure, you should add them to the body dynamically and use classes instead of ids.
Edit: to answer your question as to why it doesn't work when the dialog_list is outside the function, I'd imagine it has something to do with the generated html.
When you call .dialog(), jQuery generates the following HTML:
<div class="ui-dialog ui-widget ui-widget-content ui-corner-all ui-draggable ui-resizable">
<div class="ui-dialog-titlebar ui-widget-header ui-corner-all ui-helper-clearfix">
<span id="ui-dialog-title-dialog" class="ui-dialog-title">Dialog title</span>
<a class="ui-dialog-titlebar-close ui-corner-all" href="#"><span class="ui-icon ui-icon-closethick">close</span></a>
</div>
<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
<p>Dialog content goes here.</p>
</div>
</div>
When this is outside of your function, it is called whenever it is encountered in the script... Then, in your function, you change that generated HTML. It's been a while since I dynamically updated dialog content, but I ran into the same problem, and the generated HTML was the culprit. I think my solution was to, instead of the nested divs in my original answer, I created the dialog as you did (outside the function), and inside the function, you change the html of the ui-dialog-content
For instance:
function showtimes_list(sid){
dialog_list.find('.ui-dialog-content').html("");
$.get("ajax_showtimes.php?sid="+sid, function(data){
dialog_list.find('.ui-dialog-content').html(data);
}
);
dialog_list.dialog("open");
}