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>
Related
view
<?php
for(condition)
{
?>
<input type="hidden" name="pid" value="<?php echo $data1->id; ?>">
</i>
<?php
}
?>
AJAX
<script type="text/javascript">
$ (document) .ready(function() {
$('[name="like"]') .click (function() {
var pid = $('[name="pid"]').val();
alert(pid);
});
});
</script>
Expected Result:-
If I click on like anchor tag it should show me different id for different posts and I don't want to reload my page.
Actual Result:-
It is showing me the first id when I click on different like tags of different posts.
I am new to AJAX.
Thanks in advance.
view
<?php
for($i=0;$i<count($data1);$i++)
{
?>
<input type="hidden" name="pid#<?=$i?>" value="<?php echo $data1->id; ?>">
</i>
<?php
}
?>
AJAX
<script type="text/javascript">
$ (document) .ready(function() {
$('[name="like"]') .click (function() {
$name = $(this).split("#");
var pid = $('pid'+$name[1]).val();
alert(pid);
});
});
</script>
you place the input and a inside the div and then get the a's sibling which is the input
<?php
for (condition) {
?>
<div>
//Your input and a tag here
</div>
<?php }
?>
<script>
$('[name="like"]').click(function () {
var input = $($(this).siblings("input")[0]); // get the input element
var value = input.val(); //value of the input
alert(value);
});
</script>
You are setting same name for all the input.
If you don't need input field as hidden then you can use attribute to set and get the value of your post.
<?php
for(condition)
{
?>
<input type="hidden" name="pid" value="<?php echo $data1->id; ?>">
</i>
<?php
}
?>
You can use class name to access the attribute of anchor tag.
<script type="text/javascript">
$(document).on('click', '.select_id', function(){
var pid = $(this).attr('data-pid');
alert(pid);
});
</script>
Can't figure it out what is the problem with the $.post here.
Actually i am retrieving data from database in column 1 and column 2. both are getting values perfectly when i am trying the controller function individually. Now, i am trying jquery that when the first column value will be clicked it shows the other column values. but its not passing on $.post
Here is jquery :
<script type='text/javascript'>
$('document').ready(function(){
var link ="<?php echo base_url();?>" ;
$( "#cat_level_1" ).on( "click", function() {
var cat_level_1 = $('#cat_level_1').val();
alert (cat_level_1); //getting elements id like (men alert for 49) alert on click
$.post(link + "admin/admin_cat/cat_level_2", {cat_level_1 : cat_level_1}, function(data) {
alert( "Data Loaded: " + data);
//here it showing me HTML of my controller in alert.
$('#cat_level_3').html('');
$('#cat_level_4').html('');
$('#cat_level_2').html(data);
});
});
});
</script>
For second column :
<script type="text/javascript">
$('document').ready(function(){
var link ="<?php echo base_url();?>" ;
$('#cat_level_2').click(function(){
var cat_level_2 = $(this).val();
alert (cat_level_2); //it shows me alert with its db id.
$.post(link + "admin/admin_cat/cat_level_3", {cat_level_2:cat_level_1}, function(data) {
$('#cat_level_4').html('');
$('#cat_level_3').html(data);
});
});
});
<script>
Here is my php(view) code from which i am getting values :
For column 1 :
<div class="category-col">
<select size="15" name="cat_level_1" id="cat_level_1">
<?php
if (isset($cat_level_1) && $cat_level_1 != ''){
foreach ($cat_level_1 as $cat_1) {?>
<option value="<?php echo $cat_1['cat_id']; ?>">
<?php echo $cat_1['cat_title']; ?>
</option>
<?php }
}
?>
</select>
</div>
For column 2 :
<div class="category-col">
<select size="15" name='cat_level_2' id='cat_level_2'>
<?php
if (isset($cat_level_2) && $cat_level_2 !=''){
foreach ($cat_level_2 as $cat_2) {?>
<option value="<?php echo $cat_2['cat_id']; ?>">
<?php echo $cat_2['cat_title']; ?>
</option>
<?php }
}
?>
</select>
</div>
Some one help me out please!. Where is the problem?
Thank you!
The issues is in this line:
$.post(link + "admin/admin_cat/cat_level_3", {cat_level_1:cat_level_1}, function(data) {
The problem here is you are using var "cat_level_1" value in both the places and when trying to read the para in php you wont get it.
I think you should quote the key cat_level_1. so the code must be:
$.post(link + "admin/admin_cat/cat_level_3", {"cat_level_1":cat_level_1}, function(data) {
try this if it works for you.
The problem is this line
var link ="<?php echo base_url();?>" ; you can not do this from javascript if you have virtual hosts set up you can do this window.location.origin + "/admin/admin_cat/cat_level_2"
Ok here could be the mistake.
cat_level_2:cat_level_1
Make it
cat_level_2:cat_level_2
in the second js.
you cannot write php code inside js file.So this line will not work.
var link ="<?php echo base_url();?>" ;
try to add this line inside your main view file (header) before you including the javascript files
<script type="text/javascript">
var link ="<?php echo base_url();?>" ;
</script>
I have two divs, and when one is clicked it empties the div. I want to be able to load data into that div once it's been emptied. I've got it so it loads in both, but I only want to load data into the div that's been emptied.
HTML (I have two of these)
<div class="fl person">
<div class="maintain_size">
<input type="hidden" name="userSaved" value="<?php echo $user_one['id']; ?>" />
<img src="<?php echo "http://graph.facebook.com/".$user_one['id']."/picture?type=large"; ?>" class="circle-mask" />
<img class="hoverimage" src="images/fire_extinguisher.png" />
<div class="meta_data">
<h2><?php echo $user_one['name']; ?></h2>
</div>
</div>
</div>
Javascript
<script>
$("div.person img").click(function () {
$(this).parent("div").fadeOut(1000, function () {
var saved_id_user_who_voted_val = "<?php echo $_SESSION['id']; ?>";
var saved_id_user_voted_on_val = $(this).parent('div').find('input:hidden');
var saved_id_user_voted_on_val = saved_id_user_voted_on_val.val();
$(this).parent("div").empty();
// Load in new data
var current_div = $(this).parent("div");
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
});
});
</script>
The data seems to come through fine if I select a div that's not the current one, or I just use an alert to see if the data is there--which it is, but if I try load the data into the current div it just doesn't work. Any ideas? Thanks.
The code that I think is wrong:
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
Edit: The div I'm trying to get the data into is: div.person - although, there are 2 of these.
Once you empty the div your 'this' is no longer there. Try just declaring var current_div before you empty.
var current_div = $(this).parent("div");
current_div.empty();
$.get('loadNewUser.php', function(data) {
current_div.html(data);
});
See fiddle
You need to delegate the event as you are replacing old content with new one
$(document.body).on('click',"div.person img",function () {
Use live() function
Example
$("div.person img").live("click",function () {
//Your code goes here
});
I have a bit of code to record a certain action
$('#record').click(function(){
$.get("../confirm.php", { "id": '<?php echo $record; ?>' }, function(data){});
});
Which works fine, but i don't want the page to be full of javascript and such as i have other things like this on it too, so i am trying to move it to a js file.
In the php file
<script type="text/javascript">var record = "<?= $record ?>";</script>
<script type="text/javascript" src="jsfile.js"></script>
In the js file
$('#record').click(function(){
$.get("../confirm.php", { id: record}, function(data){});
});
But it doesnt want to play ball, any ideas how to do this?
Make 'record' as class of div and assign php variable $record as its id.Use event.target.id to get variable $record from div.
<div class="record" id="<?php echo $record;?>">
Your code here
</div>
And Use this
$('.record').click(function(event){
var record=event.target.id;
//your code here
});
If I may a suggestion to you. Set in the view on the element the ID. Then when the action is clicked, get the id for the data.
Example:
<input type="text" name="inputName" id="<?php echo $record; ?>" class="btnToRecord" />
$('.btnToRecord').click(function(){
var clickedElement = $(this);
$.get("../confirm.php", { id: clickedElement.attr("id") }, function(data){});
});
Edit: Correction for $(this) was pointing to the get instead to the element, putting in a var will fix the problem
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')}
);
});
});