I have some inline JS that I'm having trouble changing over to jQuery. I would like to remove all the inline onclick events and target them all by class.
HTML - checkbox
<td class="center">
<?php if ($product['selected']) { ?>
<input type="checkbox" name="selected[]" id="<?php echo $product['product_id']; ?>_select" value="<?php echo $product['product_id']; ?>" checked="checked" />
<?php } else { ?>
<input type="checkbox" name="selected[]" id="<?php echo $product['product_id']; ?>_select" value="<?php echo $product['product_id']; ?>" />
<?php } ?>
</td>
HTML - inline JS
<input type="text" class="editable" name="<?php echo $product['product_id']; ?>_model" id="<?php echo $product['product_id']; ?>_model" value="<?php echo $product['model']; ?>" size="16" onclick='document.getElementById("<?php echo $product['product_id']; ?>_select").setAttribute("checked","checked");' />
The above code works but when I try to use jQueryversion 1.7.1 it breaks. Here is the code I have tried.
$(document).ready(function() {
$(".editable").live("click", function() {
$("#<?php echo $product['product_id']; ?>_select").attr("checked", "checked");
$("#<?php echo $product['product_id']; ?>_select").checked = true;
});
});
I'm not really familiar with jQuery but I think it's close. Any Ideas?
EDIT:
The problem is with the $("#<?php echo $product['product_id']; ?>_select") it works if hard coded. KevinB was correct even though ive never had this problem before but never used it within here $(element)
.live was deprecated in version 1.7 -- probably explains it. Use .on instead.
$(".editable").on("click", function() {
var name = '<?php echo $product['product_id']; ?>';
console.log("Name: " + name);
var el = $("#" + name + "_select");
console.log(el);
el.prop("checked", "checked");
});
Related
HTML + PHP
<?php
for($i=0;$i<5;$i++){
?>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this.id, $('.copyTarget').attr('id'));">Copy</button>
<?php
}
?>
JS
<script>
function reply_click(clicked_id, target_id) {
alert(clicked_id);
alert(target_id);
}
</script>
What i want
I want to get the both values for copyTarget and copyButton as per loop cycle. It means
If current value of $i = 3
then I want alert values like,
clicked_id = copyTarget3
target_id = copyButton3
What i am currently getting is,
If current value of
$i = 3
then I want alert values like,
clicked_id = copyTarget0
target_id = copyButton3
Its taking first value of ID(copyTarget) stored initially. I want current loop cycle value.
Any help would do
Thanks
Why use JS in handler?
Try:
onClick="reply_click('copyButton<?php echo $i; ?>', 'copyTarget<?php echo $i; ?>')"
Also you should store id names (copyButton and copyTarget) in php variable, so you can change them in one place.
You could try something like below. However, I would go by Maxx's answer .. It really depends on what you plan to do with the rest of code etc.
<?php
for($i=0;$i<5;$i++){
?>
<div>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this)">Copy</button>
</div>
<?php
}
?>
<script>
function reply_click(btn) {
var clicked_id = $(btn).attr('id');
var target_id=$(btn).parent().find('span').html();
alert(clicked_id);
alert(target_id);
}
</script>
Try This
<?php
for($i=0;$i<5;$i++){
?>
<input readonly class="copyTarget" id="copyTarget<?php echo $i; ?>" value="val<?php echo $i; ?>">
<span>
val<?php echo $i; ?>
</span>
<button class="btn btn-primary" id="copyButton<?php echo $i; ?>" onClick="reply_click(this.id);">Copy</button>
<?php
}
?>
JS
<script>
function reply_click(clicked_id) {
alert(clicked_id); //clicked id
alert(clicked_id.split('copyButton').join('copyTarget')); // target id
}
</script>
I need one help.i need to continue 2 types of loop at a time using Javascript and PHP.Let me to explain my code and scenario as well.
<script>
function addQuestionField(){
var get =$("#ques").val();
if(get==null || get==''){
alert('Please add no of questions');
}else{
var counter = 0;
if (counter > 0){
return;
}else{
counter++;
<?php
$status=array("status"=>'1');
$feeddata=$db->kf_answertype->find($ustatus);
?>
for(var i=1;i<get;i++){
$('#container').append(' <textarea class="form-control" name="questions'+ i +'" id="questions" placeholder="Questions" style="background:#FFFFFF;" rows="2"><?php if($_REQUEST['edit']) { echo $getcustomerobj->questions; } else { echo $_REQUEST['questions']; } ?></textarea>');
<?php
foreach($feeddata as $v){
?>
$('#subcontainer').append(' <input type="radio" name="answer_type0" id="answer_type0" value="<?php echo $v['_id']; ?>"> <?php echo $v['answertype']; ?>');
<?php
}
?>
}
}
}
}
</script>
Here i have one for loop but inside this one foreach loop is still there .By doing this in one iteration of for loop foreach loop continuing many times which i dont need.Here i need each time of for loop the foreach loop also iterate.suppose for 1st iteration of for loop the foreach loop also iterate once and so on.Please help me.
Use current and next functions to get consistent elements of an array. So, this fragment of your code
foreach($feeddata as $v){
?>
$('#subcontainer').append(' <input type="radio" name="answer_type0" id="answer_type0" value="<?php echo $v['_id']; ?>"> <?php echo $v['answertype']; ?>');
<?php
}
?>
should be changed to
$('#subcontainer').append(' <input type="radio" name="answer_type0" id="answer_type0" value="<?php echo current($feeddata)['_id']; ?>"> <?php echo current($feeddata)['answertype']; ?>');
<?php next($feeddata); ?>
or, if you use old version of php do it in such way:
<?php $v = current($feeddata); ?>
$('#subcontainer').append(' <input type="radio" name="answer_type0" id="answer_type0" value="<?php echo $v['_id']; ?>"> <?php echo $v['answertype']; ?>');
<?php next($feeddata); ?>
For whatever reason, when making an AJAX call to the server, the console keeps saying that a variable parameter I've assigned it to is perfectly valid in the previous function I've chained it to. The error I keep getting is:
Uncaught TypeError: Cannot call method 'split' of undefined.
Any help is greatly appreciated.
$("body").on("click", ".edit_tr", function() {
var ID = $(this).attr('id'); //This is valid. It works.
var split = ID.split('_');
$("#first_" + split[1]).hide();
$("#last_" + split[1]).hide();
}).change(function() {
var ID = $(this).attr('id'); //This keeps coming back as undefined.
var split = ID.split('_');
var first = $("#first_input_" + split[1]).val();
var last = $("#last_input_" + split[1]).val();
});
And some relevant PHP/HTML:
<tr id="item_<?php echo $id; ?>" class="edit_tr">
<td>
Delete Record
</td>
<td class="edit_td">
<span id="first_<?php echo $id; ?>" class="text">
<?php echo $firstname; ?>
</span>
<input type="text" value="<?php echo $firstname; ?>" size="8" class="editbox" id="first_input_<?php echo $id; ?>" />
</td>
<td class="edit_td">
<span id="last_<?php echo $id; ?>" class="text">
<?php echo $lastname; ?>
</span>
<input type="text" value="<?php echo $lastname; ?>" size="8" class="editbox" id="last_input_<?php echo $id; ?>" />
</td>
</tr>
Your value of this in the change handler is bounded to the body element. Your body element doesn't have that id. I would either do this:
$(".edit_tr").on("click", function() {
...
}.change( ... );
Or attach the change event on .edit_tr separately.
I have an HTML label and I would like to change its text at runtime. I know I can use innerHTML, which works, but why does it just just append my message in front of the already-set label text.
PHP:
<label for="hp_display" id="addToHP_<?php echo $x; ?>"></label><?php echo $addTo; ?>homepage: </label><input type="checkbox" id="hp_display_<?php echo $x; ?>" <?php echo $check; ?> onclick="addToHome('<?php echo md5($product['product_id']); ?>','<?php echo $add; ?>','<?php echo $x; ?>')" />
JAVASCRIPT:
function addToHome(id,a,n){
$.ajax({
url:'func/addToSlider.php',
type:'POST',
data:{type:a,id:id},
beforeSend: function(){
document.getElementById('addToHP_'+n).innerHTML = '';
document.getElementById('addToHP_'+n).innerHTML = 'Updating';
},
success:function(e){
if(e === '1'){
document.getElementById('addToHP_'+n).innerHTML = '';
if(a === 'remove'){
document.getElementById('addToHP_'+n).innerHTML = 'Add to homepage';
}else{
document.getElementById('addToHP_'+n).innerHTML = 'Remove from homepage';
}
}else{
alert('There has been a server changing your file, please try again');
}
}
});
}
It looks complicated, but surely innerHTML or JQuery's .html('') should replace the text instead of appending the text. I could just refresh page on success of the ajax but I think changing the label text is more user-friendly.
Your html markup is wrong, you have two closing label elements
<label for="hp_display" id="addToHP_<?php echo $x; ?>"></label><?php echo $addTo; ?>homepage: </label>
^^^^^^^^ ^^^^^^^
without all the php mark up it is
<label>X</label>Y</label>
You have too many </label>
<label for="hp_display" id="addToHP_<?php echo $x; ?>"></label><?php echo $addTo; ?>homepage: </label>
so while the label looks like it is being appended it is actually getting filled for the first time. remove the first </label> and problem solved.
should be:
<label for="hp_display" id="addToHP_<?php echo $x; ?>"><?php echo $addTo; ?>homepage: </label>
I have an input file list from database:
<?php
for ($x=0; $x<count($Permisos); $x++) {
?>
<tr>
<td> <?php echo utf8_encode($Permisos[$x]['des_permiso']); ?></td>
<td> <input name="txt_arch_<? echo $x;?>" type="file" class="text" id="txt_arch_<? echo $x;?>"> </td>
<td> <input name="cbx_<? echo $x;?>" type="checkbox" class="text" id="cbx_<? echo $x;?>" value="S">
</td>
</tr>
<?php
}
?>
This code returns a list of 'permisos' (requirements) with a checkbox next, for check it to upload the file.
What i have to do is: when user select a file (id or name: "txt_arch_<? echo $x;?>"), the checkbox ("cbx_<? echo $x;?>") will check it automatically.
I don't know if if explain very well.
Thank you for answers.
Add this to the document.ready event, assuming your using the jQuery framework:
$('input[type="file"]').on('change',
function()
{
$(this).next('input[type="checkbox"]').prop('checked', true);
}
);
I solved it:
// .....
<input onChange="VerifyFctn('<?php echo $x; ?>')" name="txt_arch_<? echo $x;?>" type="file" class="text" id="txt_arch_<? echo $x;?>">
// .....
Javascript:
function VerifyFctn(id){
document.getElementById("cbx_"+id).checked = true;
}
Anyway, thank you for see the post :)
Greetings