i have built 2 pages , 1 that is the page where there is a link that opens a dialog and loads another page inside that dialog, once the dialog opens and loads the other page this one has a calendar but when i click on the calendar it gives the following error: Cannot read property 'inline' of undefined
i cannot interpretate what is wrong as if i run the file where the datepicker is it runs the calendar but once i execute from the first page by opening the dialog it gives error.
below there's the source for page1 and page2:
<!--PAGE1.PHP-->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
function loadurl() {
$(function() {
$("#dialog").load('page2.php').dialog({modal:true});
});
}
</script>
</head>
<body>
teste
<div id="dialog" title="Dialog"></div>
</body>
</html>
<!-- PAGE2.PHP -->
<link rel="stylesheet" href="http://code.jquery.com/ui/1.9.0/themes/base/jquery-ui.css" />
<script src="http://code.jquery.com/jquery-1.8.2.js"></script>
<script src="http://code.jquery.com/ui/1.9.0/jquery-ui.js"></script>
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
</head>
<body>
<p>Date: <input type="text" id="datepicker" /></p>
</body>
</html>
$.load does not run script on loaded page
The script will not be run on the new page because the ready function on the original page does not fire it. Any script that is meant for the second page needs to be run in the success listener of the $.load function on the first page
There are a few things with the code. First of all, you need to decide what PAGE2.php is; is it a component of a page or a standalone page. .load() inserts the downloaded code directly into the DOM. So, you could strip PAGE2.php down to:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
<p>Date: <input type="text" id="datepicker" /></p>
Or, you could load a portion of the download page with .load() by providing a selector: e.g. $('#dialog').load('page2.php #datepicker').
Another thing is the statement to load PAGE2.php into the DOM, i.e. $("#dialog").load('page2.php').dialog({modal:true}). What you want to do is to load the page first (probably in the background) before rendering it with .dialog(). So, it should be something like:
$("#dialog").load('page2.php', function() { $(this).dialog({modal:true}) })
Related
I have 2 pages. I loaded my second page inside my first page.
In the second page i have a link.
The problem is, when I click on the link in the second page, it opens in new tab.
How do I open this link in same page, like an iframe?
Here is my snippet:
$( document ).ready(function() {
$('#second').load('second.html');
});
#second{width:100%; height:300px; border:1px solid blue;}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<html>
<head>
<title>First page</title>
</head>
<body>
<div id="second"></div>
<!--
THis is my second page code ////////
<html>
<head>second page</head>
<body>
click here !
</body>
</html>
-->
</body>
</html>
Name your iframe <iframe name="namedIf"></iframe>
and then in your anchor tag use target attribute <a href="link" target="namedIf"/>
But as the comments says, google doesn't allow you to iframe their content in your site.
UPDATE
As you're not using iframes, the only thing i can think of is to "intercept" any clicks to the anchor tags present on your loaded document and use the same function again to load it.
$(function() {
$('#second').load('second.html', function(){
$("#second a").click(function (e) {
e.preventDefault();
$("#second").load($(this).attr("href"));
});
});
});
So the code gets executed when your code has completed loading second.html into your document.
I am trying to call a HTML file when a button is clicked using jQuery.
Here is my html code:
<!DOCTYPE html>
<head>
<title>Buttons</title>
<script type="text/javascript" src="jquery-1.3.2.js"></script>
<script type="text/javascript" src="buttonscript.js">
</script>
</head>
<body>
<input type ="button" id="myButton" value="Click Here">
<div id="dictionary">
</div>
</body>
</html>
then here is my script:
$(document).ready(function(){
$('myButton').click(function(){
$('dictionary').load('a.html');
return false;
});
});
You have two wrong things in your script:
You are not assigning the selectors with the right syntax;
You are using document ready syntax on an external file;
The first point is fixed using # before the id name and . before the class name (see below the fix).
The document.ready() function should be included into the html itself: it tells jquery to run the script only when the DOM is ready. Including it in an external file will make jQuery check for DOM ready on the external file and not on the one you are including to.
So move your script to the html itself and change it a bit:
.
$(document).ready(function(){
$('#myButton').click(function(e){
// prevent page submit
e.preventDefault();
// load the page into #dictionary
$('#dictionary').load('a.html');
});
});
Add # to your selectors like, and instead of using return false, you could prevent default behavior of the button (if the type attribute is set to submit).
$(document).ready(function(){
$('#myButton').click(function(event){
// prevent page submit
event.preventDefault();
// load the page into #dictionary
$('#dictionary').load('a.html');
});
});
I have some very simple code below that listens for an event (a click on an anchor tag). It works fine if I create a standalone html file. But if I create a file for just the script, register and enqueue it and then add that anchor tag to a Wordpress page, nothing happens when I click it. I can see in the console that the script file was loaded. I get no error when I click the link but neither do I get the results from the script. Do I have my anchor tag written correctly? Where is my error?
<html>
<head>
<script language="javascript" type="text/javascript" src="/wp-includes/js/jquery/jquery.js"></script>
</head>
<body>
Click here
<script id="source" language="javascript" type="text/javascript">
var $j = jQuery.noConflict();
$j( ".citation" ).click(function ( )
{
event.preventDefault();
// do stuff
});
</script>
</body>
</html>
event is not defined. Make it as an argument
$j(".citation").click(function(event) {
event.preventDefault();
// do stuff
});
I am using prettyPhoto inside a Movable Type CMS page. To make it work I have to use a
<p>
<mt:setvarblock name="html_head" append="1">
JS scripts here
</mt:include>
</p>
section. To make a gallery with 30-40 pictures, I have to add a block for each picture that looks something like this:
<a href="pathtoimage.jpg" rel="prettyPhoto[GalleryName]" title="Some title">
<img src="pathtothumbnail.jpg" alt="alt text" height="120" width="120" />
</a>
I want to generate these entries from a csv file using a (python) script and put into a separate file on the web server. Then I use this code to load these entries into the page:
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("output_en.txt");
});
</script>
When I load the page the thumbnails show up, but when I click them the pathtoimage.jpg is loaded instead of prettyphoto.
My question: Am I doing something wrong or is movable type blocking the execution for security reasons? How to debug this? I have firebug but no idea what to look for.
P.S: When pasting the entries directly into the page it works as expected.
Edit: full working code
<p>
<mt:setvarblock name="html_head" append="1">
<script src="../gallery/js/jquery-1.6.1.min.js" type="text/javascript"></script>
<link rel="stylesheet" href="../gallery/css/prettyPhoto.css" type="text/css" media="screen" charset="utf-8" />
<script src="../gallery/js/jquery.prettyPhoto.js" type="text/javascript" charset="utf-8"></script>
</mt:setvarblock>
<mt:include name="include/header.tmpl">
<div id="divTestArea1"></div>
<script type="text/javascript">
$(function() {
<!--$("#divTestArea1").load("../gallery/output_en.txt");-->
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>
<script type="text/javascript" charset="utf-8">// <![CDATA[
$(document).ready(function(){
$("a[rel^='prettyPhoto']").prettyPhoto({social_tools: false});
});
// ]]></script>
</mt:include>
</p>
Try including the prettyPhoto() call after the AJAX has finished loading, because at the moment the plugin is being executed on page load, before the element it is targeting is available in the DOM.
<script type="text/javascript">
$(function() {
$("#divTestArea1").load("../gallery/output_en.txt", function() {
$("a[rel^='prettyPhoto']").prettyPhoto();
});
});
</script>
I have a simple page for testing with only a button, I am linking to an external js file. It is displaying the jquery version in a alert box, but when the button is clicked nothing happens. What is wrong with this?
Here is my simple test html page
<title>Insert title here</title>
<!-- scripts -->
<script language="JavaScript" type="text/javascript" src="jquery.js"></script>
<script language="JavaScript" type="text/javascript" src="myscript.js"></script>
</head>
<body>
<form>
<input type="button" tabindex="5" value="jscript" id="testbutton" />
</form>
</body>
and here is my myscript file content
alert($.fn.jquery);
$('#testbutton').click(function(){
alert("test successful");
});
I am using JQuery version 1.6
Probably because the DOM is not ready for JavaScript processing at the time of bindiing the click handler. Try:
$(document).ready(function() {
$('#testbutton').click(function(){
alert("test successful");
});
});
You need a document.ready:
$(document).ready(function(){
alert($.fn.jquery);
$('#testbutton').click(function(){
alert("test successful");
});
});
That's because your #testbutton can't be referenced until it's loaded
Hope this helps. Cheers