Ok, I have this code:
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script type="text/javascript">
function get() {
$.post('tt.php', { name : $(this).attr('id') }, function(output) {
$('#age').html(output).show();
});
}
</script>
</head>
<body>
<input type="text" id="name"/>
<a id="grabe" href="javascript: get()">haller</a>
<div id="age">See your name</div>
</body>
</html>
Here's what I want: get the id of an anchor tag from the anchor tag that has been clicked by the user via jQuery and then past that to a PHP file. The PHP file will then echo the id name of the anchor tag that was clicked by the user back to the jQuery which will then display the output into the specified element.
Here's the PHP file:
<?
$name=$_POST['name'];
if ($name==NULL)
{
echo "No text";
}
else
{
echo $name;
}
?>
Bind your event like this, since you are using jQuery
$('a').click(function(){
$.post('tt.php', { name : $(this).attr('id') }, function(output) {
$('#age').html(output).show();
});
});
And remove the javascript from the href
<a id="grabe" href="#">haller</a>
<a id="kane" href="#">haller 2</a>
$('#grabe').click(function() {
$('#age').load('yourphp.php', {'name':$(this).prop('id')});
});
You can use $(this) to access almost anything about "what brought you here" in the code. You'll also need a listener for the event. In this way too brief example below, I have it listening for any clicks to <span class="edit_area"> spans.
<script>
$(document).ready(function(){
$('span.edit_area').click( function(){
var fieldname = $(this).attr('id');
...
});
});
I dont know why you want to send an id to a server and then receive that id back again from the ajax call as it is already there in your client script. Anyway this is the code.
This code will does this functionalirty for all a tag with a class called"crazyLink" and show the data received from the server page in a div with id anotherCrazyDiv
HTML
<a class="crazyLink" href="#">I am crazy</a>
<a class="crazyLink" href="#">I am crazy2</a>
<div id="anotherCrazyDiv"></div>
Script
$(function(){
$(".crazyLink").click(function(){
var id=$(this).attr("id");
$.post("data.php", { name : id } ,function(data){
$("#anotherCrazyDiv").html(data);
});
return false; // to prevent normal navigation if there is a valid href value
});
});
Keep in mind that, in your scenario, the value in id variable and value in data variable (after getting response from ajax call ) are same.
you may want to separate your javascript from your html. it makes things easier. it should probably look something like this.
HTML
<html>
<head>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.7.1.min.js"> </script>
<script type="text/javascript" src="javascript/somescript.js"></script>
</head>
<body>
<input type="text" id="name"/>
<a id="grabe" class="someclass">haller</a>
<div id="age">See your name</div>
</body>
</html>
javascript
$(document).ready(function() {
$('.someclass').click(function() {
$('#age').load(
url: 'tt.php',
data: { name: $(this).attr('id')}
);
});
});
Related
I am new to jquery and ajax. I have a PHP while loop which display contents from database. What I need is simply alert the "content_id" on click of each contents.
My script
<script type="text/javascript">
$(function() {
$(".show_id").click(function() {
var test = $(".contentid").val();
alert(test);
});
</script>
PHP Code
//code to fetch contents from database
foreach($stmt as $row)
{
echo $row['content'];
?>
<form action="" method="post">
<input type="hidden" class="contentid" value="<?php echo $row['content_id']; ?>">
<div class="show_id" ></div>
</form>
<?php
}
?>
It Alerts the id for each content, But only the first id always .
How to alert id for each contents respectively ?.
Thanks for any help...
This would work:
$(function() {
$(".show_id").click(function() {
var cur = $(".show_id").index($(this)); // get the index of the clicked button within the collection
var test = $(".contentid").eq(cur).val(); // find the input with the contentid class at the same index and get its value
alert(test);
});
});
Note that this assumes that the two classes are always paired together like you show and not used elsewhere in your html, which seems a reasonable assumption here
<script type="text/javascript">
$(function() {
$(".show_id").click(function() {
var test = $(this).prev(".contentid").val();
alert(test);
});
})
</script>
I'm a newbie to Jquery , my question is simple , I'm trying to pass data using Jquery Post method, I have read a lot , but I can't figure it out:
<!DOCTYPE html>
<html>
<head>
</head>
<body>
<div class="TestAd" id="TestAd">
<iframe data-aa='58593' src='https://ad.a-ads.com/58593?size=468x60' scrolling='no' style='width:468px; height:60px; border:0px; padding:0;overflow:hidden' allowtransparency='true' frameborder='0'></iframe>
</div>
<button>Send request</button>
<br>
<?php
if(!empty($_POST["block"])) {
echo "Ads Are Blocked";
}
?>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script>
var height = $('.TestAd').height();
$("button").click(function()
{
if (height==0)
{
$.post("", {block:true});
}
}
</script>
</body>
</html>
The script is a simple AdBlocker checker, thanks for your help
<form method="post">
<input type="hidden" value="true" name="block">
<input type="submit" value="Send request">
</form>
<?php
if(isset($_POST["block"])) {
echo "Ads Are Blocked";
}
?>
if you want to redirect it to the same page why dont you use simple form tag to pass the block value.By default it will redirect it on the same page
Change your PHP to this:
<?php
if(isset($_POST["block"])) {
echo "Ads Are Blocked";
}
?>
And Change your jQuery to this:
<script>
var height = $('.TestAd').height();
$("button").click(function () {
if (height == 0) {
$.post("somepage.php",{block: true}, function (data) {
// data is the response
// do something with it here
alert(data);
});
}
}
</script>
Here are the docs for $.post(), essentially, the way you had it, ignores the response. You have to pass the anonymous function (function (data) {}) callback as the 3rd argument to be able to work with the response.
From the docs:
Examples:
Request the test.php page and send some additional data along (while still ignoring the return results).
$.post( "test.php", { name: "John", time: "2pm" } );
I've searched on internet but I just can't seem to figure this out.
I got this Jquery function which I want to call in my php/html page. I'm an absolute noob when it comes to Jquery.
!function( $ ){
var Keyboard = function ( element, options ) {
this.$element = $(element)
this.options = options
if (this.options.display) {
this.$keyboard = $('<div class="keyboard"><input type="text" class="input-keyboard"></div>').appendTo('body')
} else {
this.$keyboard = $('<div class="keyboard"></div>').appendTo('body')
}
this.$biginput = this.$keyboard.find('.input-keyboard')
this.wait_timer = null
this.init()
this.listen()
}
}
How can I call this function in a div or button?
<body>
<button id="testKeyboard">Test open keyboard</button>
</body>
<script>
$(document).ready(function(){
$("#testKeyboard").keyboard();
});
</script>
Without knowing this plugin, i would say something like this:
$(document).ready(function(){
$("div, button").keyboard();
});
with ID:
$(document).ready(function(){
$("#button_id").keyboard();
});
your php/html file, needs also the jQuery Library in the head part...
For example:
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="yourKeybordPlugin.js"></script>
maybe an other version. It should be before the plugin script...
<head>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script src="yourKeybordPlugin.js"></script>
</head>
<body>
<button id="testKeyboard">Test open keyboard</button>
<script>
$(document).ready(function(){
$("#testKeyboard").keyboard();
});
</script>
</body>
Call like this from your php file,
<script type = "text/javascript">
$(window).keyboard();
</script>
Check now on JSfiddle, included Jquery plugin and added that in head section from the option.
You can see the console.log firing.
http://jsfiddle.net/7ttq2gf0/2/
I am trying to POST a div section to a new page using jquery ajax as:
<!DOCTYPE html>
<body>
<div id="edit_content">
<p>This is a test</p>
</div>
Submit
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var htmlData = $('#edit_content').html();
$.post('out.php', {'html': htmlData },function(){
});
});
</script>
</body>
</html>
and in the out.php page I have:
<?php
$content = $_POST['html'];
echo $content;
but when I run the code I am getting this error:
Notice: Undefined index: html in G:\Apps\out.php on line 2
can you please let me know why this is happening and how I can stop it?
Your $.post function has a typo in the data field, try this instead:
$.post('out.php', {html: htmlData }, function(response){
Since you are sending an object, the key does not need quotes.
or better yet, but all your data ouside and juste reference them in your post:
var postData = {html: $('#edit_content').html() }
$.post('out.php', postData, function(response){
Your code works as it is - at least in terms of the post. To illustrate this change it to the following (the only change is to actuallly do something with the response to the ajax request):
<!DOCTYPE html>
<body>
<div id="edit_content">
<p>This is a test</p>
</div>
Submit
<div id="out"></div>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
var htmlData = $('#edit_content').html();
$.post('out.php', {'html': htmlData }, function(data){
$('#out').html(data);
});
});
</script>
</body>
</html>
I think you need to explain what you are trying to do (or what you are expecting to see). As your code stands you are running the ajax request as soon as the page loads (in document ready) but not doing anything with the response. You then have a link to the out.php (Submit). Are you expecting to see the result in out.php when you click the link? If so then that isn't going to happen. What is happening is that when the page loads it runs a request to out.php with the post data and gets a response (which it then ignores). When you click the link you run a new request to out.php without the post data so you see nothing.
If I have guessed right then you want to replace the link with a form submission triggered by the click of the link (with the data fetched first). Something like
<!DOCTYPE html>
<body>
<div id="edit_content">
<p>This is a test</p>
</div>
Submit
<form action="out.php" method="post" id="out-form" style="display: none;">
<input type="hidden" id="hidden-html" name="html" value="" />
</form>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script>
$( document ).ready(function() {
$('#submit_script').click(function(){
$('#hidden-html').val($('#edit_content').html());
$('#out-form').submit();
return false;
})
});
</script>
</body>
</html>
The 'html' data is not being posted to your php page. Change your php file to this:
<?php
if(isset($_POST['html']))
{
$content = $_POST['html'];
echo $content;
}
?>
This should stop the error and at least point you in the right direction. Without more code, I am not able to tell you why the 'html' data is not being posted.
I'm trying to change the content of div using jquery. but the content flashes and resets the div. i cannot use return false; because there is another button for post text field value. i want to keep the changes of div. here is my code:
<html>
<head>
<meta charset="UTF-8">
<title></title>
<script type="text/javascript" src="jquery.js"></script>
</head>
<body>
<div>
<form id="form" method="POST">
<input type="text" name="gname" id="gname"/></br>
<button id="btn">Set</button>
<button id="nbtn">View</button>
</form>
</div>
<div id="outp">
</div>
</body>
<script>
$("#btn").click(function(event) {
$.post("send.php", {
named: $("#gname").val()}, function(data) {
alert(data);
});
});
</script>
<script>
$("#nbtn").click(function(e) {
$("#outp").html("<?php include './view.php'; ?>");
});
</script>
It's not jQuery; it's that your form is being posted. So your change is made, but then the form is posted and the page is refreshed from the server.
The default type of button elements is "submit". To make one or both of those buttons just a button, use type="button".
Alternately, if you want to allow the form to be used when JavaScript is disabled (e.g., allow it to be posted normally), leave the buttons as submit buttons but prevent form submission using JavaScript. E.g.:
$("#form").submit(false); // Prevents the form being submitted in the normal way.
Any buttons inside a form are considered submit buttons.
So you need to add event.preventDefault() to your .click code.
Also, why are your scripts outside body section?
You can try with ajax and catch success and error:
$("#btn").click(function() {
var named: $("#gname").val();
$.ajax({
url: 'send.php',
type: 'POST',
data: {param1: 'value1'},
})
.done(function(data) {
console.log("Post success"+data);
})
.fail(function() {
console.log("Post error"+data);
});
});