I have a little weird problem
I want to call wordpress ajax url in a custom page.php in public_html
The weird thing is that I have two type of these pages which have two different path :
First one is : the_permalink()/page1
Second one is : the_permalink()/page1/page2
The problem is that the ajax url call is working fine in page1 path : the_permalink()/page1
But same functions with same way of calling is not working in page2 path : the_permalink()/page1/page2
Is there any suggestions ?
Note : i have tested the the SCRIPT code which call the ajax with alert() function and found that that the code stops when it becomes to ajax part is this code :
<script>
$(document).ready(function(){
$('.checknow').click(function(e){
e.preventDefault();
var data = "test";
//alert(ajaxurl);
$.ajax({
type:"POST",
url:ajaxurl,
data: {
action:'action_function_php',
data:data,
},
success:function(data){
$('.security-check-result').html(data);
}
});
});
return false;
});
</script>
Note : i am using wildcard *, so the permalink return is subdomain if this would help
I have also tried to type the url directly but didn't work also
Here is an example page ( will remove it soon ) - just for make things
clear -
https://gameloop.bramj.store/windows
in this page if u tried to search something in the search bar you will find the ajax return works fine
but if you move to
https://gameloop.bramj.store/windows/download
you will notice that every single ajax code in the page is not working.
Thank you so much the problem is solved
i had to put the current main url ( domain/ subdomain ) without any slugs
so the best solution for this case is use this url :
var ajaxurl = "https://<?php echo $_SERVER['HTTP_HOST'];?>/wp-admin/admin-ajax.php";
You need to use wp_localize_script in order to have access to ajaxurl global.
If you don't want to do that then you can replace ajaxurl with <?php echo admin_url('admin-ajax.php');?> if you javascript is inside a PHP file.
Related
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'm trying to call a function with a link in html. I found the following example:
click to run function!
if(isset($_POST['runfunction'])){
}
This works perfectly fine, the problem is that when I click the link, "?runfunction" keeps standing in my url bar. So when I submit a form on my page it goes totally wrong (it's way to long to upload here). I do some SQL queries and I'm getting weird values in my SQL database. When I type in just my normal url it works fine. So I'm pretty sure that's the problem. I found another example with ajax :
$("a").click(function(){
jQuery.ajax({
url: "path/to/controller",
type: "POST",
dataType: 'json',
data: {'mentod':'ExportExcel'},
success: successCallback,
error:failureCallback
});
});
I don't fully understand this example (because I never use AJAX) but my php script is included in the html page "include("")". So I can't type in url because it has to be the same page. Can someone give a little bit of info about this, or give an example of how I can fix this? Thanks in advance!
You can add a callback method then remove it from the url by javascript
function successCallback () {
url = window.location.href;
window.location = url.replace("runfunction", "");
}
I'm using the code below to load the results from a database query in a PHP page:
click me
$('.item > a').click(function(){
var url = $(this).attr('href');
$('.item-popup').fadeIn('slow');
$('.item-content').load(url);
return false;
});
All works fine right now, but the next bit of functionality is a problem. Inside results.php which ajax loads into .item-content, I have another link that is supposed to update and increment click counts for that link, also without refreshing. The functional PHP bits all work fine. My only problem is the jQuery/AJAX aspect of things.
Maybe I'm going about it the wrong way, but what I really want to do is have a page with a container that loads the result of of a database query from a PHP page, but also in that container, I have a link/button whose click count I want to be able to save and update all without refreshing.
EDIT
I guess the most important question I need answering is: When the ajax on index.php loads the content of results.php into the container in index.php, do browsers treat the newly loaded ajax content as part of the parent page (index.php) or is it still treated as a different page loaded into the container like an iFrame?
If say for example it is click event then you need to write
$('input element').on('click',function() {
// write code over here
})
Dont know for sure if you want this, When returning the data in the load function you will have to add a link like this in the resultant HTML which will be clickable:
Now in javascript you need to catch the click event of the link like this:
<script type="text/javascript">
$(function(){
$(".item-content").on("click", ".clickable", function(){
var counter = $(this).data('counter');
var id = $(this).data('id');
$.ajax({
url : //your url here,
data : {'id' : id, 'counter' : counter },
type : 'POST',
success : function(resp){
//update the counter of the current link
$(this).data('counter', parseInt( $(this).data('counter') )+1 );
//whatever here on successfull calling of ajax request
},
error : function(resp){
}
});
});
});
</script>
Finally, I find some article in http://code.google.com/intl/en/web/ajaxcrawling/docs/getting-started.html msnbc use this method. Thanks for all the friends.
Thanks for your all help. I will study it for myself :-}
Today, I updated my question again, remove all of my code. Maybe my thinking all wrong.
I want make a products show page.
One is index.php, another is search.php (as a jquery box page). index.php has some products catagory lists; each click on product catagory item will pass each value to search.php. search.php will create a mysql query and view products details. It(search.php) also has a search box.(search.php can turn a page to show multiple products; the search result looks similar to a jQuery gallery...).
I need to do any thing in search.php but without refreshing index.php.
I tried many method while I was thinking: Make search.php as an iframe (but can not judge search.php height when it turn page and index.php without refresh); use jquery ajax/json pass value from index.php to search.php, then get back all page's value to index.php. (still met some url rule trouble. php depend on url pass values in search.php, but if the value change, the two page will refresh all. )
so. I think, ask, find, try...
Accidental, I find a site like my request.
in this url, change search word after %3D, only the box page refresh
in this url, change search word after = the page will refresh
I found somthing in its source code, is this the key rules?
<script type="text/javascript">
var fastReplace = function() {
var href = document.location.href;
var siteUrl = window.location.port ? window.location.protocol+'//'+window.location.hostname +':'+window.location.port : window.location.protocol+'//'+window.location.hostname;
var delimiter = href.indexOf('#!') !== -1 ? '#!wallState=' : '#wallState=';
var pieces = href.split(delimiter);
if ( pieces[1] ) {
var pieces2 = pieces[1].split('__');
if ( pieces2[1] && pieces2[1].length > 1) {
window.location.replace( unescape(pieces2[1].replace(/\+/g, " ")));
}
}
}();
</script>
If so. in my condition. one page is index.php. another is search.php.
How to use js make a search url like
index.php#search.php?word=XXX&page=XXX
then how to pass value from one to another and avoid refreshing index.php?
Still waiting for help, waiting for some simple working code, only js, pass value get value.
Thanks to all.
I have read your problem, though I can not write complete code for you (lack of time ) So I can suggest you to what to do for your best practice
use dataType ='json' in jQuery.ajax function and
write json_encode() on B.php
and json_decode() on A.php or $.getJSON()
Alternate:
Read
jQuery.load()
assuming you really want to do something like here: http://powerwall.msnbc.msn.com/
I guess they are using a combination of ajax-requests and something like this: http://tkyk.github.com/jquery-history-plugin/
make shure that the navigation (all links, etc.) in the box works via ajax - check all the links and give them new functionality by js. you can write some function which requests the href url via ajax and then replace the content of your box. ...
function change_box_links(output_area){
output_area.find('a').each(function(){
$(this).bind('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
$.ajax({
url: url,
success: function(data){
output_area.html(data);
//update url in addressbar
change_box_links(output_area);
}
});
});
});
}
it is upgradeable but shell show the main idea...
addendum[2011-05-15]
Get away from thinking you will have two files, that can handle some many "boxes". i mean you can do this but it's worth it.
but to be able to set up your templates like normal html page you could use the above script to parse the ajax requested html pages.
build your html-pages for
viewing the content,
viewing the search result
, etc.
on your main page you have to provide some "box" where you can display what u need. i recommand a div:
<div id="yourbox"></div>
your main page has buttons to display that box with different content, like in the example page you have showed us. if you click one of those a JS will create an ajax call to the desired page:
(here with jquery)
$('#showsearch_button').bind('click', function(){showsearch();});
function show_search() {
$.ajax({
url: 'search.php',
success: function(data){
var output_area = $('#yourbox');
output_area.html(data);
$.address.hash('search');
change_box_links(output_area);
}
});
});
for other buttons you will have similar functions.
the first function (see above) provides that the requested box-content can be written as a normal html page (so you can call it as stand-alone as well). here is the update of it where it also provides the hashtag url changes:
jquery and requireing the history-plugin
function change_box_links(output_area){
output_area.find('a').each(function(){
$(this).bind('click', function(e){
e.preventDefault();
var url = $(this).attr('href');
$.ajax({
url: url,
success: function(data){
output_area.html(data);
var name = url.replace('/\.php/','');
$.address.hash(name);
change_box_links(output_area);
}
});
});
});
}
and you will need some kind of this function, which will bind the back and forward buttons of your browser:
$.address.change(function(event) {
var name = $.address.hash();
switch(name){
case 'search': show_search(); break;
default: alert("page not found: "+name);
}
});
the above code should give an idea of how you can solve your problem. you will have to be very consequnt with filenames if you just copy and past this. again: it is improveable but shell show you the trick ;-)
im not sure that i fully understood what you want, but correct me if i didnt,
i think u need something like a dropdown that once the user select one item some div inside ur page show the result of another page result..
if so u can do it with jquery .load() and here is an example (no need for json)
Step 1:
Index.php
<p>
brand:<select id=jquerybrand>$jquerybrands</select><br />
Model:<select id=jquerycars></select><br />
</p>
<script type=\"text/javascript\">
$(document).ready(function(){
$('#jquerybrand').change(function(){
var value=$(this).value;
var url='api/quick.php?'+this.id+'='+this.value+' option';
$('#jquerycars').load(url);
});
});
</script>
This will simply show 2 dowpdown boxs (can be text or anything u like). and will add a listener to any change in value. once changed it will submit the id of the field and the new value to api/quick.php , then quick.php responce will be loaded into #jquerycars dropdown.
Step 2 quick.php
if(isset($_GET['jquerybrand'])){
$jquerycars="";
require_once("../lib/database.php");
$sql_db = new database();
$l=$sql_db->Item_in_table("car","sheet1","WHERE `brand`='$jquerybrand';");
foreach($l as $l)$jquerycars .="<option>$l</option>";
echo $jquerycars;//response that will replace the old #jquerycars
}
this will confirm that this is a request to get the query result only, then it will do the query and echo the results.
now once the results come back it will replace the old :)
hope it helps :).
I have a function which loads some content when executed...
IE...
function load_product(product_id) {
$.ajax({
type: 'GET',
url: 'product_image.php',
data: 'product_id='+product_id+'',
success: function(data) {
$('#product_image').html(data);
}
});
}
That works great. But say I want to create a link to a page, so that then something triggers to load up the dynamic content?
IE I link to a page, say
www.blah.com/?product=1
and a few 'divs' on the page that load up different things dynamically for product #1.
The way I currently do it is by doing something:
<?php
if($_REQUEST['product_id']) {
echo '
<script type="text/javascript">
$(document).ready(function(){
load_product(' . $_REQUEST['product_id'] . ');
});
</script>
';
}
And I put that somewhere on the new page being loaded. It works. But is there a better way?
I do something similar but using YepNope.js.
<script>
var hasProduct = <?php echo isset($_REQUEST['product']) ? 'true' : 'false' ?>
yepnope({
test : hasProduct,
yep : 'js_file_to_load.js',
});
</script>
Then you can store all you main js in an external file. This has the added advantage over your method in that, I don't have to load the external scripts for every request just in case $_REQUEST['product'] is set.
You can do this all in JavaScript.
Use 'location.search' to give you the query part of the current URL...
for example, if the url is "www.blah.com/?product=1" then location.search returns "?product=1". Then you can just use split('=') to get part number. Of course, you can also just get the whole URL using 'location.href'... doesn't really matter.
var productNum = parseInt(location.search.split('=')[1]);
You would probably want more checks in there, but that's the basic idea.