I've got a quick question
So, my code is something like:
<html>
<head>
</head>
<body>
<?php
//file that contains the modals
include ('modals.php');
<button class="openCompany">
OPEN
</button>
?>
//...
</body>
</html>
and at the very end, I've got a JS script to open a modal like:
<script type="text/javascript">
$('#companyModal').modal('show');
</script>
which works perfectly, but when I do
$(".openCompany").click(function () {
$('#companyModal').modal('show');
});
it doesn't anymore.
Thanks.
try this
$(document).ready(function(){
$(document).on("click", ".openCompany", function(e) {
$('#companyModal').modal('show');
});
});
Related
I am using asp.net mvc application.
From last 2 days i am trying and following some Internet solutions to call the MyPlugin function from outside the JS .
Please help me to find what wrong i am doung.
I had added myplugin JS and written some lines of code and now i am trying to access that function from View script.
My View :
<head>
<script src="~/Scripts/jquery-3.3.1.min.js"></script>
<script src="~/Scripts/MyPlugin.js"></script>
</head>
<body>
<div id="divMain" >
</div>
</body>
<script>
$(document).ready(function () {
$("#divMain").MyPlugin();
});
</script>
MyPlugin JS:
(function ($) {
$.fn.MyPlugin= function () {
alert("ready to start!!!!");
};
})(jQuery);
And This message i got :
"Uncaught TypeError: $(...).MyPlugin is not a function"
Please help me to find a solution of this problem. I want to call that Plugin's function.
You have to add jquery prior to your plugin js.
<head>
<script src="~/Scripts/jquery.js"></script>
<script src="~/Scripts/MyPlugin.js"></script>
</head>
<body>
<div id="divMain" >
</div>
</body>
<script>
$(document).ready(function () {
$("#divMain").MyPlugin();
});
</script>
I echo my html in the body using php.
Like this:
<body>
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</body>
In this html I have a button with the id set to button. Then, in Jquery,I have this code:
$(document).ready(function(){
$("#button").click(function(){
alert("It works");
});
});
However, It works is not getting printed. What should I do?
It also depends on where your Javascript Code is located within the DOM and also if you have jQuery included in the page in question.
Something like this could hopefully work:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<script
src="https://code.jquery.com/jquery-3.2.1.min.js"
integrity="sha256-hwg4gsxgFZhOsEEamdOYGBf13FyQuiTwlAQgxVSNgt4="
crossorigin="anonymous">
</script>
<title>Demo</title>
</head>
<body>
<div class="container">
<?php
echo " <button type=\"button\" id=\"button\">Click Me!</button> ";
?>
</div>
<script type="text/javascript">
(function ($) {
$(document).ready(function(){
$("#button").on("click", function(e){
alert("It works");
});
});
})(jQuery);
</script>
</body>
</html>
Please note that the above Snippet is assumed to live inside a PHP File (index.php - for example).
I tried some methods in old questions but it is not working in chrome.
Can please any one suggest me the solution.i'm using php for validation.
if i click submit button twice it through an error so restrict the issue i disable the submit button but it not working in chrome.
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').attr('disabled','disabled');
});
});
</script>
You could use prop jquery method, or just set the disabled attribute to true.
$(document).ready(function(){
$('#submit').on('click', function(e){
//$(this).prop('disabled', true);
this.disabled = true;
})
});
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width">
<title>JS Bin</title>
</head>
<body>
<button id="submit">submit</button>
<script src="https://code.jquery.com/jquery-3.1.0.js"></script>
</body>
</html>
It could be that there are multiple submit buttons on the page. You can try using this code.
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
// It is best practice to use `true` instead of
// any true-y kind of value like non-empty string.
jQuery(this).attr('disabled', true);
});
});
There are different ideas were given but the code seems working properly. Please make sure you imported the jQuery library.
The following code is the tested code.
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.1/jquery.min.js"></script>
<script>
jQuery(document).ready(function () {
jQuery('#button').click(function () {
jQuery('#button').attr('disabled','disabled');
});
});
</script>
</head>
<body>
<input type="submit" id="button" value="If you click on me, I will be disabled."/>
</body>
</html>
Try, using the prop of element and making the attribute true, using
jQuery('selector').prop('disabled',true);
<script>
jQuery(document).ready(function () {
jQuery('#submit_button').click(function () {
jQuery('#submit_button').prop('disabled',true);
});
});
</script>
how i would add disabled:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" disabled>').insertBefore(this);
$(this).remove();
});
});
</script>
how i would change the button back to normal:
<script>
$(document).ready(function(){
$('button').click(function () {
$('<input type="button id="submit_button" >').insertBefore(this);
$(this).remove();
});
});
</script>
you can use $('selector').prop('disabled',true);
I tried using jQuery on my website, but it did not seem to work. this code doesn't work. When I click on #test, it doesn't hide. Please help. Thanks!
this is my Html file :
<!DOCTYPE html>
<html>
<head></head>
<body>
<p id="#test">Hello world !</p>
<script src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
</body>
</html>
this is my code.js :
$(document).ready(function() {
$('#test').click(function() {
$('#test').hide();
});
});
your html is wrong, remove hash # sign:
<p id="test">Hello world !</p> // this is right
while you have written:
<p id="#test">Hello world !</p> // this is wrong
NOTE:
you can get current element reference using this:
$(document).ready(function() {
$('#test').click(function() {
$(this).hide();
});
});
$("#test") means that select element which has id equal to test
Try to escape the meta character with \\,
$(document).ready(function() {
$('#\\#test').click(function() {
$('#\\#test').hide();
});
});
DEMO
I put it all in one page and it should work and is not working:
<html>
<head> <link href="css_js/styles.css" rel="stylesheet" type="text/css">
<script language="JavaScript1.2" src="css_js/jquery-1.7.1.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" src="css_js/jquery-ui-1.8.17.custom.min.js" type="text/javascript"></script>
<script language="JavaScript1.2" type="text/javascript">
function popup() {
alert('test');
var popup = $('.newpopup');
popup.draggable();
popup.resizable();
popup.html('<p>Where is pancakes house?</p>');
popup.show('fast');
}
$('button').click(popup);
</script>
</head>
<body>
<div class='newpopup'></div>
<button>popup</button>
</body>
</html>
I want to make a simple popup / dialog with Jquery but it is not working at all. What is wrong with it?
Call the function on document.ready
$(document).ready(function(){
$('button').click(function(){
popup();
});
})
OR
$(function(){
$('button').click(function(){
popup();
});
})
You should run your function in jQuery style:
$('button').click(function() {
popup();
return false; //optional
}
Are you sure the src reference is valid when you're including jquery? I've got your code working fine on this jsfiddle using the Google-hosted versions of JQuery and JQuery-ui.