Button Click from PHP is not responding - javascript

I echo a button from a php script as following: print'<button id="testingbtn">TEsting</button>';
I use the id listen to the button and alert a notification message as following:
$('#testingbtn').click(function(){
alert('working');
});
The thing is that i used the same method before and it worked for me on all browsers but not anymore. can someone try to help me out the problem.
thanks guys..

Try this, we assuming your 'testingbtn' is dynamically added to the screen.
$(document).ready(function(){
$( "body" ).on( "click", "#testingbtn", function() {
alert('working');
});
});

I never recommend to do it in this way. Always put this code outside php.
HTML
<button id="testingbtn">TEsting</button>;
jQuery
$('#testingbtn').click(function(){
alert('working');
});
Also make sure jQuery is included in your code.

Point 1: Check whether you have included the jquery library or not.
Point 2: [If point 1 is OK], Where have you put your script? If you put your script before button code, than use document ready function
$(document).ready(function(){
$('#testingbtn').click(function(){
alert('working');
});
});
Alternately, if you want to put your code unchanged, than place your script after your button code[best practice: put them at the bottom of the page].

I don't use print. I always use echo to show it in my html page.
<?php
echo '<button id="testingbtn">TEsting</button>';
?>
In jquery:
$('#testingbtn').click(function(){
alert('working!');
});
Try reading this

Related

Jquery alert fire two times instead of once with php

I am working with jquery and php, Right now i have "Edit" button but whenever
i am clicking on button i am getting "alert" twice instead of one time,
Here is my html code(inside php tag)
<?php
$PostComment2='<div class="button1'.$CommentID.'">
<span name="MaxValue" value='.$CommentID.' data-val='.$CommentID.' id="MaxValue" class="edit_post_comment">
Edit2
</span></div>';
?>
Here is my script
<script>
$(document).ready(function(){
$(document).on('click','.edit_post_comment',function(e){
e.preventDefault();
alert('Hello world');
//further code...
});
});
</script>
How can i alert one time only instead of twice,Where i am wrong ?
may you are using the class twice in the body? Please check. You may try using id.

jQuery Load inside another Load not working

I have a document ready load when I click a button on view.php:
<script type="text/javascript">
$(document).ready(function () {
$("#admin_user_view").load('admin_modules/user_mgt/pending.php', function(){ //get content from PHP page
$(".loading-div").hide();
});
});
</script>
The pending.php page also contains another load:
$("#pending_view" ).load( "fetch_pages.php?query=admin_user_view&view_page=pending", function(){ //get content from PHP page
$(".loading-div").hide();
});
The problem is, the loading in pending.php is not working. I also tried:
$('#admin_user_view').load('admin_modules/user_mgt/pending.php',
function(){
$("#pending_view" ).load( "fetch_pages.php?query=admin_user_view&view_page=pending", function(){ //get content from PHP page
$(".loading-div").hide();
});
});
What did I miss? Or is this really not possible? If not possible, what alternative can I do?
Your help is highly appreciated.
Thanks!
Note: Both the first and the second load functions are wrapped in document ready function and the third one is being called by a function when a button is clicked.
Forgive me for not double checking everything. The jQuery functions are working perfectly. The problem lies within the PHP code I'm calling inside that load so nothing seems to happen. When I fixed the PHP code, everything worked fine. Thanks for your help!

Loading external javascript, and then remove href attribute from results

I'm trying to load a widget in javascript which creates a HTML table once it has been loaded.
Example:
<td class="foo"><a class="bar" href="http://example.com">Example</a></td>
Inside the table are links where I'd like to remove the href attribute.
So the result looks like this
<td class="foo"><a class="bar">Example</a></td>
I tried the following jQuery:
function myfunction() {
$("td a").each(function(){
if($(this).hasClass("bar")){
$(this).removeAttr("href");
}
});
};
Reference: http://www.tutorialrepublic.com/faq/how-to-remove-clickable-behavior-from-a-disabled-link-using-jquery.php
I tried it also with onload="myFunction()" but that neither worked out.
Why this is not working? Any input is much appreciated!
have you try:
$(window).load(function(){
myFunction();
})
The problem, you're facing is, contents are added after the full document load. You should use .on() method to call your function or to run the script.
$(".widget").on("load", function(){
alert("It was loaded/ load your function/write your code here.");
});
Note, .widget and load are my assumptions. You should better use the correct values or provide your jsfiddle or code here to diagnose the problem if it still exists.

