This is my first post and every opinion/help will be much appreciated by me.
I am new to php and javascript.
So lets start...
What i want to do is parse a variable to an external php form every time a person clicks on text.
For example lets assume that i have the following string echoed $test = "what a beautiful day";
I want when a person clicks on "what" the "phpquery?test=what" to be triggered.
From what i have read javascript can help with that because of the client side scripting logic
Thank you all in advance!
This is usually handed via XMLHttpRequest, usually abstracted via a library that irons out the differences between browsers (bigger libraries that do lots of other stuff include YUI and jQuery).
I would parse the sentence in such a way that each word is encapsulated in a tag. For example:
<span class="clickable">What</span> <span class="clickable">a</span> <span class="clickable">wonderful</span> <span class="clickable">day</span>
than you can bind a click function to each of these spans like so using JQuery
$(document).ready(function() {
$("span.clickable").bind("click", function() {
var wordClicked = $(this).html();
$.get("phpquery?word=" + wordClicked );
});
});
and do as SalmanPK suggested and use the $.get to send the word click to PHP :)
HTH
Yes you will have to do that using AJAX.
Have a look at jQuery, its very easy to learn for newbies.
You can accomplish this with jQuery using this simple piece of code:-
$('a').click(function(){ // You can use a css selector to select your anchor tag
$.get("phpquery?test=what");
});
Ofcourse in most cases XMLHttpRequest would be suitable, but maybe you prefer the simple solution:
window.location.search = "?test=what";
here is an example of how you could achieve the click handling with jQuery, and also how you can do an ajax call (commented out after alert)
http://jsfiddle.net/UgXAH/1/
HTML:
<p class="interactive">this is some text</p>
Javascript:
$().ready(function(){
var textArray = $('.interactive').text().split(' ')
$('.interactive').empty()
$(textArray).each(function(){
var textItem = $('<span>'+this+' </span>')
textItem.click(function(){
var text = $(this).text()
alert('fire off ajax request with text='+text)
/*$.ajax({
url:'some-url.php',
data:{
text:text
}
})*/
})
$('.interactive').append(textItem)
})
})
Related
Following the example here Very Simple jQuery and PHP Ajax Request – Ready to use code
I've been successful in creating a drop down list that passes the value to an external PHP script and returns the HTML output back to a "div" on the same page and it works great.
What I want to do now is post values when I click on link instead of building a drop down list. So ...if I created this link:
Route Number 2
I want "2" passed to that external PHP script and the content changed on the " div " as it currently works with the dropdown. I don't know how to change the javascript to handle this or what "foo.php" really needs to be.
Here's the current javascript from that example:
<script type="text/javascript">
$(document).ready(function() {
$('#route_number').click(function() {
routenumber = $('#route_number').val();
$.post('api.php', { route_number : routenumber }, function(res) {
$("#mainlayer").html(res);
});
});
});
</script>
And here's what the dropdown portion of the HTML looks like:
<select name="route_number" id="route_number">
<option value="notchosen">Please Choose A Route</option>
<option value="2">Riverfront</option>
<option value="11">Magazine</option>
<option value="16">Claiborne</option>
</select>
<div id="mainlayer">
</div>
So, to be clear, instead of a dropdown that passes values, I want to create links that accomplish the same result.
Thanks in advance,
dan -
Create a class, capture its (meaning whatever link you clicked on) value, then post.
<a class="RouteNumber" href="foo.php?route_number=2">Route Number 2</a>
$(function(){
$('a.RouteNumber').on('click',function(event){
// prevent the browser's default action for clicking on a link
event.preventDefault();
// break href attribute into array, then parse desired value as int
var routenumber = $(this).attr('href').split('='),
rtnum = parseInt(routenumber[1]);
$.post('api.php',{route_number:rtnum},function(res){
$("#mainlayer").html(res);
});
});
});
If you don't need to parse the integer out of it (if a string is good enough), you don't need that second variable. You can just use routenumber[1] in the post data.
Just a heads up, I modified the jQuery to use the .on() syntax. .click() is shorthand for it, but I like using .on() just because it allows for less potential codewriting if you want to do more (like mouseenter/mouseleave, for example) because you can combine them into a single codeset.
I had hoped simply fixing #LifeInTheGrey's example would've sufficed, but there are some things I would've done differently that probably need some explaining.
Your HTML could look something like this:
<a class="route" href="foo.php?route_number=2" data-route="2">Route Number 2</a>
The JavaScript would look something like this:
$(function() {
var fill_div_with_response = function(res) {
$("#mainlayer").html(res);
};
var handle_error = function(res) {
alert('something went wrong!');
};
$(document.body).on('click', '.route', function(event) {
// prevent the browser's default action for clicking on a link
event.preventDefault();
// grab route number from data attribute
var route = $(this).data('route');
// make that post request
$.post('api.php', {route_number: route})
// handle the response
.done(fill_div_with_response)
// handle errors
.fail(handle_error);
});
});
The example uses delegated events. They're cheap to initialize and consume the least amount of memory.
The example handles errors. Most answers to questions like these neglect that. errors happen. Always. Make people aware of that. Surely throwing an alert() is not the thing you want to be doing, but it's still better than simply ignoring errors completely.
The example uses Deferreds (Promises) rather than callbacks, as this usually makes code much cleaner.
We're defining the callbacks fill_div_with_response() and handle_error() at the root closure to prevent redefining them on the next click. There's no need to feed the garbage collector.
The data attribute poses the optimal alternative to <option value="123"> in the way that it prevents you from having to parse the href attribute to extract that number from a string.
since you want to make a menu, I would modify your markup
<ul name="route_number" id="route_number">
<li value="2">Riverfront</li>
<li value="11">Magazine</li>
<li value="16">Claiborne</li>
</ul>
then simply process that list:
$('#route_number').find('li').click(function () {
var routenumber = $(this).attr('value');
$.post('api.php', {
route_number: routenumber
}, function (res) {
$("#mainlayer").html(res);
});
});
EDIT1: As an improvement (as you seem to be pretty new to this stuff) you could use the data with altered markup as such:
<ul name="route_number" id="route_number">
<li data-routenumber="2">Riverfront</li>
<li data-routenumber="11">Magazine</li>
<li data-routenumber="16">Claiborne</li>
</ul>
Then the code would be:
$('#route_number').find('li').click(function () {// add click event manager to each li
var routenumber = $(this).data('routenumber');// get routenumber of clicked
$.post('api.php', {
route_number: routenumber
}, function (res) {
$("#mainlayer").html(res);
});
});
Alternate code using .on() form
$('#route_number').on('click, 'li', function () {//click event manager for ul/li
var routenumber = $(this).data('routenumber');// get routenumber of clicked
$.post('api.php', {
route_number: routenumber
}, function (res) {
$("#mainlayer").html(res);
});
});
Note that this last form binds to the #route_number element so you could add more menu options during processing and they would still work. This is also better than attachment to the document as it is a more focused approach to the event attachment.
My understanding of your question is that the functionality you have is fine, and you just need to change the look to a piece of text from a dropdown. If so, good news! You can keep (almost) the same JavaScript.
Right now, your JavaScript is getting the value of your select box, sending it via AJAX, and using the returned value. The only change you need is to get the 'value' of the text clicked.
You don't want to use a link, since that's designed to take the user someplace. Instead you can use a span and format it to look like a link, or even a button if you want that kind of look.
You will also need to change $('#route_number').val();, probably to something passed by the click event. For example:
<span id="route1" class="routeSpan" onclick="sendVal(1)">Route 1 Name</span>
<span id="route2" class="routeSpan" onclick="sendVal(2)">Route 2 Name</span>
And your JavaScript:
function sendVal(routeVal) {
$.post('api.php',{route_number:routeVal},function(res){
$("#mainlayer").html(res);
});
}
I'm currently working on a website and I would like to be able to do the following:
when clicking one of the links from the sideMenu the only thing I would like to change would be the content of my contentMain div and nothing else(page layout/design/etc)
Could anybody give me some general pointers on how I could achieve this in php?
Thank You in advance :D
This is a client-side change that cannot be accomplished using PHP. PHP is evaluated on the server-side, so once the page is loaded for the user, it has no control over what the user sees (unless you use client-side code to call PHP).
To accomplish this, you will need to use Javascript and/or jQuery.
Reference: https://developer.mozilla.org/en/JavaScript/
jQuery: http://jquery.org/
iFrame, frameset or AJAX all work for your case depending on what you are actually trying to achieve.
For AJAX calls (the most modern way out of the three that relies on Javascript) you can use a library such as jQuery.
http://api.jquery.com/category/ajax/
You can use ajax for this one. Using jQuery to detect the click on the link or use normal JavaScript onClick function. Then do the things like you want.
<a href="" id="my_link">My link<a>
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery('#my_link').click(function(){
jQuery.ajax({
url: 'ajax page need to be called',
success: function(data) {
//do your operations on success
}
});
});
});
</script>
You can get more details on :
jQuery
jQuery Ajax
Hope this helps you
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,
This is the second time I ask this question because in my first try I was totally misunderstood.
php, jQuery, Lightbox, Ajax GET and POST issue
What I am trying to achieve is simply to get the selected value from a dropdown list and send that by an ajax function to a php file that will run the necessary functions. So let's say I select Africa/Accra as timezone, onclick the ajax function is called and that will pass the data to the php file that will do the rest. No page refresh, nothing, just getting the data and send that with ajax. Is this possible? please to better understand me see my first try (link above).
I am not an experienced PHP programmer. I do not know about anything of Ajax, so propably I have just done everything wrong..so forgive me. Thanks
this is what you want:
$("#submitButton").click(function(){
var selectedValue = $("#IdOfDropdown").val();
$.get("test.php", { timezone: selectedValue } , function(data){
alert("Data Loaded: " + data);
});
return false;
});
You can also do a post instead of a get, here is a reference with a bunch of jquery ajax stuff
http://api.jquery.com/category/ajax/
To get the value you could use Javascript or Jquery.
In javascript you can say:
var selectedValue = document.getElementById("selectId");
selectedValue.options[selectedValue.selectedIndex].value;
Afterwards try and see how these guys do it:
AJAX TO PHP
This is one way to do it. The AJAX call could look different, but try and se if this solves your problem. :)
//Gerner
I am developing a web-page in PHP that needs following functionality:
1. When User click on "Say Thanks" it should be changed with "Done!".
2. At the same time I want to call an action in indexController.
3. At this time I want to show "loading...."
4. The current page has a lot of dynamic contents that should also not change.
Please suggest me what should I do to complete above tasks......
I figure you need an AJAX call. I usually do that for loading comments and such when you press "more". In my case, there's an empty div and an <a> tag with the link to the comments view (with a separate action, ofc). Then I use jQuery for the AJAX magic:
$(function() {
$("a.CommentsListBtn").click(function() {
var tmpHref = $(this).attr("href");
var tmpLayer = $(this).parent().children("div.CommentsList");
tmpLayer.load(tmpHref, function() {
tmpLayer.stop().slideDown("medium");
});
return false;
});
});
I hope this helps.
Learn to use JQuery, JQuery UI. It isn't that hard! What I think you need to learn is the following for your problem:
.click()
.html()
jQuery.get()