Global jQuery dialog variable not working properly - javascript

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");
}

Related

How can we pass the parameter from jQuery Dialog and change the content of the html?

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.

avgrund How do I call activate function

I am using http://github.com/voronianski/jquery.avgrund.js/
my js call is:
$('.reserve_button').avgrund({ enableStackAnimation: false, onBlurContainer: '.content', holderClass: 'custom', template: $(".rezerve-modal").html() });
and my popup content is:
<div class="avgrund-overlay"></div>
<div class="rezerve-modal">
<div style="background-color: #CEEEF2; padding: 5px 10px; height: 100%;">
some content
<span class="modal-btn hoverU cancel">Cancel</span>
</div>
</div>
What I want is, when I click cancel I want popup to be closed.
You have got different attributes for that:
showClose: false, // switch to 'true' for enabling close button
showCloseText: '', // type your text for close button
closeByEscape: true, // enables closing popup by 'Esc'..
closeByDocument: true, // ..and by clicking document itself
I fixed this by adding avgrund-close class to element I want to use for close. there is nothing else to be done.
<span class="modal-btn hoverU avgrund-close cancel">İptal</span>
after small modifications on css classes I achieved my goal.

jQuery dialogs all showing up at once

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
});​

more than one tagging form on a single page

I am using a script from http://codecanyon.net/item/dynamic-tag-form/482498?sso?WT.ac=search_item&WT.seg_1=search_item&WT.z_author=RikdeVos . My work requires to have more than one tagging form in a single page. I want to display, say, three tagging forms with different ids: tags1 , tags2 and tag3.
<div id="tags1"></div>
<div id="tags2"></div>
<div id="tags3"></div>
and calling the script from:
<script>
$(document).ready(function(){
$("#tags1").tag({
width: 400,
height: 90,
inputName: 'tags1'
});
});
</script>
now how can I call tags2 and tags3 if I copy/paste the script portion and replace tags1 to tags2 I am getting the form but there must be a better way like passing name as variables in script.
Go through all the tagging forms by looping through each element in their container.
HTML:
<div class="tags-container">
<div id="tags1"></div>
<div id="tags2"></div>
<div id="tags3"></div>
</div>
Javascript:
$(document).ready(function(){
$(".tags-container div").each(function (index, element) {
$(this).tag({
width: 400,
height: 90,
inputName: $(this).attr('id')
});
});
});

jQuery UI dialog boxes won't close

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.

Categories

Resources