I haven't started on this yet because I'm still pretty new, and I want to be sure there are not any issues with what I'm wanting to accomplish.
In it's simplest form, I want to have a div that will display a text quote that is pulled from a mySQL database. Every 5 seconds, the quote will fade out and the next will fade in.
Is ajax appropriate for this? In more detail, I would have a few functions that would:
pull the first and last name of the
user from the database
Convert that to initials: IE: Joe
Smith would become -J.S.
Pull the place from the database: IE:
Dallas, TX
Pull the quote from the database:
IE: Great Job!
Then it'd populate the div (using a fade in) with
Dallas, TX:
"Great Job!"
-J.S.
My main question is is this a good way to do this? I don't want to use flash for this task. Is there a jQuery plugin that will accomplish this?
Thanks!
This should do the trick.
nb: '#comments' is a span INSIDE your comments div.
nb: 'comments.php' should return the content laid out as you wish it to be shown.
nb: the start param would be used in the limit statement on your db query.
function comments(ccount) {
var ccount = (ccount == 'undefined' ? 1 : ccount);
$.ajax({
url: 'comments.php',
data : {'start': ccount},
success: function(data) {
$('#comments').fadeOut('slow').html(data).fadeIn('slow');
}
});
setTimeout(function(){comments(ccount+1)},5000);
}
then in your docment ready just have
comments();
Related
When a user selects a word in a text on my website (PHP), and then right clicks, i want a jQuery context menu to come up, this can be done by using one of the already existing jQuery context menu plugins.
But besides the options like copy / paste / cut, etc. I also want something to be done with the selected word using PHP. Which, i think, is a little harder.
For example using this script:
$selection = //the selected word or text
$target = //fetch from MYSQL database
$output = array();
while ($row = //fetch $target) {
If ($selection == $row->input) { array_push($output,$row->output); }
}
echo '//menu '.print_r($output).''; // of course not print_r! Just for the example's sake.
Databse example:
(Sorry for the oversized image)
Ok so selecting the word 'lazy' in the example text, and then right clicking, the jQuery box should pop up showing the results from the database extracted by PHP.
Example:
Ok, so i know you can't just combine javascript with PHP and it can only be parsed, but i thought loading an iframe withing the menu, which does the database extraction would do the job by using javascript to set the iframe src containing the selected word in the url.
However, iFrames are not really a nice way to solve this.
The question: How can i do this effectively? Execute this script on right-click and show the database-related content in the menu?
I would need to know the plugin you're using to give you some code examples but, general, I would go about this like this:
There has to be a click handler on the items in the jQuery context menu. Use it to submit an AJAX request to the server when the "selection" term is clicked.
Make sure to give the user some feedback (a loader or spinner)
Put the results into an array server-side.
JSON encode the array and send it as the response (e.g. echo json_encode($output)
JSON.parse(response) on client-side and you now have a JS object with the results
Put those results in the context menu (again, how depends on the plugin you're using)
AJAX is a great way to do what you want.
Here is a simple AJAX example. Note that in the 2nd .PHP file, that is where you put your database lookup etc.
Whatever you echo from the 2nd script is received by the calling javascript (first script again) and can be inserted into your context menu on-the-fly. Here is another example with a very detailed, step-by-step explanation of the process at the bottom of the answer.
I think you have to use Ajax to get JSON from a PHP file, which you would process on the actual page.
I you create a PHP file called test.php, with the following in it:
<?php
echo json_encode(array('time' => time(), 'hour', date('H')));
?>
Then the Javascript:
<script>
$('#curr_menu_entry').click(function() {
$.getJSON('test.php', function(data) {
$.each(data, function(key, val) {
$('#curr_menu_entry').append('<li id="' + key + '">' + val + '</li>');
});
});
});
</script>
Would that work?
listeners:{select:{fn:function(combo, value) {
var attribute = Ext.getCmp('attributes');
var feature = Ext.getCmp('features');
var store = Ext.getStore('product.CategoryAttributeComboBox');
attribute.setValue('');
attribute.setDisabled(false);
attribute.store.load({
params: {id: 5}
});
}}}
Above is my code to load the data to 2nd combo box.But when I click on first combo it does not populate data to 2nd one,and if I select the 1st combo again it loads data to 2nd combo.Dont really find whats is happening with code.Is there something happens with the "mode" feature local or remote.I have setup my mode to local.
A long time ago I was simular issue and write simple plugin for combobox. May be can help for you. See example on github.
Note: "change", "keyup" events not processing, edit if you need it.
Here is another full example of two combo boxes interacting:
http://extjs.wima.co.uk/example/1
Apologies for the ambiguous title, it just goes to show how confused I am with this one.
<a href"page.php?article_id=123&&img_id=img1">change image</a>
The link above is inside a form and is supposed to allow a user to change the image on an article. The functional php side of things is sorted - uploading the image, changing the image etc, but this will require the main form being submitted which is fine for the initial upload - not so much for the edit.
When the user clicks the "change image" link, I would ideally like to process that particular request alone in a different form, then update the parent page. I thought of doing it with a javascript new window popup which would have been ideal, except that I can't figure out how to pass the article_id as well as the img_id to the new popup page but above all... is this the most efficient way of doing this nowadays?
If not, How do I carry out this task? I have thought of ajax, jquery... but the same issue of passing the article_id and img_id still limits me.
I hope all of this makes sense and thanks in advance
ps: An article can have multiple images and article id is dynamic.
ajax sounds good to me.
may be you try something like this (jquery)?!
$.ajax({
type: "POST",
url: "page.php",
data: { article_id: 123, images: { i1: "img1", i2: "img2" } }
}).done(function( msg ) {
alert( "done: " + msg );
});
for further information and examples: http://api.jquery.com/jQuery.ajax/
why cant u receive article_id and img_id?
if you use:
<a href"#" onclick="window.open('page.php?article_id=123&&img_id=img1', 'window1');">edit</a>
u can get article_id and img_id in $_GET
however, this is a oldfashioned way getting this done.
Check this up: http://www.malsup.com/jquery/form/ - jQuery is a prerequisite but plugin allows you to send form elements via ajax, including file fields using simple API and does all heavy lifting for you.
I'm going to do my best explaining this, as I'm fumbling around a bit as it's my first time doing anything like this.
At the beginning of my page I call a function that returns 3 recipe's, I then create variables and assign each with a recipe id:
$meal = builder::buildMealPlan(1200,0,0,0,3);
$id1 = $meal[0][id];
$id2 = $meal[1][id];
$id3 = $meal[2][id];
So I now know the id's of the 3 recipe's that have been chosen by the function, I then display these 3 recipe's in 3 div's:
<div id="meal1"><h2><? print_r($meal[0]); ?></h2></div>
<div id="meal2"><h2><? print_r($meal[1]); ?></h2></div>
<div id="meal3"><h2><? print_r($meal[2]); ?></h2></div>
When any of these div's are clicked it means you don't like that recipe and want a different one, it calls a page with 4 parameters (id1,id2,id3,clicked), basically telling it the 3 recipe's that are currently displayed as well as which one was clicked, so I can find another combination of recipes with 2 of the same id's, as well as the new one:
$(document).ready(function(){
$("#meal1").click(function(){
$.get("testing-01.php?id1=<?echo $id1;? >&id2=<?echo $id2;?>&id3=<?echo $id3;?>&clicked=1", function(result){
$("#meal1").html(result);
});
});
This works great, a proper recipe is selected and the div is refreshed with the new recipe, however my problem is now, if you click any of the div's again, it refreshes with the same recipe over and over again, because my php variables ($id1, $id2, $id3) are always the same value, since the page is never reloaded.
My question: How can I set a javascript variable with the result of my onclick event? Right now the on click event replaces the div with data from:
$.get("testing-01.php?id1=<?echo $id1;? >&id2=<?echo $id2;?>&id3=<?echo $id3;?>&clicked=1
However I need to somehow update the variables that I'm sending in the above statement with new values each time a div is clicked.
If you've read this far, thanks, if I've left important/obvious things out please just let me know and I'll add it in.
EDIT: Ok, I've got it outputting JSON now:
{"mealnumber":1,"id":"69","title":"Protein Packed Meatloaf","description":"This meatloaf is packed with protein to help your muscles grow.","cookingtime":"00:25 ","preptime":"00:10 ","servings":"4.00","rating":"0.000","calories_ps":"205.00","carbohydrate_ps":"7.70","protein_ps":"20.55","fat_ps":"9.64"}
My JS code to try and show that I'm at least reading it correctly:
$(document).ready(function(){
$("#meal1").click(function(){
$.getJSON("testing-01.php?id1="+id1+"&id2="+id2+"&id3="+id3+"&clicked=1", function(data) {
$.each(data.items, function(i, item) {
console.log(item.id);
alert(item.id);
});
});
});
});
However nothing is logged or alerted when I click the div... am I missing something obvious here? I can see in the console that it's calling to the correct page, if I copy and paste the URL I get the json code I pasted above.
Im not sure i understand all you need, but i guess you need to change this 3 ID's in get method.
You could make some simple javascript object that store 3 id's, and rewrite it on success ajax... Buy you need better repsonse then just html... Try json...
$(document).ready(function(){
$("#meal1").click(function(){
$.get("testing-01.php?id1="+SomeJavascriptObject.id1"&id2="+SomeJavascriptObject.id2"&id3="+SomeJavascriptObject.id3"&clicked=1", function(result){
SomeJavascriptObject.id1 =result.returnedID1;
SomeJavascriptObject.id2 = result.returnedID2;
SomeJavascriptObject.id3 = result.returnedID3;
$("#meal1").html(result.html);
});
Maybe this can help you.
Ok I have a table that changes the displayed text once clicked on like the one displayed on http://www.w3schools.com/ajax/ajax_database.asp
I'm trying to update it based on each click.
For example.
Page Load > Load news article 1
onClick 1 > Load news article 2
onClick 2 > Load news article 3
All I want is for it to change based on each click, to a subsequent value. I have a php mysql database script that will pull the data from the database each time called.
The real question: Should I program the php to return a new table data cell with the new
oncLick="showNews($next_number)"
or should I leave that up to the AJAX, before it requests the information, just +1 it up.
I'm new to AJAX programming and not that experienced in PHP. I have searched everywhere and apologize if this is a redundant question. Just point me in the right direction.
write a php function to support to get the content by id. showNews(news ID). and then pass the newid with the ajax request. no need to change the newsid in the PHP.
I'm guessing something like this would be simplest:
var article = 0;
function showNews(){
get_article(article);
// magic
article+=1;
}
To be honest, just pick the way which seems more natural to you. Unless this is only a small part of something huge, it won't matter.
if I understood right, you want to get the next news when clicking on your button...
I suggest you to use jQuery for Ajax request...
It could be like this:
<script type="text/javascript">
$(document).ready(function(){
var result = 0;
$('#myButton').click(function(){
$.post('phpfunction.php',result,function(r){
$(document).append(r);
});
result ++;
});
});
</script>
And in PHP:
<?php
$result_id = $_POST['result'];
//SELECT * FROM WHERE id = $result_id;
?>