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)
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
I have been trying to figure out how to use the contextMenu.js plugin from s-yadav.
I've downloaded the js and css files and saved them into the same folder as my php script.
The examples for the plugin are on this page: http://ignitersworld.com/lab/contextMenu.html#demo
However, I'm struggling to figure out how to activate them on the page. I assume I need to call the plugin and then the script needs to go between tags.
However, this does not produce anything. The code is below. Can anyone point me in the right direction?
Thank you
<head>
<link rel="stylesheet" type="text/css" href="contextMenu.css" />
<script src="contextMenu.js"></script>
</head>
<body>
<script>
//For example we are defining menu in object. You can also define it on Ul list. See on documentation.
var menu = [{
name: 'create',
img: 'images/create.png',
title: 'create button',
fun: function () {
alert('i am add button')
}
}, {
name: 'update',
img: 'images/update.png',
title: 'update button',
fun: function () {
alert('i am update button')
}
}, {
name: 'delete',
img: 'images/delete.png',
title: 'delete button',
fun: function () {
alert('i am delete button')
}
}];
//Calling context menu
$('.testButton').contextMenu(menu);
</script>
<div id="testButton1" class="testButton iw-mTrigger">Click me</div>
</body>
In addition to moving your code after "Click me" div you need add jQuery library before contextmenu.js.
For example:
<head>
<link rel="stylesheet" type="text/css" href="contextMenu.css" />
<script type="text/javascript"
src=" http://ajax.aspnetcdn.com/ajax/jQuery/jquery-1.8.1.min.js">
</script>
<script src="contextMenu.js"></script>
</head>
Also your code has links to the images (like img: 'images/update.png'), but I don't think you have them, so they will be shown as broken links.
You are calling the code before the element exists. If the element doesn't exist when the code is run it will simply fail quietly
Either move your script tag to bottom of <body> so the html it references precedes it or wrap the code as follows:
$(function(){
$('.testButton').contextMenu(menu);
});
See: ready() docs
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>";
I have a simple php if statement that checks for an error return on a form submit basically.
<?php if ($this->session->flashdata('error')): ?>
×
<div class="alert alert-error" id="error"><?php echo $this->session->flashdata('error'); ?></div>
<?php endif ?>
And I have this script that I want to put into this php so when the php is true the login box or account-container will shake.
$("#account-container").addClass("animated shake");
I tried echoing the script inside the php but all that was give me echo ; displayed on the page when the if was true.
Maybe you can use this script, I'm not at ease with jquery and you would have to adapt the code:
$(function(){
if ($("#error").length !== 0) {
$("#account-container").addClass("animated shake");
}
});
Place it in the header as javascript source or embedded in a script tag
The $().load hook the containing handler to the onload event in the page*
The function simply check if there is an element in the page with id error and
add the class to the #account-container element if is the case.
I won't use $().ready() as the dom can still be partially rendered
References:
http://api.jquery.com/ready/ Says to use .load() function for onload event and
alert that a <body onload="something"> tag is not compatible with the jquery event management
http://api.jquery.com/load/ Can be useful
I think that you are using Jquery for the javascript shake, you should call the javascript routine when the page is ready to load
<!doctype html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>shake demo</title>
<link rel="stylesheet" href="http://code.jquery.com/ui/1.10.3/themes/smoothness/jquery-ui.css">
<style>
#toggle {
width: 100px;
height: 100px;
background: #ccc;
}
</style>
<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>
</head>
<body>
<p>Click anywhere to shake the box.</p>
<div id="toggle">This is rendered by PHP</div>
<script>
$( document ).ready(function() {
$( "#toggle" ).effect( "shake" );
});
</script>
</body>
</html>
Note that the whole page is rendered by PHP, and the script will work when the document render is ready.
I've made a site from an youtube tutorial. Here's my test site. And
here's the tutorial (final step of 3) if it helps. No CSS used yet.
When I click a link in the menu. Everything fades like supposed. But at the end of fade animation the previous page flickers.
Me
I'm totally new to JavaScript.
index.php:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>SuperFresh</title>
<link rel="stylesheet" type="text/css" href="css/style.css">
</head>
<body>
<a class="menu_top" href="pages/home.php">Home</a> /
<a class="menu_top" href="pages/portfolio.php">Portfolio</a> /
<a class="menu_top" href="pages/contact.php">Contact</a> /
<div id="content_area"></div>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript" src="js/nav.js"></script>
</body>
</html>
nav.js:
$(document).ready(function () {
$('#content_area').load($('.menu_top:first').attr('href'));
});
$('.menu_top').click(function () {
var href=$(this).attr('href');
$('#content_area').hide('slow').load(href).fadeIn('slow');
return false;
});
Replace:
var href=$(this).attr('href');
$('#content_area').hide('slow').load(href).fadeIn('slow');
With:
$('#content_area').hide('slow', function(){
$(this).load($(this).attr('href')).fadeIn('slow');
});
This will fade it out and wait until the animation is complete before calling that function and loading in the new content.
Check out the documentation for more info.
you can use handlers with your own functions...
for ex :
$('#show').click(function() {
$('#myDiv').show(0, onDivShow);
});
$('#hide').click(function() {
$('#myDiv').hide(0, onDivHide);
});
function onDivShow() { alert('is shown'); }
function onDivHide() { alert('is hidden'); }
You can try this:
$('.menu_top').click(function () {
var href=$(this).attr('href');
var page = $('<div/>').attr('id','page').load(href);
$('#content_area').fadeOut('slow').html('').html(page).fadeIn('slow');
return false;
});