Ajax Load Data Button and Links not Working - javascript

I have a problem with jQuery Ajax load. On message.php, it shows messages and it has copy and delete link. When I click on delete, it deletes the message from the mysqli database. But when I use ajax.load('message.php') to load the message.php page, the delete link does not work at all.
Is there a way for me to click hyperlink or button from the ajax.load()?
Here is my code
<script>
$(document).ready(function() {
$('#loadBtn').click(function() {
$('#messageDiv').load('message.php');
});
});
</script>
<div id="messageDiv"></div>
Here is my message.php
<html>
<body>
<form id='delete'>
<input type='hidden' name='id' value='$id' id='id'>
<button id='delete'> Delete </button>
</form>
</body>
</html>
<?php
$conn_database = mysqli_connect('localhost','root','content','message');
$id = mysqli_real_escape_string($conn_database, $_POST['id']);
$sql_delete = "DELETE FROM message WHERE id = $id";
mysqli_query($conn_database, $sql_delete);
?>

Related

trying to hide "download" button once clicked

I have a simple form only consisting of a button that is used to download a file. here is the code :
<form method='post' action='download.php?file=file.txt' name='form1'>
<button type='submit'>Telecharger</button>
</form>
Download.php is a small php file with header used to engage download, here it is :
<?php
$filename=$_GET['file'];
header('Content-Type: text/plain');
header("Content-disposition: attachment;filename=$filename");
readfile($filename);
?>
What I'm trying to do is hide the button or the form after the user clicked on it. So far I have tried toying with css and javascript listener but nothing worked so far.
When I click on the button it download the file but doesn't hide the button.
How can I hide the button after submiting the form ?
You can use Javascript:
<form method='post' action='download.php?file=file.txt' name='form1'>
<button onClick='this.style.display = "none";' type='submit'>Telecharger</button>
</form>
This will hide your button when it's clicked. Here is a fiddle.
Sth like this?
document.getElementById("downloader").addEventListener('click', function() {
this.style = "display: none;"
});
<div>
<button type='submit' id="downloader">Telecharger</button>
</div>
You should give your button at the very least a class like so,
<button class="button-toggle" type='submit'>Telecharger</button>
and you can use vanilla js to select and hide it,
document.getElementByClassName("test").addEventListener("click", function( event ) {
event.target.style.visibility = "hidden";
}, false);
or if you're using jQuery
$('.button-toggle').click(function() {
$(this).hide();
});
Should get you close.
The following should work.
<form method='post' action="javascript:alert('Hello there, I am being submitted');" name='form1' id="form">
<button type='submit' id="hide">Telecharger</button>
</form>
<script type="text/javascript">
var button = document.getElementById("hide");
button.addEventListener("click", function(event){
button.style.display = "none";
});
</script>
I changed the action of the form just to check what was happening, but you can replace that with your action path.

Loading Effect using JS and PHP

