AJAX problems in WebKit browsers - ajax

I'm developing an AJAX site. So the problem is browsers (Safari, Chrome) do not show spaces in AJAX-loaded HTML content after tags like Strong, Em etc.
Then I added a doctype to the AJAX output. Everything was fine, there were all spaces, unless I tested the site in WebKit browsers. When I loaded the page in Safari, I got error:
This page contains the following errors:
error on line 1 at column 7: internal error
Below is a rendering of the page up to the first error.
What do I got to do?
Or, in other words, is there any way to output the doctype for WebKit without getting the error?
Output is something like that:
<div class="topic">
<div class="colon">
<div class="topictext">
<h2>KirillTitov tells us:</h2><p>Here you go.<br/>
<b>Bold text</b> <i>italic text</i> <strike>etc</strike>…</p>
</div><!-- topictext -->
<div class="topicright"></div>
<div class="clear"></div>
<div class="topicinfo">
<div class="topicclock">
<font title="Timestamp for geeks — 1253816398">24 september, year 2009</font>
</div><!-- topicclock -->
<div class="topiccomment">
Go inside (мнений: 0)
</div><!-- topiccomment -->
</div><!-- topicinfo -->
<div class="topicindex">
<img src="/img/bgtopicindex.gif" border="0" alt="" />
</div><!-- topicindex -->
<div class="blur"></div>
</div><!-- colon -->
<div class="colon">
<div class="indextopcomment">
<div class="commenttopleft"><img src="/img/bgcommentindexgreen.gif" alt="" border="0" /></div>
<div class="texttopcomment nonenew">
No comments here.
</div>
<div class="clear"></div>
</div><!-- indextopcomment -->
</div><!-- colon -->
<div class="clear"></div>
</div><!-- topic -->
<div class="clear"></div>
</div><!-- topic -->

Have you thought about using in those places?
Also, try the following on your incoming ajax result:
.Replace("\xA0", " ").Replace("\x20"," ");
Some frameworks behave odd in webkit and put not-standard spacing in, is what what you're seeing? Follow-up on if the replace works, if not there are other options, but that's usually the simplest/quickest fix. Here's a full table on the whitespace oddities, but it depends on browser/platform as to which quirk you're hitting normally.

Related

Image not showing 2nd url page

Sorry if my title is a bit weird, I wasn't sure how to properly make a title for this. I'm using Laravel and the problem I'm having is that if I go to the 3rd url in my page my image isn't showing. It shows if I'm on the 1st url but not the 2nd and I can't understand why.
For example:
I can view the image at the url http://localhost/site and at http://localhost/site/a but not http://localhost/site/a/b
My public.blade.php
<body>
<!-- BEGIN MAIN WRAPPER CONTENT -->
<div id="wrapper">
<!-- BEGIN MOBILE LOGO SECTION -->
<div class="visible-xs logo">
<img src="{!! asset("img/logo1.png") !!}">
</div>
<!-- END MOBILE LOGO SECTION -->
<!-- BEGIN MENU SECTION -->
#include('menus::menu')
<!-- END MENU SECTION -->
<!-- BEGIN MAIN CONTENT SECTION -->
<div id="page-wrapper">
<!-- BEGIN CONTENT SECTION -->
<div class="container-fluid">
#yield('content')
<div class="row">
<div class="col-lg-6">
<div class="footer visible-xs">
<p>
Designed by <br />
<a href="#" target="_blank">
<img src="{!! asset("img/footer.png") !!}"> <!-- THIS IS THE IMAGE THAT IS GIVING ME PROBLEMS -->
</a>
</p>
</div>
</div>
</div>
</div>
<!-- END CONTENT SECTION -->
</div>
<!-- END MAIN CONTENT SECTION -->
</div>
<!-- END MAIN WRAPPER CONTENT -->
I hope I explained clearly. If not please let me know.
Use
url("img/logo1.png")
instead of
asset("img/logo1.png")

asp conditional include error Microsoft VBScript compilation error '800a0400'

