I'm using this code to load pages onclick without reloading the current page:
$(function() {
$("#tabs a").click(function() {
var page = this.hash.substr(1);
$.get(page+".php", function(html) {
$('#content').html(html)
});
return false;
});
});
The code is working and everything's fine except that it looks for the pages to display within the same path of the current page, for example if the current page is www.mysite.com/index
It looks for www.mysite.com/index/page.php
and this page doesn't exist because I put my PHP pages in a specific folder
how to change the code to make it look for the external pages in the specific folder that I want?
.get, forms, anchors, etc. will all use relative paths if you give them relative paths. If you want them to use an absolute path, provide an absolute path. Absolute paths begin with a slash /.
For example:
$.get("/" + page + ".php" ...
This of course requires page to be the full path.
Try this: $('#content').html(html); You forgot parentheses around the jQuery selector.
$("#tabs a").click(function() {
var page = this.hash.substr(1);
$.get("php/" + page + ".php", function(html) {
$('#content').html(html);
});
return false;
});
Related
I have this code here
$(document).on('change', '.item_category', function(){
var category_id = $(this).val();
var sub_category_id = $(this).data('sub_category_id');
$.ajax({
url:"fill_sub_category.php",
method:"POST",
data:{category_id:category_id},
success:function(data)
{
var html = '<option value="">Select Sub Category</option>';
html += data;
$('#item_sub_category'+sub_category_id).html(html);
}
})
});
when I added a slash in front of fill_sub_category.php. It will not call the file and if I moved this file to a subfolder. I will get the same issue.
url:"/fill_sub_category.php",
My question is, why adding a slash causes this problem, and is it possible to move this file to a subfolder, if so what is the proper way of writing it. I have tried url:"includes/fill_sub_category.php", but it didn't make any changes. Thanks
as I see it we need to consider the folder with the .js file (where .js file contains the AJAX code).
if php code is in the same folder, we can use
url:"./fill_sub_category.php" //or
url:"fill_sub_category.php"
if (with absolute dir reference) php code is in server root directory, we can use
url:"/fill_sub_category.php"
or (with relative dir reference) if e.g. .js is in c:/somefolder1/js
while .php is in c:/somefolder1/php, we can use
url:"../php/fill_sub_category.php"
where ../ means we want to move up to parent directory . ' hope it helps
I have a problem with the $.getJSON function. The get works fine on my first page - index.html. However, when I go to my second page - second.html and use the function $.getJSON I get an error.
The code (second.html) does not work:
$(document).ready(function(){
$('button').click(search);
});
function search(){
var name = $('#inputName').val();
$.getJSON("api/research_name.php?nome="+nome, function(data){
console.log(data);
});
}
This code (index.html) works fine:
$(document).ready(function(){
$('button').click(search);
});
function search(){
var name = $('#inputName').val();
$.getJSON("api/research_name.php?nome="+nome, function(data){
console.log(data);
});
}
(this would probably be better as a comment, but)
check your code. you assign name to the value of an input field, but in your .getJSON call use nome
Also, you should probably use urls that are fully qualified. For example, if your hierarchy is
/index.html
/folder/something/second.html
then your api call will be relative to the directory in which it was called, which might not be the root.
Consider changing it to "/api/research_name.php?nome="+nome
I am setting up a twitter feed into my site and have it working perfectly when you access it with a root page ie www.domain.com/index.php
However when you have a url that is www.domain.com/category/page it doesn't not work, however if you use www.domain.com/index.php?cat=category&page=page it works fine.
So in the javascript I have the following
jQuery(function() {
jQuery.getJSON('cache/twitter-json.txt', function(data){
jQuery.each(data, function(index, item){
jQuery('#tweet').append('code for displaying tweet');
});
});
So I have tried to change the url in the getJSON function to the full path www.domain.com/cache/twitter-json.txt but that doesn't work.
Try:
jQuery.getJSON('/cache/twitter-json.txt', function(data){
Relative URLs are interpreted relative to the directory of the page containing the reference. So when you make the above call from www.domain.com/category/page, it tries to go to www.domain.com/category/cache/twitter-json.txt.
If you want to use the full URL, you need to put // before the hostname, e.g.
jQuery.getJSON('//www.domain.com/cache/twitter-json.txt', function(data){
Otherwise, it thinks www.domain.com/ is just another level of directory.
change
jQuery.getJSON('cache/twitter-json.txt', function(data){
to
jQuery.getJSON('/cache/twitter-json.txt', function(data){
Maybe it helps to set the base in your html
<base href="http://myserver/dir1/">
I have the page (index.php) that contain one link with id="t1" and one div id="container".
<a id="t1" title="Users" href="utenti.php">Users</a>
<div id="container">
<!--Where does the contained-->
</div>
When I click the link I get a built-in external page (utenti.php)
This is code of Ajax:
$(document).ready(function(){
$("#t1").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
});
and so far all is well, but if I click a link in the page that is included (utenti.php) the page is not incorporated in the same div but is opened in a direct manner.
I tried to put in the file .JS the code Ajax, to recognize the ID of the links transforming into:
$(document).ready(function(){
$("#t1").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
$("#click").click(function(){
//$("#container").hide();
$("#container").load($(this).attr("href"), function(){
$("#container").show();
event.preventDefault();
});
return false;
});
});
Where #click is id of the link contained in the page Utenti.php,but even so
I do not incorporate the page in the div.
I also tried to include directly the page with the script inside the page utenti.php but I recognize the first link (which is fine) but everyone else does!(not all other!)
If I understand correctly this system does not include actually the page as would the classic include of PHP.
He gives him also the values already included in the index is more a kind of visualization,only that I haven't understand how to pass the value of the links contained in utenti.php inside the main page index.php.
It should be
$(document).on("click","#t1",function(e){
e.preventDefault();
var href = $(this).attr("href");
$("#container").load(href);
});
If you want links on the page that is opened in the div to also be targeted to the div you can try a delegated click handler on the div itself.
$(document).ready(function () {
$("#t1").click(openLinksInDiv);
$("#container").on("click", "a", openLinksInDiv);
function openLinksInDiv(event) {
//$("#container").hide();
$("#container").load($(this).attr("href"), function () {
$("#container").show();
});
event.preventDefault();
}
});
Demo: http://jsfiddle.net/AN56C/
Or if you want all links on the page to open in that div, use:
$(document).on("click", "a", openLinksInDiv);
Noting that loading pages via Ajax won't work for any and all pages from external domains, but will work for pages from your own domain.
This whole thing seems to be the perfect case for an iframe rather than a div, in which case you could have links to external domains.
I have two Ajax functions that are on the same div, the first one executes when complete page is fully loaded and call the ccslider method, instead the second one checks which menu ID I clicked, on the menu, to load dynamically different contents for different pages.
I can see the content loaded (eg: pictures) but unfortunately I don't see them in the ccslider; it seems that the slider is not executed.
But I know that works just because if I test it, removing the swapContent() function and place my PHP code with the MySQL query inside my main page the pictures are loaded inside the working ccslider.
Any hint on how to fix this problem?
$(window).load(function(){
$('#sliding').slider({
_Options: {
imageWidth: 300,
imageHeight: 200
}
});
});
function swapContent(cv) {
var url = "testing_cover.php";
$.post(url, {contentVar: cv}, function(data) {
$("#sliding").html(data).show();
});
}
You might have to call the slider method again inside the swapContent() function. Try this.
function swapContent(cv) {
var url = "testing_cover.php";
$.post(url, {contentVar: cv}, function(data) {
$("#sliding").html(data).show();
$('#sliding').slider({
_Options: {
imageWidth: 300,
imageHeight: 200
}
});
});
}
I have no access to the kind of plugin you're using, but from what it seems, you're probably modifying the HTML structure needed for it's functionality. Try inserting the HTML to a wrapper inside the #sliding element as opposed to directly in it.