I am rendering Html in react JS that is:
return (
<div>
<table id="displaydata">
<td className="update_record"><a href={"http://localhost/PHP-React-Demo/update_record.html?id=" + d.id}><img className="edit" src="http://localhost/PHP-React-Demo/images/edit_logo1.png"/></a></td>
<td className="delete_record"><input id="closeAuction" type="image" className="delete" src="http://localhost/PHP-React-Demo/images/delete-button.png"/></td>
</tr>
)}
)}
</table>
</div>
)
And now I want perform JQuery actions on click of image. I have tried for onClick and now trying the following JQuery code
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(document).ready(function() {
$('#closeAuction').click(function() {
location.reload();
});
});
</script>
This JQuery code but it shows nothing. Only html rendered the action is not performing.
Instead of this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
$(document).ready(function() {
$('#closeAuction').click(function() {
location.reload();
});
});
</script>
Try this:
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.1.1/jquery.min.js">
</script>
<script>
$(document).ready(function() {
$('#closeAuction').click(function() {
location.reload();
});
});
</script>
Change your code to this-
$(document).ready(function() {
$(document).on('click', '#closeAuction', function() {
location.reload();
});
});
But ideally you should not be needing jQuery anymore with React.
Related
I need trigger mouse right click using javascript or jQuery.
Here I tried below code it is not working for me
<div id="testing" style="height:500px;width:1000px;background-color:lime;"></div>
<script>
$(document).ready(function () {
$('#testing').contextmenu();
//or
$('#testing').trigger({
type: 'mousedown',
which: 3
});
});
</script>
can you please any provide information on this.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>
<div id="testing" style="height:500px;width:1000px;background-color:lime;"></div>
<script>
$(document).ready(function () {
$("#testing" ).contextmenu(function() {
alert( "Right clicked" );
});
});
</script>
Please see the following code:
<body>
<form id="form1" runat="server">
<div>
<button id="helloButton">
Search</button>
<div id="hello">
</div>
<script type="text/javascript">
$(document).ready(
function () {
$('#helloButton').click(function () {
$('#hello').html('<div>hello world</div>');
});
});
</script>
</div>
</form>
When I use this script, all it does is flash "hello world", it doesn't keep it on the page. Does this has something to do with the click event? I'm trying to click the button and then leave the object on the page.
Otherwise you can simply do a return false which will do both
preventDefault and stop propagation
$('#helloButton').click(function (e) {
$('#hello').html('<div>hello world</div>');
return false;
});
in order to prevent the form from posting, so that you can see your changes, you need to call preventDefault()
$('#helloButton').click(function (e) {
e.preventDefault();
$('#hello').html('<div>hello world</div>');
});
I am not able to edit any of the following markup and I am trying to add a click event to the .datepick-days-cell element.
<td class="datepick-days-cell onclick="jQuery.datepick._selectDay(this,'#calendar_booking5',1493179200000)" ></td>
I tried the following simple jQuery on click event but had no luck:
$('.datepick-days-cell').on('click', function() {
alert('test click');
});
I'm assuming this does not work because it can't take precedence over the event handler that is bound to the element. Any ideas?
Following worked for me:
<script src="https://code.jquery.com/jquery-1.9.1.min.js"></script>
<script>
$( document ).ready(function() {
$('.datepick-days-cell').on('click',function() {
alert('test click');
});
});
</script>
<table border="1">
<tr>
<td class="datepick-days-cell" onclick="jQuery.datepick._selectDay(this,'#calendar_booking5',1493179200000)" >Test Click</td>
</tr>
</table>
Does this work?
$('.datepick-days-cell').click(function() {
alert('test click');
});
I am doing and show functionality I'm tried scenarios but it is not working, Please let me know what i did mistake.
My code :
function showButtons() {
$("#view").click(function(){
$("#allversion").show();
});
$("#view").click(function(){
$("#allversion").hide();
});
}
<div id="allversion" style="display:none">
SOME DISPLY CODE HERE
</div>
let me know the changes i need to made
<a onclick="showButtons()" id="view">View More</a>
Problem is that every time you call function showButtons that binds additional 2 click events every time (so clicking on link 2 times you will have 4 events in total). And your code shows and hides element at the same time.
You need to toggle it:
$(document).ready(function() {
$('#view').click(function() {
$('#allversion').slideToggle();
});
});
#allversion {
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<a id="view">View More</a>
<div id="allversion">VISIBLE!</div>
You don't need to call onclick="showButtons()" event for that. You can easily hide and show your section something like this:
$(document).ready(function(){
$("#view").click(function(){
$("#allversion").toggle();
});
});
I recommend you to use toggle method. The problem is that you have to use one single click event handler.
$("#view").click(function(e){
$("#allversion").toggle();
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a id="view">View More</a>
You can use toggle as suggested by others or you can try this
$("#view").click(function(){
if($("#allversion").hasClass('show'))
{
$("#allversion").removeClass('show').addClass('hide');
}
else
{
$("#allversion").removeClass('hide').addClass('show');
}
change to the following code, it should work.
<a id="view">View More</a>
var isClicked = false;
$( "#view" ).click(function() {
if (isClicked == true) {
$("#allversion").css("display", "none");
isClicked = false;
}
else {
$("#allversion").css("display", "inline");
isClicked = true;
}
});
Also you can use .toggle() to switch the visibility.
<a id="view">View More</a>
$( "#view" ).click(function() {
$("#allversion").toggle();
});
As per your question "Why isn't my code working?".
If your code is exactly as is here as on your site, it's not working because the script is initializing before the DOM is loaded.
Move your script to the bottom of the page or put it in to a
$(document).ready(function(){
//Code goes here
});
This works with me.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
function showButtons() {
$("#allversion").toggle();
}
</script>
</head>
<body>
<div id="allversion" >
SOME DISPLY CODE HERE
</div>
<a onclick="showButtons()" id="view">View More</a>
</body>
</html>
I have a html with python to dynamically load some buttons defined in a css:
<div id="Menu">
<center>
{{for nickname, my_id in zip(nicknames, my_ids):}}
<myButton class="c" name="{{=nickname}}", value={{=nickname}} id="{{=my_id}}">{{=nickname}}</myButton>
{{pass}}
</center>
</div>
then I have some javascript below:
<script type="text/javascript">
$(document).ready(function() {
$(".c").click(function() {
alert("haha");
}
}
</script>
Clicking on the buttons just doesn't work. I have viewed many threads here but I cannot find what the problem I get here. Browser is Chrome.
You need to close those functions:
$(document).ready(function() {
$(".c").click(function() {
alert("haha");
});
});