I can't seem to get my js event fire successfully on elements that are found in partial views. It probably has something to do with the way the partial views are loaded, so the elements may not be in the DOM when document.ready is fired.
Clicking on the button only hides the element which is found in the main page (menu-panel2).
What approach to this am I missing?
Main Html:
<body>
<script src="#Url.Content("~/Scripts/jquery.min.js")" type="text/javascript"></script>
<script src="#Url.Content("~/Scripts/main.js")" type="text/javascript"></script>
<div id="upper-menu-container">
#{Html.RenderPartial("_Menu");}
</div>
<div id="upper-menu-container2">
#{Html.RenderPartial("_Menu");}
</div>
<div id="header-wrapper"></div>
<div id="menu-panel2">
Hide me - Hide me
</div>
<div id="content">
<input type="button" id="testbutton" value="click me" />
#RenderBody()
</div>
</body>
</html>
Main.js:
$(document).ready(function () {
$("#testbutton").click(function () {
$("#menu-panel").toggle();
$("#menu-panel2").toggle();
});
});
Partial View:
<div id="menu-panel">
Hide me
</div>
Ahhh... I just found the problem, which was caused by having two identical partialviews, which probably loaded several elements with the identical id to the DOM.
Case closed!
Try to put this line:
<script src="#Url.Content("~/Scripts/main.js")" type="text/javascript"></script>
in the end of file.
I have some templates that just work like this.
Related
Just wondering if anyone knows of a decent jQuery plugin (Or Javascript) that would allow me to load "view" (NOT PARTIAL VIEW) into a <div> when a user clicks on a link.
Here's where it may be tricky, I have 8 pages.I have a Homepage in that, there is 3 divisions. First division for Header and second one have picture and third one for footer. I want to load view into second division. I have been searching Google and have not been able to find anything that seems stable.
Thanks in advance Shiyas :)
I have tried below code. It's not working.
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("http://localhost:56708/Home/Books");
});
</script>
</head>
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
</body>
This code is from my HomePage. In here I am rendering Header(Partial view) into the first divison. When i click on a link in Header, the book view should load into middle division. Well, It's not loading.
You can use jquery load function.
Load data from the server and place the returned HTML into the matched element.
$('#divId').load('url');
jQuery .load() documentation
Place the piece of your script that loads the view at the bottom of your page just before </body>. You should also use a relative URL, so when you release to production you will not have to change this. Try the below.
<body>
<div id="mainDiv">
<div id="headerDiv">
#Html.Partial("~/Views/Shared/Header.cshtml")
</div>
<div id="middleDiv">
</div>
<div id="footerDiv">
#Html.Partial("~/Views/Shared/Footer.cshtml")
</div>
</div>
<script type="text/javascript" src="http://code.jquery.com/jquery-1.11.0.min.js"></script>
<script type="text/javascript">
$("#a_book_id").click(function () {
$("#middleDiv").load("/Home/Books");
});
</script>
</body>
I'm trying to implement a jquery/html5 roulette into my site.
I've found some jsfiddle code I'd like to use: http://jsfiddle.net/kYvzd/118/
But when I'm trying to implement it on my website it won't work..
I'm receiving the error TypeError: $(...).spinwheel is not a function
[Learn More]
This is the code I've implemented:
The HTML:
<legend class="text-center header">Roulette!</legend>
<div id="main">
<div id="left-column">
<form class="iform" action="#" method="get">
<label for="joiner"></label>
<input id="joiner" name="joiner" class="joiner" placeholder="Please Enter your name" />
<button class="add">Add</button>
<button class="spin-trigger">Spin</button>
</form>
<canvas class="canvas" width="500" height="500"></canvas>
</div>
<div id="right-column">
<p class="winner">The Winner is ... <span> </span></p>
<ul class="participants">
</ul>
</div>
<div style="clear:both"></div>
</div>
<script>
$(document).ready(function(){
$('.canvas').spinwheel({
pplArray : ["♈", "♉", "♊", "♋","♌", "♍", "♎", "♏","♐", "♑", "♒", "♓"]
});
});
</script>
The JS is exactly as the JS file, implemented like this:
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<?php
if($active=="roulette") echo '<script src="js/roulette.js" type="text/javascript"></script>'
?>
I can see that the file is roulette.js is implemented, so there's nothing wrong at the PHP part $active.
I feel really stupid because I've basically just copied the code and it won't work..
And the <script> part in the HTML that's the only thing I've moved because I will need to change some values there dynamically.
Update:
The website link is: http://randomstock.net/roulette.php
You have two copies of jQuery included in your site. Looking at the <head> you have
<script src="http://code.jquery.com/jquery-1.6.js" type="text/javascript"></script>
<script src="js/roulette.js" type="text/javascript"></script>
At this point, you have jQuery 1.6 running on the page, with the spinwheel plugin added to jQuery as you are expecting.
You have the code
$(document).ready(function () {
$("canvas").spinwheel(...);
});
This would all work as you are expecting.
HOWEVER!
Towards the bottom of your page, you have
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
At this point, you have a new copy of jQuery - one without the spinwheel plugin installed. Your page is in a weird limbo state, where the $(document).ready is running from jQuery 1.6, but the $ inside it when it runs will be the newer jQuery, without the plugin.
Two solutions:
Preferred: get rid of the duplicate jQuery
$(document).ready(function($) { ... }) will ensure that the $ inside the function will be the same as the one outside.
I have following code:
function iAgree(){
alert("Hello");
jQuery('#openAccount').hide();
jQuery('#submitDetails').show();
}
I am calling it using:
<div class="openAccWraper">
<div class="openAccDetail"> </div>
<div class="questionContact">
<input type="checkbox" name="iAgree" id="iAgree" value="1" />
</div>
</div>
<img src="img/btnSubmitDet.png" border="0" />
I am getting following error:
Uncaught TypeError: object is not a function
I think the problem may be with the iAgree being id as well, and IIRC some (all?) browsers define the global named same as id (if it is possible as identifier). So, iAgree() tries to call DOM object, which obviously fails; and it also explains why renaming solves it.
To check if this is the case put onclick="alert(iAgree); iAgree();" and see if it alerts function or InputElement.
I think the problem is that your code is not being loaded onto the page properly. If you wrap your function code in the head or the body tag of your html, your code should work. e.g.
<body>
<!-- html -->
<!-- load your script at the bottom of the body -->
<script src="jquery.js" type="text/javascript"></script>
<script type="text/javascript">
function iAgree(){
alert("Hello");
.........
}
</script>
</body>
Or
<body>
<!-- html -->
<!-- load your script at the bottom of the body-->
<script src="jquery.js" type="text/javascript"></script>
<script src="iAgree.js" type="text/javascript"></script>
</body>
Here's a minimal working fiddle http://jsfiddle.net/SZYH3/2/.
I have a div that I need to be able to scroll. Unfortunately the default browsers are very ugly, an ordeal I am trying to use JScrollpane to get around.
It doesn't seem to cooperate with me however: I have added the necessary links, along with JQuery ofcourse
<script type="text/javascript" src="js/jquery.mousewheel.js"></script>
<script type="text/javascript" src="js/jquery.jscrollpane.min.js"></script>
<link type="text/css" href="css/jquery.jscrollpane.css" rel="stylesheet" media="all" />
Which are corresponding to my file structure, and have called the script using
<script type="text/javascript">
$(window).load(function() {
$('#slider').nivoSlider();
$('.work-description').jScrollPane();
});
</script>
My div also seems to be in place:
<div class="workdescription" id="Plumbing">
<div id="shop">
<div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
<p><button class="add-to-cart" type="button">Add</button></p>
<p class="itemPrice">This is about the longest sentence you'll get</p>
</div>
</div>
With a CSS value of overflow:auto;
I've also tried overflow:hidden; but that hasn't worked either. I am still stuck with the ugly scrollbars.
I've received no JScript errors. What's up with this?
I've used jScrollPane before and you basically need a container, a paragraph which will be used as a wrapper, and then a call to jScrollPane which you also need to reinitialize if the container that will have a scrollbar is from an ajax response.
Based from your code I'll assume that your html look something like this:
<div class="workdescription" id="Plumbing">
<p>
<div id="shop">
<div class="item" data-id="1" data-name="This here is a very large piece of information" data-price="47.50">
<p><button class="add-to-cart" type="button">Add</button></p>
<p class="itemPrice">This is about the longest sentence you'll get</p>
</div>
</div>
</p>
</div>
Then your selector, just include the script after the html so you won't need to wrap your script on window.load().
<script>
$('.workdescription').jScrollPane({autoReinitialise: true});
</script>
The class name is "workdescription" in you HTML, but you used ".work-description" as your selector. It seems that's the problem ;)
I am using android 2.2, phonegap 1.3, and jquery-mobile 1.0
I have a list view in which there is an element in the list that I want to use to create a dialog. I would like my dialog to be defined in a separate file so I can reuse it and I would like it to set the title according to the value I pass.
My dialog looks something like this:
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title"></h1>
</div>
<div data-role="content">
...
</div>
</div>
</body>
</html>
I have tried using a #href with the title parameter (as defined below), dialog is opened but the title param isn't present.
<ul data-role="listview" data-theme="a">
...
<li><a href="dialog.html?title=blah" data-rel="dialog"/></li>
...
</ul>
I have read that I could use a data-url but in this case it is not clear where I define it (in the <a> or in a <div> which wraps it) and how I extract this in the dialog page.
EDIT
For the record the mechanism works in a standard browser but without the styling.
I created the script inside the <script> tags below which listens for page show events and updates the title and placeholder for the input.
<div data-role="page" class="ui-page-z">
<div data-role="header" data-theme="z" class="ui-bar-z">
<h1 id="title">
</h1>
</div>
<div data-role="content">
<input placeholder="Type here..." id="configtext">
</input>
...
<script type="text/javascript">
$("div.ui-page-z").live("pageshow", function(event, ui) {
var dataUrl = $(".ui-page-active").attr("data-url");
$("#title").empty();
$("#title").append(SMSPLUS.getValue("title", dataUrl));
$("#configtext").attr("placeholder", SMSPLUS.getValue("placeholder", dataUrl));
});
</script>
</div>
The script wasn't detected when placed in the header (presumably because the framework takes no notice of headers for dialogs)
You might try removing the
<!DOCTYPE HTML>
<html>
<head>
<script type="text/javascript">
$(document).ready(function() {
$("#title").append(SMSPLUS.queryString("title"));
});
</script>
<title>Dialog</title>
</head>
<body>
</body>
and only return the body html & javascript in your ajax call. Having two DOMS in one might confuse the browser.