I am planning to insert a link to my another php page using jquery function, but the code doesn't work... Alternative methods such as attr() has been tried as well, but it was still the same result... Can someone pls give me advices regarding this matter? Following are my codes:
$(document).ready(
function(){
$('#date').change(
function(){
$.ajax (
{
url: 'process.php',
type: 'post',
data: {
item_no:2,
movie_id: $('#movie').val(),
movie_date: $('#date').val()
},
dataType: 'json',
success: function(response){
$('#showtime').empty();
for(var i = 0; i<response.length; i++){
var showtime = response[i]['showtime'];
$('#showtime').append("<a href='movie_seat.php?id="+showtime+"' id='seatlink'>");
$('#showtime').append("<font style='margin-right:50px;'>");
$('#showtime').append(showtime);
$('#showtime').append("</font></a>");
} // for loop
} // function taking response
} // block in ajax
); //ajax
} // function inside change
); // select->date change
} // function inside ready
); // document.ready
*Note that #showtime is the id of a attribute
My expectations:
The value displayed should be able to work as a link that will direct the user to another php page. But apparently, it doesn't....
You need append all together, because if you append something like this:
$('#showtime').append("<a href='movie_seat.php?id="+showtime+"' id='seatlink'>");
$('#showtime').append("<font style='margin-right:50px;'>");
$('#showtime').append(showtime);
$('#showtime').append("</font></a>");
That way the tags will be closed, and you html will seems like this:
<font style="margin-right:50px;"></font>
showtime
So what you need to do is append all together, i mean tags inside tags, try this:
var link = "<a href='movie_seat.php?id="+showtime+"' id='seatlink'>"
+ "<font style='margin-right:50px;'>"
+ showtime
+ "</font></a>";
$('#showtime').append(link);
Related
i hope someone can help me with this problem
i have a logic problem in code to solve
i have a value in jquery in like this
$(".test").click(function(){
var category=$(this).attr("data-id");
}
data-id value is 1
php codes (test.php)
function test()
{
$newdata=data-id + data-id;
return newdata;
}
echo test();
i need the code to call the data-id value from first jquery to put in the test() function
and the last , i need to put the echo -ed newdata value after the php function calculate the value to put it inside .test div with this second jquery
$("li").click(function(){
$('.test').text(data-id);
}
i need the complete step to step code for this problem , thanks for notice and helping! , sorry for bad english
You have several things here, the server processes the page (php) and sends it to the client. In order to get the client altered content back to the server (php) for processing, you would use ajax.
First you need to get the value from your field provided by the client which you are already doing with:
$(".test").click(function(){
var category=$(this).attr("data-id");
}
Now, once you have that value, you need to pass it to your PHP page. To do this, we use ajax, you will need to alter your click function:
$(".test").click(function(){
var testDiv = $(this);
//get the category value
var category = testDiv.attr("data-id");
//pass the category value to your php page
$.ajax({
url: 'test.php',
method: 'POST',
data: 'category='+category,
success: function(returnedData)
{
}
});
});
You can now access the $_POST variable in your PHP function:
//within test.php
function test()
{
$newdata=$_POST['category'] + $_POST['category'];
return $newdata;
}
echo test();
//if category was 1, this would echo 2 (as 1 + 1 = 2)
The last step is to put the returned value into your "test" div that was clicked:
//to place the returned data from test.php
//alter your .test click function
$(".test").click(function(){
var testDiv = $(this);
//get the category value
var category = testDiv.attr("data-id");
//pass the category value to your php page
$.ajax({
url: 'test.php',
method: 'POST',
data: 'category='+category,
success: function(returnedData)
{
//repopulate the clicked div with the returned data
testDiv.html(returnedData);
}
});
});
I am attempting to use AJAX to generate PHP to be displayed inside of a div based on the ID of the link clicked. (I haven't dealt with HTML formatting yet, just want to figure this out first)
My Code:
<script type="text/javascript">
jQuery(document).ready(function()
{
$(".myClass h3").click(function(){
var clickID = $(this).attr('id'); //For sake of argument lets say id = 1.
$.ajax({
url: 'landingPage.php',
data: {ProductIDNumber: clickID},
success: function(html) {
$('#container').append(html);
}
});
});
});
</script>
I have dealt with getting the PHP to run when the url is landingPage.php?ProductIDNumber=1 and that all works properly, I just don't quite grasp how to return the resultant HTML.
Edits made and commented on.
You need to include success, which is run once the response is received, similar to;
<script type="text/javascript">
jQuery(document).ready(function()
{
$(".myClass h3").click(function(){
var clickID = $(this).attr('id'); //For sake of argument lets say id = 1.
$.ajax({
url: 'landingPage.php',
data: {
ProductIDNumber : clickID
},
success: function(html) {
// Do what you need to here with 'html'
$('#container').append(html);
}
});
});
</script>
As Alvaro said the structure of the data was also incorrect
Here's a link to the jQuery docs where you can find out more about the parameters and options you have (such as handling fails etc)
the data is wrong,
it is like this:
data: {varname: value, varname1: value},
I'me trying to implement an on/off button on a php loop but I can't make it work because of the id of jQuery event. How can I get the correct id on click and pass it to the rest of the script?
The problem is in the $('#myonoffswitch')...
<script type="text/javascript">
$(document).ready(function(){
$('#myonoffswitch').click(function(){
var myonoffswitch=$('#myonoffswitch').val();
var wnfID=$('#wnfID').val();
if ($("#myonoffswitch:checked").length == 0) {
var a="2";
var b=wnfID;
} else {
var a="3";
var b=wnfID;
}
$.ajax({
type: "POST",
url: "ajax_wnf_status.php",
data: "statusWnf="+a+"&wnfID="+b,
success: function(html) {
$("#display").html(html).show();
}
});
});
});
</script>
I'm generating different id's for the loop rows (ex: id="#myonoffswitch1" ; id="#myonoffswitch2"; etc).
I'm not certain I fully understand the question, but .val() will not get the ID of an element. You should use .attr('id') instead.
Also, it looks like you're trying to format data for a GET request, not a POST.
If I understand the question correctly, I think you're looking for
event.target.id
where 'event' is passed in to your handler:
('#myonoffswitch').click(function(event){
id = event.target.id
. . .
Though at that point, you might not need the id, since you can just use event.target directly.
The idea is to fetch the content from an external PHP file on Page load using jQuery .each() function. The problem is the page freezes or keeps on loading and never ends. What would be the issue?
PHP Page
<div class='caller-div-holder'>
<div class='calling-div' id='calling-div-1'></div>
<div class='calling-div' id='calling-div-2'></div>
<div class='calling-div' id='calling-div-3'></div>
</div>
In the .js file
$('.calling-div').each(function()
{
var fetch_id=$(this).attr('data-id');
$.ajax(
{
type: "POST",
url: "page-url",
data: {var1: fetch_id},
dataType:"html",
success: function(data)
{
$('#calling-div-'+fetch_id).html(data);
}
}); // Ajax
}); // Each function
Note:
Instead of $.ajax() on using document.write I found that the function is called for 3 times correctly with the variable fetch_id getting the data properly.
The external PHP page is checked with sample data just changing the POST to GET and passing the data through GET method. It works.
Edit 1:
Adding async:"false", reduces the problem intensity. But still the page is considerably slow.
The following will solve the issue by adding all the html at once, this will be faster than the other method...it will still lock the DOM at the end when it adds the html variable to the html of the parent element.
var html = '';
$('.calling-div').each(function()
{
var fetch_id=$(this).attr('data-id');
$.ajax(
{
type: "POST",
url: "page-url",
data: {var1: fetch_id},
dataType:"html",
success: function(data)
{
html += "<div class='calling-div' id='calling-div-" + fetch_id + "'>" + data + "</div>"
}
}); // Ajax
}); // Each function
$('.caller-div-holder').html(html);
Special Note I highly recommend using the following to solve this problem:
jQuery append() for multiple elements after for loop without flattening to HTML
http://jsperf.com/fn-append-apply
I am having a problem with seeing one of my variables on a webpage. Here is what I have so far.
$(document).ready(function() {
$(function() {
$("#CheckID").click(function() {
// submit ajax job and display the result
var id = '$("#ID").val()'
$.ajax({
type: "POST",
url: "test_wID.php",
data: "id",
success: function(data) {
$('#rightselection').html(data)
}
});
});
});
});
This is the jquery function I am using to take an ID entered into a form and use that ID with a bash script.
Here is the php.
<?php
//Get the ID from the HTML form and use it with the check chunk script.
$id = $_POST['ID'];
if (is_null($id)){
echo "$id is null";
}
echo "Selected test Game ID: ".$id;
//print shell_exec('/opt/bin/tester $id');
?>
I commented out the script because the variable is returning null, at this point I am just trying to make sure that I get the ID.
For completeness here is the form I'm using.
print "<p><h3>ID: <input type=\"text\" id=\"ID\" /></h3></p>";
#print "<br>";
print "<p><button id=\"CheckID\">Check ID</button></p>";
When i click the button I get the message in my div that the variable is null. So my question is am I missing something in the declaration? How is it that the var id is null?
Thanks for any help provided.
You should consider changing your jQuery code to:
$.ajax({
type: "POST",
url: "test_wID.php",
data: {id: $("#ID").val()},
success: function(data) {
$('#rightselection').html(data)
}
});
You mixed up strings and variable references at two points.
First, the statement var id = '$("#ID").val()' assigns just a string to your if variable and not the return value of the jQuery call. So just remove the ' here.
Second, the data parameter you're giving to the ajax() call again consists just of a string "id" and not the respective value. Here you need to change to {'id': id}.
So after correcting everything, your code should look like this:
$(document).ready(function() {
$("#CheckID").click(function() {
// submit ajax job and display the result
var id = $("#ID").val();
$.ajax({
type: "POST",
url: "test_wID.php",
data: {'id': id},
success: function(data) {
$('#rightselection').html(data);
}
});
});
});
Sidenote: Try to put all ;, where they belong. This prevents some errors, which can be hard to track!
EDIT
As pointed out in the comment by #FlorianMargaine you only need one wrapper not two around your code.
Firstly, the two following snippets are equivalent:
$(document).ready(function() {
});
// Is equivalent to:
$(function() {
});
So your code does the same as:
$(document).ready(function() {
$(document).ready(function() {
});
});
Plain useless, right?
Secondly, this line is plain wrong:
var id = '$("#ID").val()';
You're passing a string to the id variable. $('#ID').val() is not evaluated. This is the equivalent of doing this in PHP:
$id = '$_POST["id"]';
Which is just wrong, right?
You want this:
var id = $('#ID').val();
By the way, this variable naming could be improved, the same goes for the HTML ID.
Thirdly, you're doing the same mistake in the data option of $.ajax:
data: 'id'
You're just passing a string to the data option. You want the value of the id variable.
Then, if you absolutely want a string, I don't recommend it. jQuery expects a special kind of string. You better pass an object. Like this:
data: {
id: id
}
Do you see why the variable naming is wrong? You can't differentiate the property from the value. If you had done the following:
var idValue = $('#ID').val();
You could use this:
data: {
id: idValue
}
Which is way more readable.
In your $.ajax call you need to do:
data : { id: id }
If you want to pass parameters in an AJAX call you need to pass a string similar to the GET string you see in urls. So something like: d=123&name=test
Change the line
var id = '$("#ID").val()'
To
var id = 'id=' + $("#ID").val();