i want a kind Like Button on my Page. I have News and there should be a "hooah!" link (maybe you know it from Battlelog, if you are a gamer) that update my Db via a update.php. Updating is fine but i don´t want the whole page reloaded to show the actual "Hooahs".
At the moment is use a Form to transmit the data - i transformed the Submit-Button that it looks like a Link ...
now my problem :
I want it like "battlelog" you click and then the text shows "5 Persons gave a hooah!"
it is possible to use the Hooah! from "5 Persons gave a hooah!" as link? and when clicked it changes to "6 Persons gave a hooah!".
my script :
<script>
$(document).ready(function () {
$('#ajax_form{newsid}').bind('submit', function() {
var form = $('#ajax_form{newsid}');
var data = form.serialize();
$.post('index.php?hooah_update', data, function(response) {
document.location.reload();
});
return false;
});
});
</script>
the form:
<div style="position: relative; top: -16px; left: 515px;">
<form method="post" id="ajax_form{newsid}" action="#">
<input type="hidden" name="id" value="{newsid}">
<input type="submit" name="submit" value="hooah!" style="background:none; border:0; color:#0099ff; cursor:pointer;">
</form>
</div>
thx for taking a look ;)
You seem to be almost there. Instead of:
document.location.reload();
You would need something like:
$("#your_div").html(response);
The php script would have to echo out the text you want.
I think it's better to add 1 count on the client side rather than show the actual "Hooahs" count.
Imagine that you open the page and it shows "5 Persons gave a Hooah!",
Before you click the "Hooah!" button there's 10 other people gave hooahs.
now you click the button, I think it's better to update the count to 6 than to 16 after just one click by you.
Don't worry about the actual count because it will show 16 when you refresh the whole page.
$.post('index.php?hooah_update', data, function(response) {
if(response.success) {
$('span#count').text(parseInt($('span#count').text()) + 1);
// Change Hooah to Hooahs
if(parseInt($('span#count').text() > 1) {
$('span#hooah').text('Hooahs');
}
}
});
Related
I have search on stackover-flow about my question, but could not get a suiting answer. I have boxes generated by a loop from my back end code. this boxes a to be destroy after a countdown on the individual boxes. The time frame is supplied along side with the content of the boxes form the back end. Now depending on result from my back end code the boxes can be 10 or a million as the case may be. So i ran a jquery countdown timer on each of them in the loop. the problem there is that the countdown of the first box is used on all the rest boxes, so when the timer of the first comes to an end the destruction commands affect all the boxes.
below is an example of what am doing using laravel blade syntax.
#forelse($boxe_deatails as $box_detail)
<div class="box-v2-detail-o">
<div class="col-md-16 col-xs-6 pull-right" style="background: rgba(110, 151, 170, 0.57);min-width: 100%;min-height: 73px;float: right;padding: 10px;font-size: small;line-height: 2em;margin: 5px;">
Timer to Run
<div id="timer">
#include('partials/count-timer')
</div>
</div>
<img style="width: 60px;height: 60px;border: 3px solid #fff;" src="{{asset('asset/img/avatar.jpg')}}" class="img-responsive"/>
<h4>Name {{$box_detail->name}} </h4>
<big>Size {{ $box_detail->size}} </big>
</div>
#empty
hello Empty
#endforelse
Now that is the loop. those data where gotten from my database.
count-timer file am using jquery.countdown-2.2.0
so all i have to do is select the targeted dom element and run the timer animation on it.
<script type="text/javascript">
$('body').find("div#timer").countdown('{{$box_detail->created_at->addHours(13)}}', {elapse:true}).on('update.countdown', function(event) {
$(this).text(event.strftime('%H Hr(s) : %M Min(s) : %S Sec(s)'));
if (event.elapsed) {
$.ajax({
url : '{{url('/timer-delete-box/'.$box_detail->id)}}',
method : 'get',
success : function(response)
{
alertify.notify('You did not make your payment before time. So your account has been pause', 'error', 9)
}
})
}
});
</script>
so now the problem again is that the count down for the first box is use on all the boxes even when there timer are different i want the timer to run on each boxes. again the timer function for the first one is repeated on all the boxes whereas the time from the loop are different. When you view it you see a uniform time which is very wrong. Please someone should help me fix it .
Now i know the problem is that the function is running just once so how do call it multiple times base on the loop count.
I think if Implement the answer to your question it should look as this.
$('div#timer').each(function() {
var $this = $(this),
finalDate = '{{$box_detail->created_at->addHours(13)}}';
$this.countdown(finalDate, {elapse:true}).on('update.countdown', function(event) {
$this.text(event.strftime('%H Hr(s) : %M Min(s) : %S Sec(s)'));
if (event.elapsed) {
$.ajax({
url : '{{url('/time-pause-account/'.$Topay->id)}}',
method : 'get',
success : function(response)
{
alertify.notify('You did not make your payment before time. So your account has been pause', 'error', 9, function(){
$('body').css({
'opacity' : '0',
'transition' : 'all 1s'
})
$('body').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend', function(){
window.location = 'home'
})
})
}
})
}
});
});
I have found the solution to the problem what i have to do is use the each j-query loop for the boxes. which i did initially before asking this question however i was concatenating the countdown to the each function until i saw the documentation of the countdown timer for multiple instance. they still use the each loop but however did not concatenate the countdown obj to it. Link to the answer of my question
I want to be able to change the text of some pages. Using contenteditable would be perfect for me.
Problem is that I only know how to program in PHP. I have searched on the internet for hours trying to make it work, but I just don't understand the programming languages used to store the data enough to make it work.
This is how I would like it to work:
Admin hits a button 'edit'
div becomes editable.
When the admin is ready editing, he hits a button 'save'
The data is saved to a file or database (don't really know what would be the best option).
The edited content shows up when the page is opened.
This is all I have for now:
<div class="big_wrapper" contenteditable>
PAGE CONTENT
</div>
I know how to make the part with converting the div to an contenteditable div when the admin hits 'edit'.
My problem is that i really have no idea how to save the edited data.
I also don't know if it would be hard to retrieve the data from a file, depents on the way how the data is saved. If it is saved to a database I would have no problem retrieving it, but I don't know if that is possible and if that is the best option.
Thanks for your help,
Samuël
EDIT:
#gibberish, thank you so much for your super-quick reply!
I tried to make it work, but it doesn't work yet. I can not figure out what i'm doing wrong.
Here's my code:
over_ons.php:
<div class="big_wrapper" contenteditable>
PAGE CONTENT
</div>
<input type="button" value="Send Data" id="mybutt">
<script type="text/javascript">
$('#mybutt').click(function(){
var myTxt = $('.big_wrapper').html();
$.ajax({
type: 'post',
url: 'sent_data.php',
data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
});
});
</script>
sent_data.php:
<?php
session_start();
include_once('./main.php');
include($main .'connectie.php');
$tekst=$_POST['myTxt'];
$query="UPDATE paginas SET inhoud='" .$tekst. "' WHERE id='1'";
mysql_query($query);
?>
Thanks again for your great help!
Can you also help me to make the div editable only when the user hits a button?
SOLUTION:
It took me over 2 weeks to finally make everyting work. I had to learn javascript, jQuery and Ajax. But now it works flawlessly. I even added some extras for the fanciness :)
I would like to share how i did this if someone wants to do the same.
over_ons.php:
//Active page:
$pagina = 'over_ons'; ?>
<input type='hidden' id='pagina' value='<?php echo $pagina; ?>'> <!--Show active page to javascript--><?php
//Active user:
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin'){
$editor = $_SESSION['gebruikersnaam']; ?>
<input type='hidden' id='editor' value='<?php echo $editor; ?>'> <!--Show active user to javascript--><?php
} ?>
<!--Editable DIV: -->
<div class='big_wrapper' id='editable'>
<?php
//Get eddited page content from the database
$query=mysql_query("SELECT inhoud FROM paginas WHERE naam_pagina='" .$pagina. "'");
while($inhoud_test=mysql_fetch_array($query)){
$inhoud=$inhoud_test[0];
}
//Show content
echo $inhoud;
?>
</div>
<!--Show edit button-->
<?php
if(isset($_SESSION['correct_ingelogd']) and $_SESSION['functie']=='admin')
{?>
<div id='sidenote'>
<input type='button' value='Bewerken' id='sent_data' class='button' />
<div id="feedback" />
</div>
<?php }
As this is a pretty long and complicated file, I tried to translate most of my comments to english.
If you want to translate something that in't already translated, the original language is Dutch.
javascript.js:
//If the system is in edit mode and the user tries to leave the page,
//let the user know it is not so smart to leave yet.
$(window).bind('beforeunload', function(){
var value = $('#sent_data').attr('value'); //change the name of the edit button
if(value == 'Verstuur bewerkingen'){
return 'Are you sure you want to leave the page? All unsaved edits will be lost!';
}
});
//Make content editable
$('#sent_data').click(function(){
var value = $('#sent_data').attr('value'); //change the name of the edit button
if(value == 'Bewerken'){
$('#sent_data').attr('value', 'Verstuur bewerkingen'); //change the name of the edit button
var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div editable
$div.prop('contenteditable',!isEditable).toggleClass('editable')
$('#feedback').html('<p class="opvallend">The content from<BR>this page is now<BR>editable.</p>');
}else if(value == 'Verstuur bewerkingen'){
var pagina = $('#pagina').val();
var editor = $('#editor').val();
var div_inhoud = $("#editable").html();
$.ajax({
type: 'POST',
url: 'sent_data.php',
data: 'tekst=' +div_inhoud+ '&pagina=' +pagina+ '&editor=' +editor,
success: function(data){
Change the div back tot not editable, and change the button's name
$('#sent_data').attr('value', 'Bewerken'); //change the name of the edit button
var $div=$('#editable'), isEditable=$div.is('.editable'); //Make div not editable
$div.prop('contenteditable',!isEditable).toggleClass('editable')
//Tell the user if the edditing was succesfully
$('#feedback').html(data);
setTimeout(function(){
var value = $('#sent_data').attr('value'); //look up the name of the edit button
if(value == 'Bewerken'){ //Only if the button's name is 'bewerken', take away the help text
$('#feedback').text('');
}
}, 5000);
}
}).fail(function() {
//If there was an error, let the user know
$('#feedback').html('<p class="opvallend">There was an error.<BR>Your changes have<BR>not been saved.<BR>Please try again.</p>');
});
}
});
And finally,
sent_data.php:
<?php
session_start();
include_once('./main.php');
include($main .'connectie.php');
//Look up witch page has to be edited
$pagina=$_POST['pagina'];
//Get the name of the person who eddited the page
$editor=$_POST['editor'];
//Get content:
$tekst=$_POST['tekst'];
$tekst = mysql_real_escape_string($tekst);
$query="UPDATE paginas SET naam_editer='" .$editor. "', inhoud='" .$tekst. "' WHERE naam_pagina='" .$pagina. "'";
}
if(mysql_query($query)){
echo "<p class='opvallend'>Successfully saves changes.</p>";
}else{
echo "<p class='opvallend'>Saving of changes failed.<BR>
Please try again.</p>";
}
?>
Use a client-side language, such as JavaScript (or best, jQuery), to manage whether the input boxes could be edited.
Use AJAX to grab the field data and fire it off to a PHP file, which would stick the data in your database.
Here is a very simplified example of using jQuery to manage enabling/disabling the input fields:
jsFiddle Demo
$('.editable').prop('disabled',true);
$('.editbutt').click(function(){
var num = $(this).attr('id').split('-')[1];
$('#edit-'+num).prop('disabled',false).focus();
});
$('.editable').blur(function(){
var myTxt = $(this).val();
$.ajax({
type: 'post',
url: 'some_php_file.php',
data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
});
});
PHP file: some_php_file.php
<?php
$myVar = $_POST['varname'];
$secondVar = $_POST['anothervar'];
//Now, do what you want with the data in the vars
Using AJAX is quite easy. I gave a very brief example of what it would look like. Don't look in the HTML or jQuery for the moreTxt variable -- I added that to show how you would add a second var of data to the ajax.
Here are some basic examples to bring you up to speed on ajax:
AJAX request callback using jQuery
There is no short path to learning jQuery or AJAX. Read the examples and experiment.
You can find some excellent, free jQuery tutorials here:
http://thenewboston.com
http://phpacademy.org
UPDATE EDIT:
To respond to your comment inquiry:
To send data from a DIV to a PHP file, first you need an event that triggers the code. As you mentioned, on an input field, this can be the blur() event, which triggers when you leave a field. On a <select>, it can be the change() event, which triggers when you choose a selection. But on a DIV... well, the user cannot interact with a div, right? The trigger must be something that the user does, such as clicking a button.
So, the user clicks a button -- you can get the content of the DIV using the .html() command. (On input boxes and select controls, you would use .val(), but on DIVs and table cells you must use .html(). Code would look like this:
How to send DIV content after a button clicked:
HTML:
<div class='big_wrapper' contenteditable>
PAGE CONTENT
</div>
<input id="mybutt" type="button" value="Send Data" />
jQuery:
$('#mybutt').click(function(){
var myTxt = $('.big_wrapper').html();
$.ajax({
type: 'post',
url: 'some_php_file.php',
data: 'varname=' +myTxt+ '&anothervar=' +moreTxt
});
});
You could save the whole
page clientside with this:
<script>
function saveAs(filename, allHtml) {
allHtml = document.documentElement.outerHTML;
var blob = new Blob([allHtml], {type: 'text/csv'});
if(window.navigator.msSaveOrOpenBlob) {
window.navigator.msSaveBlob(blob, filename);
}
else{
var elem = window.document.createElement('a');
elem.href = window.URL.createObjectURL(blob);
elem.download = filename;
document.body.appendChild(elem);
elem.click();
document.body.removeChild(elem);
}
}
</script>
hth
I am failing hardcore with describing this but here it goes..
I have home.php, pretty much just:
<body>
<div id='leftColumn'>
<?php include ('includes/roomQuery.php')
</div>
</body>
Now,
roomQuery.php echos my sql column 'room_name' from table 'rooms' as follows:
echo "<td>$roomName</td>";
Any of the room links will take me to room.php and populate the page with more queries respective to $roomName via $_GET.
room.php is basically:
$get = $_GET['room'];
$query
while($row = $result->fetch_assoc()){
echo $query
This is working perfectly for what it is.
====================================
however, I am trying to make my site flow better, and have been trying out the jQuery .load function. So far I have changed roomQuery.php to:
echo "<td><button>$roomName</button></td>";
here is my jQuery to replace home.php #page with room.php #page:
$(document).ready(function(){
$("button").click(function(){
$("#page").load("room.php #page",function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("Success");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
});
});
});
When I click any of the buttons that roomQuery.php spits out, it replaces #page perfectly but I cannot grasp how/if I can send $_GET['room'] to room.php so that when #page is loaded, the information is still respective to the room I clicked on. If I change jQuery to
$("#page").load("room.php?room=CL%20124 #page"
Then #page is populated with the data specifically respective to room CL 124. Is it possible to post the button text that is output from roomsQuery.php to room.php #page when the button is clicked?
Yes, you can pass data into the .load() call as the second parameter.
Firstly, you need to work out how to get the room ID from the DOM into your jQuery call, maybe you could use a data attribute on the button element like this:
<button data-room-id="123">Click me</button>
Then use jQuery like this:
$("button").click(function(){
// define your room ID here, however you do it
var your_room = $(this).data('room-id');
$("#page").load(
"room.php #page",
{
room: your_room
},
function(responseTxt,statusTxt,xhr){
if(statusTxt=="success")
alert("Success");
if(statusTxt=="error")
alert("Error: "+xhr.status+": "+xhr.statusText);
}
);
});
Edit: just noticed that you might actually be using the button's value as your room ID, if so, use this definition:
var your_room = $(this).val();
If you're expecting spaces or non-alpha numeric characters in this value, you might want to consider URL encoding it before you send it.
I have a page with text displayed in divs and spans. Next to each one I have an image that the user can click on.
When they click this image I need the text to change to a text area so the user can edit the text and then when they click of it it will need to call a php script to save to DB via ajax.
All divs and images have unique ID's so this should make it easier with the jquery selector.
Can anyone help? Everything I have tried so far is not really worked.
Thanks
You could make the div editable:
$(".ajax-div .on-img").on("click",function(ev) {
$(this).parent().find(".editable-text").attr("contenteditable", "true").after("<button onclick='saveEdits()'>Save</button>");
})
Your html structure would have to look like this
<div class="ajax-div" id="somediv">
<div class="editable-text">Editable text</div>
<img class="on-img" src="" alt="">
</div>
The saveEdits() function:
function saveEdits() {
$(".ajax-div").each(function() {
if(this.hasAttr("contenteditable") && this.attr("contenteditable")==true) {
id = $(this).attr("id");
//handle change
}
})
}
Let's say you have:
<div id='mydivparent'>
Some text here
<div>
<img src='images/mypic.jpg' id='mydiv' onclick='editr(this)' />
</div>
</div>
To do as your requirements suggest, an approach that would suffice is the below JS code.
<script>
function editr(obj)
{
var id = $(obj).attr('id');
var text = $('#mydiv'+parent).text();
$('#mydiv'+parent).empty();
$('#mydiv'+parent).append('<form action='form_processor.php' onsubmit="send_ajax($('textarea#'+id+').value)"><textarea id='+id+'>'+text+'</textarea><input type='submit' value='Save Text'></form>');
}
function send_ajax(txtValue){
$.ajax({
url: 'form_processor',
cache: false;
type: 'POST',
data: {'text': txtValue},
success: function(){
//Code to add the text to the div and delete the textarea returning it to a normal div
}
});
return false;
}
</script>
You should put in mind how to name the divs and images ids so that accessing a div's id from the image id is easy. You should use your own protocol so that if you have the image ID, you can get the asssociated div id, OR you can put the image inside the div so that it's as easy as selecting the PARENT.
After editing you can then set it up for ajax after the user.
The code is does not fully cover every situation for example if you click another imagebefore saving your first opened textarea but I believe that it will set you to the right road on the approach you should take.
I used jeditable plugin in the end to solve this one for anyone that finds this post
Okay, that's a presumptuous title - it's complex to me.
Overview: (See screenshots and UPDATE at bottom.)
a. On $(document).ready, jQuery/AJAX builds table with one contact per row
b. Each table row, 3rd cell, is: <a id="edit_83">edit</a> tag -- "83" is example and represents the contact_id from db, so each a tag will have a unique id number that is used in step (d)
c. As table being built, construct jqueryui dialog (autoOpen=false) for each contact in AJAX callback
d. when any edit anchor is clicked, jquery splits off the contact_id and uses that to display the appropriate jQueryUI dialog.
Objective: Clicking on edit link in any table row opens a jqueryui dialog with edit form for that contact.
Problem: The form opens, but there are no form fields inside. In fact, in the DOM the injected form/div is missing for each table row. ???
HTML:
<div id="contact_table"></div>
Javascript/jQuery - AJAX call:
$(document).ready(function() {
$.ajax({
type: "POST",
url: "ax_all_ajax_fns.php",
data: 'request=index_list_contacts_for_client&user_id=' + user_id,
success: function(data) {
$('#contact_table').html(data);
var tbl = $('#injected_table_of_contacts');
tbl.find("div").each(function() {
$(this).dialog({
autoOpen: false,
height: 400,
width: 600,
modal: true,
buttons:
{
Okay: function() {
$( this ).dialog( "close" );
},
Cancel: function() {
$( this ).dialog( "close" );
}
}
})
});
}
});
});
AJAX/PHP 1 - ax_all_ajax_fns.php:
}else if ($_POST['request'] == 'index_list_contacts_for_client') {
$user_id = $_POST['user_id'];
$r = build_contact_table_for_client($user_id);
echo $r;
}
AJAX/PHP 2: - functions.php
function build_contact_table_for_client($user_id) {
$aContact_info = get_contact_data_ARRAY_user_id($user_id, 'first_name','last_name','email1','cell_phone', 'contact_id');
$r = '<table id="injected_table_of_contacts">
<tr>
<th width="120">Name</th>
<th width="200">Email Address</th>
<th width="100">Cell Phone</th>
<th>Action</th>
</tr>
';
while ($rrow = mysql_fetch_array($aContact_info)) {
$r .= '
<tr>
<td>'.$rrow['first_name'].' '.$rrow['last_name'].'</td>
<td>'.$rrow['email1'].'</td>
<td>'.$rrow['cell_phone'].'</td>
<td>
<a class="editcontact" id="edit_'.$rrow['contact_id'].'" href="#">edit</a>
/
<a class="delcontact" id="del_'.$rrow['contact_id'].'" href="#">del</a>
<div id="editThisContact_'.$rrow['contact_id'].'" style="display:none">
<form name="editForm" onsubmit="return false;">
<p class="instructions">Edit contact information:</p>
First Name:<span style="padding:0 20px;">Last Name:</span><br />
<input type="hidden" id="fn_'.$rrow['contact_id'].'" value="'.$rrow['first_name'].'">
<input type="hidden" id="ln_'.$rrow['contact_id'].'" value="'.$rrow['last_name'].'">
Email:<span style="padding:0 20px;">Cell Phone:</span><br />
<input type="hidden" id="em_'.$rrow['contact_id'].'" value="'.$rrow['email1'].'">
<input type="hidden" id="cp_'.$rrow['contact_id'].'" value="'.$rrow['cell_phone'].'">
</form>
</div>
</td>
</tr>
';
}
$r .= '</table>';
return $r;
}
jQuery - document.click event - if injected code missing, how is it able to find the selector??
$(document).on('click', '.editcontact', function(event) {
var contact_id = this.id.split( 'edit_' )[1];
var etc = $( '#editThisContact_' + contact_id );
etc.dialog("open");
});
UPDATE - PARTIAL SOLUTION:
The dialog is now appearing - the cancel button was out of place, per this post. However, the injected code has vanished. Nothing else changed - just got the dialog code working by fixing syntax error in placement of cancel button.
In response to the question on my comment on the original post:
You really already know JSON, it stands for JavaScript Object Notation. This is a JSON object:
{"a":1,"b":2,"c":3}
look familiar? JSON is just a fancy name for something we've been using a long time (that may not be 100% true, but it's how I see it.)
The idea is to have the server pass back JSON objects and have your JavaScript create/update HTML based on them. In your scenario, you were having your PHP build multiple HTML dialogs. Instead, you would have your PHP pass back an array of objects each one representing a single row from your table, like so:
{
"records":
[
{
"field a":"value a",
"field b":"value b"
},
// record 2
{
"field a":"value a",
"field b":"value b"
}
]
}
If you were to request that from the server using .getJSON(), jQuery would automatically read that and give you a an object with a .records property that is an array of objects! Now you can use JavaScript to update a single dialog/form on the screen when they click one of the corresponding records.
Note: You could have PHP just pass back an array of objects, but it is best practice to wrap it in an object above. Many times you'll want other info too, for example, when you are doing paginated search results you're going to need to know the total number of records and what page you're on and maybe other data points.
An added benefit of this is that the server is done much faster. You push all of the display logic onto the client's computer, and hence, can server more pages from the same server.
That's a real brief explanation. There are tutorials and examples ALL OVER the web. Any good Ajax app you use online (GMail for example) uses JSON objects instead of passing huge blocks of HTML around. Here are a few links, Google has quite a few more:
http://php.net/manual/en/function.json-encode.php (turn any variable into a JSON string.)
http://www.json.org/example.html
http://www.w3schools.com/json/default.asp
http://www.jsonexample.com/
PHP Example: http://www.electrictoolbox.com/json-data-jquery-php-mysql/
Another PHP Example: http://www.jquery4u.com/json/ajaxjquery-getjson-simple/ (the alternative method for json-data.php in this link is the way to go, the other way is just silly!)
There are also some really good frameworks out there to help out with this process. I'm a huge fan of both backbone.js and spine.js. Both use jQuery, both help you use best practices when building apps (like MVC.)
It's nice when you solve your own question. Not so nice when the answer is a ID-ten-T error.
In the injected HTML, note the type of the input fields (screenshot 1). Change type to type="text", and all works as desired.
When concepts are new, Occam's Razor moves almost beyond reach.
I still don't understand why I can't see the injected markup, though..!