I have a file with title ad.php and contains
<img src="bannerimg.png">
and in another file i have:
<iframe src="ad.php"></iframe>
Question is how to count click on iframe!
Just do this if using javascript....
var clik = 0;
$('#myframe').click(function(){
clik++
alert(clik);
});
UPDATE WITH AJAX
$(document).ready(function(){
$('#myframe').click(function(e){
e.preventDefault();
$.ajax({
url : "countclick.php",
success: function(){
alert('done');
}
});
});
});
Then in your php file countclick.php you just retrieve the current value from database, and increment it and update.
Or just execute an increment query directly, without retrieving current value
Im assuming you know how to do that in php/mysql , so Im not gonna post that part
You would have to catch the click event somewhere on the client side (in JavaScript most likely) and then send a request back to the server notifying it of the banner click.
Related
I'm a new user of laravel. I have problem in pass data to server in laravel 4.2. I didn't use a form submit, I use javascript to refer action of form such the code below:
$(document).ready(function(){
$(".delete_action").click(function(event){
$("#deletecategory").prop('href','/admin/category/'+ event.target.id +'/delete');
});
});
and my modal of delete like this:
×
Are you sure want to delete this category?
Yes
No
When i click Yes, it doesn't do anything. I hope to get some solution from you!
You can use http://api.jquery.com/jquery.ajax/ for this.
$('#yourOkButton').click(function(){$.ajax(...);});
In the documentation of $.ajax is everything written down.
You need to include an ajax call... to actually submit data...
Like so...
$(document).ready(function(){
$(".delete_action").click(function(event){
// incase the button is inside a form, this will prevent it from submitting
event.preventDefault();
// get your url
var url = '/admin/category/'+ event.target.id +'/delete';
// Create alert to confirm deletion
var conf = confirm("Are you sure you want to Delete this?");
if(conf){
// If they click yes
// submit via ajax
$.ajax({
url:url,
dataType:'json',
success:function(data){
//put anything you want to do here after success
// Probably remove the element from the page since you deleted it //So if the button is part of a parent div that needs to be removed.
}
});
}
});
});
You could also use $.get instead of $.ajax to shorten the code some more...
$.get(url, function(data){
//remove element after success
});
But I realize youre trying to pass the url to a modal window, and then submitting that modal window. So you need to attach the ajax call to the modal window button. Not like above, which is just opening an alert window. Its the easier way, but less fancy looking. If you really want a modal. You need to attach the above code to the modal confirm button. But the gist is the same.
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>
I use a page with Jquery tabs and if i submit one of the forms in the tabs only that tab is submitted and refreshed with this jquery code:
$(document).on("submit", "#plaatsen_stap3", function(event) {
/* stop form from submitting normally */
event.preventDefault();
$.ajax({
type:"GET",
url:"../plaatsen_advertentie/plaatsen_advertentie_stap3.php",
cache: false,
data: $("#plaatsen_stap3").serialize(),
success:function(data){
$("#tab2").html(data);
}
});
});
But in the case that there has to be payed i want to reload the page with the payment page. I want to do that AFTER the div is reloaded with the data, because i need to put a payment row in the DB with the data from the GET. Is location an option? If i use that now only the div (tab2) is loaded with the payment page....
So:
1.push submit
2.submit the form and load page/script in div by Ajax
3.check in php script (within the div) if payment is needed
4.if yes,add row with payment data in database and reload entire page with payment page (with some Get data in the url (last inserted id)
success:function(data){
$("#tab2").html(data);
location.href = "/yourpage.php";
}
Since you wanna do once the HTML is generated, give some time like about 5 seconds?
success:function(data){
$("#tab2").html(data);
setTimeout(function(){location.href = "/yourpage.php";}, 5000);
}
This would work for your use case. This cannot be done from server side.
I think load() is what you are looking for. http://api.jquery.com/load/
The code below is intended as a guideline, and I'm not even sure it's working (I have not tested it). But I hope it will be of some help.
I would do something like this:
//Step 1
$(document).on("submit", "#plaatsen_stap3", function(event) {
/* stop form from submitting normally */
event.preventDefault();
$.ajax({
type:"GET",
url:"../plaatsen_advertentie/plaatsen_advertentie_stap3.php",
cache: false,
data: $("#plaatsen_stap3").serialize(),
success:function(data){
//Step 2 - submit the form and load page/script in div by Ajax
//Make sure array[] is an actual array that is sent to the test.php-script.
$("#tab2").load("test.php", { 'array[]' , function() {
//Step 3 - check in php script (within the div) if payment is needed (Do this from test.php - don't check the actual div but check values from array[])
//Step 4 - if yes,add row with payment data in database and reload entire page with payment page (with some Get data in the url (last inserted id)
//Do this from test.php and use header-redirect to reload entire page
$("tab2").html(data); //Do this when test.php is loaded
}
} );
}
});
});
My PHP page
<ul id="upvote-the-image">
<li>Upvote<img src="image.png" /></li>
</ul>
is currently successfully sending variable to javascript
$("#upvote").each(function(index) {
var upthis = $(this).attr("rel");
var plusone = upthis;
$.post("upvote.php", {
'plusone': plusone
});
alert(plusone);
});
(The alert in the code is for testing)
I have multiple images using the rel tag. I would like for each to be able to be upvoted and shown that they are upvoted on the page without loading a new page.
My question, and problem: what is my next step? I would just like to know how to send a value to upvote.php. I know how touse mysql to add an upvote, just not how to send a value to upvote.php, or even if my javascript code opens the page correctly.
thanks
I think you need something like this:
<ul id="upvote-the-image">
<li><span rel="50" id="upvote">Upvote</span><img src="image.png" /></li>
</ul>
<span id="result"></span>
$("#upvote").click(function(index) {
var upthis = $(this).attr("rel");
var oOptions = {
url: upvote.php, //the receiving data page
data: upthis, //the data to the server
complete: function() { $('#result').text('Thanks!') } //the result on the page
};
$.ajax(oOptions);
}
You dont need an anchor, I changed it for a span, you can test asyc connection using F12 in your browser
Your javascript never opens the php page, it just sends data to it, and receives an http header with a response. Your php script should be watching for $_POST['plusone'] and handle database processing accordingly. Your next step would be to write a callback within your $.post function, which I recommend changing to the full ajax function while learning, as it's easier to understand and see all the pieces of what's happening.
$.ajax({
type: 'POST',
url: "upvote.php",
data: {'plusone': plusone},
success: function(IDofSelectedImg){
//function to increment the rel value in the image that was clicked
$(IDofSelectedImg).attr("rel")= upthis +1;
},
});
You'd need some unique identifier for each img element in order to select it, and send it's id to the php script. add a class instead of id for upvote and make the id a uniquely identifiable number that you could target with jquery when you need to increment the rel value. (From the looks of it, It looks like you're putting the value from the rel attribute into the database in the place of the old value.)
A good programming tip here for JQuery, Don't do:
<a href="javascript:return false;"
Instead do something like:
$(function(){
$('#upvote').on('click', function(event){
event.preventDefault();
$.post('upvote.php', {'plusone': $(this).attr('rel')}, function(data){
alert('done and upvoted');
});
});
});
That is a much better way to handle links on your DOM document.
Here are some Doc pages for you to read about that coding I use:
http://api.jquery.com/on/
http://api.jquery.com/jQuery.post/
Those will explain my code to you.
Hope it helps,
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 :).