Javascript library function not working in asp.net mvc - javascript

I am getting problem while calling a function in included javascript library function daypilotMonth. It says undefined is not a function. I checked daypilot-all.min.js is loading correctly. I really can't figure out which other way is to do it. This is I am doing in ASP.NET mvc page.
Any help will be great. Thanks
<script src="#Url.Content(" ~/Scripts/jquery-1.10.2.js ")" type="text/javascript"></script>
<script src="#Url.Content(" ~/Scripts/daypilot-all.min.js ")" type="text/javascript"></script>
<script type="text/javascript">
$(document).ready(function() {
dp = $("#dpm").daypilotMonth({
backendUrl: '#Url.Content("~/Schedule/Backend")',
eventMoveHandling: "CallBack",
eventResizeHandling: "CallBack",
timeRangeSelectedHandling: "JavaScript",
onTimeRangeSelected: function(start, end) {
dp.timeRangeSelectedCallBack(start, end, {
name: prompt('New Event Name:', 'New Event')
});
}
});
});
</script>
#using (Html.BeginForm()) {
<p>
<div style="margin:20%" id="dpm"></div>
</p>
}
#section Scripts { #Scripts.Render("~/bundles/jqueryval") }

I think the script not recognize
backendUrl: '#Url.Content("~/Schedule/Backend")'
try change to
backendUrl: #Url.Content("~/Schedule/Backend")

