The popup is opened, but keeps loading. I copied the code from the example page, which is working OK.
The paths for css, js and ajax-content are ‘bonafide’.
I can't get my head around it.
http://gerardwessel.nl/swipe/index_ajaxklik.html
<head>
<link rel="stylesheet" href="popup/magnific-popup.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script src="popup/jquery.magnific-popup.js"></script>
<script type="text/javascript">
$(document).ready(function() {
$('.simple-ajax-popup').magnificPopup({
type: 'ajax'
});
});
</script>
<title>ajax klik</title>
</head>
<body>
Load content via ajax
</body>
It looks like the ajaxtekst.html file needs to be an HTML file with html, head, and body tags.
When you click on "Load content via ajax", you can see there is an error in the browser console.
Related
I'm trying to load a document with XHR, and move some loaded nodes into the main document. The problem is that Polymer elements defined in the loaded document "don't work" after moving. They are look and behave like regular <div>s.
Here is a simple repro case.
Loaded document:
<!-- insert.html -->
<div>
<link rel="import" href="paper-button/paper-button.html">
<div>Hello, world!</div>
<paper-button>I am a button</paper-button>
</div>
Main page:
<!-- index.html -->
<html>
<head>
<link rel="import" href="polymer/polymer.html">
<link rel="import" href="core-ajax/core-ajax.html">
<script>
window.addEventListener('polymer-ready', function() {
var ajax = document.getElementById('ajax');
ajax.addEventListener('core-response', function(e) {
var insertTo = document.getElementById('insertion-point');
insertTo.appendChild(e.detail.response.body.children[0]);
});
ajax.go();
});
</script>
</head>
<body>
<core-ajax id="ajax" url="insert.html" handleAs="document"></core-ajax>
<div id="insertion-point"> </div>
</body>
</html>
After loading I see that #insertion-point contains loaded document, as expected, but <paper-button> is not functioning and looks like <div>I am a button</div>.
Things don't get better when I add <link rel="import" href="paper-button/paper-button.html"> to the main page's <head>.
Replacing <core-ajax> with a native XMLHttpRequest doesn't help as well.
I'm testing on Google Chrome 42 with the latest Polymer.
My question: is this supposed to work at all? If not, why? If yes, who's to blame?
x-posting from Elliott Sprehn's response the polymer-dev mailing list.
This doesn't work because you're taking elements from an xhr document where there's no custom element registry and then just moving them. You need to do appendChild(document.importNode(response.body.children[0])) which will create a clone of the node, but using the document where polymer has registered the custom elements.
I am new with using the Kendo data source and so far it is not working. My page is extremely simple.
<head>
<meta name="viewport" content="width=device-width" />
<title>View Quote Lists</title>
<link href="/Content/bootstrap.min.css" rel="stylesheet" />
<link href="/styles/kendo.common.min.css" rel="stylesheet" />
<link href="/styles/kendo.default.min.css" rel="stylesheet" />
<link href="/styles/kendo.dataviz.min.css" rel="stylesheet" />
<link href="/styles/kendo.dataviz.default.min.css" rel="stylesheet" />
</head>
<body>
<div>
</div>
<script src="/Scripts/jquery-2.1.3.min.js"></script>
<script src="/Scripts/kendo.all.min.js"></script>
<script src="/Scripts/bootstrap.min.js"></script>
<script>
var query = "3";
var dataSource = new kendo.data.DataSource({
transport: {
read: {
url: "/api/QuoteAPI?page=1",
dataType: "json"
},
requestEnd: function() {
console.log(JSON.stringify(dataSource.data()))
}
}
});
dataSource.read();
</script>
</body>
The server data set that is returned from the service is an object that looks like:
{
{"QuoteCount":13393,"CurrentPage":1,"Quotes":[{"QuoteID":"B0339420-52C1-4762-8F41-474BE601E872","QuoteNo":"00014857","QuoteDate":"2015.03.09","netgainID":"5BDF1655-CB35-4326-80E3-6DCA0CC00C8B","Qty":1.0,"SKU":"CC1512570","Product":"WELDMNT,ANTLER FRAME ","Price":186.66,"Customer":"Grady Health Systems","repID":"{CA7A9606-8EAB-447E-934E-C52B4D8E06C6}","Rep":"Kirkland, Travis"},{"QuoteID":"B0339420-52C1-4762-8F41-474BE601E872","QuoteNo":"00014857","QuoteDate":"2015.03.09","netgainID":"8DBF5603-DAED-4DF8-89FD-1A172CA3589E","Qty":4.0,"SKU":"CC0900265","Product":"FRONT FLOOR PLATE (PR) 175 KIT","Price":28.95,"Customer":"Grady Health Systems","repID":"{CA7A9606-8EAB-447E-934E-C52B4D8E06C6}","Rep":"Kirkland, Travis"}......]
When I load the page is calls the web service and returns the data which I can see using Google tools. However the line dataSource.read() gives an error
Uncaught TypeError: undefined is not a function kendo.all.min.js:11
The requestEnd function is never called so I can't see the data even though it has been called.
Can someone tell me why this is not working. I have tried every variation of the docs that seem appropriate but this refuses to work.
Thanks,
Terry
Can you move requestEnd out side of transport block and try? If it doesn't help create a Kendo Dojo to replicate the problem so that it's easier to fix it there.
Here is a dojo with similar code that is working, except that I am using jsonp.
I am new to AJAX and am experimenting with a simple page that should show a txt file into a specific location. At this point it does not show the vlist.txt file.
Question: Why does this code not display the file (vlist.txt)?
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load("C:\Users\itpr13266\Desktop\vlist.txt");
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2>This is where your text will go</div>
<button>Get External Content</button>
</body>
</html>
New Code that was Tried.
<!DOCTYPE html>
<html>
<head>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js">
</script>
<script>
$(document).ready(function(){
$("button").click(function(){
$("#div1").load(function() {alert( "Load was performed." ););
});
});
</script>
</head>
<body>
<div id="div1"><h2>Let jQuery AJAX Change This Text</h2>This is where your text will go</div>
<button>Get External Content</button>
</body>
</html>
No alert box was displayed so I am not sure that it is even getting to that point.
$().load() can't be used with a local file path like C:\Users\itpr13266\Desktop\vlist.txt.
Put your file on a web server and your code will most likely work.
I am creating an application in mvc3 razor.i am using jqxnavigationbar to create navigationa panels. i added the required js and css files in the folders. below is my examle code in layout
Header 1
Content 1
Header 2
Content 2
Header 3
Content 3
below is my javascript function in header portion
<script type="text/javascript">
$(document).ready(function () {
// Create jqxNavigationBar
$("#jqxnavigationbar").jqxNavigationBar({ width: 200, height: 200 });
$("#jqxnavigationbar").bind('expandedItem', function (event) {
var index = event.item + 1;
alert("Expanded: Header " + index);
});
});
but when i run the project it shown error
$("#jqxnavigationbar").jqxNavigationBar is not a function. and navigation panels are not display in the browser.
what can i do to remove error and use jq navigation bar.
Did you put your script :
At the Top of your _Layout view ?
Your error means that the jquery nav lib has not yet extended the jquery one.
Also look at the script window from your web browser debuging tool to check if you don't load multiple jquery-1.8.3* lib, you should only have one, the full ou minified one.
I did a mistake in my head section in layout page. After adding refference of required jqxnavigationbar js and css files I added the refference of jquery-1.4.2.min.js file.so it does not work for me. Now after removing those refference the final header code is below which works fine for me.
<link rel="stylesheet" href="/Content/jqx.base.css" type="text/css" />
<link rel="stylesheet" href="#Url.Content("~/Content/jqx.energyblue.css")" type="text/css" />
<script type="text/javascript" src="/scripts/jquery-1.8.3.min.js"></script>
<script type="text/javascript" src="/scripts/jqxcore.js"></script>
<script type="text/javascript" src="/scripts/jqxnavigationbar.js"></script>
<script type="text/javascript" src="/scripts/jqxexpander.js"></script>
#*AUTOCOMPLETE JQUERY FILES AND CSS FIES*#
<link href="/Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />
#* <script src="/Scripts/jquery-1.4.2.min.js" type="text/javascript"></script>*#
<script src="/Scripts/jquery-ui-1.8.custom.min.js" type="text/javascript"></script>
#RenderSection("PageScripts",false)
put code for jqnavigation bar in javascript portion.
I used mootools scrollable(http://mootools.net/forge/p/scrollable) on my page,but it is not working.
my page: http://neyriz.net/moo/
I used it for div with id="right"
why it's not work?
You are making 2 mistakes. The first is that you try to instanciate the Scrollable before the DOM is ready and so your element doesn't exist. So you have to move your script tag either to the end of the body or you wrap it in an event listener. I.E:
window.addEvent('domready', function() {
var myScrollable = new Scrollable($('right'));
});
The second problem is that the plugin has some dependencies. In this case you need to include Slider, Element.Measure, Element.Shortcuts from MooTools more. You can go to http://mootools.net/more/ and select those 3 modules. Download the file and include it into your head between mootools-core and scrollable:
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script> INSERT MOOTOOLS MORE HERE!
<script type="text/javascript" src="scrollable.js"></script>
In general it's better when you define and load your JS files before the body. So it looks like:
<html>
<head><title>My awesome page</title></head>
<body>
<h1>My awesome page</h1>
<p>Some text</p>
<script type="text/javascript" src="mootools-core.js"></script>
<script type="text/javascript" src="mootools-more.js"></script> INSERT MOOTOOLS MORE HERE!
<script type="text/javascript" src="scrollable.js"></script>
</body>
</html>