jQuery accordion does not work - javascript

i think i have done all right but still accordion is not working
<head runat="server">
<title></title>
<link href="assets/jquery-ui-1.10.3.custom/jquery-ui-1.10.3.custom/development-bundle/themes/base/minified/jquery-ui.min.css" rel="stylesheet" />
<script src="assets/js/jquery-1.10.2.min.js"></script>
<script src="assets/jquery-ui.js"></script>
<script type="text/javascript">
$("#Acc").accordion();
</script>
<body>
<form id="form1" runat="server">
<div id="Acc">
<h3>First One</h3>
<div>
<p>
1st Data
</p>
</div>
<h3>second One</h3>
<div>
<p>
2nd Data
</p>
</div>
<h3>Third One</h3>
<div>
<p>
3rd Data
</p>
</div>
</div>
</form>

You need to wrap the script in document.ready which delays the execution of a script until the DOM is completely loaded. Currently the script cannot find the div#Acc when it executes because it has not been loaded.
$(document).ready(function(){
$("#Acc").accordion();
});

Your script should be within a dom ready handler
jQuery(function(){
$("#Acc").accordion();
})
Since your script is in the header when your selector $("#Acc") is executed, the element is not yet loaded to the dom so the selector will not return anything thus the accordion widget will not get initiated for the element
Demo: Fiddle

Related

Problems with getElementById [duplicate]

This question already has answers here:
Why does jQuery or a DOM method such as getElementById not find the element?
(6 answers)
Closed 3 years ago.
I'm trying to write simple web app in VSCode. I have little misunderstanding. May be its really simple thing, but i don't know why it doesn't work normally like in examples which i saw.
i have js file (script.js)
function getHistory(){
return document.getElementById("history-value").innerText;
}
alert( getHistory());
and my index.html where i'm using div's tags
<div class="result">
<div class="history">
<p id="history-value">55555</p>
</div>
<div class="output">
<p id="output-value" class="output-value">7777777</p>
</div>
</div>
in beginning of course referense to js
<head>
<title>Calculator</title>
<meta charset="utf-8" >
<link rel="stylesheet" href="style.css">
<script src="script.js">
</script>
</head>
But allert are not working. I can't see nothing. If i use
console.log (document.getElementById("history-value").innerText );
it shows null in console window.
Please explain me what's wrong with it?
1) As Java script is loaded before html page so you have to add script tage at bottom of the page in your case as you are taking value of history-value element which you have added after script tag so when script tag is loaded there is no element with id history-value so you will get null. So you have to add this script after this element
index.html
<head>
<title>Calculator</title>
<meta charset="utf-8" >
<link rel="stylesheet" href="style.css">
</head>
<div class="result">
<div class="history">
<p id="history-value">55555</p>
</div>
<div class="output">
<p id="output-value" class="output-value">7777777</p>
</div>
</div>
<script src="script.js"></script>
script.js
function getHistory(){
return document.getElementById("history-value").innerText;
}
alert( getHistory());
The problem is that your <script> tag appears in the <head> section of your document, and when the script loads, the rest of your HTML has not yet been loaded by the browser, so the <p id="history-value"> tag effectively does not yet exist as far as the browser is concerned.
In this case, you should put your <script> tag just before the </body> tag, or at the very least after the <p id="history-value"> tag, so that <p> tag appears before the Javascript attempts to read it.
It looks like the script runs when there is no history-value element.
Are you sure you are running the code after document has been loaded?
Your code work in the following snippet (but I guess is due to the fact that javscript is loaded at the end of the document).
But to make sure you can place into a
document.addEventListener( 'DOMContentLoaded', function( event ) {
// your code here
})
function getHistory(){
return document.getElementById("history-value").innerText;
}
document.addEventListener( 'DOMContentLoaded', function( event ) {
alert(getHistory());
});
<div class="result">
<div class="history">
<p id="history-value">55555</p>
</div>
<div class="output">
<p id="output-value" class="output-value">7777777</p>
</div>
</div>

Dynamically Adding an MDL Text Input via JavaScript, not via AJAX

