I need to output alert message if val = -1, but the problem is that this message appears at the bottom of the page and this does not depend on the value of val.
if ($val == -1)
echo '
<script>
$(function() {
$( "#dialog:ui-dialog" ).dialog( "destroy" );
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
';
else { //... }
<div id="dialog-message" title="Process failed.">
<p><span class="ui-icon ui-icon-circle-check"
style="float: left; margin: 0 7px 50px 0;"></span> Error message.</p>
</div>
To hide the div use css
#dialog-message{
display:none;
}
For a better alert there is a nice plugin for Alert, Confirm & Prompt use that plugin
http://labs.abeautifulsite.net/archived/jquery-alerts/demo/
It's download page is here
http://www.abeautifulsite.net/blog/2008/12/jquery-alert-dialogs/
You can use position function to position the dialog:
Link
What's wrong with the good old fashioned alert() javascript function? It should do the job just fine in this situation.
Related
Hi I am using a framework called CodeIgniter and its a sample of MVC. I need a popup box where it will display the subvalues of an application however my dialog box is not working everytime I echo it. but you see i need to loop the dialog box for different values. my code is below
<?php
foreach($people as $row){
echo"<div id='dialog' title='Basic dialog'>".$row->app_name."</div>";
echo "<button id='opener'>".$row->app_name."</button>";}
?>
My javascrip code is fro jquery
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
});
</script>
Use event delegation
$(document).on("click" , "#opener" ,function() {
$( "#dialog" ).dialog( "open" );
});
Update the code as below:
<?php
$i = 1;
foreach($people as $row){
echo"<div id='dialog". $i."' title='Basic dialog'>".$row->app_name."</div>";
echo "<button id='opener". $i."'>".$row->app_name."</button>";
?>
<script>
$(function() {
$( "#dialog<?php echo $i?>" ).dialog({
autoOpen: false,
show: {
effect: "blind",
duration: 1000
},
hide: {
effect: "explode",
duration: 1000
}
});
$( "#opener<?php echo $i?>" ).click(function() {
$( "#dialog<?php echo $i?>" ).dialog( "open" );
});
});
</script>
<?php
$i++;
}
?>
Basically there will be multiple popup and you need to give unique id to each popup and button.
to use id in this situation is not good idea ... you should change id to class
echo "<button class='opener'>".$row->app_name."</button>";
then
$( ".opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
});
id is unique you should use a class
Enjoy :)
why is that ajaxForm is not running in jQuery Dialog modal confirmation whenever it is included in a "Delete Item" button.
Here is my jquery dialog:
<div id="deleteDialogForPartylist" title="Delete this item?">
<form id="deleteDialogForPartylistForm" action="mEdit/editPartylist/storeDataToDb/deleteData.php">
<p><span class="ui-icon ui-icon-alert" style="float: left; margin: 0 7px 20px 0;"></span><span id="acronymOfTheParty" style="font-weight:bolder"></span> will be permanently deleted and cannot be recovered. Are you sure?</p>
<input type="hidden" id="deleteDialogForPartylistHiddenId" name="deleteDialogForPartylistHiddenId">
</form>
</div>
Here is my script
$(function(){
$( "#deleteDialogForPartylist" ).dialog({
autoOpen: false,
resizable: false,
height:225,
hide: 'fade',
modal: true,
buttons: {
Cancel: function() {
$("#deleteDialogForPartylist").dialog('close');
},
"Delete item": function() {
$('#deleteDialogForPartylistForm').ajaxForm({
target: '#partyListInAddCandidate',
type: "post",
success: function(){
alert("Success");
$("#deleteDialogForPartylist").dialog('close');
}
});
}
}
});
});
.ajaxForm() does not submit the form as stated in the documentation of the plugin (http://malsup.com/jquery/form/#api)
In your case you should use .ajaxSubmit() instead, which will instantly submit your form on button-click as already suggested by charlietfl's comment
I am using a fullcalendar:-
http://arshaw.com/fullcalendar/
and I am using jquery .post to get a parameter back to the same page to generate some result, and this is working well.
At the same time, I wish to use jquery ui dialogue to hold the displayed contents. While pasting the sample codes from official site, the example works. However, when combining the .post output with dialogue, it was not successful.
I would like to seek help in combining the below 2 sets of scripts:-
//for generating .post output (working!)
<script>
function event_details(thevalue){
$.post('module/calendar/event_details.php',{
eid:thevalue},
function(output){
$('#theeventmsg').html(output);
});
}
</script>
<div id='theeventmsg'></div>
//jquery ui dialogue (working!)
<script>
// increase the default animation speed to exaggerate the effect
$.fx.speeds._default = 1000;
$(function() {
$( "#dialog" ).dialog({
autoOpen: true,
show: "blind",
hide: "explode"
});
$( "#opener" ).click(function() {
$( "#dialog" ).dialog( "open" );
return false;
});
});
</script>
<div class="demo">
<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>
</div><!-- End demo -->
Can help??? Thanks a lot!!
Try something like this:
<script>
$.fx.speeds._default = 1000;
$(document).ready(function() {
$( "#dialog" ).dialog({ autoOpen: false });
$('#button').click(function () {
var data = { ... };
$.post('module/calendar/event_details.php', data, function (output) {
$('#dialog p').html(output);
$( "#dialog" ).dialog("open");
});
});
});
</script>
<div id="dialog">
<p>content</p>
</div>
<button id="button">button</button>
Or:
<script>
$(document).ready(function () {
function eventdetail(thevalue) {
$.post('event_details.php', { eid: thevalue }, function (output) {
$('#dialog p').html(output);
$("#dialog").dialog({ autoOpen: true });
});
}
$('#button').click(function () { eventdetail('value'); });
});
</script>
<div id="dialog">
<p>content</p>
</div>
<button id="button">button</button>
Here's my problem...
I have the following jQuery UI script :
<script>
$(function() {
$( "#dialog" ).dialog({
autoOpen: false,
show: "slideUp",
hide: "slideDown",
height: "300",
width: "400",
title: "Test pop-up",
buttons: {
"Close": function(){
$(this).dialog("close");
}
}
}
);
$( "p.diag").click(function(e) {
var monUrl = 'test2.php';
$('#dialog').load(monUrl, function(response, status) {
$('#test_dialog').html(response);
});
e.preventDefault();
});
$( "p.diag").click(function() {
$( "#dialog" ).dialog("open");
});
It's a pretty simple code, it opens correctly my dialog box when I click on a p.diag class, but it won't re open after I close it.
The test2.php page just print a "lol" with a echo "lol";
And here's my HTML :
<div style="height: 200px; min-height: 109px; width: auto;" class="ui-dialog-content ui-widget-content" id="dialog">
</div>
Thanks !
Pleas remove e.preventDefault();
see this demo: http://jsfiddle.net/ngwJ3/
Reason: http://api.jquery.com/event.preventDefault/ : If this method is called, the default action of the event will not be triggered.
Hope this help :)
I have been following a tutorial on creating a style switcher with PHP and jQuery, now in the tutorial the PHP function uses get data, which is not available in codeigniter, I was hoping someone would be able to help me tidy up my sorry attempt?
My PHP function
function setBackground() {
$style = $this->uri->segment(3);
setcookie("style", $style, time() + (60*60*24*30));
echo $style;
}
My HTML and jquery call
<ul id="options">
<li><a class="option" href="<?php echo base_url();?>welcome/setBackground/red">Red</a></li>
<li><a class="option" href="<?php echo base_url();?>welcome/setBackground/green">Green</a></li>
</ul>
<script type="text/javascript">
$('a.option').styleSwitcher(); // calling the plugin
</script>
The jQuery plugin
jQuery.fn.styleSwitcher = function(){
$(this).click(function(){
loadStyleSheet(this);
return false;
});
function loadStyleSheet(obj) {
$('body').append('<div id="overlay" />');
$('body').css({height:'100%'});
$('#overlay')
.css({
display: 'none',
position: 'absolute',
top:0,
left: 0,
width: '100%',
height: '100%',
zIndex: 1000,
background: 'black url(img/loading.gif) no-repeat center'
})
.fadeIn(500,function(){
$.get( obj.href+'&js',function(data){
$('#stylesheet').attr('href','/media/css/' + data + '.css');
cssDummy.check(function(){
$('#overlay').fadeOut(500,function(){
$(this).remove();
});
});
});
});
}
var cssDummy = {
init: function(){
$('<div id="dummy-element" style="display:none" />').appendTo('body');
},
check: function(callback) {
if ($('#dummy-element').width()==2) callback();
else setTimeout(function(){cssDummy.check(callback)}, 200);
}
}
cssDummy.init();
}
On clicking the link to change the stylesheet I get this error rturned via firebug,
An Error Was Encountered
The URI you submitted has disallowed characters.
the URL that is being sent is,
http://mywebsite/index.php/welcome/setBackground/green&js
this example is me clicking the green choice.
You are not calling function setBackground() in jquery.
.fadeIn(500,function(){
$.get( obj.href+'&js',function(data){
You need to add id red and blue in a tag.
You need to call it something like this.
.fadeIn(500,function(){
var color=$('.color').attr('id');
$.post('yourphpclass/setBackground/'+color, ...
...
try removing +'&js' part from:
...
$.get( obj.href+'&js',function(data){
...
in jQuery plugin.