Hide Image when another image is clicked

this seems to be simple.. but I am a bit noobish with jquery, maybe I am doing something silly wrong?
I want to click an image, and on that click, hide another image right next to it.
<script type="text/javascript">
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
</script>
Id's are correct as per the two images. What am I missing? Debugging it, the code never gets fired...
Thanks
EDIT
I had my control as a nested control on an asp masterpage, and its id was being rewritten. I have now fixed the id, but I still cant get any joy... I also see my markup is being rendered as an "input", would that make a difference?
<head>
<script src="js/jquery.min.1.5.js" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function () {
$("#butShowMeSomeUnits").click(function () {
$('#arrowUnitspic').hide();
});
});
</script>
</head>
<body>
<input type="image" src="bookings_media/buttons/show-me-some-units.png" onmouseout="this.src='bookings_media/buttons/show-me-some-units.png'" onmouseover="this.src='bookings_media/buttons/show-me-some-units_orange.png'" id="butShowMeSomeUnits" name="ctl00$ctl00$ContentPlaceHolder1$bookings_right_content$butShowMeSomeUnits">
</body>
EDIT
JS Fiddle
If there is any confusion... the JS fiddle I spooled up with the exact code also does not work...
You need to do do on page ready:
<script type="text/javascript">
$(document).ready(function() {
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
</script>
Edit:
The fiddle you provided did not work until I chose jQuery 1.10.1 from the dropdown. You will notice your onmouseover changes the element first, but once you click on the input it does hide the image. Can you verify this works the same for you?
If the answer is no then I don't think you are loading the jQuery library on your page. To check this should work:
if (typeof jQuery != 'undefined') {
alert("jQuery library is loaded!");
}else{
alert("jQuery library is not found!");
}
In addition it might be helpful to see what errors your browser console /dev tools is showing.
Wrap the code in jQuery.ready() event. And also check whether jquery js file is loaded or not.
$(document).ready(function(){
$("#butShowMeSomeUnits").click(function() {
$('#arrowUnitspic').hide();
});
});
You code looks good and works check here
What you might be missisng is either:
to load jQuery script in the head of your page.
to include $(document).ready(function() { //code here }); in case your <img> tags are after the script in the page code. This is so your code loads when page is ready/loaded.
Steps that may help you:
make sure you integrate jQuery lib right. (to check that you might wanna open console on chrome and type $("html").hide(); and see if the current page dissapears)
make sure your custom JS file or code is UNDER the including of jQuery lib.
very good starting point with jQuery is to put everything in $(document).ready() as below example:
$(document).ready(function(){
$("img").click(function(){
$("img").hide();
$(this).show();
});
});

Javascript function not working after ajax request in CListView

I am using CListView widget (yii framework) like this:
<?
$this->widget('zii.widgets.CListView', array(
'dataProvider'=>$dataProvider,
'itemView'=>'_view',
'template'=>"{items}\n{pager}",
));
?>
I have few button in "_view" and a process.js file where I have attached click event with buttons like this:
$(document).ready(function(){
$("a#beerButton").click(function(){
alert('clicked');
});
});
They are working fine in initial page display but after ajax update (Clistview pagination to view next page), no button is responding. What is causing the problem. Shall I have to include the js files again on update.
EDIT:
on() event solved the problem :) Its working now.
Reference
you should try this
$(document).ready(function(){
$("a#beerButton").live('click', function(){
alert('clicked');
});
});
check your js code some")" and "}" are missing use fire bug to avoid these sort of probs...

Categories