JQuery Post Callback filter select data - javascript

Ich have the following site with JQuery:
<html>
<head>
<title>Testpost</title>
<script type="text/javascript" src="../jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var sendtest = $("#sendtest");
sendtest.keyup(function(){
$.post(
"test.php",
{ nur: sendtest.val() },
function(data) {
$('#receivetest').html(data);
}
);
});
});
</script>
</head>
<body>
<input type="text" name="season" id="sendtest"/>
<div id="receivetest"></div>
</body>
</html>
And following test.php:
<?php
$nur = $_POST['nur'];
echo $nur;
?>
<p id="hello">Hello World!</p>
Now I want to see on the receivetest-div only echo $nur; !
What must I do for that?

It is not a good practice to code like this. It would be better to add a parameter in your PHP file which will hide the div when you don't need it.
However, you can hide the div like that:
$('#receivetest').find('#hello').hide();
This will keep the html of the <div id="hello"> and its content, and hide it to the client.
You can also remove the div by doing this:
$('#receivetest').find('#hello').remove();

You can the below code
<html>
<head>
<title>Testpost</title>
<script src="http://code.jquery.com/jquery-1.9.1.js"></script>
<script type="text/javascript">
$(document).ready(function(){
var sendtest = $("#sendtest");
sendtest.keyup(function(){
$.post(
"asd.php",
{ nur: sendtest.val() },
function(data) {
$('#receivetest').html(data);
$('#receivetest').find('#hello').remove();
}
);
});
});
</script>
</head>
<body>
<input type="text" name="season" id="sendtest"/>
<div id="receivetest"></div>
</body>
</html>

Related

Unable to get Text from styled Textarea

