I'm working on a site that passes information to my server that returns a page, however I have to re-define the click listener every time I reload the page because jQuery controls all my clicks on every page, so I' m wondering is there a way to permanently define a function?
jQuery code:
$(function(){
$('.lvl1Links').on('click',function(event) {
event.preventDefault();
$('pload').html('<img src="source/image/lbl.gif">');
var page = $(this).attr('id');
var huh = $('input:hidden').val();
var data = 'pop='+huh+'&page='+page;
$.post('source/php/bots/authorize.php',data,function(data){
$('#pager_master_div').html(data).slideDown();
$('pload').html('');
});
});
});
Being a stateless platform, every time the page loads you need to rebind things like this. Here's the pattern I use to make it easier, though:
If this is common across an area of your site, put this type of stuff into an init function in the common file. e.g.
global.js:
function InitSalesPageOrWhatever(){
$(function(){ foo; });
OtherStuffThatRunsOnEverySalesPageLoad();
}
Then in the script block on your pages, e.g. SalesPage:
InitSalesPageOrWhatever();
That's it--just one line in your content pages. Beyond the benefit of the content pages being nice and clean, that big clump of JS can now be cached by the user's browser, making the load on you less and their experience faster.
jQuery (and all Javascript) runs on the client side where permanence is unavailable. There are two ways to approach the permanence you seek.
Write a jQuery plugin and include it in your page.
Write your click handler once, and use your server-side code/scripting language to include it in every HTML page. An example PHP include is here.
This may be a good time to consider HTML templates -- documents that contain standard HTML (header, footer, navigation, etc) that should be included in every page of your site.
Related
I got those php-urls like www.***.com/index.php?task=login.
My question is how can I use them with colorbox? I'd like to load the content from the login page into my modal popup but I get unexpected results: it shows the complete website inside of the popup. How can I load the content into my modal popup properly when used with such URLs?
Currently my code looks like this:
$(document).ready(function(){
$(".login_link").colorbox({
href: "<?php echo $setting['site_url'];?>/index.php?task=login",
onOpen: function(){
$("#colorbox").css("opacity", 0);
},
onComplete: function(){
var title = 'Login';
$('#cboxTitle').text(title);
$("#colorbox").animate({"opacity": 1});
}
});
Now we know that the reason why you see the whole site in the modal is because you are loading the whole site into it (nothing to do with parameters getting ignored), we need to look at how you might load just the component you want.
I assume you are using some kind of CMS framework? This may have a method built in to supply things like this (Joomla for instance allows you to add &tmpl=component to the url and it will magically deliver what you are asking for. I don't know what framework you are using so I cannot advise specifically. This will be the "proper" way to perform the task.
Now assuming the file /includes/misc/misc.inc.php is under your document root, you should be able to invoke it by using something like:
http://your.site.domain/includes/misc/misc.inc.php
as the url. HOWEVER!!!! This is unlikely to work. The chances are that other parts of the framework are instantiated by the calling of index.php, which will not happen if you call the include file directly. Indeed, unlike WordPress, Joomla has measures in place which prevent execution of any of its included files unless they have been invoked via index.php.
I have a page I'm working on where a user clicks a link and it loads a new php file into an existing div. It works but the page that loads into the div will not function with existing Javascript stuff in the page.
I can include the
<script type="text/javascript" src="js/admin.js"></script>
into the loaded pages but when you flick back and forth between the pages I notice that RAM usage starts to go up and up, so I don't think this is the best way of doing it.
Any ideas how the loaded page can function with the already-loaded javascript from the index page?
Thanks!
bind your events like this :
$(document).on({
"event" : function(e) {},
...
}, "selector");
If you are using bind or click type events change to using something like on (or live or delegate if you are required to use jquery version less than 1.9)
OR/AND
In your function that loads in the page via ajax provide a call back that initiates only what is needed. Example:
$('#myDiv').load('ajax/page.php', function(){
$('#myDiv a').customPlugin('whatever');
$('#myDiv button').bind('click', function(){
window.open('http://www.google.com/', 'some-window');
});
});
I have some ajax that loads php script output into a div. I would like the user then to be able to click on links in the output and rewrite the div without reloading the whole page. Is this possible in principle? Imagine code would look like:
html
<div id="displayhere"></div>
php1 output
echo 'ChangeToNew';
JS
function reLoad(par1,par2,par3) {
...
document.getElementById("displayhere").innerHTML=xmlhttp.responseText;
xmlhttp.open("GET","php2.php?par1="+par1 etc.,true);
xmlhttp.send();
php2
$par1 = $_get['par1'];
change database
echo ''.$par1.'';
Could this in principle work or is the approach flawed?
Thanks.
What you describe is standard, everyday AJAX. The PHP is irrelevant to the equation; the JS will simply receive whatever the server sends it. It just happens that, in your case, the server response is being handled by PHP. The JS and PHP do not - cannot - have a direct relationship, however.
So the principle is fine. What you actually do with it, though, will of course impact on how well it works.
Things to consider:
what will the PHP be doing? This may affect the load times
what about caching responses, if this is applicable, so the PHP doesn't have to compute something it's previously generated?
the UI - will the user be made aware that content is being fetched?
Etc.
I'm used to using jQuery so will give examples using it.
If you create your links as
Click Me
You could then write your code as
<script>
$("#do_this").live('click', function(){
var link_url = $(this).attr('href');
$.ajax({
url: link_url,
success: function(data) {
$('#displayhere').html(data);
}
return false;
};
</script>
If you use jQuery, make sure you use the .live('click', function(){}) method versus the .click(function(){}) method, otherwise it won't recognize dynamically created elements. Also make sure you do a return false.
I want to add a progress bar before my web page's content loads, so I thought of loading it dynamically via javascript. This content has embedded javascript in its html. I tried using jquery.load() which works perfectly besides the fact that it does not support the js that doesn''t work on the returned content
just to make it clear, what i'm doing is something like this to load all the content:
$("#contentid").html("progressBar.gif");
$("#contentid").load(script.php #content)
$("#contentid").show();
and inside the content returned from script.php there are js calls such as:
jquery.load (to crawl for data and displaying it when ready)
document.getElementById('some_div') (for chart api)
snippets that load widgets
I've been trying to work around with using jquery.ajax though not sure if\how its possible with it yet. would love for some input on that.should i be able to achieve that with it?
Any other idea that might show a progress bar till the script's content is loaded will be great. I'm trying to reduce changes in the code structure, since this long load happens only sometimes.
Thanks.
You may add a div with the progress bar, covering all the page, and remove it after the page is loaded, using:
$(window).load(function() {
$('#progressbar').remove();
});
JQuery's load method takes a callback function as an argument. That function will get called when the load is completed, so you can hide your progress bar at that point. Here is an example from their API docs:
$('#result').load('ajax/test.html', function() {
alert('Load was performed.');
});
In your case, it would be something like:
$("#contentid").load(script.php, function(){
$("#contentid").hide();
});
I have been loading content with ajax and all works fine. Here is my code
$(document).ready(function() {
//Load a-z.php
//Timestamp resolves IE caching issue
var tsTimeStamp= new Date().getTime();
$.post('../../includes/categories/a-z.php',
{action: "post", time: tsTimeStamp},
function(data){
$('#moviescontainer').html(data).slideDown('slow');
});
return true;
});
My data inside a-z.php requires Javascript for it's content and when I load a-z.php onto my page the javascript doesn't work.
I am quessing that I need to link the relevant files to a-z.php and then load it via ajax.
Doesn't this kind of defeat the object of ajax?? That means that I will be loading the js files on the main page and then loading them again when I ajax a-z.php
I hope I made some sense.
EDIT: The A-Z.php page references external javascript files that I have already included on my main page (example: the jquery library, That will mean i am loading it twice.
When I mean requires javascript for its content I have a few modal boxes etc that open when content is clicked. These use the Jquery library)
Your problem is most likely that you need to add the defer attribute to the script tag, which defers executing the script until the content is loaded.
see here
you should not have to load the scripts a second time.
EDIT: The A-Z.php page references
external javascript files that I have
already included on my main page
(example: the jquery library, That
will mean i am loading it twice.
Simply omit them from the a-z.php page then. If they're already included on the main page, they'll be available to the a-z.php script when it's loaded in via ajax. However, I suspect any onload or $(document).ready() calls won't work quite right. I'd try to remove as much JS as possible out of the a-z.php page.