How to call other js method in Index.cshtml page button onclick? - javascript

I have added js file bootstrap-notify.js file link which is having Notify function which generates notification dynamically.
I'm able to call that notify function on page load but when I try to execute it on button click getting error :Uncaught TypeError: $.notify is not a function
any clue why is it so?
<script src="http://code.jquery.com/jquery-1.11.3.min.js"></script>
<script src="~/Scripts/bootstrap-notify.js"></script>
<script type="text/javascript">
function myfun() {
debugger;
$.notify({
icon: 'glyphicon glyphicon-warning-sign',
title: 'Bootstrap notify',
message: 'Turning standard Bootstrap alerts into "notify" like notifications'
}, { type:'success', delay: 1000, timer: 2000
});
}
</script>
<div>
<button type="button" onclick="myfun();">TEST</button>
</div>

Related

Problem with my click element in Javascript

I can't make an alert in JS when clicking on the "Submit" button. It's html loaded remotely by a script and the JS can't recognize it.
Here is a reconstruction, anyone have an idea please? http://jsfiddle.net/sdrvqjxn/1/
<script charset="utf-8" type="text/javascript" src="//js-eu1.hsforms.net/forms/embed/v2.js"></script>
<script>
hbspt.forms.create({
region: "eu1",
portalId: "26927362",
formId: "46123717-093e-4314-9afb-d71fc6e2e40f"
});
</script>
Set the onFormSubmit option:
hbspt.forms.create({
region: "eu1",
portalId: "26927362",
formId: "46123717-093e-4314-9afb-d71fc6e2e40f",
onFormSubmit() {
alert('submit');
}
});

Sweet Alert inside a If Statement

