I am building a jQuery dialog with tabs in a PHP script. The script uses the 'include' directive inside of a loop, iterating over the tabs and including the other scripts. Each of the included files has the data for the tab and a <script> tag with a jQuery document.ready() function in it. Without the loop, it essentially does this:
<div id="tabDialog">
<div id="tabs">
<ul>
<li><a href="#tab1'>Tab1</a></li>
<li><a href="#tab2'>Tab2</a></li>
</ul>
<div id="tabContainer">
<div id="tab1">
<?php include "tab1.php"; ?>
</div>
<div id="tab2">
<?php include "tab2.php"; ?>
</div>
</div>
</div>
</div>
and, for example, tab1.php might have something like:
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
});
</script>
The problem is, upon creating and opening the dialog using the <div id="dialog"> as the dialog's DIV, the document's ready function is called a second time. Here is the dialog code:
$("#tabDialog").dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
}).dialog ('open');
What is the cause of this and what would be the best way to remedy the situation? I'm trying to keep each tab's functionality in separate files because they can be used in multiple situations and I don't have to replicate the code associated to them.
Thanks for any help or advice.
I believe I've found the reason and created a reasonably good fix. When jQuery creates the dialog, it moves the DIV that contains the contents of the dialog around in the DOM (to the very end of the document) and surrounds that div with the necessary scaffolding that a dialog requires (probably by using the .append() function or something similar). Because the DIV which was being dynamically had Javascript contained within it, jQuery was calling the document.ready() function after the DIV was relocated in the DOM (i.e. a second time). Therefore, prior to building the dialog, I .remove() every script tag within the dialog's DIV like this:
$("#tabDialog").find ("script").remove ();
$("#tabDialog").dialog ({
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500
});
Doing this removes the SCRIPT tag from the DIV which it was originally loaded in, but the SCRIPT itself still exists. I'm still researching this because I don't completely understand where the Javascript code that was dynamically loaded actually "lives," but I suspect it's located somewhere outside of the DOM. I verified this in Chrome, Firefox, and Exploder 8.
I verified that any scripts that were originally contained within the loaded DIVs still function as expected by putting a button in the DIV and assigning a .click() function. Here is a small test that demonstrates this:
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="dialogContents" style="display: none;">
<div style="border: 1px solid black; height: 98%;">
<form id="testForm">
<input type="text">
</form>
<button id="testButton">Test</button>
<script type="text/javascript">
$(document).ready (function () {
alert ("ready");
$("#testButton").click (function () {
alert ('click');
});
});
</script>
</div>
</div>
</body>
<script type="text/javascript">
$(document).ready (function () {
//
// Remove all the scripts from any place in the dialog contents. If we
// do not remove the SCRIPT tags, the .ready functions are called a
// second time. Removing this next line of Javascript demonstrates this.
//
$("#dialogContents").find ("script").remove ();
$("#dialogContents").dialog ({
width: 300,
height: 300,
title: 'Testing...'
});
});
</script>
</html>
I appreciate the help people provided in this thread!
I haven't used .dialog() too much, but do you need to use jQuery's ready() method in your script?
Looks like .dialog() has callback options you could take advantage of.
Script in tab:
<script type="text/javascript">
function onOpen() { alert('tab1 loaded') };
</script>
dialog:
$(this).dialog ({
autoOpen: false,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
open: function(event, ui) { onOpen(); } // call function in script
}).dialog ('open');
So I have to say that I am not 100% sure why it is happening even though I understand that the dialog does maintin it's own state so this might be one of the reasons. But I could be way off. But the way to get around it is to use something like this instead:
$(document).one('ready', function () {
alert ('tab1 loaded');
});
This will make sure that it only runs once when the page loads.
I also had this problem, but the cause in my case was something different. I had a self-closing div element inside of the div that was used as the dialog holder. When I replaced the self-closing element with a closing tag, the document ready function stopped firing twice and only fired once, as expected.
For example, this caused the document ready function to fire twice:
$("#foo").dialog({
// ...
});
...
<div id="foo" title="My Dialog">
<div id="bar" />
</div>
Whereas this only fired the document ready function once:
$("#foo").dialog({
// ...
});
...
<div id="foo" title="My Dialog">
<div id="bar"></div>
</div>
You probably don't need the .dialog('open') call; use the option autoOpen : true instead.
Here's the resulting text of the page. I did a view-source and then removed any extraneous stuff from the page to try and make it simpler.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.1//EN" "http://www.w3.org/TR/xhtml11/DTD/xhtml11.dtd">
<html>
<head>
<link href="css/redmond/jquery-ui-1.8.1.custom.css" type="text/css" rel="stylesheet" media="screen" />
<link href="css/style.css" type="text/css" rel="stylesheet" media="screen" />
<script src="js/jquery-1.4.2.min.js" type="text/javascript"></script>
<script src="js/jquery-ui-1.8.1.custom.min.js" type="text/javascript"></script>
</head>
<body>
<div id="tabDialog" style="position: relative; display: none;" title="Test Dialog">
<div id="tabs" style="position: absolute; top: 5px; bottom: 40px; left: 3px; right: 3px;">
<ul>
<li><a href='#tab1'>Tab #1</a></li><li><a href='#tab2'>Tab #2</a></li>
</ul>
<div class="tab_container" style="position: absolute; top: 35px; bottom: 0px; left: 1px; right: 1px; overflow: auto;">
<div id='tab1' class='tabPage ui-dialog-content'>
<form id="tab1Form">
More testing... <input class="keypressMonitor" type="text">
</form>
Testing...<br/>
Testing...<br/>
<script type="text/javascript">
$(document).ready (function () {
alert ('tab1 loaded');
$("#tab1Form").bind ('save', function () {
alert ("in tab1Form.save ()");
});
});
</script>
</div>
<div id='tab2' class='tabPage ui-dialog-content'>
<form id="tab2Form">
<div style="position: absolute; left: 1px; right: 1px; top: 1px; bottom: 1px;">
Testing: <input class="keypressMonitor" type="text">
<textarea id="testArea" class="keypressMonitor tinymce" style="position: absolute; top: 30px; bottom: 2px; left: 2px; right: 2px;"></textarea>
</div>
</form>
<script type="text/javascript">
$(document).ready (function () {
$("#tab2Form").bind ('save', function () {
alert ("in tab2Form.save ()");
});
});
</script>
</div>
</div>
</div>
<div id="dialogButtons" style="position: absolute; bottom: 3px; left: 3px; right: 15px; text-align: right; height: 32px;">
<button class="applyButton" disabled>Apply</button>
<button class="okButton" disabled>Ok</button>
<button class="cancelButton">Cancel</button>
</div>
</div>
<script type="text/javascript">
$(document).ready (function () {
$("#tabs").tabs ();
$("button").button ();
/**
* Pressing the cancel button simply closes the dialog.
*/
$(".cancelButton").click (function () {
$("#tabDialog").dialog ("close");
});
$("#tabDialog").dialog ({
open: function () {
},
autoOpen: true,
minWidth: 450,
minHeight: 400,
width: 600,
height: 500,
height: 'auto'
});
});
</script>
</body>
</html>
Puts your script into create method:
$.dialog({
<your parameters>
create: function() {
<your script>
}
}
With this method your script is called once only you create the dialog, not twice!
Related
When I reload the div content that time scrollbar is coming on top, I want when div reload that time scrollbar position same where I left.
<style type="text/css">
div.scrollbar {
height: 655px;
overflow: auto;
}
</style>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
$(function() {
function newPost() {
$("#newpost").empty().load("slide/parts/extruderRight1.php");
}
var res = setInterval(newPost, 30000);
});
</script>
// How to Add scroll bar maintain where I left load("slide/parts/extruderRight1.php")
<div class="voice {}"class="voice {}"><span class="label"><b>To Do List</b></a></span></div>
<div id="scrollbar" class="scrollbar">
<div id="newpost">
</div>
</div>
What I have to do so I can run proper or add anything into the my code i wanted to resume it to the previous scrolled position suggest me or any changes required I am stuck on this step
i am working in DOM i want to run marquee on header through given below library. this is my error below. Please help me out. theres an error of $ which is not defined according code but I have already defined. The marquee is actually not working on Mac Safari browser.
Error:$ is not defined
Code:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://rawgithub.com/aamirafridi/jQuery.Marquee/master/jquery.marquee.min.js"></script>
<div onclick="myfunction()" class="marquee" style="width: 300px; overflow: hidden;">
<script>
function myfunction(){
$('#marquee').marquee();
}
</script>
the library is already included of jquery.
You are calling the <div class='marquee'> element by using a id selector $("#marquee").
Try using $(".marquee") instead.
More info about jQuery selectors
This worked for me with some corrections as said above.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://rawgithub.com/aamirafridi/jQuery.Marquee/master/jquery.marquee.min.js"></script>
<div onclick="myfunction()" class="marquee" style="width: 300px; overflow: hidden;"> hello </div>
<script>
function myfunction() {
alert("marquee");
$('.marquee').marquee();
}
</script>
Check fiddle
I was basically trying to follow http://www.building58.com/examples/tabSlideOut.html tutorial and I'm having that error, what is the problem?
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.3/jquery.min.js" type="text/javascript"></script>
<script src="http://tab-slide-out.googlecode.com/files/jquery.tabSlideOut.v1.3.js"></script>
<style type="text/css" media="screen">
.slide-out-div {
padding: 20px;
width: 250px;
background: #f2f2f2;
border: #29216d 2px solid;
}
</style>
<script>
$(function(){
$('.slide-out-div').tabSlideOut({
tabHandle: '.handle', //class of the element that will be your tab
pathToTabImage: 'images/contact_tab.gif', //path to the image for the tab (optionaly can be set using css)
imageHeight: '122px', //height of tab image
imageWidth: '40px', //width of tab image
tabLocation: 'left', //side of screen where tab lives, top, right, bottom, or left
speed: 300, //speed of animation
action: 'click', //options: 'click' or 'hover', action to trigger animation
topPos: '200px', //position from the top
fixedPosition: false //options: true makes it stick(fixed position) on scroll
});
});
</script>
<div class="slide-out-div">
<a class="handle" href="http://link-for-non-js-users.html">Content</a>
<h3>Contact me</h3>
<p>Thanks for checking out my jQuery plugin, I hope you find this useful.
</p>
<p>This can be a form to submit feedback, or contact info</p>
</div>
[04:54:57.945] TypeError: $(".slide-out-div").tabSlideOut is not a
function #
If you have a debugger in your browser, most modern ones do so press F12 to check it, then you can see if all the scripts get loaded correctly and with the typeof function you can check what tabSlideOut is (undefined or function).
I think you copy pasted it from here: http://www.building58.com/examples/tabSlideOut.html. Can you double check if you copied everything, including css, correctly?
Try to use
jQuery(function() {
});
instead of $
I'm tring to use DHTMLX combobox, I guess I included in my code all that I need, find code snippet below:
<script>
window.dhx_globalImgPath = "/resources/javascript/codebase/imgs/";
</script>
<link rel="STYLESHEET" type="text/css"
href="/resources/javascript/codebase/dhtmlxcombo.css">
<script src="/resources/javascript/codebase/dhtmlxcommon.js"></script>
<script src="/resources/javascript/codebase/dhtmlxcombo.js"></script>
<script>
function doOnLoad() {
var z = new dhtmlXCombo("combo_zone", "alfa", 200);
z.enableFilteringMode(true, "php/loadCombo.php", true, true);
}
</script>
<div id="combo_zone" style="width: 200px; height: 30px;"></div>
Anyone can tell me if there is something wrong in my code?
Thnaks in advance
Code wrapped in onLoad which seems never triggered, just change code as
<div id="combo_zone" style="width: 200px; height: 30px;"></div>
<script>
var z = new dhtmlXCombo("combo_zone", "alfa", 200);
z.enableFilteringMode(true, "php/loadCombo.php", true, true);
</script>
I have a page (page1.php) where I am using a select box to load in another page (page2.php) into a DIV. Inside page2.php there is a UL that loads data from a database (via PHP) into LIs and the are sortable.
My problem is, when I load page2.php by itself, it serializes fine. However, when page2.php is loaded via .load() into page1.php, it doesn't serialize at all and I get undefined.
Here is the important code, again this works fine by itself, but not when this page is loaded in via the .load() function
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.7.2/jquery-ui.min.js"></script>
<style>
#thelist { list-style-type: none; margin: 0; padding: 0; width:700px; }
#thelist li { margin: 3px 3px 3px 0; padding: 1px; float: left; width: 200px; height: 150px; }
</style>
<ul id="thelist">
<li style="margin-bottom:5px;" name='listItem_1' id='listItem_1'>
test1
</li>
<li style="margin-bottom:5px;" name='listItem_2' id='listItem_2'>
test2
</li>
<script type="text/javascript">
$(function() {
$("#thelist").sortable({
update : function () {
var order = $('#thelist').sortable('serialize');
alert(order); // This alerts "undefined" when page2.php is loaded into page1.php via .load();
$("#info").load("reorder_slides.php?"+order);
}});
});
</script>
This is the new code I am running, still to no avail.
<script>
$('#edit_service_date').change(function() {
// $(this).val()
$('#editService').slideUp("slow",function(){
$('#thelist').load('page2.php', {id: $('#edit_service_date').val()}, function(){
$("#thelist").sortable({
update : function () {
var order = $('#thelist').sortable('serialize');
alert(order); // This alerts "undefined" when page2.php is loaded into page1.php via .load();
$("#info").load("reorder_slides.php?"+order);
}});
if($('#edit_service_date').val()!="none"){
$('#editService').slideDown("slow");
}
});
});
});
</script>
If everything you posted above is being brought into another page via .load(), then I see (at least) two problems:
You're loading jQuery and jQuery UI twice: once in the outer page, and once in the inner page loaded via ajax. There's no need.
You're expecting $(function(){}) to fire after being loaded into the "inner" page within the div. $(function(){}) is a synonym for $(document).ready( function(){} ), and in fact the ready event has already fired (when the outer page DOM became ready). It won't do anything here.
You should try triggering the .sortable() stuff inside the callback of the .load() you're using to bring the inner document into the div:
/* on page1.php */
$('#yourdiv').load( 'page2.php', function(){
$('#thelist').sortable( /* arguments */ );
});