I have an iframe on my page, where on click (a menu) will update the iframe with a new URL depending on what menuitem they select.
I do that by calling javascript function on 'onclick' passing the URL from the menu :
function frameclick(pageurl)
{
$("#iFrame1").attr('src', pageurl);
}
What i would like to do whenever they press a menuitem is to store what iframe is loaded, because i have another button (select page language) and when they press that i want to reload the page but pass on the iframe-url that is currently displayed as a variable in the site url.
Since PHP is serverside and JS is clientside, i cannot do ex. "$current_iframe_url = pageurl" - which would have enabled me to pass it on as a variable on refresh.
You know how i could get around this ?
That works fine.
What i want to do now, is to whenever they click a menuitem i want to store that URL
on every click create a hidden field save the value of url in a hidden field then only change the url. then after that you can simple submit the form using ajax .
or when ever user clicks call an ajax function so that u can copy the url in database or session what ever you like.
sample
function frameclick(pageurl)
{
$.post("server.php", { url: pageurl } );
$("#iFrame1").attr('src', pageurl);
}
your php server.php should do something like this
if(isset($_POST['url']){
//INSERT IN TO DB
}
Following fiddle used to get its URL, http://jsfiddle.net/sameerast/FUUz9/1/
Hope this also helpful,
$('iframe').bind('mouseover', function(){
var iframeID = $(this).attr('src');
$(this).contents().find('html').unbind();
$(this).contents().find('html').bind('click', function(){
alert(iframeID);
});
})
;
Related
I have a link on my page that loads the div using a jquery function. On the page there is a form that submits to a database. The form works when when I type the page in directly but when the function loads the page, the form doesn't work.
$('.menu_top').click(function() {
var href = $(this).attr('href');
$('#load').hide().load(href).fadeIn('normal');
return false
});
This is what I am using to load the page into the div. I have added the class to the form and button. When I click submit the page flashes but the SQL doesnt update
When you load something into doom, you need to use the on command. Try this:
$('body').on('click','.menu_top',function() {
I have a label called price, and this label automatically updates its value every two seconds from the server. Also I have a button or link, which increases this price in database when I do click. The problem is how save the data without redirect to the same page.
My code:
<?php
echo $this->html->link('Increase price', array('controller' => 'example', 'action' => 'increase_price', $param1), array ('id' => 'btPrice'));
?>
And in ExampleController the code is
function increase_price($param1)
{
$this->autoRender = false; //Don't want a view
$example = $this->Example->findById($param1);
$example ['Example ']['price'] = $example ['Example ']['price'] + 1;
$this->Example->save($example );
}
The price is increased but cakePhp is asking me for a view, and if I do autoRender=false then my page will be blank and I want to stay on the same page.
I don't know if this is a CakePhp question or if is Jquery question. In both cases, I appreciate your help
if you don't wanna reload the page to do this, you need to use Ajax..since you've already got unique id for this, what you need to do is use Jquery Ajax to handle this.
first download jquery lib and put it into your app/webroot/js folder and load it
http://jquery.com/download/ download Jquery lib here
then you can do:
<script>
$( document ).ready(function() {
//do sth when click on #btPrice
$('#btPrice').click(function(){
$.ajax({
type:"POST",
//the function u wanna call
url:"<?php echo $this->webroot;?>example/increase_price/",
/* data you wanna pass, as your $param1 is serverSide variable,
you need to first assign to js variable then you can pass:
var param1 = '<?php echo $param1;?>';*/
data:{increase_price:param1},
success:function(data)
{
//update your div
}
});
});
});
</script>
Also you have to modify your increase_price function
As we are passing increse_price as parameter in ajax call and method is post, in your function, you have to use $_POST['increase_price'] to catch it then assign to another variable
eg: $param1 = $_POST['increase_price']; then you can use it..
Should do the trick for you
The normal flow is that when you click on a link, the browser requests a new page from the server and then renders the contents.
If you want to change something in the DOM from the client's side you need Javascript.
With the use of Javascript you can skip the complete page reload because you can request the exact information you need and then update the DOM with it. This is known as AJAX.
While you can do AJAX with plain Javascript it is usually much easier to use a Javascript framework like jQuery to make things easier.
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>
In a PHP Project I have hyperlink :
| Name |';
When a user click on the link I need to add the selected "id" to session
addid.php Code :
session_start();
$_SESSION['id'] = $_GET['id'];
I need to accomplish this without reloading the page (need to add the "id" to session in background).
How to call addid.php with Javascript & jQuery?
NOTE: I tried this code, but it does load the addid.php in browser
$('a').click(function(){
$.ajax();
return false;
});
$('a').click(function(){
$.get($(this).attr('href'));
return false;
});
Give your link an id:
<a id="something" href="addid.php?id='. $Id . '">| Name |</a>';
and then you can easily refer to it:
$('a#something').click(function(e) {
e.preventDefault();
$.get($(this).attr('href')); // no handler fire and forget
});
The code you tried is invalid - have a look at the api for the jquery function you're using. url is a mandatory argument.
Check using developer tools/firebug/whatever you have installed that the request is sent to the right place, and the response if what you expect.
Look at jquery:
http://api.jquery.com/jQuery.get/
Use ajax and set the id as a parameter in the data string.
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 :).