check you have correct syntax in javascript code. It might be some typo. For me it I made a typo. it should be
$("#ddlCustomer").val()
instead of
$(#ddlCustomer)

Related

Dropzone js error "Uncaught TypeError: $(...).dropzone is not a function"

I have been having trouble trying to add dropzone with other input fields on the same form but finally i have managed to accomplish it. The problem I have currently is that the dropzone field is not reponsive on click or drag and get this error "Uncaught TypeError: $(...).dropzone is not a function" in my console.
Below is my code:
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.css" rel="stylesheet" />
<link href="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/min/basic.min.css" rel="stylesheet" />
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js"></script>
{!! Form::open([ 'action'=>'MainController#uploadCar', 'files' => true, 'enctype' => 'multipart/form-data']) !!}
<div class="dropzone dropzone-previews" id="my-awesome-dropzone"></div>
<div class="col-md-6">
<label class="required">Location</label>
<input type="text" class="full-col" name="location">
</div>
{!! Form::close() !!}
<script type="text/javascript">
Dropzone.autoDiscover = false;
jQuery(document).ready(function() {
$("div#my-awesome-dropzone").dropzone({
url: "/uploadcar"
});
});
</script>
Assistance will be greatly appreciated
A little late for the party... hope help someone. From Dropzone.js...
try to use:
// Dropzone class:
var myDropzone = new Dropzone("div#my-awesome-dropzone", { url: "/uploadcar"});
instead of:
$("div#my-awesome-dropzone").dropzone({
url: "/uploadcar"
});
I had the same problem (in a different scenario) and it worked for me
When looking to the related javascript file on the given address below I see that the functions with name "dropzone" start with uppercase letter:
https://cdnjs.cloudflare.com/ajax/libs/dropzone/4.0.1/dropzone.js
So, first be sure that there is no version problem regarding to the usage of the function. Then, try to use the related function with uppercase as shown below:
jQuery(document).ready(function() {
$("div#my-awesome-dropzone").Dropzone({
url: "/uploadcar"
});
});
try to call Dropzone after including it and put it inside jquery document ready
$(document).ready(function() {
$("div").click(function() {
// call dropzone here
});
});

javascript module not being found

I have a bunch of web pages where I have an identical construct:
<html>
<head>
<script src="sorttable.js"></script>
<noscript>
<meta http-equiv="refresh" content="60">
</noscript>
<script type="text/javascript">
<!--
var sURL = unescape(window.location.pathname);
function doLoad()
{
setTimeout( "parent.frames['header_frame'].document.submitform.submit()", 60*1000 );
}
function refresh()
{
window.location.href = sURL;
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.replace( sURL );
}
//-->
</script>
<script type="text/javascript">
<!--
function refresh()
{
window.location.reload( true );
}
//-->
</script>
</head>
<body>
.
.
.
<script type="text/javascript">
window.onload = function() { sorttable.innerSortFunction.apply(document.getElementById("OpenFace-2"), []); doLoad(); }
</script>
</body>
</html>
This works perfectly in every page except for one, where when the onload function runs it cannot find the sorttable code (which is loaded from sorttable.js up at the top). All these pages are part of the same application and are all in the same dir along with the js file. I do no get any errors in the apache log or the js console until that page loads, when I get:
sorttable.innerSortFunction is undefined
I can't see what makes this one page different. Can anyone see what is wrong here, or give me some pointers on how I can debug this further?
The code I pasted in is from the source of the page where it does not work, but it is identical as the pages where it does work.
Looks like on that page the table with id OpenPhace-2 by which you try to sort have no needed class: sortable
The function innerSortFunction of sorttable object will be present only if there is any table with sortable class exists.

jQuery UI Autocomplete in ASP.NET MVC 4 does not work

I'm deploying autocomplete jQueryUI in ASP.NET MVC 4 but it wasn't working perfectly. When I typed a name of Bike, it displays an error like this parsererror. Here's my simply code:
public JsonResult GetAutoComplete(string modelname)
{
var result = db.Products;
var search = result.Where(p => p.Name.ToLower().Contains(modelname.ToLower())).ToList();
return this.Json(result, JsonRequestBehavior.AllowGet);
}
Index.cshtml:
<script type="text/javascript">
//Javascript function to provide AutoComplete and Intellisense feature for finding Users.
$(document).ready(function () {
$("#Name").autocomplete({
source: '#Url.Action("", "StoreManager")'
});
});
</script>
<p>
Search the Name of Bikes #Html.TextBox("Name")
<input type="submit" value="Submit" id="GetName" />
</p>
Does anyone can tell me where I'm doing something wrong ? I just updated my code.
try this it may helpful to you.
<script src="../../Scripts/jquery-1.8.3.js" type="text/javascript"></script>
<script src="../../Scripts/jquery-ui.js" type="text/javascript"></script>
<script type="text/javascript">
$(function () {
$('#Name').autocomplete({
source: '#Url.Action("GetAutoComplete")',
minLength: 3,
select: function (evt, ui) {
}
});
});
</script>

Javascript not working when I change to Google JQuery Libraries?

Previously I am using JQuery library from here
http://jquery.com/download/
http://code.jquery.com/jquery-migrate-1.2.1.min.js
I try to include the following code, it work perfectly.
Javascript
$(document).ready(function(){
function loading_show(){
$('#loading').html("<img src='images/loading.gif'/>").fadeIn('fast');
}
function loading_hide(){
$('#loading').fadeOut('fast');
}
function loadData(page){
loading_show();
$.ajax
({
type: "POST",
url: "listcontact.php",
data: "page="+page,
success: function(msg)
{
$("#con").ajaxComplete(function(event, request, settings)
{
loading_hide();
$("#con").html(msg);
});
}
});
}
loadData(1); // For first time page load default results
$('#con .pagination li.active').live('click',function(){
var page = $(this).attr('p');
loadData(page);
});
$('#go_btn').live('click',function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
alert('Enter a PAGE between 1 and '+no_of_pages);
$('.goto').val("").focus();
return false;
}
});
});
HTML
<div id="con">
<div class="data"></div>
<div class="pagination"></div>
</div>
And Then I try to use JQuery js from Google instead from JQuery.com
https://developers.google.com/speed/libraries/devguide#jquery
ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js
The Tab menu still can work, however I cannot get any data from listcontact.php
How can I make it work in Google JQuery?
this is all my script tag
<script src="jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
This is my tab menu
<nav>
<div id="tabs">
<ul>
<li><b>More Details</b></li>
<li><b>Contact</b></li>
<li><b>Files</b></li>
<li><b>Sales pipeLine</b></li>
<li><b>Call report</b></li>
</ul>
<div id="tabs-1">
<?php //include('viewdetail.php') ;?>
</div>
<div id="tabs-2">
<?php
if( $view == 0)
{
include('contact.php');
}
else
{
include('newcontact.php') ;
}
?>
</div>
<div id="tabs-3">
<?php //include('filemanagement.php') ;?>
</div>
<div id="tabs-4">
Under Development
</div>
<div id="tabs-5">
<?php //include('callReport.php') ;?>
</div>
</div>
</nav>
The code is inside my contact page, when I try to include it inside my tab
Are you developing locally? Or remotely?
If you are local....you usually have to attach http:// to the google apis
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
If not then just....
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Should work...
This should also be replaced...from .live() to .on() as .live() is now deprecated
$('body').on('click','#go_btn', function(){
var page = parseInt($('.goto').val());
var no_of_pages = parseInt($('.total').attr('a'));
if(page != 0 && page <= no_of_pages){
loadData(page);
}else{
EDIT / UPDATE
You posted this...
<script src="jquery-1.9.1.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
<script type="text/javascript" src="ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
Change to this...
<script type="text/javascript" src="//ajax.googleapis.com/ajax/libs/jquery/1.10.1/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.3/jquery-ui.js"></script>
The jquery needs to be above the jquery-ui, as the ui has a dependancy on Jquery, and you can remove v1.9 no sense in loading jquery twice
EDIT 3
I would change this...you don't need that ajaxComplete call, since the success function is doing that anyway...
$.ajax
({
type: "POST",
url: "listcontact.php",
data: {page: page},
success: function(msg)
{
loading_hide();
$("#con").html(msg);
}
});
And you made sure to change both your live()'s???
You had two, the other one should look like this...
$('body').on('click','#con .pagination li.active' function(){
var page = $(this).attr('p');
loadData(page);
});
try to include the same version JQuery from google :
Number of version JQuery from google should be equal number of version JQuery from Jquery website
but if you want to use recent version, there are some changes , and you should modify something in your code, see log console for more info about problem and check documentation of JQuery here
Looks like live might not work with the latest version
Replace
.live('click'
with
.on('click'
If there are any dynamically added elements on the page replace your events with this syntax
$(staticContainer).on('click', 'selector' function(){
Where staticContainer is the closest static ancestor of the element.
selector is the element to which you want to attach the event.
I had experience with similar issue, it may deal with deprecated functions! check EACH piece of function, so that deprecated methods are corrected :) Hope this help you go to somewhere right :)
deprecated-ajax-or-jquery-command-cause-no-result-returned
Enjoy!

Knockout JS: ko.applyBindings is not a function

I'm trying to use Knockout js in a simple web application.
Here's my dummy javascript code:
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
But when I run the index.html, the debug console says "ko.applyBindings is not a function"!
Help!
Thanks
You have not included the link to the knockout.js library in your source code or the link is wrong. Fix this and it will work.
<script src="/scripts/knockout-2.0.0.js" type="text/javascript"></script>
Where the /scripts directory is the location on the server where knockoutjs resides.
EDIT
Here is an example of your code that works.
<html>
<head>
<script src="knockout-2.0.0.js" type="text/javascript"></script>
</head>
<body>
<script type="text/javascript">
function MainViewModel() {
this.myText = ko.observable('Hello world');
}
var MainViewModelInstance = new MainViewModel();
ko.applyBindings(MainViewModelInstance);
</script>
</body>
</html>

Categories

Resources