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>
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>
How can I get the value of the first input field from a list?
<button id="hello">get data</button><br><br>
<table> <td><label for="voucher_<?php echo $counter; ?>">D/N Number <?php echo $counter; ?></label><br>
<input type="text" name="voucher_<?php echo $counter; ?>" class="input-field exsmall-input" value="<?php echo $voucher; ?>" placeholder="D/N Number" id="voucher_<?php echo $counter; ?>" required>
</td></table>
When I run the above code the number of rows varies depending on the counter.If I want to get the value of the first DN number ,what shall I do ?
$(document).ready(function(){
$('#hello').click(function(){
var name = $("#voucher").val();
alert(name);
});
});
When I run this javascript I get undefined vales.
The reason you are getting the error is because you have used wrong selector to target input element. input element do not have id voucher. You need to put the ID to make existing code work.
Or, You can use attribute starts with selector here from current HTML:
$('#hello').click(function(){
var name = $("input[name^='voucher_']").val();
alert(name);
});
You can do it like below:-
$(document).ready(function(){
$('#hello').click(function(){
var name = $("div[id^='voucher']:visible:first").val();
alert(name);
});
});
Or:-
$(document).ready(function(){
$('#hello').click(function(){
var name = $("input[type=text]:visible:first").val();
alert(name);
});
});
Try this:-
$(document).ready(function() {
$('#hello').click(function() {
var name = $('table').find('input[type=text]').filter(':visible:first')
.val();
});
});
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 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
I have an php array that is generated by server-side code. I want to show the array value in my input field after user pick an option from my dropdown menu. Please see my code:
$(document).ready(function(){
$('select[name="job_number"]').change (function () {
var selectedVal = $(this).val();
var test="<?php echo $JNarray['selectedVal'];?>"; //where the problem is
$('input[name="project"]').val(test);
//I want show value1 to value 3 in my input field when user picks
//an option from my dropdown menu.
});
<?php
$JNarray['job1']=value1;
$JNarray['job2']=value2;
$JNarray['job3']=value3;
?>
<form action='project_manager' method='post'>
<input type='text' name='project' value='show value1 to value3 when user picks an option' />
<select name='job_number'>
<option value='job1'>job1</option>
<option value='job2'>job2</option>
<option value='job3'>job3</option>
</select>
</form>
Any thoughts? Thanks for the help!
Here's a cleaner way to do it without having to set the array to a variable. Use a data attribute that jQuery reads with $.data()
HTML:
<option value='job1' data-job-val="<? echo $arrayvalue ?>">job1</option>
JS:
$('select[name="job_number"]').change (function () {
var test=$(this).find('option:selected').data('job-val');
$('input[name="project"]').val(test);
});
Though, I don't recommened echoing php in js...
var test=JSON.parse(<?php echo json_encode($JNarray['selectedVal']);?>); //where the problem is
<select name='job_number'>
<option value='<?php echo $JNarray['job1'] ?>'>job1</option>
...
...
</select>
<script>
$(document).ready(function(){
$('select[name="job_number"]').change (function () {
$('input[name="project"]').val($(this).val());
});
</script>
something like that.
You have to declare and populate your array before you use it on the jquery code. Move your <?php ?> code to the top.
Then pass the whole php array to javascript, using JSON as Trevor suggested:
$(document).ready(function(){
var options = JSON.parse(<?php echo json_encode($JNarray);?>);
$('select[name="job_number"]').change (function () {
var selectedVal = $(this).val();
var test=options[selectedVal]; //where the problem was
$('input[name="project"]').val(test);
});
});
I agree with Trevor, however try
"<?php echo $JNarray['"+selectedVal+"'];?>"
Echoing PHP means your calling your JS from a PHP file, not a good approach dude!, The only thing I would pass is maybe a BASE_URL or FILE_UPLOAD_TYPE/SIZE, even those are ewwwwwwwy