I am working on a project in PHP and AIML where the bot replies to the user queries asked by a user through a microphone. I am new to jQuery and JS so I need help in implementing loading effect in between the user input and final output.
<?php
$display = "";
$thisFile = __FILE__;
if (!file_exists('../../config/global_config.php'));
require_once ('../../config/global_config.php');
require_once ('../chatbot/conversation_start.php');
$get_vars = (!empty($_GET)) ? filter_input_array(INPUT_GET) : array();
$post_vars = (!empty($_POST)) ? filter_input_array(INPUT_POST) : array();
$form_vars = array_merge($post_vars, $get_vars); // POST overrides and overwrites GET
$bot_id = (!empty($form_vars['bot_id'])) ? $form_vars['bot_id'] : 1;
$say = (!empty($form_vars['say'])) ? $form_vars['say'] : '';
$convo_id = session_id();
$format = (!empty($form_vars['format'])) ? $form_vars['format'] : 'html';
?>
<!DOCTYPE html>
<html>
<head>
<title>Interact With Sia</title>
<script src="jquery.js"></script>
<script type="text/javascript" src="talk.js"></script>
</head>
<body onload='document.getElementById("say").focus(); document.getElementById("btn_say").style.display="none";'>
<center>
<h3>Talk to Sia</h3>
<form id="chatform1" name="chatform" method="post" action="index.php#end" >
<!-- <label for="say">Say:</label> -->
<input type="text" name="say" id="say" size="70" onmouseover="startDictation()" style="color:red" />
<input type="submit" class="say" name="submit" id="btn_say" value="say" />
<script>
$('#say').trigger('mouseover');
</script>
<input type="hidden" name="convo_id" id="convo_id" value="<?php echo $convo_id;?>" />
<input type="hidden" name="bot_id" id="bot_id" value="<?php echo $bot_id;?>" />
<input type="hidden" name="format" id="format" value="<?php echo $format;?>" />
</form>
<br/><br/>
<?php echo $display; ?> //THIS DISPLAYS THE OUTPUT TO THE QUERY
</center>
</body>
</html>
As soon as the page loads, the microphone in the user's browser is activated [via talk.js_startDictation()] and after the user finishes the voice input, the query is sent to the scripts and then the result is diplayed by <?php echo $display; ?>.
How can I implement a loading effect in place of <?php echo $display; ?> until the script returns the result of the query and updates the $display variable on the page?
You could use AJAX to archieve this, like:
1 - Load jquery.js (you could use CDN or download it).
2 - Create a div with a loader (usually a gif is fine, there are a lot). Hidde it with css: display:hidden;
3 - Add at the bottom of your page:
<script>
// Attach a submit handler to the form
$( "#chatform1" ).submit(function( event ) {
// Start the loader
$('#loader').show();
// Stop form from submitting normally
event.preventDefault();
// Get some values from elements on the page:
var data = $(this).serialize();
var url = "urlToYourPhpFile.php";
// Send the data using post
var posting = $.post( url, { data: data } );
// Put the results in a div
posting.done(function( dataResponse ) {
//do something with dataResponse
$('#loader').hide();
});
});
</script>
When the form is sumitted, jquery 'catch' the request, process the .submit() functions and send the data via post to a .php file (you should create it) and receive the params with $_POST. Something like:
yourPhpFile.php
<?php
$convo_id = $data['convo_id'];
//do something
...
?>

How to reload user defined tag in CMS Made Simple

I have a html file which loads a list from my database and allows the front end user to remove a particular entry.
The HTML Code looks like this:
<script type="text/javascript">// <![CDATA[
function sendForm() {
var dataSend=$("#clientid").val();
$("#responseDiv").html("<h2>Removing from Database...</h2>");
$.post("RemoveClient.php",{
ClientId: dataSend
},function(data) {
$("#responseDiv").html(data);
$("#clientlist").empty();
$("#clientlist").html("{client_list nocache}");
});
return false;
}
// ]]></script>
</p>
<div id="MainForm"><form class="form" onsubmit="return sendForm()">
<h2 class="formstyle">Client Wizard</h2>
<p>Please fill all the required fields.</p>
<div id="clientlist">{client_list nocache}</div>
<p><input style="font-size: 1.5em; font-color: #000000;" onclick="sendForm()" type="submit" value="Delete" /></p>
</form>
<div id="responseDiv"> </div>
</div>
The UDT called for {client_list} is given below.
$dbhost='127.0.0.1';
$dbuser='user';
$dbpass='pass';
$dbname='dbname';
$conn=mysqli_connect($dbhost,$dbuser,$dbpass,$dbname);
if(!$conn)
{
die('Could not connect:'.mysqli_connect_error());
}
$sql="SELECT clientid,clientname FROM client order by clientid";
echo "<label> Select Client: </label>";
echo "<select id=clientid name=clientid>";
$result=mysqli_query($conn,$sql);
while($row=mysqli_fetch_assoc($result))
{
echo "<option value=".$row['clientid'].">".$row['clientname']."</option>";
}
echo "</select>";
Now, once I click on delete, I want the drop down list to refresh with the new list not having the deleted client. I tried doing that by emptying the div and then reloading the UDT. Unfortunately this does not seem to be working, the way I want it to, as the list does not get refreshed until and unless I refresh the page. Is there anyway I can make this work?
The quick/easiest option would be to assign it an id and to remove the entry via javascript.
Second, would be to have RemoveClient.php return it as part of the response from the AJAX.
var response = data.split('|');
$("#responseDiv").html(response[0]);
$("#clientlist").html(response[1]);
Third, I would strongly advise against this way but it is the question you ask, put the UDT alone on new page then load the page with the ?showtemplate=false parameter.
$("#clientlist").load("//www.mydomain.com/myudt.html?showtemplate=false");

