Develop Reference

Having issue while counting clicks of view number using php and javascript

Am having a issue while counting clicks for viewed numbers. Its working but when i refresh the page then also its updating the database and on click its not updating or inserting.
What i want is that when a user clicks on button, it shows the phone numbers and insert the database in increment.
Code below:
<script type='text/javascript'>
$(document).ready(function(e) {
$('#viewNumber').click(function(showNumber){
document.getElementById('showNumber').style.display = 'block';
document.getElementById('viewNumber').style.display = 'none';
<?php
$countcheck=0;
$checkcounter="SELECT * FROM seo_viewnumber_count WHERE seo_user_id='".$user_id."'";
$resultcheckcounter= mysql_query($checkcounter);
while($rowcheckcounter= mysql_fetch_array($resultcheckcounter))
{
$clickcount= $rowcheckcounter['seo_viewmob_count'] + 1;
$updatecounter="UPDATE viewnumber_count SET seo_viewmob_count='".$clickcount."' WHERE seo_user_id='".$user_id."'";
$resultupdatecounter= mysql_query($updatecounter);
$countcheck++;
}
if($countcheck==0)
{
$insertcounter="INSERT INTO viewnumber_count (seo_user_id, seo_viewmob_count) VALUES ('".$user_id."', '1')";
$resultinsertcounter= mysql_query($insertcounter);
}
?>
});
});
</script>
<button name="viewnumber" id="viewNumber" onclick="showNumber()" class="btn">View Number</button>
<ul id="showNumber" style="display:none;">
<li> 123456</li>
<li> 88888</li>
</ul>

Create a different PHP file for your following code:
<?php
$countcheck=0;
$checkcounter="SELECT * FROM seo_viewnumber_count WHERE seo_user_id='".$user_id."'";
$resultcheckcounter= mysql_query($checkcounter);
while($rowcheckcounter= mysql_fetch_array($resultcheckcounter))
{
$clickcount= $rowcheckcounter['seo_viewmob_count'] + 1;
$updatecounter="UPDATE viewnumber_count SET seo_viewmob_count='".$clickcount."' WHERE seo_user_id='".$user_id."'";
$resultupdatecounter= mysql_query($updatecounter);
$countcheck++;
}
if($countcheck==0)
{
$insertcounter="INSERT INTO viewnumber_count (seo_user_id, seo_viewmob_count) VALUES ('".$user_id."', '1')";
$resultinsertcounter= mysql_query($insertcounter);
}
Then, call that PHP file by AJAX from your client side code when any click will happen by user on button.
Sample jQuery code for making AJAX call:
$.ajax({
method: "GET",
url: "server.php",
})
.done(function( msg ) {
alert( "Counter incremented: ");
});

LiveFilter in divs

I'v got a question about LiveFilter. Or how to make it in another way without LiveFilter it is not so important. So iv got the page and got divs which are making from JSON file. And my filter is not working. So i got my page like this Before And when im start searching by the name or number it should be like this AfterShouldBe
So im using jquery.livefilter.js
<script> // Reading DATA from JSON
$(document).ready(function(){
$.getJSON("accounts.json", function(data){
$.each(data, function(key, value){
$("#main_list").append(
buildRow(value.name
,value.number
,value.city,value.amount,value.currency,value.rate)
);
});
});
});
</script>
<script>
$(function(){
$('#livefilter-list').liveFilter('#livefilter-input', 'li', {
filterChildSelector: 'a'
});
});
</script>
<script> // Making divs from JSON
function buildRow(a,b,c,d,e,f){
return '<ul id="livefilter-list"><div class="deposit-small-block first-block size-small-block tt" onclick="view(\'t1\'); return false">\
<div class="button_block">\
<div class="div-for-button">\
<input type="radio" name="on">\
</div>\
</div>\
<div class="deposit-form-block-name">\
<div class="deposit-form-block-name-first white-text"><name><li>'+a+'</li></name></div>\
<div class="deposit-form-block-name-second white-text"><number><li>'+b+'</li></number></div>\
<div class="deposit-form-block-name-third white-text"><city>'+c+'</city></div>\
</div>\
<div class="deposit-form-block-sum">\
<div class="deposit-form-block-sum-text white-text">\
<amount>'+d+'</amount><br><currency>'+e+'</currency>\
</div>\
</div>\
<div class="deposit-form-block-perc">\
<div class="deposit-form-block-sum-text white-text"><rate>'+f+'</rate></div>\
</div>\
</div>\
</ul>'
}
</script>
So could someone tell me where is the problem
And here is my rar with files (html, css, js, json)

