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.
Related
i´m building a search system for this petshop software web base, the thing is that i search for a name, than send the name with XMLHttpRequest to php page that execute the query and return me the results and display them at my search page,until here is ok. the information that php page returns to search page goes like this:
<?php
$query = "selec ...
$queryName = mysqli_query...
while($fetchNames = mysqli_fetch_array...
?>
<a class="profile">
<div id="clientInfo"><?php echo $fetchNames[0]; ?></div>
</a>
<?php }
?>`
i try to acess the html class .profile imported on searchpage.php:
`<script>
document.querySelector('.profile').addEventListener('click',function=(){
alert('js code works!');
});
</script>
</body>`
i tryed to import it with the results of php query page right after the end of while loop, even with the window.onload=func... it won't work!
javascript won't work at the imported document, it can't see the class to display the alert. how can i work around this issue?
thanks in advance!
As you have dynamically-generated elements, you'll need to make use of event delegation and target an element that exists on page load, and work down from there. You haven't mentioned any parent elements in your question, so I'll target <body> in my answer, as this always exists on page load.
As you're shifting the eventListener up the hierarchy, you need to ignore clicks other than the desired element. This can be achieved with event.target and .contains():
if (document.querySelector('.profile').contains(event.target)) { }
So your final code would look like:
const body = document.querySelector('body');
body.addEventListener('click', function() {
if (document.querySelector('.profile').contains(event.target)) {
alert('js code works!');
}
})
The above ensures that when you click on your dynamically-generated elements your alert() will fire, but it won't fire when you click on any other element.
I can suggest two different methods. The first one is that you can write javascript codes after the html code. or wait for the document to be loaded using 'document.addEventListener('DOMContentLoaded', ...)'
document.addEventListener('DOMContentLoaded', function() {
document.querySelector('.profile').addEventListener('click',function=(){
alert('js code works!');
});
})
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
I am working with shopify store.
I have created to show fancy box when entered my website.
This is code i used:
<div id="wrap"><div id="step1"></div>
<pre onclick="not1()">{}</pre>
</div>
<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
</script>
And i used notifIt.js and jquery.js files. Now its working fine, I have taken code from this site http://www.jqueryscript.net/demo/Simple-Easy-jQuery-Notification-Plugin-NotifIt/
Instead of click the text box, i need to show that notification box automatically.
So i changed above script onclick to onload.. but nothing seems to be work
May i know, what is my mistake? Thanks in advance.
Do you want to show your notification on page loading?
If you do, you can use this:
$(document).ready(function() {
not1();
});
Call Your function, directly. It will be called automatically on script tag loading.
<div id="wrap"><div id="step1"></div>
<pre onclick="not1()">{}</pre>
</div>
<script>
function not1(){
notif({
msg: "<b>Success:</b> In 5 seconds i'll be gone",
type: "success"
});
}
not1(); //CALLING FUNCTION, It will be called automatically. I hope it would help.
</script>
For reference see Can't apply simple hide function on div
I have the following html
<a href="email.html" target="_blank" ><img src="../img/mailto.gif" alt="Send email" id='email'/></a>
Clicking the image should open a new window and you should now if that image has been clicked on before, simply because it would change when you click on it.
This is also included in a table created with PHP from a MySQL table (basically, this means I will get a new image in every row and I can only change their ID's globally, not one by one..)
After adding this jquery code the link stopped working. Which means that, when I click on the image it changes to a different one (.../img/mailto_onclick.gif) and that's fine, but the email.html page doesnt open in a new tab like it used to...
<script language="javascript">
$(document).ready(function() {
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
return false;
});
});
</script>
Any thought's on how to get this working?
Sorry if it's some basic or obvious stuff
Remove return false as it will prevent the default behavior for click() because <img> is wrapped inside <a></a>.
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
// return false; // remove
});
Try this:
<script language="javascript">
$(document).ready(function() {
$('#email').click(function(){
$(this).attr('src',"../img/mailto_onclick.gif");
//return false;
});
});
</script>
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...