In my controller code contain html code in appened form.When i pass the parameters to the onclick function, I didn't get the parameters in the corresponding function.
controller
foreach ($cart as $item){
$row_id = $item['rowid'];
// $count++;
$output.='
<tr>
<td>'.$item['name'].'</td>
<td>'.$item['price'].'</td>
<td>'.$item['qty'].'</td>
<td>'.number_format($item['subtotal'],2).'</td>
<td> <i class="zmdi zmdi-close"></i></td>
</tr>
';
}
script
function remove(row_id)
{
alert(row_id);
}
Onclick function remove(), alert is not working
your old code is producing
<td> <i class="zmdi zmdi-close"></i></td>
which is an incorrect HTML
just replace this
onclick="remove("'.$row_id.'")"
with this
onclick="remove(\''.$row_id.'\')"
see a demo : https://eval.in/830107
onclick="remove("'.$row_id.'")"
Will result in:
onclick="remove("123")"
See where its going wrong? Onclick now contains only the portion remove(, because than a double quote termintes the onclick content.
Related
I'm trying to append into the html code a javascript function with 2 variables,
the comment variable is a string and i have problem passing it :
var url = '{{URL::to('calendar/comments')}}';
$.getJSON(url+"/"+data.id, function(data)
{
ul.append("
<li>
<a href='#'onclick='openmodal("+value.id+", "+value.comment+")'>
Modifier
</a>
</li>"
);
});
but when i display in the console i get the string variable shown as a varibale
for example test and not "test" as i want and i get this error "test is not defined".
var url = '{{URL::to('calendar/comments')}}';
$.getJSON(url+"/"+data.id, function(data)
{
ul.append("
<li>
<a href='#'onclick='openmodal("+value.id+", \""+value.comment+"\")'>
Modifier
</a>
</li>"
);
});
You need to surround the comment with "" so when you trigger the click,
the onclick function as something like openmodal(1,"test") and not openmodal(1,test) since it would just try to call it with the `test variable which is undefined
Trying to consolidate these three sub functions into one sub function by passing along a variable from the button itself. I currently have four buttons and each button triggers the primary function. Inside the primary function I have the three sub-functions that changes the contents of the div with one of three new html variables. So each button can then change out the div to its own respective content. This code is working now for me no problems, but I figure there has to be a way to just make that sub-function into just one function instead of three by setting the .replaceWith to a global variable. That inside the function there would be a getter that checks the ID of the button that was clicked and passes it to that replaceWith instead.
<script>
$(document).ready(function(){
$("button.first").click(function(){
$('div.switchMeOut').replaceWith(firstHTML);
});
$("button.second").click(function(){
$('div.switchMeOut').replaceWith(secondHTML);
});
$("button.third").click(function(){
$('div.switchMeOut').replaceWith(thirdhtml);
});
});
var firstHTML = '<div class="switchMeOut"><p>First Section Content</div>';
var secondHTML = '<div class="switchMeOut"><p>Second Section Content</div>';
var thirdHTML = '<div class="switchMeOut"><p>Third Section Content</div>';
</script>
<body>
<div id="parentblock">
<h5>Contacts List</h5>
<div class="switchMeOut">
<script> document.write (firstHTML + seconcHTML + thirdHTML); </script>
</div>
</div>
<button id="firstHTML" class="swapper first">Shows First Only </button>
<button id="seconcHTML" class="swapper second">Shows Second Only </button>
<button id="thirdHTML" class="swapper third">Shows Third Only </button>
</body>
So here is what I think should be next but I am definitely missing something.
<script>
$(document).ready(function(){
$("button").click(function(){
// some code here to get the buttons ID element
// and possibly set a variable to that buttons id.
var passThis = button#;
$('div.switchMeOut').replaceWith(passThis);
});
});
Then have each button have their own id. For example:
<button id="firstHTML" class="swapper first">Shows First Only </button>
Any help on this would be appreciated, I dont quite know what I am missing here but I feel like it's pretty close.
Thanks!
You can get the ID of the clicked element like this:
var passThis = $(this).attr("id");
But I think you need to do this too:
var htmls = {
firstHTML: '<div class="switchMeOut"><p>First Section Content</div>',
secondHTML: '<div class="switchMeOut"><p>Second Section Content</div>',
thirdHTML: '<div class="switchMeOut"><p>Third Section Content</div>'
}
And then your switching statement would look like this:
$('div.switchMeOut').replaceWith(htmls[passThis]);
Regarding your comments:
htmls is not an array, its an object. It's called an object in javascript, but people also call them dictionaries, hashes, associative arrays, key/value pairs etc. See: https://en.wikipedia.org/wiki/Associative_array
Also you can't "call" an array or object. You call a function. The best way to phrase that would be "I retrieved/got the value at index 3" for arrays and "I retrieved/got the firstHtml property" for objects.
You can use "eval('variablename') to get the value of the variable. However you can also use eval to get a reference to an object with that ID "eval('id')". So the first thing to do is change the ID of your buttons to a data attribute. Instead of "id='firstHTML'" make it "data-id='firstHTML'". So that when you eval("firstHTML") it knows you mean the variable and not the button object.
And you can get rid of the inline script tag in the "switchMeOut" div and load that using jquery in the same document.ready function.
Heres a fiddle showing it working: http://jsfiddle.net/ub8wz5Lb/
HTML:
<div id="parentblock">
<h5>Contacts List</h5>
<div class="switchMeOut">
</div>
</div>
<button data-id="firstHTML" class="swapper first">Shows First Only </button>
<button data-id="secondHTML" class="swapper second">Shows Second Only </button>
<button data-id="thirdHTML" class="swapper third">Shows Third Only </button>
Javascript:
var firstHTML = '<div class="switchMeOut"><p>First Section Content</div>';
var secondHTML = '<div class="switchMeOut"><p>Second Section Content</div>';
var thirdHTML = '<div class="switchMeOut"><p>Third Section Content</div>';
$(document).ready(function(){
$("button").click(function(){
var id = $(this).data("id");
$('div.switchMeOut').html(eval(id));
});
$('div.switchMeOut').html(firstHTML + secondHTML + thirdHTML);
});
I would like to know how to pass Angular ng-repeat variable to my Javascript onclick event
My angular repeater
<div class="data" data-ng-repeat="sub in subs" >
<button onclick="ConfirmDialog(sub.SubID)">Cancel</button>
{{ sub.someOtherProperty}}
{{ sub.someOtherProperty}}
{{ sub.someOtherProperty}}
</div>
My script function
<script type='text/javascript'>
function ConfirmDialog(subID) {
console.log('Succesfully submitted id: ', subID);
});
</script>
The error : sub is not defined (in the onclick() call from the button element) all other properties show as expected.
You are running straight javascript onclick instead of ng-click.
move confirmDialog into your controller and ng-click can attach to it.
<div class="data" data-ng-repeat="sub in subs" >
<button ng-click="ConfirmDialog(sub.SubID)">Cancel</button>
</div>
$scope.ConfirmDialog = function (subID) {
console.log('Succesfully submitted id: ', subID);
});
If you don't want to use ng-click, you still have a chance! Try the following
<tr ng-repeat="supplier in suppliers" id="{{supplier.id}}">
<button onclick="readVariable(this);">
</tr>
<script>
function readVariable(elem){
id = elem.parentNode.id;
console.log(id); //it works!
}
</script>
You should use ng-click instead in order to access the ng-repeat variable
<button ng-click="ConfirmDialog(sub.SubID)">Cancel</button>
I have created a javascript function, and the function is contained within the onclick function in the html code. when the variable "data.nik" called with a value 10.34.099 or "10AXMN.09" onclick function is not functioning properly and displays an error message. if "data.nik" worth 101011 then the onclick function can be run well.
The following javascript code
function tabelListPegawai(data){
var statusPegawai;
if (data.status==1){
statusPegawai = 'Karyawan Tetap';
}else if(data.status==2){
statusPegawai = 'Karyawan Tidak Tetap';
}
return baris = $("<tr>\
<td>"+data.nik+"</td>\
<td>"+data.nama_pegawai+"</td>\
<td>"+data.nama+"</td>\
<td>"+data.nama_jabatan+"</td>\
<td>"+statusPegawai+"</td>\
<td style='text-align: center;'>\
<a class='btn btn-small aksi_atas' rel='tooltip' title='Ubah' onclick='editPegawai("+data.id_pegawai+")'><i class='icon-edit'></i></a>\
<a class='btn btn-small aksi_atas' rel='tooltip' title='Hapus' onclick='hapusPegawai("+data.id_pegawai+", "+data.nik+")'><i class='icon-remove'></i></a>\
</td>\
</tr>");
You should insert the quotes around the argument
onclick='editPegawai(\""+data.id_pegawai+"\")'>
<div class='unsubscribe'><a id='us$id' href='#' onclick='subscribe(u,$id);'>
<img src='/unsubscribe.jpg' alt='unsubscribe' /></a></div>
onclick how do i change the first parameter in the onclick function to 's'? So the next time it will look like this.
<div class='unsubscribe'><a id='us$id' href='#' onclick='subscribe(s,$id);'>
<img src='/unsubscribe.jpg' alt='unsubscribe' /></a></div>
I wouldn't do it like you want to. See the XY Problem.
Instead, what you should so, is keep track of the subscription state of the user, either using a cookie or an identifier on the link (data-state="s"), and take notes in the function.
Instead of setting onclick in your HTML do it with Javascript soon after. I'm assuming you're echoing all your code as a double quoted PHP string because of 'us$id':
<div class='unsubscribe'>
<a id='us$id' href='#'>
<img src='/unsubscribe.jpg' alt='unsubscribe' />
</a>
</div>
<script type='text/javascript'>
document.getElementById('us$id').onclick = function(){
// Subscribe u
subscribe(u, $id);
// Set all future clicks to subscribe s
this.onclick = function(){
subscribe(s, $id);
};
};
</script>
Instead of changing the string in the onclick, you can change it in the javascript itself. This is if you want to change all of the s to u throughout the page (wasn't sure if there was only one or if this is what your intention is).
Remove the first parameter:
<div class='unsubscribe'><a id='us$id' href='#' onclick='subscribe($id);'>
<img src='/unsubscribe.jpg' alt='unsubscribe' /></a></div>
Then change subscribe() to this:
function subscribe(id)
{
// doing "static" variable in javascript
if (typeof this.foo == 'undefined')
{
this.foo = 's';
}
else
{
this.foo = 'u';
}
...
}
One way would be to change it textually; use var el = document.getElementById('us$id'); to retrieve the element, then search el.attributes for an attribute with .name value "onclick", and replace its child with a new TextNode with the second function call.
A different approach would be to change the HTML so that subscribe will get both u and s, and somehow (e.g. with a global variable, a static variable, etc.) remember if it's the first or second time that this method is invoked.