Salutations! I would like to create an alert box which echo a button connected to a link. I would like to do the whole thing using php. I would like to put that piece of code in my codeigniter controller function.
Here is a piece of code that can echo a button connected to a link:
echo 'Add to Google Contacts';
Please help me to do my task. Thanks a lot.
Alert is a special kind of method which is only used for Showing some messages,with a button is attached.Only we can write text in it.If you want an alert box with your own components, design a new one yourself.But it will never become an alert box.By using jquery you can do this ..paste it.
Here is the Jquery code for dialog box,paste it.
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<style></style>
</head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.2/jquery.min.js"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.23/jquery-ui.min.js"></script>
<script src='template/js/jquery.textarea-expander.js'></script>
<link href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8/themes/base/jquery-ui.css" rel="stylesheet" type="text/css"/>
<script type="text/javascript">
// <---- VENTAÑAS DE PARAMETERES---->
$(document).ready(function() {
var regex,v,l,c,b,i,contapara=3;
$( "#wnd_Addparam" ).dialog({
autoOpen: false,
height: 'auto',
width: 350,
modal: true,
resizable:false,
buttons: {
"Link": function() {
location.href="http://www.google.com";
return false; },
Cancel: function() {
$( this ).dialog( "close" );
}
},
close: {}
});
$( "#wnd_Addparam" ).dialog( "open" );
});
</script>
<body>
<div id="wnd_Addparam" title="Information" ></div>
</body>
</html>
Hope this will help you dr..
You can use it with JavaScript to like,
echo "<a href='onclick='javascript:function(id)''></a>";
and the javascript you can use it by,
function(id)
{
window.location.href("file_name.php")
}
echo "<a href='#'><button onclick='".'alert("your alert message")'."'>Try it</button>";
Related
I have a list of rows from mysql table, each contains : a href tag, whose value is varying based on id like : href="123.php?id=sbsbd". I coded a jquery dialog, with 2 buttons - YES / NO. Upon, YES, I want to proceed with redirection request, from that particular a href link. Any guesses, how this can be done ?
<!doctype html>
<html>
<head>
<meta charset="utf-8">
<title>Untitled Document</title>
<script
src="https://code.jquery.com/jquery-3.1.0.js"
integrity="sha256-slogkvB1K3VOkzAI8QITxV3VzpOnkeNVsKvtkYLMjfk="
crossorigin="anonymous">
</script>
<link rel="stylesheet" href="//code.jquery.com/ui/1.12.0/themes/base/jquery-ui.css">
<script src="https://code.jquery.com/ui/1.12.0/jquery-ui.js"></script>
<script type="text/javascript">
$(document).ready(function(e) {
////////////////////////// 001 //////////////////////////
$("#proceed").dialog({
autoOpen: false,
buttons : {
"Yes": function(){
// stuck here
// need to go to URL in ahref = "123.php?id=sbsbd";
// id value keeps changing
},
"No": function(){
$(this).dialog("close")
}
}
});
//////////////////////// 002 ///////////////////////////
$("a").click(function(){
//$("#proceed").css("display", "block !important");
$("#proceed").dialog("open");
return false;
}); // click-function ends
}); // document.ready function-ends
</script>
</head>
<body>
Click for confirmation!
<div id="proceed" title="Delete this Slide-Image" style="display:none">
<p>Slide-Image will be deleted permanently from Homepage and from Server, too. Ok ?</p>
</div>
</body>
</html>
create the global access variable and set the href value to that variable when on click and use it to redirect.
<script type="text/javascript">
$(document).ready(function(e) {
////////////////////////// 001 //////////////////////////
$("#proceed").dialog({
autoOpen: false,
buttons : {
"Yes": function(){
alert(url);
window.location.href = url;
//here you can use that variable
},
"No": function(){
$(this).dialog("close")
}
}
});
var url ='';
$("a").click(function(){
$("#proceed").dialog("open");
url = $(this).attr('href');
//asign the clicked url into this url variable
return false;
});
});
</script
There is my code so far. The issue is that the popup seems to be working perfect in Chrome but in Firefox it sticks to the top of the window after entering and in IE the popup does not even appear.
<html>
<head>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.10.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
</head>
<body>
<div id="dialog" title="My Dialog Title" style="display:none">
<p>This is My Dialog box Description/Content</p>
</div>
<script type="text/javascript">
$(document).ready(function() {
setTimeout(function(){
$(function () {
$("#dialog").dialog({
show: {
effect: 'drop',
direction : 'up',
distance: 1000,
duration: 2000,
},
});
});
}, 2000)
});
</script>
<style>
.ui-dialog-titlebar {display:none;}
#other_content {width:200px; height:200px;background-color:grey;}
#dialog_content{display:none;}
</style>
</body>
</html>
I want the popup to behave in the same manner as it is in Chrome with all the browsers.
http://jsfiddle.net/fakhruddin/x39Rr/14/
Web Page Link
Please guide.
Try to add:
<body style="height:100%">
The solution is simple! Add to the begin of file:
<!DOCTYPE HTML>
I want to display a pop-up alert box upon some condition in PHP being satisfied. Something like:
echo "<script type="text/javascript"> alert('bleh'); </script>";
except using a custom jquery alert box. Is this possible??
I've tried something like:
echo "<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>";
but it gives me a weird effect. Not pop up.
Thanks for your interest.
echo <<<EOD
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
</script>
EOD;
Try something like this. Where $bleh is the PHP variable with the message to show.
<script type="text/javascript">
$(document).ready(function(){
var dlg = $('<div>').text(<?php echo $bleh ?>);
$(body).append(dlg);
dlg.dialog(
modal: true
);
});
<script>
PHP is expecting " (double quotes) in any lines like rel="stylesheet" to be php code. You have to either use ' (single quotes) or escape them with a function around the echo like add_slashes. To get around this, I generally use single quotes around echo contents, so all the double quotes are not bothered.
echo 'all the "quoted" stuff here';
Yes its possible..
echo "<script type=\"text/javascript\">alert('bleh');</script>";
but i am not sure if its a good way to write whole function in echo, Instead Define Your Function in HTML some where in your Page and echo the function name here like i did above..
as noted before you need to escape your character or use it like this so no need to escape characters in here
<?php if (condition == true) : ?>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
<script>
$(function() {
$( "#dialog-message" ).dialog({
modal: true,
buttons: {
Ok: function() {
$( this ).dialog( "close" );
}
}
});
});
</script>
<?php endif; ?>
Sure thing. you probably want something around this:
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<link rel="stylesheet" href="/resources/demos/style.css" />
//check for PHP condition. Script will only be output on condition pass.
<?php if(condition == true){ ?>
<script>
$(function() {
$("#dialog-message").dialog({
modal: true,
buttons: {
Ok: function() {
$(this).dialog("close");
}
}
});
});
</script>
<?php } ?>
basically, you don't actually need to 'echo' the script, as long as you're outputting it from a .php file and not an external .js file. the script will show up as long as the condition passes.
I have jquery plugin but on page load it works but when I integrate it with my php script it seems not to load.I have check paths but to no success. as soon as the page loads i want the window to show onload check out my code i put in the head tag please excuse the formatting:
<?php session_start(); ?>
<!DOCTYPE html>
<html>
<head>
<title>SimpleModal Basic Modal Dialog</title>
<meta name='author' content='Eric Martin'
/>
<meta name='copyright' content='2012 - Eric Martin' />
<link type='text/css' href='../css/demo.css' rel='stylesheet' media='screen'
/>
<link type='text/css' href='../css/basic.css' rel='stylesheet' media='screen'
/>
<script>
window.onload = function () {
$(document).ready(function () {
$('#basic-modal-content').modal();
return false;
});
$('#modalContentTest').modal({
onShow: function (dialog) {
var sm = this;
dialog.container.animate({
height: 300,
width: 300
}, 500, function () {
sm.setPosition();
});
}
});
};
</script>
<style>
.noTitle .ui-dialog-titlebar {
display:none;
}
</style>
</head>
....between body tags i have the php script
I think your problem is in the combination of window.onload and jquery $(document).ready.
The "ready" method is triggered when the DOMContentLoaded event is triggered (jQuery simulates this on browsers that do not support it), while window.onload triggers when all additional content (css, images) is loaded - which happens afterwards.
So by the time you bind the "ready" event, the event has already been triggered and will not trigger again.
I suggest removing the window.onload wrapper function.
$('#modalContentTest').modal({
onShow: function (dialog) {
var sm = this;
dialog.container.animate({
height: 300,
width: 300
}, 500, function () {
sm.setPosition();
});
}
});
$(document).ready(function () {
$('#basic-modal-content').modal();
return false;
});
Here are some details on these two events
Another concern I have is that the id of the declared modal (#modalContentTest) is different from the one you are trying to trigger (#basic-modal-content)
Recently I'm starting to use jquery, when trying to popup a modal form using jquery its won't working for me, the css file and javascript files are keeping locally. Please see the code snippet below
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
<title></title>
<script type="text/javascript" src="jquery.min.js"></script>
<script type="text/javascript" src="jquery-ui.min.js"></script>
<script type="text/javascript">
$(document).ready(function() {
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
title: 'Basic Dialog'
});
$('#opener').click(function() {
alert('test');
$dialog.dialog('open');
// prevent the default action, e.g., following a link
return false;
});
});
</script>
</head>
<body>
<?php
echo '<link rel="stylesheet" type="text/css" href="jquery-ui.css">';
?>
<button id="opener">Open the dialog</button>
</body>
Please correct me if I did any mistake. Thanks all.
You need to include:
modal: true,
in your dialog definition like this:
var $dialog = $('<div></div>')
.html('This dialog will show every time!')
.dialog({
autoOpen: false,
modal: true,
title: 'Basic Dialog'
});