How do I run a PHP code when user submit data with html

I wrote a piece of code, when the user click on submit button it send a string to PHP and then my code will run a Mysql query (based on the submitted string) and then using file_put_content it will upload the mysqli_fetch_array result to the file.
All I want to do is without refreshing the page it submit the value to php form and run the code then show Download From Here to the user.
How should I do that using javascript or jQuery ?
if(#$_POST['submit']) {
if (#$_POST['export']) {
$form = $_POST['export'];
echo $form;
$con1 = mysqli_connect("localhost", "root", "", "test_pr");
$sql2 = "SELECT email FROM `my_data` WHERE email LIKE '%$form%'";
$result2 = mysqli_query($con1, $sql2);
$rows = array();
while ($row = mysqli_fetch_array($result2, MYSQLI_ASSOC)) {
$rows[] = $row['email'] . PHP_EOL;
}
$nn = implode("", $rows);
var_dump($rows);
echo $nn . PHP_EOL;
$file = fopen("export.csv", "w");
file_put_contents("export.csv", $nn);
fclose($file);
}
}
?>
<html>
<form enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method=post>
<input name="export" type="text" value="example" /> Export Address<br/>
<input name="submit" type="submit" value="submit" />
Download From Here
</form>
</html>
Assuming you know how to include jquery, you would first bind a submit handler to the submit button, (I've added an id to make it easier) and prevent the default submit action. Then add an AJAX post request to the handler. This will post to your php file. Have that file echo out your link, then have the ajax callback function append it to the desired element. Something like this:
<form enctype="multipart/form-data" action="<?php echo htmlspecialchars($_SERVER["PHP_SELF"]);?>" method="post" id="form1" //Add an id to handle with >
<input name="export" type="text" value="example" /> Export Address<br/>
<input name="submit" type="submit" value="submit" />
Download From Here
</form>
<script>
$("#form1").submit(function (event) {
event.preventDefault();
$.post("//path of your php file here",{inputText: $("input[type='text']")},function (returnedString) {
$("#whereToPutReturnedString").append(returnedString);
});
});
</script>
Also, if you want to just show the link when the button is clicked, do the following:
<script>
$("input[type='submit']").submit(function () {
$("#idOfElementToPlaceLink").append("Your anchor text");
});
</script>
or you could just have it hidden with css or jquery and do $("#theId").show();
If you need more help, just holler!

Disable another button once it has successfully submitted the form

I have a form with 2 buttons: Approve and Reject.
<input type="button" name="Approve" value="Approve" onClick="location.href='approve.php?user=<?php echo $row['icnum'];?>&states=1'">
<input type="button" name="Reject" value="Reject" onClick="location.href='approve.php?user=<?php echo $row ['icnum'];?>&states=2'">
I want to disable the "Reject" button once the "Approve" button is clicked. So, the user cannot reject the form again after it has been approved.
I have tried several attempts, like:
<input type="button" value="Send" onclick="javascript=this.disabled = true; form.submit();">
But this code does not work for me. Even if it's actually working, the button is just disabling itself, not the other button.
I'm using Chrome. Any idea on how to solve this?
EDIT: This is my process form in php.
<?php session_start();
include('../include/dbconnect.php');
$user = $_GET['user'];
$states = $_GET['states'];
if($user){
$approve = "UPDATE student SET status='$states' WHERE icnum='$user'";
$result = mysql_query($approve) or die(mysql_error());
if ($result) {
?>
<script type="text/javascript">
window.location = "index.php"
</script>
<?php }
}
?>
What can I edit into these codes if the action is ran in the server-side?
Remove the javascript= from OnClick. You only need javascript: (colon not =) for anchors' hrefs
<input type="button" value="Send" onclick="this.disabled=true; formName.submit();">
In jQuery:
$('input[name=Approve]').click(function () {
$('input[name=Reject]').prop({disabled: true});
});
Try below
<asp:Button ID="cmdSubmit" runat="server" Text="Submit" onclick="btnSumbit_Click" onclick="btnSumbit_Click" OnClientClick="this.style.display = 'none';"/>

Categories

Resources