I am new to jQuery. Basically I have a main page (with jQuery) and I want to include in a div another page that also has jQuery.
What I do is write in that particular div this code:
<?php
$path = $_SERVER['DOCUMENT_ROOT'];
$path .= "/ong/new/index.php";
include_once($path);
?>
If I do this the jQuery in the child page stops working. The jQuery functions in the main page also stops working, but if I remove this link
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js" type="text/javascript"></script>
from the child page it works in the main page.
So, what am I doing wrong? How should you include a jQuery page in another?
It is because you are including jQuery multiple times. You could make small script to check if jQuery is present on the page, and only if is not present, load it:
// 'load-jquery.js'
window.onload = function () {
if (window.jQuery === undefined) {
var script = document.createElement('script');
script.src = 'path/to/jquery.min.js';
document.getElementsByTagName('head')[0].appendChild(script); // load jQuery
}
};
html
<div id="result"></div>
js
$('#result').load('<?php echo $path; ?>', function(data) {
$(this).append(data);
});
Related
I write the below code to a footer.php file. This works but is applied for all the pages. I want to apply page scroll in one page only.
<script type="text/javascript">
jQuery(document).ready(function() {
jQuery('body').animate({scrollTop: +400}, 1000);
});
</script>
Can any one help me on how to do it.
Thanks
Add a contidional statemnent on the footer.php file to only execute the jquery code if it is in only in the current page you wish for.
something like this example below
<?php
global $post;
$target_pageid = 7654;
$current_pageid = $post->ID;
if (current_pageid == $target_pageid){
?>
jQuery(document).ready(function() {
jQuery('body').animate({scrollTop: +400}, 1000);
});
<?php
}
?>
My homepage loads pages with jquery ajax call. In the Pictures subpage there is 3 div, and each loads a php with ajax, too. I would like to include a gallery js to every sub-subpage. However, the js does not loads. Here is my code in the index.php for the subpages:
<script type="text/javascript">
$(function()
{
var actualmenu = 'fooldal.html';
$('#tartalom').load('fooldal.html');
$('.fooldal').click(function()
{
$('#tartalom').load('fooldal.html');
actualmenu = 'fooldal.html';
}
);
$('.kepek').click(function(){
$('#tartalom').load('kepek.php', function(){
$(document.body).on('click', 'a[rel=gallery_view]' ,function(){
$(this).KeViewer('gallery', {'percent' : 70});
return false;
});
});
actualmenu = 'kepek.php';
});
});
</script>
And there is my kepek.php page:
<script type="text/javascript">
$(function()
{
$('#galeria').load('kepek_csenge.php');
$('#csenge').click(function()
{
$('#galeria').load('kepek_csenge.php');
}
);
);
</script>
<div id="albums">
<div class="album" id="csenge">
Csenge
<br/>
<img src="albumok/csenge/01.jpg" alt="csenge"/>
</div>
</div>
<div style="clear:both;"></div>
<div id="galeria" width="500"></div>
Inside kepek_csenge.php there are rows like this, which should trigger the gallery:
<a class="thumb_wrapper" href="albumok/csenge/01.jpg" title="Első" rel="gallery_view"><img alt="" class="thumb" src="albumok/csenge/thumbs/01.jpg" /></a>
Unfortunately it just loads a new page with the selected picture. How can i use the galleryviewer js in this page?
It is important to understand that the document you are loading into was ready long before you load anything with ajax
This means that the code wrapped in $(function() in your ajax pages will fire as soon as it is encountered. If that code precedes the html it references then it won't find those elements since they don't exist yet.
Try moving all the script tags in the ajax loaded content to after the html.
It is generally easier to put all the scripts into one and wrap different parts in functions and then just call those functions in the success callback of load();
function loadPage(page){
var url = '...' +page;
$('#selector').load(url, function(){
initViewer();
});
}
I need a header that sticks to the top while scrolling down the page. Am using the following jquery function
<script type="text/javascript">
google.load("jquery", "1");
function sticky_relocate() {
var window_top = $(window).scrollTop();
var div_top = $('#sticky-anchor').offset().top;
if (window_top > div_top)
$('#sticky').addClass('stick')
else
$('#sticky').removeClass('stick');
}
// If you have jQuery directly, use the following line, instead
// $(function() {
// If you have jQuery via Google AJAX Libraries
google.setOnLoadCallback(function() {
$(window).scroll(sticky_relocate);
sticky_relocate();
});
</script>
but the sliders already present in the page not functioning! Please help me to solve this issue.
I have added $.noConflict();above the function the slider works properly and sticky div is not working!
And have made following changes to the code // Start closure to prevent namespace conflicts
;(function($) {
// Whatever code you want that relies on $ as the jQuery object
// End closure
})(jQuery);
both the slider and sticky div not working!
index.html
<script>
function check() {
var id = $('input[name=id]').val();
$("#result").load("/ajax.php", {id:id});
}
</script>
<input type="text" size="3" name="id"><br />
<button onclick="check();">Pay</button>
<div id="result"></div>
ajax.php
<?php
$id = (int)$_REQUEST['id'];
//some validations and SQL executions
echo "<script language=JavaScript src='https://*****/index.php?id=$id&invoice=$invoice&sum=$sum.......etc'></script>";
I try to form javascript in php file and embed it into div with id="result".
I've used get, load, ajax, createElement methods but the script doesn't execute.
try this..
$('#result').load('ajax.php');
In your php file ajax.php include the header.
header('Content-Type: text/javascript');
And in index.html add type=”text/javascript” to the script tag.
<script type=”text/javascript”>
function check() {
var id = $('input[name=id]').val();
$("#result").load("/ajax.php", {id:id});
}
</script>
You must load script as real script element. DOM conversion of "<script>/*...*/</script>" may fail in this case. This is done via standart DOM document.createElement function.
var script = document.createElement("script");
script.src = path;
Other way is to download the script via AJAX and then eval it.
Try using getScript:
$.ajax({
url: url,
dataType: "script",
success: success
});
try this:-
"<script language=JavaScript src='https://*****/index.php?id="'.$id.'"&invoice="'.$invoice.'"&sum="'.$sum.'".......etc'></script>";
Why wouldn't you load directly the script URL using AJAX?
ajax.php only should return path to the script:
$id = (int)$_REQUEST['id'];
//some validations and SQL executions
echo "https://*****/index.php?id=$id&invoice=$invoice&sum=$sum.......etc";
Besides that all HTML element attributes should be enclosed with quotes or apostrohpes.
Then you should load this url in javascript and generate script element here:
function loadScript(url,appendTo) {
var script = document.createElement("script")
script.type = "text/javascript";
script.src = url;
if(typeof appendTo.appendChild == "function") //Chceking if we can append script to given element
appendTo.appendChild(script);
else
document.body.appendChild(script) //This will not work in old IE, where document.body is not defined.
}
You call this function with script url and optional target element (where will be put in) as parameters.
Like this:
$.get("ajax.php",{param1:"value"},function(scriptUrl) {loadScript(scriptUrl, document.getElementById("result");})
The PHP:
<?php
$mainView = "views/dashboardView.php";
?>
The HTML:
<div class="mainContent">
<?php include($mainView); ?>
</div>
I would like the click event of a button to change what view .mainContent shows and I believe AJAX can accomplish this but as yet have not been able to get it to work.
Any advice?
You would have to modify your PHP script to allow for this.
For example:
PHP:
if (isset($_POST['change']))
{
$mainView = $_POST['change'];
echo $mainView;
}
HTML & jQuery:
<button id="change">Change the var</button>
<script>
$("#change").click(function() {
$.post("file.php", {change: $(this).val()},
function (data)
{
$("#mainContent").html(data);
});
});
</script>
<script type="text/javascript>
function changePage(pageDest){
var xmlobject = (window.XMLHttpRequest) ? new XMLHttpRequest() : new ActiveXObject("Microsoft.XMLHTTP");
xmlobject.onreadystatechange = function (){
if(xmlobject.readyState == 4 && xmlobject.status == 200){
document.getElementById("mainContent").innerHTML = xmlobject.responseText;
}
else{
document.getElementById("mainContent").innerHTML = 'Loading...';
}
}
xmlobject.open("GET",pageDest,true);
xmlobject.send();
}
</script>
<div class="mainContent" id="mainContent">
Change this HTML
</div>
<div onmouseup="changePage('views/dashboardView.php')">Get dashboard view</div>
The parameter in the changePage function is the location of the page that you would like to place in your mainContent <div>
Does this help?
You cannot change the value of a PHP variable, as PHP is Server Side (done first), and JS is Client Side (done after Server Side).
Typically AJAX is used to repopulate an area of a web page, but that would suit your purpose. In the example below, ajax/test.php is the new file you want to include. Obviously change the path/name as you wish, and create that file.
I will add though, if you are repopulating a large chunk of your page, it will probably be just as quick to fully reload it.
$(function(){
$('.your-button-class').on('click', function(){
$.post('ajax/test.php', function(data) {
$('.mainContent').html(data);
});
});
});
Storing the View in the session, will keep the site displaying this view until the user closes the browser and ends the session, the session expires or they change the view again.
The include that sets mainView
<?php
session_start();
$mainView = "views/dashboardView.php"; // default
if(isset($_SESSION['mainView']))
{
$mainView =$_SESSION['mainView'];
}
?>
// the ajax script that sets the mainView
<?php
session_start();
$_SESSION['mainView']='views/'.$_GET['mainView'].'.php';
?>
the javascript link for ajax
ajaxURL='ajax.php?mainView=otherDasboard';
you may also want to check for empty session variable and that the file exists before setting it