I have something like this:
LOL
<script type="text/javascript">
$('#lol').click(function(){
$.get("<?php echo $host.'/index.php'?>",
{ page: "topobjekt", index: "<?php echo $l;?>", pages: "<?php echo $pg+1;?>" },
function(data){
$('#primary_content').html(data);
});
});
Is it possible to load specific div(for instance #secondary_content) from my GET requested php page and load it into #primary_content target?
Why not modify your PHP script to handle the AJAX request specifically? You will save wasted bandwidth loading a whole page when you know all you need is one div.
Add a get variable and check for this to determine context.
Change this line:
$('#primary_content').html(data);
To this:
$('#primary_content').html(data.find("#secondary_content"));
You can also use the load method, which can specify elements in the target page:
$('#primary_content').load('<?php echo $host.'/index.php'?> #secondary_content');
You should be able to do something like
$('#primary_content').html(data.find('#theDivId'));
Related
Below is my code
<a class="foot" href="<?php echo someurl.com?id;?>" >Info</a>
Iam setting a click function for the class 'foot'
$('.foot').click(function(){
alert('run some functions');
});
As you can see on the code above First it runs Jquery later on it will be passed to specified Url... But is it possible to pass to specific url then run Jquery.. ???
You have to use Ajax request if you want to call the URL without moving to another page. otherwise your javascript code won't execute.
http://api.jquery.com/jQuery.ajax/
if you are doing this for a fallback in case your client doesn't support Javascipt then you have to do it like this.
$('a').click(function(e){
e.preventDefault();
//your code
});
if you want the code to run after page load then I suggest you introduce:
$(document).ready(handler)
That way jquery runs AFTER page load.
You need to use prventDefaults and then trigger document.location.href to your clicked link.
http://api.jquery.com/event.preventDefault/
Hopefully this will solve your problem.
Why you are not using $(document).ready(handler)
<script type="text/javascript">
$(document).ready(function() {
$('.foot').click(function(){
alert('run some functions');
});
});
</script>
<a class="foot" href="hello.php" >Info</a>
I read this question, and I'm pretty sure it's 90% of what I need, but I'm after something more than just this, and my success formulating my query in Google has been less than stellar.
What I'd like to do
I have a form on a site that, when submitted, needs to connect with a database, and then the user needs to be apprised of the result. I'm trying to get the result page to load in a modal jQuery dialog instead of forcing a full page reload. At present, I'm just trying to create a jQuery dialog that replaces the contents of a <div> with the product of a PHP file. I know I will get the PHP file's execution result this way. That's what I'm after, but it currently is not working.
My code currently looks like this:
$(document).ready(function() {
$("#dialog").get('include.php', function(data) {
$("div#dialog").html(data);
});
});
And include.php is simply:
<?
echo "<h1>Loaded</h1>";
?>
When I load the page, the original contents of #dialog are still there. I have a strong suspicion that what I'm failing to grasp isn't major, but I've had bad luck finding the fix. I'm a web dev newbie. How do I wwebsite as on the internet?
You are calling get on a jQuery result. That'a a different method than $.get, the one you should be using:
$(document).ready(function() {
$.get('include.php', function(data) {
$("div#dialog").html(data);
});
});
i have been using Ajax call for the same purpose. So try this :
$(document).ready(function() {
$.ajax('include.php',
success : function(data) {
$("#dialog").html(data);
});
});
If you want to replace the entire contents of the #dialog DOM object with the HTML you load, then you probably want to use .load():
$(document).ready(function() {
$("#dialog").load('include.php', function(data) {
// no need to set the html here as .load() already does that
});
});
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.
I have a really simple requirement but cant find a good solution to it.
How do I get config data into javascript files within magento. I need to load some config data from a module and make it available from within some javascript code. Without loading this data onto hidden fields on the page or using ajax to fetch them from a controller - how do i do this?
Thank you in advance for any help.
You can grab the value you are looking for like this:
// using seo as an example. look at the path field on core_config_data
$value = Mage::getStoreConfig("web/seo/use_rewrites");
Put this in a template that will echo your code:
<?php
$seo_value = Mage::getStoreConfig("web/seo/use_rewrites");
?>
<script type='text/javascript'>
magento_config = {}
magento_config['seo_value'] = "<?php print $seo_value; ?>";
// ... add more ...
</script>
Add that template to your layout and you will now have a global JS object called magento_config that you can use to grab your values. Depending on where you put your template, you may have to wait for the page to load before your variables are available.
Make sure not to echo these values indiscriminately, as there may be security implications in echoing store config data to the frontend.
Hope that helps!
Thanks,
Joe
Add this code in before you load the JS...
<script type="text/javascript">var var_name = <?php echo $var_name; ?></script>
Then you can load in JS like
<script type="text/javascript" src="/js/file.js"></script>
In your file.js (providing that the file is loaded after the variable definition) you can do something like...
//execute as soon as DOM is loaded
window.onDomReady(onReady);
//do on ready
function onReady()
{
alert(var_name);
}
Or if you were using jQuery
$(document).ready(function(){ alert(var_name); }