I'm using a VS2010+MVC3(Razor)+IE8+JQueryUI stack and I was trying to create a list of buttons using the jqueryui .buttons() function. However, for some unknown reason it would consistently crash Dev-Webserver+IE8 when the button was pressed. The code below is necessary and sufficient to demonstrate the bug. Simply cut and paste it into your Home/Index.chtml file and run.
<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/themes/base/jquery-ui.css" type="text/css" media="all" />
<link rel="stylesheet" href="http://static.jquery.com/ui/css/demo-docs-theme/ui.theme.css" type="text/css" media="all" />
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.4/jquery.min.js" type="text/javascript"></script>
<script src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.10/jquery-ui.min.js" type="text/javascript"></script>
<ul>
<li>
<div>
<label for="aa">text</label>
<input type="checkbox" id="aa" class="theclass"/>
</div>
</li>
</ul>
<script type="text/javascript">
$(function () {
$(".theclass").button();
});
</script>
This works fine with Chrome, and the error also does not occur if you drop this into a plain HTML file and ran outside of VS2010, so this may be something specific to MVC/ASP. Removing the surrounding div will stop this from crashing. Notably, this only crashes when the button is the last button in the div group. As a hack I added an empty div after the input element, and this stopped it from crashing. This was a very idiosyncratic error and so I'm posting this here in case someone has similar troubles.
Cheers
Rob
IE8 has a whole bunch of bugs. Best suggestion is to take a look at this list of IE8 bugs. I use this list whenever I find an IE8 bug.
http://jhop.me/ie8-bugs
The closest thing I can find on that page would be the following javascript bug.
Utilising querySelectorAll within a statement that breaks out of a for loop, triggers a full program crash.
It's possible the jQuery method is causing that or the button method is causing that. Why are you trying to make a checkbox into a button? I don't think the button method is supposed to work like that.
This happened to me as well, but not in VS2010 and not with MVC, it's just something that seems to happen with the jQueryUI button...
My solution was simple, wrap the offending elements in a SPAN tag. In the above example, this should fix the issue...
<span class="theclass"><input type="checkbox" id="aa"></span>
Related
Trying to implement Google Places API, to look for businesses.
I am trying to break down the result in different sections (name,address,city...) to stick it in a form.
Doing a bit of research, I have actually found the ultimate code to copy. However, I am using Django and I am too much of a newbie in coding, to understand how to alter the code to make it work with the framework. (https://jsfiddle.net/geocodezip/ep5aw171/1/)
Here is the code I have:
js file
function initMap(){
autocomplete = new google.maps.places.Autocomplete(document.getElementById("input"),{
componentRestrictions: {'country':['uk']},
fields: ['name','geometry'],
types:['establishment']
});
autocomplete.addListener('place_changed');
}
html
<html>
<h1>Google Places API Test</h1>
<body>
<input id="input" placeholder="*Name API" style="height: 75px; width:1000px">
<script src="{% static 'google_places_names.js' %}"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initMap"></script>
</body>
</html>
This bit works. When I type an address, I get the address of the what I am looking for (see screenshot)
Given that I am planning to use a django form to capture the information, I am assuming the html to look like this:
<html>
<h1>Google Places API Test</h1>
<body>
<input id="input" placeholder="*Name API" style="height: 75px; width:1000px">
<form id="GoogleAPI" method="POST" action="{% url 'google_api_test'%}">
{% csrf_token %}
<label for="address" class="hidden-el" hidden>Address</label>
{{form.name}}
<label for="address" class="hidden-el" hidden>Address</label>
{{form.address}}
...
</form>
<script src="{% static 'google_places_names.js' %}"></script>
<script async defer src="https://maps.googleapis.com/maps/api/js?key=xxx&libraries=places&callback=initMap"></script>
</body>
</html>
Looking at the different answers on the topic, there seems to be lot of code to write,so I am expecting anyone to do this here. But I wondering if someone may know a link to a Django tutorial for Google API for businesses (establishment). Found a few online, but they do not cover establishements and the approach appears to be different.
I understand the next step would be to call is to call autocomplete.getPlace() within a function. But all attempts I made proved to unsuccessful.
Would be grateful if anyone had any pointers!
I want to use some **Boostrap** elements into the **django admin** interface.
For that purpose, I have overided the *admin/base.html* template. I want to add the links to bootstrap javascripts (the two lines of code you have to put just before the `` in order to use bootstrap) into that template.
As it is out of any `{% block %}` in the original *admin/base.html*, is there a nice way to do that without copying the entire section ?
in your admin/base.html file add bootstrap style and js scripts using CDN as below;
<head>
<!-- Bootstrap CSS -->
<link href="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-1BmE4kWBq78iYhFldvKuhfTAU6auU8tT94WrHftjDbrCEXSU1oBoqyl2QvZ6jIW3" crossorigin="anonymous">
</head>
<body>
<script src="https://cdn.jsdelivr.net/npm/bootstrap#5.1.3/dist/js/bootstrap.bundle.min.js" integrity="sha384-ka7Sk0Gln4gmtz2MlQnikT1wXgYsOg+OMhuP+IlRH9sENBO0LRn5q+8nbTov4+1p" crossorigin="anonymous"></script>
</body>
I hope this will help you as it works for me. Please try and if you have any queries related to this please add a comment.
Getting started with Bootstrap
Following the docs, I am trying to get Reveal to work. Its a pretty vanilla installation. I am loading Foundation and jQuery via jsdelivr. I can see the div I am trying to load into the modal, but it doesn't get loaded.
In order for Zurb Reveal to function properly, the javascripts must be loaded after the modal elements.
click here
<div id="myModal" class="reveal-modal" data-reveal>modal content</div>
<script src="jquery.js"></script>
<script src="foundation.min.js"></script>
If the <div id="myModal"> is placed after the foundation script tag, it won't work.
I am using the "?alttemplate=TemplateName" on the end of my url within my umbraco xslt code
Here is the example: Click here
When a user clicks on the link a popup ( fancybox ) will trigger with the appropriate content rendering inside.
This pop up is working perfectly - the only issue is that the template associated to the node within umbraco has a RTE ( Rich Text Editor ). The content I input within the RTE is not displaying which is very weird because I have the umbraco field select item on the "CommunityVideo" template.
Theoretically the content should render but it's not.
Here is the code that populates the content:
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title><umbraco:Item field="pageName" runat="server" /></title>
<link rel="stylesheet" href="/css/main.css" type="text/css" />
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.6.1/jquery.min.js"></script>
</head>
<body id="popup">
<div id="comm-video-wrap">
<umbraco:Item field="bodyText" runat="server" />
</div>
</body>
Any ideas?
There are a bunch of unlikely reasons.
Firstly you've spelled the alias wrongly on the item - I'm guessing that the name on the doctype is "Body Text" or "BodyText" or "bodyText" - all of which would generate an alias of bodyText - if not that could be the problem.
Secondly is there a stylesheet setting hiding the rendered item - use firebug to check that out.
Using the alttemplate should work - but you need to be sure its running the template that you think it is.
It could be that the is no usable text in the RTE which you can verify by adding the textIfEmpty attribute.
<umbraco:item field="bodyText" textIfEmpty="There is no commentary text" runat="server" />
There are other umbraco:item attributes that might help with debugging, try adjusting your umbraco:item statement to:
<umbraco:item field="bodyText" insertTextBefore="**BEFORE**" insertTextAfter="**AFTER**" htmlEncode="true" textIfEmpty="There is no commentary text" runat="server"/>
and if you can't see any text then the template you think is being run simply isn't.
Another possibility is that your Template name isn't exact (casing and all). Is fancybox doing an AJAX call to get the page? Is it getting the markup from above in the response or is it blank?
currently I'm using a JSP templating system which uses this example's lib ("/WEB-INF/tlds/template.tld").
I'm not even sure how it's called.
Anyway it seems like it's not too developed, it makes problems with form POST method, I have no idea who made it (just found it) and I've heard about Apache's Struts & Tiles.
I'm not even sure that Struts does what I'm talking about.
Down to business:
A page in my site has this JSP content, that utilizes the template:
<%# taglib uri="/WEB-INF/tlds/template.tld" prefix="template"%>
<template:insert template="/WEB-INF/main_template_page/template.jsp">
<template:put name="title" content="Title here" direct="true" />
<template:put name="content" content="/content.jsp" />
</template:insert>
The template is:
<%# taglib uri='/WEB-INF/tlds/template.tld' prefix='template'%>
<html>
<head>
<title>
<template:get name='title' />
</title>
<link type="text/css" rel="stylesheet" href="/styles.css" />
</head>
<body>
<div id="div_header">
<div class="content">
<%#include file='header.html'%>
</div>
</div>
<div id="div_content">
<template:get name='content' />
</div>
<div id="div_footer">
<%#include file='footer.html'%>
</div>
</body>
</html>
So as you see each page gives the template some parameters and it all works nice.
Is there a "well-established" system that does that? I'm sure there is; What its name? Which would you use for pretty much simple pages, but, has to support dynamic ones with code (JSP).
Quaternion is right that Tiles and SiteMesh are both pretty popular decoration frameworks. You can also use JSP .tag files to achieve this, as shown in this answer.
I've never used SiteMesh, but I've worked on several projects at work that use Tiles and I don't care for it -- to me it's just an extra layer that doesn't add enough bang-for-my-buck. Tag files have the added bonus of being a built-in part of JSP.
Apache Tiles and Sitemesh are the two most popular systems. Tiles is more in keeping with what you demonstrated.