I followed Martha's suggestion here:
if page is default then include if not default then
And I am missing something, as I can't get it to display the slider.
Here is the slider code, and how I am using Martha'e suggestion.
This is the slider (bootstrap carousel) code (to be integrated with Martha's suggestion)
<div class="jumbotron">
<div class="container">
<div class="row fz-slider-wrap">
<div class="col-md-4 fz-slider-caption">
DFD Fioriere
</div>
<div class="col-md-8 fz-slider-image">
<div id="fz-gallery-slider" class="carousel slide" data-ride="carousel">
<!-- Indicators -->
<ol class="carousel-indicators">
<li data-target="#fz-gallery-slider" data-slide-to="0" class="active"></li>
<li data-target="#fz-gallery-slider" data-slide-to="1"></li>
<li data-target="#fz-gallery-slider" data-slide-to="2"></li>
</ol>
<!-- Wrapper for slides -->
<div class="carousel-inner">
<div class="item active">
<img class="fz-img-box" src="images/slider/03.jpg" alt="slider 1" />
</div>
<div class="item">
<img class="fz-img-box" src="images/slider/01.jpg" alt="slider 2" />
</div>
<div class="item">
<img class="fz-img-box" src="images//slider/06.jpg" alt="slider 3" />
</div>
</div>
</div>
</div>
</div>
</div>
</div><!-- .jumbotron -->
This is what happens:
If I put the above code inside
<%
Sub DisplaySlider()
slider code
%>
<%
End Sub
%>
I get this error when loading default.asp
Microsoft VBScript compilation error '800a0400'
Expected statement
/afz_includes/jumbotron.asp, line 3
If I wrap slider code in ' I get same error but line 4
If I wrap slider code in " I get same error (line 3)
I also tried to wrap each line of slider code with ", and chnaged the " of classes and ids to ', but keep getting th error.
Here is what I put on the default.asp, and the other pages
<!-- #include virtual="/afz_includes/slider.html" -->
<%
scriptname = Request.ServerVariables("Script_Name")
If InStr(scriptname, "default.asp") > 0 Then
DisplaySlider
Else
Response.Write "<div class='fz-v-spacer-top'></div>"
End If
%>
I am not sure if it was a typo, anyhow I tried to save the slider both as html, and asp, but same error.
It looks like you've put the slider's code inside the ASP code delimiters (the <% and %>), so the compiler is trying to treat it as VBScript, which it obviously isn't.
In ASP classic, you put your server-side VBScript code inside <% %> blocks. HTML code does not go inside those blocks, unless you're Response.Write-ing it.
<%
Sub DisplaySlider()
%>
<div class="jumbotron">
<div class="container">
...
</div>
</div><!-- .jumbotron -->
<%
End Sub
%>

"Could not find the file list container in the template" error

I am getting message "Could not find the file list container in the template" appearing in my Javascript debug console when using fine uploader.
Here is a jsfiddle example of the problem occurring.
http://jsfiddle.net/Lu82ba9L/1/
The code from the example is repeated here
<!-- using fine uploader 5.1.3 at http://keysymmetrics.com/jsfiddle/jquery.fine-uploader.js -->
$(document).ready(function () {
$("#fine-uploader").fineUploader({
debug: true,
template: 'qq-template-bootstrap',
request: {
endpoint: "/my-endpoint"
}
});
});
<script type="text/template" id="qq-template-bootstrap" class="qq-uploader-selector">
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-button-selector qq-upload-drop-area-selector drag-drop-area">
<div>Drag and drop files here or click to upload</div>
</div>
</div>
</div>
<div class="row">
<div class="col-sm-4" >
<div class="qq-upload-list-selector" >
<div class="panel panel-default" >
<div class="panel-body" >
<div class="qq-progress-bar-container-selector progress">
<div class="qq-progress-bar-selector progress-bar"></div>
</div>
<span class="qq-upload-spinner-selector qq-upload-spinner"></span>
<span class="qq-upload-file-selector qq-upload-file"></span>
<span class="qq-upload-size-selector qq-upload-size"></span>
<span class="qq-upload-status-text-selector qq-upload-status-text"></span>
<img class="qq-thumbnail-selector" qq-max-size="100" />
</div><!-- close panel-body -->
</div><!-- close panel -->
</div>
</div>
</div>
</script>
<h1>Fine Uploader Test</h1>
<div id="fine-uploader"></div>
Just for additional information that may be helpful, I have a working version here. http://jsfiddle.net/61motjed/2/ .In this version here I have moved the "div.qq-upload-list-selector" element to a different position in the DOM (however, this is not the DOM structure I want). It is also unclear to me why the first example fails but the 2nd example is working.
Your template is not valid. The template must contain a top-level element with a CSS class of "qq-uploader-selector". This element must contain all other elements in your template. Simply wrapping the contents of your template in an element with this class should fix your issue.

KendoUI tabstrip navigates to blank page

I'm using a custom tabstrip that I took from the KendoUI page and adapted for my application.\
It has 3 tabs (home, startOfDay and stops). Each tab goes to an HTML page.
The problem is this, I can navigate from Home to one of the other tabs without a problem, but after that if I try navigate to another tab it just goes to a blank page.
Here's the my layout code.
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">FnF Driver Application</div>
</header>
<!--View content will render here-->
<footer data-role="footer">
<div data-role="tabstrip" id="custom-tabstrip">
<a data-icon="home" href="home.html">Home</a>
<a data-icon="globe" href="startOfDay.html">Start Of Day</a>
<a data-icon="toprated" href="stops.html">Stops</a>
</div>
</footer>
</section>
each page is contained in a div that looks like this...
<body>
<div id="home/startOfDay/stops" data-role="view" data-layout="default">
~Content goes here~
</div>
</body>
Any help would be greatly appreciated.
Thanks!!!
Try removing the <body> tags from your views? I think when Kendo UI Mobile reads in a remote view it injects it into the page DOM, and having another <body> tag might be messing it up.
I read somewhere that a layout has to have at least one view defined to work properly, even if it is a blank view. Try putting in a blank view.
<section data-role="layout" data-id="default">
<header data-role="header">
<div data-role="navbar">FnF Driver Application</div>
</header>
<!--View content will render here-->
<div data-role="view"></div>
<footer data-role="footer">
<div data-role="tabstrip" id="custom-tabstrip">
<a data-icon="home" href="home.html">Home</a>
<a data-icon="globe" href="startOfDay.html">Start Of Day</a>
<a data-icon="toprated" href="stops.html">Stops</a>
</div>
</footer>
</section>

Hide/Show multipe divs jquery

The following FIDDLE shows my current markup.
HTML
<div class="popup-inner-content main-content">
<div class="inner-section one">
<!-- images -->
<div class="media pull-left">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="inner-section three is-hidden">
<!-- images -->
<div class="media pull-left">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right is-hidden">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="inner-section two is-hidden">
<!-- images -->
<div class="media pull-left ">
<img src="#" />
</div>
<!-- text -->
<div class="media-aside pull-right">
<h4>Head</h4>
<p>Body</p>
</div>
</div>
<div class="thumbnail pull-left">
<!-- thumbnail -->
<div class="media-thumb one">
<img src="#" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchot text</p>
</div>
</div>
<div class="thumbnail pull-left">
<!-- thumbnail -->
<div class="media-thumb two pull-left">
<img src="#" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchor text</p>
</div>
</div>
<div class="thumbnail is-hidden">
<!-- thumbnail -->
<div class="media-thumb three ">
<img src="#" width="128" height="69" alt="media-thumbnail" title="media-thumbnail" />
<p>Anchor Text</p>
</div>
</div>
</div>
</div>
What I am trying to do is always have two thumbnails divs and only one of the inner-section divs visible at a time and essentially be able to toggle through the inner-section and thumbnail divs when clicking any of the anchors inside the thumbnail div.
How could I achieve this using jquery?
Use this:
http://jsfiddle.net/nHXEs/6/
function displayItem(showItem) {
$('div.thumbnail').show();
$('div.thumbnail .' + showItem).parent().hide();
$('div.inner-section').hide();
$('div.inner-section').filter('.' + showItem).show();
}
$(document).ready(function() {
displayItem('one');
$('div.thumbnail').click(function () {
var showItem = '';
if ($('.media-thumb', $(this)).hasClass('one')) {
showItem = 'one';
} else if ($('.media-thumb', $(this)).hasClass('two')) {
showItem = 'two';
} else {
showItem = 'three';
}
displayItem(showItem);
});
});
Hoply it is what you are looking for.
But i hope so.
It is not the best solution, because you use classes to identify your items, but if you allltimes have exactly 3 thumps and big elements it works.
A better solution will be to uses id`s to identify elements
<div class="thumbnail" id="thump_three">
You haven't explained the logic of how to decide which two thumbnails you want to show but here is a good starting point of what I believe you mean by toggle through which should allow you to expand on it. This would show just one of each element.
The idea is that the JS doesn't need to know about 'one', 'two', 'three' etc and just work for an infinite amount of options.
<p>Anchor text</p>
Give the anchor a reference you can use because finding the classes then working out which will be 'one, 'two', 'three', etc will be a lot more work.
You can do this in a few lines but I've made it obvious what's going on.
$('.thumbnail a').on('click', function(e){
e.preventDefault();
// find the wrapper (.thumbnail) and hide it
var $wrapper=$(this).closest('.thumbnail');
$wrapper.hide();
// find the next one
var $next=$wrapper.next();
// if this was the last one get the first instead
if (!$next.length) $next=$wrapper.siblings().filter(':first');
// show it
$next.show();
// now deal with the element that's elsewhere
var ref=this.href.replace('#','');
$('.inner-section.' + ref).show().siblings().hide();
});
Once you've set this behavior up, to save yourself writing out code again (or needing to define functions) just trigger a click on an anchor in the last element so it makes the first one show.
$('.thumbnail:last a').trigger('click');

Resources