I am trying to load the function call_ajax_add_to_quotelist via the button with the following code:
$cartlink .= '<a class="add_to_cart button alt" href="javascript:void(0);" onclick="call_ajax_add_to_quotelist(add_to_quotelist_ajax_url,'.$product->id.');" '.$style.'>'.$label.'</a>';
The code above is loading fine on the view source however when clicked it is showing dead with no console error I have loaded the js file in the function (It belongs to another plugin I am hacking a WP plugin with the same actions of another plugin)
Script Load:
$quotePluginJSUrl = site_url().'/wp-content/plugins/dvin-wcql/js/dvin_wcql.js';
?>
<script src="<?php echo $quotePluginJSUrl; ?>"></script>
<?php
I would a t first check, if call_ajax_add_to_quotelist is really a function in JavaScript Console, and if add_to_quotelist_ajax_url is a correct value.
Also, it is recommended to not use onclick. I recommend using jQuery event binder .on().
Expl.:
<?php
$cartlink .= "<a class='add_to_cart button' data-id='{$product->id}'
href='javascript:;' {$style}>{$label}</a>";
// ... more products
?>
// **one** <script> after all products
<script>
jQuery(window).on('click', '.add_to_cart.button', function() {
call_ajax_add_to_quotelist(add_to_quotelist_ajax_url, $(this).data('id');
}
</script>
Close the anchor
<a>...</a>
because you are adding the anchor dynamically, you need to use .addEventListener if you're using JS or Event Delegation if you're using jQuery
e.g.
$('.button').on('click',function(){
call_ajax_add_to_quotelist(add_to_quotelist_ajax_url,'.$product->id.');
});
Plus you haven't closed the anchor tag in your code which might cause you some problems:
$cartlink .= '<a class="add_to_cart button alt" href="javascript:void(0);" '.$style.'>'.$label.'</a>'
Related
$("#maincont<?php echo $forwardInterviews; ?>").load("/xx/xx/xx/xx/xx/buttonClickDetails.php",
When the button is pressed, I bring the content. JSs are missing when fetching the content. JSs appear in the footer in the source code. But the selectpicker property in buttonClickDetails.php does not work.
When I include buttonClickDetails.php as below, selectpicker does not work.
<script src="<?php echo url()."assets/js/bootstrap-select.min.js"; ?>"></script>
I was using the selecpicker class in the div that I called with Ajax. But since I did not renew the selecpicker after calling it, the script was not working.
$('.selectpicker').selectpicker('refresh');
My problem was solved with the code.
I'm trying to call a javascript function called confirmRemove(title, id) to remove an element from a table. This function should be called when the user clicks on a link that looks like an "X". I attached my code below to show how I went about doing this, but I'm seeming to be having some errors and I'm not sure why. Most of the elements are able to be removed, but for a few when I click the link to call the function, nothing happens. Is there a better way of doing this? Not sure why this would happen.
<td><?php echo '<a onclick="confirmRemove(\'' . $title . '\',\'' . $id . '\')"
href="javascript:void(0)">X</a>';?></td>
You can try this code
<td> <a onclick="confirmRemove('<?php echo $title; ?>','<?php echo $id; ?>')"
href="javascript:void(0)">X</a></td>
You asked if there is a better way of doing this - I would suggest that there is and that it is to use an externally registered event handler bound to the specific HTML elements in question - notably a hyperlink in this example.
If you assign relevant attributes to the hyperlink ( dataset attributes are very useful for this sort of task ) you can process them within your event listener very easily. There is not need for complicated escaping for quotes by adopting this approach and best of all you can separate HTML from Javascript - the event handlers can be in another file
<td>
<a class='removal' href='javascript:void(0)' data-title="<?php echo $title;>" data-id="<?php echo $id;?>">X</a>
</td>
<script>
Array.from( document.querySelectorAll('a.removal') ).forEach( a=>{
a.addEventListener('click',function(e){
confirmRemove( this.dataset.title, this.dataset.id )
});
});
</script>
I want to open links in a new pop up, I have my link in a PHP Code but when I try to add a on-click I keep getting errors.
This is my code:
echo "<td>Edit</td>";
Where exactly do I need to add the on-click function? Because it's easy in html but I keep getting errors because it's in PHP
Thanks
Add target="_blank"
_blank : Opens the linked document in a new window or tab
echo "<td><a href=\"edit.php?id=$row[id]\" target='_blank'>Edit</a></td>";
For a popup solution add this (attention to the various " ' )
target="popup" onclick="window.open('yourlink','name','width=xxx,height=xxx')"
echo "<td><a href=\"edit.php?id=$row[id]\" target='_blank'>Edit</a></td>"
another way is write a js function open_window = function(){your stuff} and
echo "<td><a href=\"edit.php?id=$row[id]\" onclick='open_window()'>Edit</a></td>"
You need to use window.open javascript functoin. Here is an example:
<a href="#" onclick='javascript:window.open(url, "", "width=200, height=100");' >Edit</a>
You may want to specify the javascript code in a separate function as well.
See http://www.w3schools.com/jsref/met_win_open.asp for more information on window.open function.
<body>
<ul id="M8" class="Mh"><li ><a id="atagid" class="msub" href="javascript:;
"onclick="trackchange();" >Track Change(OFF)</a></li></ul>
<?php
if(isset($_SESSION['track'])){
echo "<script>alert('working');</script>";
echo "<script>
$(document).ready(function(){
$('#atagid').css('color','green');
$('#atagid').html('Track Change(ON)');
});</script>";
}
?>
<script>
function trackchange(){
$('#atagid').css('color','green');$('#atagid').html('Track Change(ON)');}
//This function is working but in php block it is not working
</script>
</body>
If $_SESSION['track'] is set then the html element a color should be changed to green and the content should be changed to Track change(ON).
In this script alert function is working which confirms the session variable, but content and color of a tag is not getting changed. I couldn't to find where am I doing wrong.
The probable issue with your code is misplacement of jQuery file, Just try to put it in the <head>...</head>.
You need to include jQuery first by using
<script src="point/to/your/jquery.min.js"></script>
I'm trying to use the id attribute of a html link as a php variable. I am trying to do this using javascript as below:
<a data-toggle="modal" data-target="#profileModal" id="<?php echo $id; ?>" onclick="<?php $profile_id='<script> function(){ var pid = $(this).attr(\"id\")}; document.write(pid); }<\/script>';?>"><?php echo $first_name; ?></a>
I can document.write static text out of that function but there is no output when I add:
var id = $(this).attr(\"id\");
and try output that.
The links are on the first name in a table that will open a modal. How can I make this happen?
For inline event handlers, don't use <script> tags.
onclick="var pid = $(this).attr(\"id\")}; document.write(pid);"
Note document.write() overwrites the whole page content.
Unless you're just calling a function, inline handlers get ugly, as your code shows, so consider using unobtrusive JavaScript to assign the event handlers.
For example if you give the links a class:
$(function(){
$('.myClass').click(function(){
console.log( this.id );
});
});