Dynamically adding a text input via AJAX and using the componentHandler.upgradeDom() works well.
However, when I clone a text input using JavaScript alone, that function doesn't help.
<html>
<head>
<script defer src="https://code.getmdl.io/1.3.0/material.min.js"></script>
<script src="https://code.jquery.com/jquery-3.3.1.js" integrity="sha256-2Kok7MbOyxpgUVvAk/HJ2jigOSYS2auK4Pfzbm7uH60=" crossorigin="anonymous"></script>
<link rel="stylesheet" href="https://code.getmdl.io/1.3.0/material.indigo-amber.min.css">
</head>
<body>
<div id="formElements">
<div class="formElementGroup">
<div class="mdl-textfield mdl-js-textfield mdl-textfield--floating-label">
<label class="mdl-textfield__label" for="Q1">Question</label><input type="text" class="mdl-textfield__input" id="Q1" name="Q1[]">
</div>
</div>
<div id="Qs1"></div>
<div align="left">
<a id="Btn-addQuestion" class="Btn-addQuestion">
Add another text field
</a>
</div>
</div>
<script>
$(document).ready(function(){
$("#formElements").on("click", ".Btn-addQuestion", function(){
clonedTxtBox = $("#Q1").parents(".formElementGroup").clone(true);
clonedTxtBox.appendTo("#Qs1");
setTimeout(function(){
componentHandler.upgradeDom();
}, 1000);
});
});
</script>
</body>
</html>
I expect that the label of the cloned text input move upwards and become smaller as it is designed to behave. However, only the original one does-- the cloned one doesn't; it rather sticks over the text-input even if the user types something inside.
Any help would be appreciated.
JS Fiddle:
https://jsfiddle.net/jp26f0ts/
I found the solution somewhere online.
Before upgrading the DOM, I should have added this:
clonedTxtBox.find('.mdl-textfield').removeClass('is-upgraded').removeAttr('data-upgraded');

Can't use Javascript when using AJAX (jQuery Mobile)

I want to use Swiper Javascript Api(http://www.idangero.us/) in Jquery Mobile..
But because Jquery Mobile uses ajax, my javascript doesn't work..
Example sources are like that.
index.html
<head>
<link href="./scripts/jquery.mobile-1.4.0.css" rel="stylesheet" type="text/css"/>
<script src="./scripts/jquery-1.10.2.min.js"></script>
<script src="./scripts/jquery.mobile-1.4.0.js"></script>
<link rel="stylesheet" href="./scripts/idangerous.swiper.css"/>
<script src="./scripts/idangerous.swiper.2.4.1.js" defer="true"></script>
</head>
<body>
<div data-role="page">
<div data-role="header"></div>
<div role="main" class="ui-content page_content">go sub page</div>
<div data-role="footer"></div>
</div>
</body>
sub.html
</head>
<body>
<div data-role="page">
<div data-role="header">
</div>
<div role="main">
<!-- using swipe javascript source-->
<script defer="true">
$(document).on('pagecreate', function() {
var mySwiper = new Swiper('.swiper-container',{
//Your options here:
mode:'horizontal',
loop: true
//etc..
});
})
<div class="swiper-container">
<div class="swiper-wrapper">
<!--First Slide-->
<div class="swiper-slide" style="background:white;">
<center><font color="black">1</font></center>
<center><font color="black">page1</font></center>
</div>
<!--Second Slide-->
<div class="swiper-slide" style="background:white;">
<center><font color="black" >2</font></center>
<center><font color="black" >page2</font></center>
</div>
<!-- Third Slide-->
<div class="swiper-slide" style="background:white;">
<center><font color="black">3</font></center>
<center><font color="black">page3</font></center>
</div>
</div>
</div>
</div>
</div data-role="footer"></div>
</div>
</body>
I used Swiper api(javascript) at sub.html. But when I access index.html page and click sub link, sub page's Swiper api doesn't work. When I refresh that page, it work..
How can I view the Swiper api even I do not refresh it?
jQuery Mobile uses AJAX to load in your new page. However, it strips out the head--as well as anything outside a container with data-role="page" (or body if not provided).
The solution is to move your script so it appears within the section of the page that jQuery Mobile injects into the page, so it doesn't get removed.
Then, if you want to execute javascript on $.ready(), you'll need to bind to jQuery Mobile's onPageInit event like so:
$( document ).on( "pageinit", function( event ) {
alert( "This page was just enhanced by jQuery Mobile!" );
});
In the real world, I've noticed that pageinit sometimes doesn't solve the problem, so if all else fails, try binding to pagebeforeshow and see if that does the trick.
My guess is that the document.ready is only fired once - when your page has initially been loaded and DOM is ready. You can put your code directly into a tag in the loaded sub.html. No need to use the $(document).ready event handler.

JScrollpane will not style scrollbar

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 ;)

Showing a dialog from a separate html file and passing it a parameter

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.

Categories

Resources