I am unable to get Text from textarea because of some unknown reason, if I try simple textarea without using any javascript library, it is getting text. But when using any library, it shows undefined. Can somebody explain why?
Here is my code:
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="sample">
<!-- <script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script> -->
<h1>
Testing page for Text Areas
</h1>
<textarea id="area2" style="width: 80%;">
</textarea><br />
<button type="button" onclick="myFunction()" id="submit_text2"> Submit Email </button>
<p id="demo">jkjnjk</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("area2").value;
document.getElementById("demo").innerHTML = x;
console.log(x);
alert(x);
}
</script>
</body>
</html>
Here, it is getting and showing text in Alert
Now if I uncomment the script to enhance my textarea using
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script> <script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<!DOCTYPE html>
<html>
<body>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery-csv/0.71/jquery.csv-0.71.min.js"></script>
<div id="sample">
<script type="text/javascript" src="http://js.nicedit.com/nicEdit-latest.js"></script>
<script type="text/javascript">
//<![CDATA[
bkLib.onDomLoaded(function() { nicEditors.allTextAreas() });
//]]>
</script>
<h1>
Testing page for Text Areas
</h1>
<textarea id="area2" style="width: 80%;">
</textarea><br />
<button type="button" onclick="myFunction()" id="submit_text2"> Submit Email </button>
<p id="demo">jkjnjk</p>
</div>
<script>
function myFunction() {
var x = document.getElementById("area2").value;
document.getElementById("demo").innerHTML = x;
console.log(x);
alert(x);
}
</script>
</body>
</html>
It has gone blank now, (there is no problem with script, I have tried some other as well!
It's because when you are using "styled textarea" it just create something else on top of your textarea. You need to use [nicInstance].getContent(). You can read niceEditor's docs here
In your case since you haven't saved your instance a variable, you should being able to use nicEditors.findEditor('area2').getContent();

Jquery is not working on html echoed by php

I echo my html in the body using php.
Like this:
<body>
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</body>
In this html I have a button with the id set to button. Then, in Jquery,I have this code:
$(document).ready(function(){
$("#button").click(function(){
alert("It works");
});
});
However, It works is not getting printed. What should I do?
It also depends on where your Javascript Code is located within the DOM and also if you have jQuery included in the page in question.
Something like this could hopefully work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<title>Demo</title>
</head>
<body>
<div class="container">
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</div>
<script type="text/javascript">
(function ($) {
$(document).ready(function(){
$("#button").on("click", function(e){
alert("It works");
});
});
})(jQuery);
</script>
</body>
</html>
Please note that the above Snippet is assumed to live inside a PHP File (index.php - for example).

How can I get the data that is sent from my html file to php and recieve and show the data

I found a program which is sending the data from the form to php file from jquery. But when I have tried to find it, it is displaying nothing. When I am clicking on the Load Data button nothing is coming. Is something wrong in the program ?
main.php
<?php
if( $_REQUEST["name"] )
{
$name = $_REQUEST['name'];
echo "Welcome ". $name;
}
?>
index.html
<html>
<head>
<title>the title</title>
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js/"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
$("#driver").click(function(event){
$.post(
"main.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>
Please resolve the problem. Thanks in advance
Your <script> tag for loading jQuery has an invalid href attribute.
Remove the ending slash from the address so it looks like this:
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
Use your browser's developer tools to find out what's wrong with your clientside script, they're really handy. Hit F12.
try this code:
$(document).ready(function() {
$("#driver").click(function(event){
$.post( "main.php", { name: "Zara"})
.done(function( data ) {
$('#stage').html(data);
});
});
});
for detail see link
Please the version of this file:
<script type="text/javascript"
src="http://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js/"></script>
code:
<html>
<head>
<title>the title</title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.3.2/jquery.min.js"></script>
<script type="text/javascript" language="javascript">
$(document).ready(function() {
alert('hi');
$("#driver").click(function(){
$.post(
"main.php",
{ name: "Zara" },
function(data) {
$('#stage').html(data);
}
);
});
});
</script>
</head>
<body>
<p>Click on the button to load result.html file:</p>
<div id="stage" style="">
STAGE
</div>
<input type="button" id="driver" value="Load Data" />
</body>
</html>

How Can I Transfer Text From Input Box to Text Area?

I'm making a prototype for a chat client. At this stage, I'm just learning how to append the user's input to the text area above. However, no matter what I do, it doesn't seem to work. The only time it actually functioned correctly was in jsfiddle, but I can't get it to work when I load my actual HTML page.
It's worth mentioning that, at the advice of a tutorial, I already tried placing the script tag for my JQuery code at the end of the body instead of in the head. The tutorial said that it was essential for all elements be allowed to load before the JQuery code, so that's the way it had to be. As you can see below, the script tags are currently in the head, but that doesn't work either.
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript" src="Chat.js"></script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea">
</textarea>
<form ID="in">
<input ID="textField" type="text">
<button ID="send" type="button" name="Send" value="send">Send</button>
</form>
</div>
</body>
</html>
Chat.js
function sendText(){
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
}
Don't wrap document ready handler inside sendText() function, use that instead:
$(document).ready(function () {
$('#send').click(sendText);
});
function sendText(){
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
}
Well, it work if you change your button to submit type and bind the event to form submit:
$('#in').submit(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
return false;
});
http://jsfiddle.net/AztSB/
This seems to work for me:
<!DOCTYPE html>
<html>
<head>
<link rel="stylesheet" type="text/css" href="ChatStyle.css"/>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script>
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').html($('#textArea').html() + text);
$('#textField').val('');
});
});
</script>
<title>
Chat Client Prototype
</title>
</head>
<body>
<div ID="topBar">
</div>
<h2 ID="header">Chat Client</h2>
<div ID="chatBox">
<div ID="topBar2">
</div>
<div ID="header2">
Chat Client
</div>
<textarea ID="textArea" name="textArea"></textarea>
<form ID="in">
<input ID="textField" type="text">
<input ID="send" type="button" name="Send" value="send"/>
</form>
</div>
</body>
</html>
Just don't wrap it in your function sendText:
$(document).ready(function () {
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').val($('#textArea').val() + text);
$('#textField').val('');
});
});
You dont need to put it in a function. You can just leave it to Jquery :)
Your stuff in a FIDDLE to see
Jquery:
$('#send').click(function () {
var text = $('#textField').val();
$('#textArea').append(text);
$('#textField').val('');
});
UPDATE
Use append() to update the textarea with new text!

Adding a div dynamically using append()

Kindly notify me I am explaining it well or not. I'm using .append() to repeat a div inside a page.
HTML
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append("<div class='Box'>I'm new box by prepend</div>");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<button id="num">Click Me</button>
/body>
</html>
This works good when I add a div repeatedly. But I like to call it externally like the below code.
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$('#form').append($('#Box'));
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
/body>
</html>
Why is this not working?
Try using clone():
<html>
<head>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.6.4/jquery.min.js"></script>
<script>
$(document).ready(function(){
$("#num").click(function () {
$(".Box:first").clone().appendTo("#form");
});
});
</script>
</head>
<body>
<div id="form">
Hai Add Another by clicking the button
</div>
<div class='Box'>I'm new box by prepend</div>
<button id="num">Click Me</button>
</body>
</html>​
You have to create a new element before adding it.
Demo
try this
$(document).ready(function(){
$("#num").click(function () {
$(".Box").first().clone().appendTo("#form");
});
});
Try something like this:-
$("#parent_div").append('<div id="created_div"></div>');

Categories