Below code is jquery function
$(document).ready(function () {
$('#access').accordion({
create: function (event, ui) {
$('div#access> div').each(function () {
var id = $(this).attr('id');
$(this).load(id+'.html', function () {
$('#access').accordion('resize');
});
});
}
});
});
where access is the div id i have used for menu items in header.
below code is header.php page code
<div id="access" >
<ul>
<?php wp_list_pages('depth=1&title_li=');?>
</ul>
</div>
what i want is onclick of the menu item the javascript function should be called..
how to call function from php file?
You don't call the JavaScript function from PHP. The PHP merely enables you to build the HTML page dynamically. Once the page is ready, the JavaScript is called and it starts binding the events to the appropriate elements.
What you need to do is look at the generated code using the 'view source' or firebug and explore the structure of the generated HTML and then you can bind the event to the requested element.
Related
The following function is inside a page (mainpage.php) which I load dynamically into a tab (tabcontent.php) .
$('.editlink').on('click', function() {
var id = $(this).attr('data-ds');
$.ajax({
url: 'noticejob.php?step=get&ds='+id,
method: 'GET'
}).success(function(response,status) {
...
});
});
I call this function by this link, which is inside the tabcontent.php
<i class="fa fa-pencil"></i>
All works fine.
Now I want to start this function over a url call for adding links into other pages to open the mainpage.php and start with this function (should open a modal).
For Example: mainpage.php?start=edit&ds=123
Is it possible and in which way?
You can just print the JS you need to execute in the PHP page.
...
?>
<script>
$(function() {
foo();
});
</script>
<?php
...
To open the modal automatically, either create a JS function that opens the modal and call it (with the previous method), or do
<script>
$(function() { $('.editlink').click(); });
</script>
Ok, now it works,
i've put a new (named "edit_function") js function into the mainpage.php with the "old" code of the "$('.editlink').on('click', function() {..."
after that i call this function from the mainpage if there is a url parameter. I do it into the php file and create a dynamicaly js code
if($_GET['job']=='new')
{
$p['JS']='edit_function("'.$_GET['detail'].'");';
}
at the other hand i call the function for the tabcontent.php page in this way
$('.editlink').on('click', function() {
var id = $(this).attr('data-ds');
edit_function(id);
});
for me it works
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();
});
}
Hi and thanks for taking some time to look at my question. I have a part of the page where content is dynamicly loaded into from another file. Reason for this is it needs to be live updated. Now I want to be able to apply jquery effects that are usually used for show/hiding content (slide, fade etc) to animate the difference between the current data and the new data. This is the code used to get the content and load it into the div:
function k() {
$.post("../includes/ajaxAgenda.php", {
limit : value
}, function(data) {
$('#tab-agenda').html(data);
});
};
$(document).ready(function() {
k();
$('#tab-agenda').scroll(function() {
loadMore();
});
});
var refreshId = setInterval(function() {
k();
}, 1000);
So I guess my question is how do I animate what gets loaded in so it doesn't just "pop" from one content to another?
edit: I tried using the .live instead of .scroll but it doesn't seem to work:
$(document).ready(function() {
$('#tab-agenda').live("scroll",function() {
alert("hi");
loadMore();
});
});
You need to use live function of jquery to bind the dynamically added elements.
Ref: http://api.jquery.com/live/
Try this :
$('#tab-agenda').live("scroll",function() {
loadMore();
});
I suggest you to add the ajax loader image with proper css over the content/ div as like below.
function loadmore(){
$("#loader").css('display','block');
//your
//code
//here
$("#loader").css('display','none');
}
html
<img id="loader" src="ajax-loader.gif" style="display:none" />
<div id="content">
your cont to display
</div>
On my index.php I have a header, sidebar, footer and the main part of it is the <div id="feed"> that loads engine.php every 6000 ms.
I have a Contact page ( contact.php ) in my sidebar. Instead of copying my index.php to a new page, with header, sidebar, footer and a main div for the contact content, can I load it in the #feed div of index.php withour refreshing the site in the browser?
To summarize it, my question is, is there any way that my pages to be loaded on the same div ( #feed) without refresh and freeze the setTimeout timer?
When the user click back on Home, then the engine.php is loaded and reloaded every 6 seconds.
Maybe this can be done with Ajax, I don't know...
Thank you for this and any examples/codes are highly appreciated.
<script language="JavaScript">
$(function () {
function loadfeed() {
$('#feed')
.addClass('loading')
.load('engine.php', function () {
$(this).removeClass('loading');
setTimeout(loadfeed, 6000);
});
}
loadfeed();
});
</script>
Update
Having something like this works, but the engine.php loads after 6 sec.
$("#contactBtn").click(function() {
$("#feed").load('contact.php');
});
I have no way of fully testing this, but you try something like this.
<script language="JavaScript">
var timerID;
$(function () {
function loadfeed() {
$('#feed')
.addClass('loading')
.load('engine.php', function () {
$(this).removeClass('loading');
timerID = setTimeout(loadfeed, 6000);
});
}
$("#contactBtn").click(function() {
clearTimeout(timerID);
$("#feed").load('contact.php');
$("#feedBtn").bind('click', loadfeed);
});
loadfeed();
});
</script>
The key here is the use of a global timerID variable and the clearTimeout() function.
If this works, you can include a Return to feeds button with id="feedBtn" in contact.php, but you’ll have to bind the loadfeed function to the button’s click event after loading it.
Without interrupting the timeout cycle, the contact form will display for a maximum of 6 seconds inside #feed before the next $.load request finishes.
If you want to leave the timeout cycle going, rather than putting everything in #feed, you can give it an appropriate sibling:
<div id="panels">
<div id="feed">
<!-- ... -->
</div>
<div id="contact" style="display:none">
<!-- ... -->
</div>
</div>
Then, switch which is currently displaying:
$('a.contact').click(function (e) {
e.preventDefault();
$('#contact').show();
$('#panels > div:not(#contact)').hide();
});
$('a.feed').click(function (e) {
e.preventDefault();
$('#feed').show();
$('#panels > div:not(#feed)').hide();
});
The feed will continue to load into #feed, while the contact page can display uninterrupted.
Also, if you supply a clue on your links, you can combine those click handlers with fair ease:
<div id="menu">
Feed
Contact
</div>
<script>
$('#menu > a').click(function (e) {
e.preventDefault();
var panel = $(this).data('panel'); // or $(this).attr('data-panel') for jQuery 1.4 or older
$('#' + panel).show();
$('#panels > div:not(#' + panel + ')').hide();
});
</script>
You can load a file with $.load
$("#contactBtn").click(function() {
$("#feed").load('contact.html') No need for a callback or the timeout.
}
Check the jquery docs if you're looking for something more specific. Hope that helps.
I have 2 layers that i need to update individually if a user clicks on either of them.
<div id=wrapper>
<div id=upvote>
//This div can be filled by upvote.php?id=X
<? echo getUpVote(); ?>
<a href=#><img src=upv.png></a>
</div>
<div id=downvote>
//This div can be filled by downvote.php?id=X
<? echo getdownVote(); ?>
<a href=#><img src=downv.png></a>
</div>
</div>
When the user clicks the up or down vote image, i need to fade out the contents of the div, make an ajax call to the respective php file (get request), and fade in the loaded content.
How can i do this?
Attach a click handler to the anchor tags. Find which url to use given the id of the containing div, then invoke load to replace the contents of the wrapper. Fade out/in at the appropriate points. Make sure that you return false from the anchor click handler to cancel the default action.
$('#upvote,#downvote').find('a').click( function() {
var url = $(this).closest('div').attr('id') + '.php?id=X';
$('#wrapper').fadeOut();
.load( url, function() {
$('#wrapper').fadeIn();
});
return false; // cancel click action
});
To add a click handler to an element in jQuery you can do this:
$("#upvote").click(clickHandler);
Where clickHandler is a function. Since you want to fade Out an image you can do this:
$("#upimg").hide('slow');
will cause an element with id='upimg' to disappear slowly. You can also use fadeTo(opacity) to achieve a similar effect.
The AJAX call can be made with a call to load.
$('#div').load('url', {}, callback);
where an element with id='div' will be populated with the result of calling url, the {} is optional and callback is a function that you can include to execute after the load. The callback function may be used to fadeIn the new content.
var clickHandler = function(){
$("#upimg").hide('slow');
$('#div').load('url', {}, callback);
}
var callback = function(){
$('#div').show('slow');
}
AJAX request can be made with $.get and you can fade the DIV using jQuery's animation functions like fadeOut
Here is some code on how you might acchive what you want:
$( '#IdOfOneAnchor' ).click ( function () {
var myDiv = $( '#IdOfYourDiv' );
myDiv.fadeOut ();
$.get (
'url/to/your/script.php',
{
// put params you need here
},
function ( response ) {
myDiv.html ( response ).fadeIn ();
}
);
return false;
} );
off course you will have to change the selectors to match your DIVs/links ...