I'am trying (without luck) to implement a Swal inside a If statement.
here is what i've done:
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("numero");
//check if try to copy with the empty input
if(document.getElementById("numero").value == ""){
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Nothing to copy!'
})
// alert("Nothing to copy!!")
} else {
}
And here is the links in my html:
<!-- dark theme for swal -->
<link href="//cdn.jsdelivr.net/npm/#sweetalert2/theme-dark#4/dark.css" rel="stylesheet">
<!-- javascript file -->
<script src="app.js"></script>
<!-- swal link -->
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
Any tip to how can I make this work? I guess my problem is inside the If statement, but I don't know how to fix it
In your code, I am not seeing an event listener. Use keyup to verify that the value of the elemnt is empty.
var copyText = document.getElementById("numero");
copyText.addEventListener('keyup', () => {
if (document.getElementById("numero").value == "") {
Swal.fire({
icon: 'error',
title: 'Oops...',
text: 'Nothing to copy!'
})
}
})
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Document</title>
<head>
<link href="//cdn.jsdelivr.net/npm/#sweetalert2/theme-dark#4/dark.css" rel="stylesheet">
<script src="app.js"></script>
<script src="//cdn.jsdelivr.net/npm/sweetalert2#11"></script>
</head>
</head>
<body>
<input type="text" id="numero">
</body>
</html>
First of all, make sure your imports are correct. You can try debugging by using something simple like: swal("Hello world") anywhere in your code.
I roughly copied yours and used a different CDN import from the Swal documentation on their website:
<script src="https://unpkg.com/sweetalert/dist/sweetalert.min.js"></script>
In your Javascript code, you're missing a } at the end of your function. Might also be a miscopy, but never too sure.
Also, if you want to make sure your if statement is correct, you can try debugging with console.log("Hello world") at every fork in your code. Then, open the console in your browser to see what is logged. This will help you figure out whether or not your code is running when you want it to.
Also, watch out when you use document.getElementById("numero").value. For instance, your code wouldn't work with <p> because <p> has no value, but it would with <input> or <option>.
Here is a sample of code that is working on my end:
function myFunction() {
var copyText = document.getElementById("numero");
if (document.getElementById("numero").innerHTML == "") {
swal({
icon: 'error',
title: 'Oops...',
text: 'Nothing to copy!'
})
} else {
swal("Copied!")
}
}
end up that everything was working nice, but... I forget to put this in my code
event.preventDefault()
That prevent the Swal to not work well.
By the end, the final code went like this:
function myFunction() {
/* Get the text field */
var copyText = document.getElementById("numero");
if(document.getElementById("numero").value == ""){
Swal.fire(
'Ooops...',
'Nothing to copy here!',
'error'
)
event.preventDefault()
} else {}
/*code here
}
Thanks for giving me that tips guys 😉

$(...).autocomplete is not a function error

I have the following files
<link href="~/Content/Site.css" rel="stylesheet" />
<link href="~/Content/boostrap-min.css" rel="stylesheet" />
<link href="~/Content/themes/base/jquery-ui.min.css" rel="stylesheet" />
<script src="~/Scripts/jquery-1.12.4.min.js"></script>
<script src="~/Scripts/jquery-ui-1.12.1.min.js"></script>
<script src="~/Scripts/jquery.validate.min.js"></script>
<script src="~/Scripts/jquery.validate.unobtrusive.min.js"></script>
Then I have javascript function
<script type="text/javascript">
$(document).ready(function () {
$(function () {
$("#txtSearch").autocomplete({
source: '#Url.Action("MerrBarkodet","Produktet")'
});
});
});
</script>
But is not working, is showing error
Uncaught TypeError: $(...).autocomplete is not a function
#using (Html.BeginForm("Index", "Produktet", FormMethod.Get, new { #class = "navbar-form navbar-left" }))
{
<div class="form-group">
<b>Search:</b>#Html.TextBox("search", null, new { id = "txtSearch" })
<input class="btn btn-default" type="submit" value="Search" />
</div>
}
Comment out (or remove) the code I commented below. $(function() { }) is not going to initialize inside a $(document).ready() call.
//$(document).ready(function () {
$(function () {
$("#txtSearch").autocomplete({
source: '#Url.Action("MerrBarkodet","Produktet")'
});
});
// });
Possible causes for the issue.
The order that jquery.js get loaded. jquery.js must be present before jqueryui.js
Possible duplicate of jquery.js reference. Ensure that there is no jquery reference in your file. If you are implementing a layout file,or an external library ensure there is no jquery called there.
try using the jQuery.noConflict() method for a test. It basically just makes you use a different alias for jQuery.
Ex:
var j = jQuery.noConflict();
j("div p").hide();
Check that you're function call isn't getting hit before the document is loaded:
$(function(){
var $searchBox = $('#txtSearch');
$searchBox.autocomplete(...);
});

jquery bulk upload javascript issue

I am running into a javascript issue where it's getting a "Uncaught ReferenceError: $ is not defined". With my reading I think it's the order of when I am trying to do $(document).ready before the javascript is loaded up but I am not sure what to do about it. I have tried moving the jquery and the fileuploadmulti above the script but then I get "Uncaught TypeError: $(...).uploadFile is not a function" and then I go down the road of chicken and egg and don't know what is correct. Any help or point in the right direction would be helpful. Thank you.
<script>
//This is where my error shows up
$(document).ready(function(){
var settings = {
url: "/index.php/upload",
method: "POST",
allowedTypes:"jpg,png,gif,doc,pdf,zip",
fileName: "myfile",
multiple: true,
onSuccess:function(files,data,xhr)
{
$("#status").html("<font color='green'>Upload is success</font>");
},
afterUploadAll:function()
{
alert('All Files uploaded');
},
onError: function(files,status,errMsg)
{
$("#status").html("<font color='red'>Upload is Failed</font>");
}
};
$("#mulitplefileuploader").uploadFile(settings);
});
</script>
<script src="/js/jquery.js"></script>
<script src="/js/fileuploadmulti.min.js"></script>
<div class="boxed link">
<div id="mulitplefileuploader">Upload</div>
<div id="status"></div>
</div>
<div class="col-lg-12">
<h1>Adding pages to <?php echo $model->name; ?></h1>
</div>
First check whether JQuery is loaded or not.
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.1.0/jquery.min.js"></script>
And wrap the all JQuery code inside $(document).ready(function(){ \\code here }); function.
$(...).uploadFile is not a function error because you are not loading the fileupload plugin properly.
Check all script tag URL'S are right or not.
You are using the $ before including jQuery. Try to include it before.
Try to include
<script src="/js/jquery.js"></script>
<script src="/js/fileuploadmulti.min.js"></script>
before $(document).ready(function(){ });

TypeError: $(...).typed is not a function

I am trying to implement this typed.js to my site and have a trouble with jquery
Firebug shows two errors:
SyntaxError: expected expression, got '<'
<!DOCTYPE html> <br>
typed.js (line 1)
TypeError: $(...).typed is not a function <br>
$(".typing").typed({<br>
mydomain.com (line 74)
Here is my code:
<!-- Javascript -->
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script src="assets/js/typed.js"></script>
<script src="assets/js/bootstrap.min.js"></script>
<script src="assets/js/jquery.countdown.js"></script>
<script src="assets/js/custom.js"></script>
<script>
$(function(){
$(".typing").typed({
strings: ["Typed.js is a <strong>jQuery</strong> plugin.", "It <em>types</em> out sentences.", "And then deletes them.", "Try it out!"],
typeSpeed: 30,
backDelay: 500,
loop: false,
contentType: 'html', // or text
// defaults to false for infinite loop
loopCount: false,
callback: function(){ foo(); },
resetCallback: function() { newTyped(); }
});
$(".reset").click(function(){
$("#typed").typed('reset');
});
});
function newTyped(){ /* A new typed object */ }
function foo(){ console.log("Callback"); }
</script>
It is set in the end, before body tag
As I understood there is a conflict between 2 jquery libraries, but i am quiet new to this, so can't understand how to fix it.
Please help me)

Categories