here is my html:
<?php echo ($row['status'] == 1)? ?>
<span id='slide_".$row['id']."' name="slid_id" class='label label-danger'>Inactive</span>
<?php : ?>
<span id='slide_".$row['id']."' name="slid_id" class='label label-success'>Active</span>
<?php ; ?>
here is my jquery code:
$(document).ready(function()
{
$("span").click(function()
{
var id = $(":input[name=slide_id]").val();
alert(id);
});
});
i didn't get anything , i want to get the
ID & its dynamic generated value
of the span element and then perform some action like on click i want to change the status from active to inactive or vise versa.
thanks in advance.
var id = $(":input[name=slide_id]").attr('id'); should do the job. .val() only returns the current value of input elements.
Your HTML is missing from the question, but eliminating the colon in your jQuery selector might do the trick in selecting an input field - i.e. $("input[name=slide_id]").val().
If you want to get the ID attribute of a span element, this would work:
$('span_selector').attr('id');
okay finally i got the way to solve this things. m just sharing this if anyone have same issue one day then this might helpful.
html codes:
<tr class="tr">
<td class="td">
<div id="status">
<?php
echo ($row['status'] == 1)?
"<span id='".$row['id']."' class='label label-danger'>Inactive</span>":
"<span id='".$row['id']."' class='label label-success'>Active</span>";
?>
</div>
</td>
</tr>
my jquery code:
$(document).ready(function()
{
$("#status > span") .click(function()
{
var id = $(this).attr('id');
var tempelement = $(this);
var texts = $(this).closest(".tr").find("#texts").val();
var author = $(this).closest(".tr").find("#author").val();
var status = $(this).text();
$.ajax({
type: 'POST',
url: 'manage_feedback.php',
data: {id:id, texts:texts, author:author, status:status},
success: function(data)
{
if (data == "Active")
{
$(tempelement).removeClass("label label-danger");
$(tempelement).addClass("label label-success");
$(tempelement).html(data);
alert('status changed');
}
else if (data == "Inactive")
{
$(tempelement).removeClass("label label-success");
$(tempelement).addClass("label label-danger");
$(tempelement).html(data);
alert('status changed');
}
else
{
alert(data);
}
}
});
});
php script
//ajax status changer code
if (isset($_POST['id']) && isset($_POST['texts']) && isset($_POST['status']) && isset($_POST['author']))
{
$id = $_POST['id'];
$texts = trim($_POST['texts']);
$author = trim($_POST['author']);
$status = $_POST['status'];
$qry = "SELECT count(id) as count FROM tbl_testimonials WHERE texts = '".$texts."'
AND author = '".$author."' AND id != ".$id." ";
$sql = mysql_query($qry);
$data = mysql_fetch_assoc($sql);
if ($data['count'] == 0)
{
if($status == 'Inactive')
{
$qry = "UPDATE tbl_testimonials SET status = 0 WHERE id = ".$id." " ;
$sql = mysql_query($qry);
if($sql == 1)
{
echo 'Active';
exit;
}
}
elseif ($status == 'Active')
{
$qry = "UPDATE tbl_testimonials SET status = 1 WHERE id = ".$id." " ;
$sql = mysql_query($qry);
if($sql == 1)
{
echo 'Inactive';
exit;
}
}
}
else
{
echo "name already taken";
exit;
}
}
hope it will help someone.
Related
I have currently implemented a live search (search as you type) function on text fields. The flow is something like this.
Call a .js file inside the page.
Set the id of the text field to "client-search".
Inside the .js file it is currently listening for on key up events of the "client-search" text field.
If the on key up event is fired, the .js file calls a PHP file that searches the database and returns the output as a list item in an unordered list underneath the "client-search" text field.
This setup currently works but how do implement it in multiple fields inside a single page, since it works using "id" and obviously I can't have multiple IDs in a single page.
HTML:
<div class="input-group">
<input type="text" id="client-search" class="form-control" placeholder="Search for manager...">
<ul class="livesearch" id="client-result" onclick="clickResult()"></ul>
</div>
JS
/* JS File */
// Start Ready
$j(document).ready(function() {
// Icon Click Focus
$j('div.icon').click(function(){
$j('input#client-search').focus();
});
// Live Search
// On Search Submit and Get Results
function search() {
var query_value = $('input#client-search').val();
$j('b#search-string').text(query_value);
if(query_value !== ''){
$j.ajax({
type: "POST",
url: "clientsearch.php",
data: { query: query_value },
cache: false,
success: function(html){
$("ul#client-result").html(html);
}
});
}return false;
}
$j("input#client-search").live("keyup", function(e) {
// Set Timeout
clearTimeout($.data(this, 'timer'));
// Set Search String
var search_string = $(this).val();
// Do Search
if (search_string == '') {
$j("ul#client-result").fadeOut();
}else{
$j("ul#client-result").fadeIn();
$j(this).data('timer', setTimeout(search, 100));
};
});
});
PHP:
<?php
$serverName = "(local)";
$connectionInfo = array( "Database"=>"CMS");
$conn = sqlsrv_connect( $serverName, $connectionInfo);
if( $conn ) {
} else {
echo "Connection could not be established.<br />";
die( print_r( sqlsrv_errors(), true));
}
$html = '';
$html .= '<li value="myLi" class="myLi">';
$html .= '<small>nameString</small>';
$html .= '<small></small>';
$html .= '</li>';
$search_string = $_POST['query'];
//$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
if (strlen($search_string) >= 1 && $search_string !== ' ') {
$sql = "SELECT TOP 10 ClientName FROM Client WHERE ClientName LIKE '%" . $search_string . "%'";
$params = array($search_string);
$stmt = sqlsrv_query( $conn, $sql);
while( $row = sqlsrv_fetch_array( $stmt, SQLSRV_FETCH_ASSOC) ) {
$results_array[] = $row;
}
if (isset($results_array)) {
foreach ($results_array as $result) {
$display_function = $result['ClientName'];
$display_name = $result['ClientName'];
$output = str_replace('nameString', $display_name, $html);
//$output = str_replace('functionString', $display_function, $output);
echo($output);
}
}else{
$output = str_replace('nameString', '<b>No Results Found.</b>', $html);
$output = str_replace('functionString', 'Sorry :(', $output);
echo($output);
}
}
?>
i have a link with the value of Active and Offline..
while($s = mysql_fetch_array($strength))
{
?>
<a href="updateperiode.php?id=<?php echo $s['periode_id']; ?>" onclick="return confirmReset()">
<?php if($s['status'] == 'Active')
{
?>
<span class="badge_style b_online">Active</span>
<?php
}
else
{
?>
<span class="badge_style b_offline">Offline</span>
<?php
}
?>
</a>
<?php } ?>
what i want to do is,, if the value is Active, and the user is click it, the alert with pop out.. and says do you want to deactive, and if the value is offline, when the user click, the alert will says do you want to activate ..
and my javascript is like this..
<script>
function confirmReset() {
var div = document.getElementById("div");
var span = div.getElementsByTagName("span");
if(span.innerHTML == 'Active')
{
var question = confirm("Are you sure want to deactive?");
}
else
{
var question = confirm("Are you sure want to activate?");
}
if(question){
return true;
}else{
return false;
}
}
</script>
the output is always Are you sure want to activate? even though the value is active..
This is my full code..
http://pastebin.com/FteRz6VN
this is the screen..
http://puu.sh/8CyBy.jpg
Please try this
<?php
$i = 0;
while($s = mysql_fetch_array($strength))
{
?>
<a href="updateperiode.php?id=<?php echo $s['periode_id']; ?>" onclick="return confirmReset('<?php echo 'status'.$i ?>')">
<?php if($s['status'] == 'Active')
{
?>
<span class="badge_style b_online" id="status<?php echo $i ?>">Active</span>
<?php
}
else
{
?>
<span class="badge_style b_offline" id="status<?php echo $i ?>">Offline</span>
}
?>
</a>
<?php $i++; } ?>
<script>
function confirmReset(id) {
var statusDiv = document.getElementById(id).innerHTML;
if(statusDiv == "Active"){
var question = confirm("Are you sure want to deactive?");
} else {
var question = confirm("Are you sure want to activate?");
}
if(question){
return true;
} else {
return false;
}
}
</script>
Change the span variable:
var span = div.getElementsByTagName("span")[0];
You can use jquery to solve this issue very easily following is the code:
$(document).ready(function() {
$(".badge_style").click(function(){
var isActive = $(this).html();
if(isActive == "Active"){
...Do what you want to do if active
alert("do you want to activate!");
}else{
... else part
}
});
});
no need to call confirmReset function
I am trying to update the id attribute of a button on its click event through jquery, the success call is getting executed fine but id attribute is not updating as per the requirement, or is something i am doing wrong on success callback to check the selector class .. ( $(this).attr("id", "add_"+$id); )
<script>
$(document).ready(function() {
$(document).on('click', '.mybtnclass', function( onclick, e){
$id=$(this).attr('id');
$("#flash").show();
$("#flash").fadeIn(400);
$.get('abc.php',{id:$id},function(msg){
array=msg.split('/');
if( msg == 0) // tocheck the value is deleted
{
$('#'+$id).html('Add ');
$('#'+$id).removeClass('btn-danger');
$('#'+$id).addClass('btn-success');
$(this).attr("id", "add_"+$id);
$("#flash").hide();
}
else if( msg == 1) // tocheck the value is added
{
$('#'+$id).html('Remove');
$('#'+$id).removeClass('btn-success');
$('#'+$id).addClass('btn-danger');
$(this).attr("id", "delete_"+$id);
$("#flash").hide();
}
});
});
});
</script>
HTML
....
<button type="button" class="btn btn-<?php echo in_array($q->id, $myarray)? 'danger' : 'success' ; ?> btn-sm mybtnclass" id="<?php echo in_array($q->id, $myarray)? 'delete_'.$q->id : 'add_'.$q->id ; ?>"> <?php echo in_array($q->id, $myarray)? 'Remove ' : 'Add' ; ?> </button>
abc.php
<?php
$getval=explode('_', $_GET['id']);
$id=$getval['1'];
$action = $getval['0'];
if($action == 'delete')
{
//code for delete
echo 'add/'.$id ;
}
else
{
// code to add ...
echo 'delete/'.$id ;
}
?>
i believe the problem you have is about "this"
<script>
$(document).ready(function() {
$(document).on('click', '.mybtnclass', function( onclick, e){
$id=$(this).attr('id');
var $this_obj = $(this); // save this to a variable
$.get('abc.php',{id:$id},function(msg){
// use $this_obj instead of $(this)
// because now you are in another block, 'this' is different
});
});
});
</script>
As you are using $('#'+$id) for other oprations. Use it for changing id also
$('#'+$id).prop("id", "add_"+$id);
OTHERWISE
var self = this; //Create another variable
$.get('abc.php',{id:$id},function(msg){
$(self).attr("id", "add_"+$id); //Use other variable to perform operation
});
Not as per the question asked but still a working method
$(document).ready(function() {
$('.mybtnclass').click(function(){
$id=$(this).attr('name');
$("#flash").show();
$("#flash").fadeIn(400);
$.getJSON('abc.php',{id:$id},function(data){
alert(data.action + '-' + data.id); // to troubleshoot
if( data.action == "add")
{
$('[name ='+ $id +']').html('Add ');
$('[name ='+ $id +']').removeClass('btn-danger');
$('[name ='+ $id +']').addClass('btn-success');
$("#flash").hide();
$('[name ='+ $id +']').attr('name', data.action+'_'+data.id);
}
else if( data.action == "delete")
{
$('[name ='+ $id +']').html('Remove');
$('[name ='+ $id +']').removeClass('btn-success');
$('[name ='+ $id +']').addClass('btn-danger');
$("#flash").hide();
$('[name ='+ $id +']').attr('name', data.action+'_'+data.id);
}
});
I am passing the value from abc.php as
echo json_encode( array("action"=>"add","id"=>$id) );
I have a Ajax PHP Show More feature like youtube and Live search scripts but I can't get them to work together. For example my live search works but then the show more feature doesn't work with it on the search results and when I use the show more then the live search doesn't work.
They don't seem to be messing with each other. Can anyone help me out? I am new to this website so I will try my best to show my code and explain it.
INDEX.PHP
<?php
include_once("connect.php");
$sql = "SELECT COUNT(*) FROM database";
$query = mysqli_query($connect,$sql) or die (mysqli_error());
$item_per_page = 3;
$total_rows = mysqli_fetch_array($query);
$pages = ceil($total_rows[0]/$item_per_page);
?>
<!DOCTYPE html>
<head>
<script type="text/javascript">
// Show More Scripted
$(document).ready(function() {
var track_click = 0;
var total_pages = <?php echo $pages; ?>;
$('#news-table-wrap').load("showmore_search.php", {'page':track_click}, function() {track_click++;});
$(".load_more").click(function (e){
$(this).hide();
$('.animation_image').show();
if(track_click <= total_pages){
$.post(showmore_search.php',{'page': track_click}, function(data) {
$(".load_more").show();
$("#news-table-wrap").append(data);
$("html, body").animate({scrollTop: $("#load_more_button").offset().top}, 500);
$('.animation_image').hide();
track_click++;
}).fail(function(xhr, ajaxOptions, thrownError){
alert(thrownError);
$(".load_more").show();
$('.animation_image').hide();
});
if(track_click >= total_pages-1){
$(".load_more").attr("disabled", "disabled");
}
}
});
});
// Live Search Script
function searchNews(value) {
$.post("showmore_search.php", {newsResult:value}, function(data){
$("#news-table-wrap").html(data);
});
}
</script>
</head>
<body>
<input type="text" name="search" id="search" class="search-box" onKeyUp="searchNews(this.value)" placeholder="Search News">
<table id="news-table-wrap" class="news-table-wrap" cellpadding="0" cellspacing="0">
</table>
<div align="center">
<div class="load_more" id="load_more_button">Show More</div>
<div class="animation_image" style="display:none;"><img src="/files/ajax-loader.gif"></div>
</div>
</body>
</html>
SHOWMORE_SEARCH.php
<?php
include_once("connect.php");
$newsResult = $_POST['newsResult'];
$item_per_page = 3;
$page_number = $_POST["page"];
$position = ($page_number * $item_per_page);
$sql = "SELECT * FROM database WHERE headline LIKE '%$newsResult%' OR post LIKE '%$newsResult%' ORDER BY date DESC LIMIT $position, $item_per_page";
$query = mysqli_query($connect,$sql) or die (mysqli_error());
while ($row = mysqli_fetch_array($query)){
$headline = $row['headline'];
$author = $row['author'];
$date = $row['date'];
$post = $row['post'];
$name = $row['name'];
echo "<tr class='news-preview-wrap'>";
echo "<td><div class='news-preview-content'><div class='news-preview-headline'><a href='news_post?name=".$name."'>".$headline."</a></div>
<div class='news-preview-date'>Written by ".$author." on ".$date."</div>
<div class='news-preview-post'>".$post."</div></div>
<div class='news-more'><a href='news_post?name=".$name."'>Read More</a></div></td>";
echo "</tr>";
} else {
echo "<div class='search-error'>No search results were found...</div>";
}
?>
Here is something you can do with Ajax, PHP and JQuery. Hope this helps or gives you a start.
See live demo and source code here.
http://purpledesign.in/blog/to-create-a-live-search-like-google/
Create a search box, may be an input field like this.
<input type="text" id="search" autocomplete="off">
Now we need listen to whatever the user types on the text area. For this we will use the jquery live() and the keyup event. On every keyup we have a jquery function “search” that will run a php script.
Suppose we have the html like this. We have an input field and a list to display the results.
<div class="icon"></div>
<input type="text" id="search" autocomplete="off">
<ul id="results"></ul>
We have a Jquery script that will listen to the keyup event on the input field and if it is not empty it will invoke the search() function. The search() function will run the php script and display the result on the same page using AJAX.
Here is the JQuery.
$(document).ready(function() {
// Icon Click Focus
$('div.icon').click(function(){
$('input#search').focus();
});
//Listen for the event
$("input#search").live("keyup", function(e) {
// Set Timeout
clearTimeout($.data(this, 'timer'));
// Set Search String
var search_string = $(this).val();
// Do Search
if (search_string == '') {
$("ul#results").fadeOut();
$('h4#results-text').fadeOut();
}else{
$("ul#results").fadeIn();
$('h4#results-text').fadeIn();
$(this).data('timer', setTimeout(search, 100));
};
});
// Live Search
// On Search Submit and Get Results
function search() {
var query_value = $('input#search').val();
$('b#search-string').html(query_value);
if(query_value !== ''){
$.ajax({
type: "POST",
url: "search_st.php",
data: { query: query_value },
cache: false,
success: function(html){
$("ul#results").html(html);
}
});
}return false;
}
})
;
In the php, shoot a query to the mysql database. The php will return the results that will be put into the html using AJAX. Here the result is put into a html list.
Suppose there is a dummy database containing two tables animals and bird with two similar column names ‘type’ and ‘desc’.
//search.php
// Credentials
$dbhost = "localhost";
$dbname = "live";
$dbuser = "root";
$dbpass = "";
// Connection
global $tutorial_db;
$tutorial_db = new mysqli();
$tutorial_db->connect($dbhost, $dbuser, $dbpass, $dbname);
$tutorial_db->set_charset("utf8");
// Check Connection
if ($tutorial_db->connect_errno) {
printf("Connect failed: %s\n", $tutorial_db->connect_error);
exit();
}
$html = '';
$html .= '<li class="result">';
$html .= '<a target="_blank" href="urlString">';
$html .= '<h3>nameString</h3>';
$html .= '<h4>functionString</h4>';
$html .= '</a>';
$html .= '</li>';
$search_string = preg_replace("/[^A-Za-z0-9]/", " ", $_POST['query']);
$search_string = $tutorial_db->real_escape_string($search_string);
// Check Length More Than One Character
if (strlen($search_string) >= 1 && $search_string !== ' ') {
// Build Query
$query = "SELECT *
FROM animals
WHERE type LIKE '%".$search_string."%'
UNION ALL SELECT *
FROM birf
WHERE type LIKE '%".$search_string."%'"
;
$result = $tutorial_db->query($query);
while($results = $result->fetch_array()) {
$result_array[] = $results;
}
// Check If We Have Results
if (isset($result_array)) {
foreach ($result_array as $result) {
// Format Output Strings And Hightlight Matches
$display_function = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['desc']);
$display_name = preg_replace("/".$search_string."/i", "<b class='highlight'>".$search_string."</b>", $result['type']);
$display_url = 'https://www.google.com/search?q='.urlencode($result['type']).'&ie=utf-8&oe=utf-8';
// Insert Name
$output = str_replace('nameString', $display_name, $html);
// Insert Function
$output = str_replace('functionString', $display_function, $output);
// Insert URL
$output = str_replace('urlString', $display_url, $output);
// Output
echo($output);
}
}else{
// Format No Results Output
$output = str_replace('urlString', 'javascript:void(0);', $html);
$output = str_replace('nameString', '<b>No Results Found.</b>', $output);
$output = str_replace('functionString', 'Sorry :(', $output);
// Output
echo($output);
}
}
So I've been spending hours on finding something specific to my issue, but I can't seem to find any.
I'm in the middle of creating a small CMS. My problem is that I don't know how to make a submitted form in a UI dialog to do the action of PHP_SELF inside of the UI dialog. I have a list of user which can be selected by a radio button. There is a delete button which has some javascript attached:
$('#delete_user').on('click', function(e) {
if (id != null ) {
var url = "delete_user.php?id=" + id;
$('#dialog-placeholder').dialog().load(url);
$('.ui-dialog :button').blur();
}
e.preventDefault();
return false;
});
Now, my problem is that I have made it to the UI dialog where i get the ID sent with the url, but I have no idea how to send a form and still keep it in the dialog with the underneath PHP:
<?php
if ((isset($_GET['id'])) && is_numeric($_GET['id'])) {
$id = $_GET['id'];
} elseif ((isset($_POST['id'])) && is_numeric($_POST['id'])) {
$id = $_POST['id'];
} else {
echo "<p>An error has occurred. Please try again.</p>";
echo "Close";
$jQuery_close = <<<msg
<script>
$('.close_dialog').on('click', function(){
location.reload();
dialog("close");
});
</script>
msg;
echo $jQuery_close;
exit();
}
require('includes/db_con.php'); //making a connection to the database
if ($_SERVER['REQUEST_METHOD'] == 'POST') {
if ($_POST['sure'] == 'Yes') {
$q = "DELETE FROM users WHERE user_id=$id LIMIT 1";
$r = #mysqli_query($dbc, $q);
if (mysqli_affected_rows($dbc) == 1) {
echo "<p>The user has been deleted</p>";
} else {
echo "<p>The user could not be deleted due to system error. Please try again.</p>";
}
} else {
echo "The user has NOT been deleted!";
}
} else {
$q = "SELECT email, CONCAT(firstname, ' ',lastname) AS name FROM users WHERE user_id='$id'";
$r = #mysqli_query($dbc, $q);
$num = mysqli_num_rows($r);
if ($num = 1) {
while ($row = mysqli_fetch_array($r, MYSQL_ASSOC)) {
echo "<p>Are you sure you want to delete this user?</p>";
echo $row['email'] . '<br />';
echo $row['name'];
}
echo '<form action="' . $_SERVER["PHP_SELF"] . '" method="post">
<input type="HIDDEN" name="id" value="' . $id .'" />
<input type="submit" name="sure" value="Yes" />
<input type="submit" name="sure" value="No" />
</form>';
} else {
echo "This page has been accessed in error";
}
}
mysqli_close($dbc);
?>
When pressing "yes" or "no" in the form, it just directly goes to a new page.
My question is, how do I fire the php and send the form within the dialog?
Place your e.preventDefault() at the start of the delete click handler, not at the end where you currently have it, it should be like this:
$('#delete_user').on('click', function(e) {
e.preventDefault();
if (id != null ) {
var url = "delete_user.php?id=" + id;
$('#dialog-placeholder').dialog().load(url);
$('.ui-dialog :button').blur();
}
return false;
});