i have a jquery dialog, which in i have:
$(document).ready(function() {
if( window.location.href.indexOf( '#product' ) != -1 ) {
var productID = window.location.href.split('-');
showDialog(productID[1]);
}
});
function showDialog(productID)
{
$( "#dialog-modal_"+productID ).html( "<iframe src='index.php?act=showProduct&id="+productID+"' width='100%' height='100%' frameborder='0' scrolling='no'></iframe>" );
$( "#dialog-modal_"+productID ).dialog({
width: 790,
height: 590,
modal: true,
open: function(event, ui)
{
}
});
}
it works fine when i open it, but if i close that window and try to re-open it - it does not responding.
thanks!!
Below is a sample of how jQuery UI Dialog code should appear. Remember, you need a way to open the dialog. So create a function that calls showDialog on that modal again. A button, or link would work.
jQuery UI Code
function showDialog(productID)
{
var container = $('#dialog-modal_'+productID).html('<blah blah>');
container.dialog({
autoOpen: false,
modal: true,
width: 790,
height: 590
});
container
.dialog('option', 'title', 'Your Title')
.dialog('option', 'buttons', {
Close: function() {
$(this).dialog('close');
}
})
.dialog('open');
//do open event work here
}
DOM for a Open Button
Open My Modal
jQuery for Open Button
$('a#open').click(function(e) {
e.preventDefault();
showDialog(<your id>);
});
Related
Ok, Im trying to make a draggable CMS system, now Im stuck on the next problem.
When Im done dragging my 'div' I want to save my new left and top (x and y) variables in my MySQL database using PhP.
I get my left and top variables by the next line of codes:
$(function() {
$( "#3" ).draggable({
stop: function () {
$.post("upload.php", {
left: this.getBoundingClientRect().left,
top: this.getBoundingClientRect().top
})
},
containment: "#containment-wrapper",
scroll: false
});
my upload.php is:
<?
mysql_query("UPDATE nvt SET left='". $_POST['left'] ."'")or die(mysql_error());
mysql_query("UPDATE nvt SET top='". $_POST['top'] ."'")or die(mysql_error());
header("Location: inlogged");
?>
When I'm done dragging my div there is just no reaction?
I think you are missing }); at the end. The code should be :
$(function() {
$( "#3" ).draggable({
stop: function ( event, ui ) {
$.post("upload.php", {
left: parseInt( ui.offset.left ),
top: parseInt( ui.offset.top )
})
},
containment: "#containment-wrapper",
scroll: false
});
}); //see the change
I have the following in a table, repeated for each row:
<a <?php echo 'id="'.$id.'"'; ?> class="custom-dialog-btn btn btn-small">
<i class="icon-trash"></i>
</a>
where id is different for each line, because it is taken from a table in database where it is the primary key.
Then, I used th following jQuery code:
$(".custom-dialog-btn").bind("click", function (event) {
$("#mws-jui-dialog").dialog("option", {
modal: false
}).dialog("open");
event.preventDefault();
});
$("#mws-jui-dialog").dialog({
autoOpen: false,
title: "Alert",
modal: true,
width: "640",
buttons: [{
text: "NO",
id: "cancel_button",
click: function () {
$(this).dialog("close");
}
},
{
text: "OK",
id: "confirm_button",
click: function () {
myremovefuntion(id); // I need the id
}}
]
});
that refers to the dialog:
<div id="mws-jui-dialog">
<div class="mws-dialog-inner">
<h2>Are you sure you want to delete?</h2>
</div>
</div>
How can I pass the id to the modal?
You can append a data attribute to your dialog div as follows;
$('a').click(function (e) {
e.preventDefault();
$("#your_dialog").data('mycustomdata', $(this).prop('id')).dialog('open');
});
And retreive it like this
$("#your_dialog").dialog({
autoOpen: false,
resizable: false,
height:200,
modal: true,
buttons: {
Cancel: function() {
$(this).dialog('close');
},
'Delete': function() {
$(this).dialog('close');
var mydata = $(this).data('mycustomdata'); // = gives you the id of anchor element
// some delete logic
}
}
});
While Emin's answer certainly works, I wonder if this fabuolus jQuery UI library perhaps has a dialogue flavour analogue to JavaScript's native confirm() method? Or perhaps a possibility to pass in callback functions? This would remove the need from the dialogue code containing business logic.
Use the following code to get the id:
var id = $(this).prop("id");
And you will get the id of that which element you have clicked.
I want to display contact info with the link to contact us page on mouse over hyperlink just like stackoverflow (mouse over user name) and gmail (click over user name). The below is what the latest updated code looks like.
<script src="http://code.jquery.com/jquery-1.10.1.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.16/themes/start/jquery-ui.css" />
<script>
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
console.log(posX,posY);
$('#dialog_content').dialog({
autoOpen: false,
open: function() {
closedialog = 1;
$(document).bind('click', overlayclickclose);
},
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
<div id="dialog_content">bla bla bla</div>
<div id="open">CONTACT US</div>
The error that i get
Uncaught TypeError: Cannot read property 'left' of undefined
Check this option:
jsfiddle.net/3mxGM/4/
It creates a jQuery modal window with the info inside the div with id dialog_content. You might want dynamic content inside that div from your database or something. Anyway this should work for what you want.
html:
<div id="dialog_content">
Here you can write the info to show up in the modal window.<br /><br />
If you know what AJAX is, could be a good idea to use it to query your database and get the info from there.</div>
Open dialog
jQuery:
$(document).ready(function(){
$('#open').mouseenter(function() {
$('#dialog_content').dialog('open');
});
$('#dialog_content').mouseleave(function() {
$('#dialog_content').dialog('close');
});
var posX = $('#open').offset().left;
var posY = $('#open').offset().top;
$('#dialog_content').dialog({
autoOpen: false,
focus: function() {
closedialog = 0;
},
close: function() {
$(document).unbind('click');
},
buttons: {
/*
Ok: function() {
$(this).dialog('close');
}
*/
},
show: {
effect: 'fade',
duration: 800
},
hide: {
effect: 'fade',
duration: 800
},
position: [posX,posY+25],
resizable: false
});
});
css:
.ui-dialog-titlebar {display:none;}
If you're looking for a much more code-simple popup tooltip, I am enjoying a customized version of this:
http://devseo.co.uk/examples/pure-css-tooltips/#
If this is too fancy for you it was just some css3 transitions on top of this more basic version, explained well here:
http://sixrevisions.com/css/css-only-tooltips/
I have a table with images and info about each image. Next to each image I have an 'add' button that when clicked opens a jquery dialog() with id="alignment".
I want to send a php variable (with the image name) so when you click on the 'add' button I can call the variable and the image name can be displayed in the dialog box.
My code is:
foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button class="imageSetting">Add</button></td><td>');
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('<img src="images/thumb/'.$upload[0].'/120px-'.$upload[0].'" />');
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[1]);
$wgOut->addHTML('x');
$wgOut->addHTML($upload[2]);
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml($upload[4]);
$wgOut->addHtml('</td></tr>');
}
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
$( "#alignment" )
.dialog({
autoOpen: false,
title: "Align Image",
//draggable: false,
resizable: false,
buttons: {"Okay": function() {$(this).dialog("close");}},
});
$(".imageSetting")
.click(function() {
$( "#alignment" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
$wgOut->addHTML('<div id="alignment">');
$out = self::alignment();
$wgOut->addHtml($out);
$wgOut->addHTML('</div>');
So I added a bit of code to your example, but you can tweak it as you find necessary. Basically I recommend using the jQuery .data() method to pass along the data you need. Each button will utilize the HTML5 data attribute inside the loop to create the image name as part of the button html.
Next, when you click on the button it'll grab that value and assign it to the modal's copy of image-name.
I added an open function to your modal. Inside that function it'll fetch that image-name value (the one we just assigned) and you can now use it to append into the contents of the modal. (For example, you can create a <span> somewhere in your modal html where you'd like to place the image name... And then use the .html() method to "paste" the value in there).
foreach($uploaded as $upload){
$wgOut->addHTML('<tr><td><button data-image-name="' . $upload[0] . '" class="imageSetting">Add</button></td><td>');
$wgOut->addHTML($upload[0]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml('<img src="images/thumb/'.$upload[0].'/120px-'.$upload[0].'" />');
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[1]);
$wgOut->addHTML('x');
$wgOut->addHTML($upload[2]);
$wgOut->addHtml('</td><td>');
$wgOut->addHTML($upload[3]);
$wgOut->addHtml('</td><td>');
$wgOut->addHtml($upload[4]);
$wgOut->addHtml('</td></tr>');
}
$wgOut->addScript('<script type="text/javascript">
( function($) {
$(document).ready(function() {
$(function() {
$( "#alignment" )
.dialog({
autoOpen: false,
title: "Align Image",
//draggable: false,
resizable: false,
open: function() {
var imageName = $("#alignment").data("image-name");
// use the jQuery .html() function to put the value of 'imageName'
// into your dialog contents. (like #modal-subheader.html(imageName);)
},
buttons: {"Okay": function() {$(this).dialog("close");}},
});
$(".imageSetting")
.click(function() {
$("alignment").data("image-name", $(this).data("image-name"));
$( "#alignment" ).dialog("open");
});
});
});
} ) ( jQuery );
</script>');
$wgOut->addHTML('<div id="alignment">');
$out = self::alignment();
$wgOut->addHtml($out);
$wgOut->addHTML('</div>');
I am trying to integrate new functionality using jQuery UI's dialog.
I have a page with a link. When a link is clicked a modal dialog with a form in it opens. That part works OK.
$("#myForm").hide();
$("#myLink").click(function(){
$("#myForm").dialog({
modal: true,
draggable: false,
resizable: false,
width: 450,
buttons: {
"Submit": function() {
// ???
},
"Cancel": function() {
$(this).dialog("close");
}
}
});
});
Open Dialog
<div id="myForm">
<form>
<textarea id="myValues" rows="10"></textarea>
</form>
</div>
Now, I need to submit the form from within my dialog and POST results to the same page. I am getting all confused with how to implement the rest. I did look at the jQuery .post() example which made me even more confused. The page is in PHP, so when the results are submitted I need to get the post value and do some server-site action.
if (isset($_POST["myValues"])) {
// do something
}
Stuck, need help.
In jQuery function for "Submit" button:
$('form#myFormId').submit();
And in HTML:
<form id="myFormId" method="POST" action="processingscript.php">
Then the php script will get all the values that have been POSTed and can process them.
Look into using the jQuery submit function
Reference: http://api.jquery.com/submit/
Use this method that updates dialog content:
$("#myformid").dialog({
modal: true,
draggable: false,
resizable: false,
width: 450,
buttons: {
"Submit": function (event) {
event.preventDefault();
var formvalues = $("#myformid").serialize();
$.post('/Home/Edit', formvalues, function (data) {
//use data
$('#myformid').html(data);
}, "html");
},
"Cancel": function () {
$(this).dialog("close");
}
}
});
In the Control,
[HttpPost]
public PartialViewResult Edit(ViewModel model) {
//use data
return PartialView("MyDialogView", model);
}