Forget about liveFilter.js...
Your HTML is too complex for it.
I made a pretty small script for you.... Customized for your web page.
How it works:
On the input event, hide all rows.
Then search the inputted value within <name>, <number> and <city> content... For each rows, using the JavaScript method .indexOf().
If the search term is found, this row must be displayed.
// Custom search
$("#livefilter-input").on("input",function(){
//console.log("Searching...");
// Set ALL rows to display none.
$(".deposit-small-block").css("display","none");
// Loop to check the content of all custom tags: <name> <number> and <city>
$(".tt").find(".deposit-form-block-name .white-text").children().each(function(){
// If a matching text is found within name, account # or city
if( $(this).html().indexOf( $("#livefilter-input").val() ) != -1 ){
//console.log("FOUND a match!");
// Set this row to display block.
$(this).closest(".deposit-small-block").css("display","block");
}
});
});
Place it inside the document ready wrapper, just below the $.getJSON function.
Live link!
EDIT:
For case insensitive search:
Only one line to change:
if( $(this).html().toLowerCase().indexOf( $("#livefilter-input").val().toLowerCase() ) != -1 ){

JQuery: Post variable to the second file, and when the enter key pressed, the web will direct me to the first search result page

I created an instant search similar to google search using JQuery.
Q1.
The post to search.php using search function searchq() then print out the returned result works fine, but the createq() function doesn't work at all, it didn't triggered when I using alert() to test, any ideas on how to fix it so the variable txt could be post to create_object.php (which has been post successfully to search.php).
Q2
I want to create a function that allow the user to direct to the first search result(which is anchored with an url) when the enter is pressed, any idea how to achieve this? I tried something but it messed up.
Note that I didn't include the connect to database function here. Coz I think the database username and password setting would be different to yours.So please create your own if you want to test it. The mysql is set with a table is called "objects", and it has one column named "name".
Thanks in advance!
<html>
<!-- google API reference -->
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.3/jquery.min.js"></script>
<!-- my own script for search function -->
<center>
<form method="POST">
<input type="text" name="search" style="width:400px " placeholder="Search box" onkeyup="searchq();">
<input type="submit" value=">>">
<div id="output">
</div>
</form>
</center>
<!-- instant search function -->
<script type="text/javascript">
function searchq(){
// get the value
var txt = $("input").val();
// post the value
if(txt){
$.post("search.php", {searchVal: txt}, function(result){
$("#search_output").html(result+"<div id=\"create\" onclick=\"creatq()\"><br>Not found above? Create.</div>");
});
}
else{
$("#search_output").html("");
}
};
function createq(){
// allert for test purpose
alert("hi");
$.post( "create_object.php",{creatVal:txt} );
}
</script>
</html>
PHP file (search.php)
<?php
if(isset($_POST["searchVal"])){
//get the search
$search=$_POST["searchVal"];
//sort the search
$search=preg_replace("#[^0-9a-z]#i","",$search);
//query the search
echo "<br/>SELECT * from objects WHERE name LIKE '%$search%'<br/>";
$query=mysqli_query($conn,"SELECT * from objects WHERE name LIKE '%$search%'") or die("could not search!");
$count=mysqli_num_rows($query);
//sort the result
if($count==0){
$output="there was no search result";
}
else{
while($row=mysqli_fetch_assoc($query)){
$object_name=$row["name"];
$output.="<div><a href='##'".$object_name."</a></div>";
}
}
echo $output;
}
?>
php file (create_object.php)
<?php
if(isset($_POST["createVal"])){
$name=$_POST["createVal"];
var_dump($name);
}
?>

Two questions in one!
Q1: The problem appears to be a misspelling in the onclick function:
onclick=\"creatq()\"
should be
onclick=\"createq()\"
Q2: Pressing enter will submit the form, so you use the submit handler to catch the enter press then redirect:
$(function() { //shorthand document.ready function
$('form ').on('submit', function(e) { //use on if jQuery 1.7+
e.preventDefault(); //prevent form from submitting
$url = $('#search_output div:first a').attr('href'); // find first link
window.location.href = $url; // redirect
});
});
(credit to this answer for most of the work)

How to show a message status below the rate button in jquery?

I have a rate button on my page, created using PHP and jQuery.
When the button is clicked, a message is shown and hidden after a while "#num voted including you"
HTML:
div class="voting_wrapper" id="1001">
<div class="voting_btn">
<div class="up_button"> </div>
<span class="up_votes"></span>
</div>
</div>
jQuery:
$(document).ready(function() {
//####### on page load, retrive votes for each content
$.each( $('.voting_wrapper'), function(){
//retrive unique id from this voting_wrapper element
var unique_id = $(this).attr("id");
//prepare post content
post_data = {'unique_id':unique_id, 'vote':'fetch'};
//send our data to "vote_process.php" using jQuery $.post()
$.post('vote_process.php', post_data, function(response) {
//retrive votes from server, replace each vote count text
$('#'+unique_id+' .up_votes').text(response.vote_up +' user has voted');
},'json');
});
//####### on button click, get user vote and send it to vote_process.php using jQuery $.post().
$(".voting_wrapper .voting_btn").click(function (e) {
//get class name (down_button / up_button) of clicked element
var clicked_button = $(this).children().attr('class');
//get unique ID from voted parent element
var unique_id = $(this).parent().attr("id");
if(clicked_button==='up_button') { //user liked the content
//prepare post content
post_data = {'unique_id':unique_id, 'vote':'up'};
//send our data to "vote_process.php" using jQuery $.post()
$.post('vote_process.php', post_data, function(data) {
//replace vote up count text with new values
$('#'+unique_id+' .up_votes').text(data);
//thank user for liking the content
dataModified = data+' users has voting including you';
$('#message-status').hide().html(dataModified).fadeIn('slow').delay(5000).hide(1);
}).fail(function(err) {
//alert user about the HTTP server error
alert(err.statusText);
});
}
});
//end
});
It works fine, but placement of the message is incorrect. When I click the button, that message status shows up at the top of the page, while I need it to be shown below the rate button.
May I know how to add the code to achieve this? I think I could use append(); but I am struggling where and how to add the script. Can anyone help me?
Thanks in advance.

The reason why is that, is probably because the #message-status element is initially placed outside of the voting_wrapper element. You could move #message-status inside that wrapper, below the .voting_btn button using .insertAfter()
$('#message-status').hide().html(dataModified).insertAfter('#'+unique_id+' .voting_btn').fadeIn('slow').delay(5000).hide(1);
So that after AJAX call, your HTML becomes:
<div class="voting_wrapper" id="1001">
<div class="voting_btn">
<div class="up_button"> ddd</div>
<span class="up_votes">X</span>
</div>
<div id="message-status">X users has voting including you</div>
</div>
[EDIT]
If you need the message below the whole voting_wrapper, use this:
$('#message-status').hide().html(dataModified).insertAfter('#'+unique_id).fadeIn('slow').delay(5000).hide(1);

try replacing your code,
$('#message-status').hide().html(dataModified).fadeIn('slow').delay(5000).hide(1);
with this
$('#message-status').css({
'position': 'absolute',
'left': $(this).offset().left,
'top': $(this).offset().top + $(this).height() + 5
}).hide().html(dataModified).show("slow").delay(3000).hide("slow");

Best way to pass JS/ css info to a form

I am sure this is so easy and I'm just a huge huge noob. I have a form on a PHP page, and it has a few normal form elements (1 textarea, 1 text field).
I am also dynamically adding 100 small images to the page, which are random, and I am using JQuery to let someone select or deselect these images:
Here is the html that loops 100 times to display the images:
<div class='avatar'><img class='avatar_image' src='$this_profile_image' name='$thisfriend'></div>
and here is the Jquery:
<script type="text/javascript">
$(document).ready(function() {
$(".avatar_image").click(function() {
$(this).toggleClass("red");
});
});
</script>
What I want to do is, when the form is submitted, have the script that processes it be able to tell which of those 100 images is selected (so it's class will be "red" instead of "avatar_image"). I am blanking on this.

You'll need to add hidden inputs with some kind of identifiers for those images, and toggle the state of those inputs based on the image selected-ness. Something like this:
Change your image markup:
<div class='avatar'>
<img class='avatar_image' src='$this_profile_image' name='$thisfriend'>
<input type="hidden" name="avatar_image[]" value="$this_profile_image" disabled="disabled" />
</div>
Change jQuery binding (and use event delegation, maybe pick a better container than document.body):
<script type="text/javascript">
$(function() {
var selClass = 'red';
$(document.body).on('click', ".avatar_image", function() {
var $this = $(this);
var $inp = $this.siblings('input[type="hidden"]');
var isSelected = $this.hasClass(selClass), willBeSelected = !isSelected;
$this.toggleClass(selClass);
if(willBeSelected) {
$inp.removeAttr('disabled');
} else {
$inp.attr('disabled', 'disabled');
}
});
});
</script>
Read the submitted data in PHP (assuming you're submitting via a POST form):
$selectedImages = $_POST['avatar_image'];

Add a ID to each image, when its clicked grab the id and then inject it into a hidden textfield
<input type="hidden" name="avatar" id="avatar" value="" />
$(".avatar_image").click(function() {
$(this).toggleClass("red");
//assign its id to the hidden field value
$("input[name='avatar']").attr('value', $(this).attr('id'));
// pass that to your DB
});
I presume your using ajax to grab this data back
success : function(callback){
$("image[id*='"+callback.avatar+"']").addClass('red');
}

Try this
PHP: Add the id for the friend to the html you had
<div class='avatar'>
<img class='avatar_image' src='$this_profile_image' name='$thisfriend' data-id='$thisFriendsId>
</div>
JS: Create an empty array. Use each function to go through push the selected id into your array. Then use post to submit to your php.
selected = [];
$(function(){
$(".avatar_image").click(function() {
$(this).toggleClass("red");
});
$('.submit').click(function(){
$('.red').each(function(){
var selectedId = $(this).data('id');
selected.push(selectedId);
});
$.post ('http://mysite.com/process.php', selected, function() { alert('succes!'); });
});
​});​