I am new to Jquery. I have a doubt:
For example, in a web page as voting, if you click a button, a counter is incremented by +1. Now, how to draw the url of the button on a website? Therefore, if we provide the url to others, and just click on the URL, the counter should increase by 1 on the website.
Best example of this is FaceBook LIKE.
I prefer to use jQuery, PHP and MySQL
It's a little bit difficult to understand what you're trying to ask but here's my take on it.
Scenario
You have a page at http://mywebsite.com/rating which contains 5 items you can rate on.
Solution
There are two events here that point to the same server side code.
What you need to do is assign an identifier to your button/product/whatever you're trying to rate. So you might have something like this <button ratingname="button1">Rate me!</button>
Now you will have a jQuery function that will use AJAX to communicate with your server and store the increment in the database. This jQuery function will be invoked via an event handler for the button and by going to this url: http://mywebsite.com/rating#button1.
Once your page loads you should check the hash for a value and if one is found then invoke the original jQuery function. You may want to additionally check if the value for the hash is a valid rating button value. (Note you could also use a query string).
I would do it using ajax, and a server side program to record votes.
You could design the page with any look-and-feel. Then add the ajax code to talk to your server-side program and maybe show the user the current votes.
?id=642&point=1
It’s a POST, not a GET, so it could only be done from a form or AJAX, not a simple URL.
//Vote update
$.post(
"http://example.com/folder/vote.php", // url
{ id: 642, point : 1 }, // post-data
function(data){ // response
$("#resultBox").addClass("done"); // show msg
}
);
More reading at http://api.jquery.com/jQuery.ajax/
Related
hi I have some problem with my code!
I have a textbox when the user write in this text box I want to retrieve from DB directly without clicking any button.
then some of my form will completed after writing in this textbox.
my JS code :
function centerIDfocus()
{
var id = document.getElementById("centerID").value;
var data = <?php $center_ID = echo mysql_num_rows(mysql_query("SELECT * FROM 'examcenter' WHERE 'id' = '".id."'")); ?> ;
}
window.onload = addEventsToHTML;
in my form:
<input name="centerID" id="centerID" onfocus="centerIDfocus();">
and that’s not working!
any ideas red face
You mixed 2 languages - javascript is run on client side and php on server side.
What You need to do is:
var data = function_to_get_data(); // in javascript
in that function call ajax request to the address of your php script - and only in that php script call your database to return desired data
You're PHP code will only run once, when the pages is loaded, after that it won't run again because there's nothing happening on the server side. If you want to run it each time you get the focus then you should be using AJAX.
Take a look at AJAX gets, I'm pretty sure that's what you want:
http://api.jquery.com/jQuery.get/
It is rather hard to know what you are intending to do, but...
My guess is that you are confused about when things happen and when "onfocus" is fired.
PHP is run on the server when the page is being constructed. In contrast, javascript is run in the browser, either after the constructed page has arrived (onload) or in response to a user click or other event such as onfocus.
Thus there is no way for the javascript (in the browser) to drop into PHP (on the server). For the same reason (and security) it is impossible for javascript to talk directly to the database.
There are two approaches you might take to do what (I think) you are attempting to do.
You could create a javascript array in PHP, indexed by ID, and containing all possible IDs and their data. Use PHP to read the database, and then echo the javascript to define the array. This would become part of the page sent. Then, in response to the event that means you want to fill the field, you extract the data from the array, and put it where you want it. This would be slow for the page to load, but very quick response to the click that triggered the change.
An alternative is to use ajax. The easiest way is to use jquery to send a GET request to the the server requesting the data related to the ID. The server must respond to that URL by extractign the ID, reading the database and generating the reply. I recommend using JSON. Then, when the jquery request returns, the javascript code can move the data from the JSON into your field. This would make the initial page lighter, but would have a fetch delay to the triggering click.
However I think you may also have an issue with the on-focus event. This fires when the user moves the cursor into the field, before they have entered any data. At that point it will contain the data that was set in the HTML. If you can set the ID at that point, you can also set it to the data from the database.
I think you want two fields - one for the ID and another for the looked up data. Then you run the javascript on the onblur event on the ID field.
Hope that helps.
use something like:
$('.centerID').keyup(function(){
var val = this.val();
var url = '/do.php'; // url to a php script
var val = 'action=checkValue&value='+val; // send it the value
$.getJSON(url, val, function(data){
// Something to do when you get the data back
});
});
then just create a php script that checks the database and returns a JSON answer and then do as you please with it.
BTW - I'm assuming you are ok using jQuery. You can apply this to your JavaScript too.
I used keyup() as one example but you can appy this to keydown(), click(), focus(), focusout() etc...
I have a do.php script that contains a switch statement with the possible value of action= and returns JSON. Everything from logging in, registering, activity monitor, to updating a database field without leaving the page.
I have a page that uses ajax to show users their current assignments. Instead of having to refresh the page to see if there are any updates, I'm using ajax to update the data every 4 seconds. It's been requested that I change the document title to show something like "Number of Tasks: 4" and have that update as well when the user either completes a new task, or gets assigned another one. I tried using a simple "setInterval" javascript function, but since PHP is server side, the variable piece doesn't update...
I've also tried setting "document.title" from within the ajax code, but that just plain didn't work.
Is there a simple way to update the document title to show the number of tasks assigned to the user viewing the page?
Return the value from the $_SESSION in the data sent with the AJAX response to the client Javascript code. Once you have it on the client side set whatever you need to it with javascript.
You'd have to call with ajax a php dedicated to return you only the number of tasks (and other information you may want).
To change the title you can just call document.title = "the data returned in ajax";.
And put all this code (ajax call and title set) inside a function with setinterval as you mentioned.
I need to take form data from user input- i.e. radio buttons and use that to apply search filters to a database search.
However there are specific parameters which are giving me difficulty.
Specifically: The search filter options pane is a static fixture on the main page of the site. The query to be modified by the search filters is a separate php page which is called by an ajax function to display search results in the middle of the page without page refresh.
Is it even possible to submit variable values to another php page without going to that page and processing the php immediately? Or will the variables not be stored like that?
The code is too long but I'll give basic pseudocode:
Form action="Query Page to receive user input.php"
Some radio buttons:
20
15
10
Submit button--> Submits the radio button value to QueryPage.php but does not redirect
User clicks a category link (i.e. fitness) that calls the ajax function which displays the output of QueryPage.php. At this point QueryPage.php should perform the search with the specific user input filters that were selected earlier.
Is this possible?
Let me see if I understand correctly:
You're basically saying that your radio buttons will modify the search results, based on the what user selected?
If that's the case, I can think of 2 options:
1- When you make the ajax request for the search, first, grab the user input and send it to the QueryPage.php file with the search query. Do you have access to that function?
2- Post the user input using ajax (are you using jQuery or some other library for this?) to a UserInput.php file, where you'll store that data on the session, and then from QueryPage.php you just access the session and grab the values sent previously.
Does that answer your question? Sorry if it doens't, it's a bit hard to understand the problem.
You can use JQUERY and its events method. For example change,click,hover. In your case you want to use radio buttons, so you might wanna use the click event for that.
$("#radio").click(function () {
// SEND HTTP REQUEST
});
http://www.mkyong.com/jquery/how-to-select-a-radio-button-with-jquery/
Yes. You could just use .ajax(), or .post() or cURL. This will post your data to the specified page without redirecting.
Example using .post()
$.post("test.php", { name: "John", time: "2pm", fieldname: "your value" } );
Ok this may sound a little weird but what i have is a frameset generated by php with codeigniter framework.
In one frame i am displaying rows of database query results with links attached to the row index of each record.
What I want to happen, is that you click one of the links and it brings up a more detailed summary of the record in the right hand frame.
While I am aware of the fact that php is server side etc. i was trying to make the link reload the right hand frame with the value of the index from the left hand side, then within the controller i can query the database using the index and push back the same summary page with the full record.
You need to send an AJAX request to the server with the variable. You can google on How to send ajax request to server.
However, Here is a simple example of this, using jQuery
$.post("/next/page", {
'variable1' : 'value1'
}, function(data) {
//on success handler
});
Sounds like you want the link definition in the left frame to be something like this:
<a target="otherframe" href="otherframeurl.php?index=2">item 2</a>
Where otherframe is the title of the right frame.
I suppose your frames have names. Assuming the right frame's name is "right", you can change its href with JavaScript like this (from another frame):
parent.right.location.href = 'somefile.php?param=' + yourJsVariableHere;
I need to implement a links-click counter, that will count the number of clicks on the link...
Right now what i am doing is, i am linking the href to redir.php, which will increase the counter in DB and then using header('Location:'); I am redirecting it to the correct URL.
This works but it is certainly not the best approach. In an effort to make my code efficient, how can I make this link counter better? AJAX?
Not much exp with ajax so I wondering how to do in ajax or is there any other better method...
I do not want someone to write a bot script that would make multiple requests to the redir.php and mess up the stats.
You can use
Javascript to make a Ajax call to your "counter.php"
Add a Javascript code (like Google Analytic) on each page to post on the database
Create a "cron job" to analyse the "access_log" (if you count the link in the same domain, server)
Add a PHP code to update the database when each page is generate.
But I think the first javascript method is the best one.
Add a class on the link to spy
Add a "Event handler" to create a AJAX post
Create a simple PHP script to update the database.
Aka
If you links are generated from a source like a CMS instead of by hand, you could pass the link ID to your URL and on the loading of the next page count increment that the link has been clicked. Going this way would require that you reload (without the link ID) the page after that step to make sure that someone copying the link would not make the counter increment needlessly.
This method is bulletproof if your user has javascript enabled, but if your user does have javascript enabled, you could still do the method stated above and through a client side layer, bypass the whole thing and send it through AJAX.
This might seems like redundancy, but this way, you accelerate your process for most of your visitors (without the redirect since you do it through AJAX) and in the case that the javascript doesn't work or is disabled, you have a fail proof system that would avoid missing any click
Building off of #Akarun's answer, here is sample code (in jQuery) for adding a "listener" onto link clicks with "spy" class. Note that I load an image instead of attempting a $.post or other AJAX event -- this is because those won't complete by the time the person navigates away from the page (which clicking on a link is bound to do in most cases), whereas the browser will get off a request for the image in time. It's still a normal PHP script, the browser just thinks it's loading an image.
$(document).ready(function() {
$('a.spy').mousedown(function(event) {
var page_url = "<?=$_SERVER['PHP_SELF']?>";
var target_url = $(this).attr('href');
if(target_url != "#" && target_url != "javascript:void(0);")
new Image().src= "/welcome/track_link/?page_url=" + escape(page_url) + "&target_url=" + escape(target_url);
return true;
});
});
Have you thought of mobile users and other devices?
I believe your first implementation is completely adequate and secure.
You completely control the counting and there is no issue of user manipulation.
It works predictably also.
After all, the ajax will just do the samething in counter.php; Read and update the database. Stay with your present implementation.
Do it the way Google does it:
Waterfront Rentals
A javascript function. The passed code aids security.
Actually looking at the Google source they load an image with the URL as a parameter
window.clk=function(e,b,a,k,i,c,j)
{
if(document.images) {
b=encodeURIComponent||escape;a=new Image;var f=window.google.cri++;window.google.crm[f]=a;a.onerror=a.onload=a.onabort=function() {
delete window.google.crm[f]
};
var d,g,h;if(google.v6) {
d=google.v6.src;g=google.v6.complete||google.v6s?2:1;h=(new Date).getTime()-google.v6t;delete google.v6
}if(c&&c.substring(0,6)!="&sig2=")c="&sig2="+c;a.src=["/url?sa=T&source=",google.sn,"&cd=",b(i),google.j&&google.j.pf?"&sqi=2":"","&ved=",b(j),e?"&url="+b(e.replace(/#.*/,
"")).replace(/\+/g,"%2B"):"","&ei=",google.kEI,d?"&v6u="+b(d)+"&v6s="+g+"&v6t="+h:"",c].join("")
}
return true
};