So in all my failed attempts to get jQueryUI working, I have tried this example here after downloading a theme from the jQueryUI site.
and here is my code looking at that example in the link above in my asp.net mvc page.
<link type="text/css" href="<%= Url.Content("~/Scripts/jquery-ui/css/smoothness/jquery-ui-1.8.17.custom.css")%>" rel="stylesheet" />
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-1.7.1.min.js")%>"></script>
<script type="text/javascript" src="<%= Url.Content("~/Scripts/jquery-ui/js/jquery-ui-1.8.17.custom.min.js")%>"></script>
<script>
$('#dialog_link').click(function(){
$('#Dialog').dialog('open');
return false;
});
</script>
<p id="dialog_link">Open Dialog</p>
<div id="Dialog" title="Dialog title!">
This content shown within dialog...
</div>
After hitting F5 I would have expected to see a clickable text which when clicked would bring up a modal dialog with a [x] button to close it and get back to the main window. However what I get to see is this on page load,
where the text 'open dialog' does not respond to click events and the supposed "modal dialog" is already visible in the form of a plain string and without any formatting. So where did all the magic of jQueryUI go? Something wrong in my linking correct scripts?
Totally lost. Please help..
Edit
This exact same code works in pure html mode in a different file. when I copy this code into my asp.net mvc page within the content tags I get a javascript error at a non-descript line!!
Just take the 'open' out of your $('#Dialog').dialog('open'); and you are good to go.
Edit: Added this jsFiddle with your code as an example:
http://jsfiddle.net/DoomHamster/LhJsL/1/
Also, you don't need 'return false' when clicking an element with no default click event.
EDIT: From your comment below I suspect that you are having issues with loading jQuery and jQueryUI in the first place. Try replacing your script and css links with the following as a test to eliminate path issues:
<link type="text/css" rel="Stylesheet" href="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/themes/ui-lightness/jquery-ui.css" />
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.17/jquery-ui.min.js"></script>
Try this
$(function()
{
$('#dialog_link').click(function(){
$('#Dialog').dialog();
return false;
});
})
Related
I have a very strange behavior with a datepicker loaded with data-type="ajax" inside the fancybox.
It is not possible to change month and year in the datepicker.
If I open datepicker and close the fancybox not by using the close "x", the datepicker still remains, but then with working select boxes for month and year
Here's my code from the calling script:
<html>
<head>
<title>test fancybox with datepicker</title>
<script language="javascript" type="text/javascript" src="https://code.jquery.com/jquery-3.3.1.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.css"/>
<script src="https://cdnjs.cloudflare.com/ajax/libs/fancybox/3.2.5/jquery.fancybox.min.js"></script>
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.css" />
<script src="https://code.jquery.com/ui/1.12.1/jquery-ui.min.js"></script></head>
<body>
<a data-fancybox data-type="ajax" href="testfancy-call.php">
Load Fancybox Content
</a>
</body>
</html>
And this is the very simple code from testfancy-call.php:
<html>
<head>
<script language="javascript" type="text/javascript">
$(document).ready(function () {
$("#date").datepicker({
changeMonth: true,
changeYear: true,
});
});
</script>
</head>
<body>
<h1>Datepicker</h1>
<input type="text" name="date" value="" id="date">
</body>
</html>
I tried to use data-type="iframe". Here I get the datepicker working, but I have to include all external script inside "testfancy-call.php". This is not a proper solution for me, because the used software's architecture doesn't allow this. So I need to find a way using data-type="ajax".
EDIT
The behavior is only when loading with data-type="ajax". If I place the code stuff from the ajax-loaded file testfancy-call.php directly inside the calling script like in https://codepen.io/fancyapps/pen/QqLXaz it works!
EDIT 2
After some research I found that it's a crossbrowser problem for issue 1. In Firefox the selectboxes for month and year so not work. Internet Explorer and Chrome work like exspected. Is there a way to get Firefox working?
All three testet browsers have the problem that is described in issue 2.
EDIT 3
I've uploaded a demo: http://marcox.square7.ch/testfancy.html
Try disabling touch events using touch: false, because fancyBox catches touch events by default to enable swiping gestures.
I downloaded the latest CKEditor and tried the following:
<html>
<head>
<script src="ckeditor/ckeditor.js">
</script>
</head>
<body>
<div id="editor">
Some test text
</div>
<script>
CKEDITOR.disableAutoInline = true;
var editor = CKEDITOR.inline( 'editor' );
</script>
</body>
It worked in the sense that I can click the div to make the editor toolbar appear, but aside from that I can't seem to edit the content! Most of the toolbar buttons are disabled, and typing into the field does nothing. (See screenshot below)
According to http://nightly.ckeditor.com/13-04-14-07-42/standard/samples/inlinebycode.html this should be all the JS I need. Is there some other config setting I need to be doing?
Rawr, sorry. I found the answer mere minutes after posting this. I was so focused on looking for a config option I didn't realize to check the div in the example.
The div still has to have contenteditable="true" even if I don't use CKEDITOR.disableAutoInline.
I require to display some text in the browser with some words in between as links. On click of the links I want to display a pop up dialog with just some text and an OK button.
I want the title of the Pop up dialog to be changeable via code and also the icon to be the information icon. I use a JavaScript alert box which always has a heading of pop up as "Message from web page".
I think it can done using VBScript. What is the correct usage of VBScript? PFB the sample using JavaScript, I need this to be tweaked, so that VBScript is used and MsgBox is used.
<html>
<head>
<script type="text/javascript">
fucntion(test){
alert(test)
}
</script>
</head>
<body>
This is my link which
you can click on for definition.
</body>
</html>
This works fine. 64 is for the information icon and OK button. But I not able to get rid of "vbscript:" which is present at the start of the title. I am not sure why it is like that.
<html>
<head>
<script type="text/vbscript">
Function myPopUp(test)
MsgBox test, 64, "My Custom Title"
End Function
</script>
</head>
<body>
This is my <a href="#" language="vbscript" onclick="myPopUp('How are you do
today')">link</a> which
you can click on for definition.
</body>
</html>
I just followed the below link to set up syntaxhighlighter on my blog:
http://www.craftyfella.com/2010/01/syntax-highlighting-with-blogger-engine.html
But as given in this link, i tried to use the brush plain but i am getting the error as can't find brush for : plain
Any suggestions?
I use to use GIT hub to do this work in pretty much 8 simple steps,
1) Browse to https://gist.github.com
2) Add a Gist Description (optional)
3) Add a file name with an extension (extension will be used to add syntax highlighting)
4) Add your code snippet which need to be added to your blog post
5) Click “Create Public Gist” button at the bottom
6) Click on the “embed” link and copy the script generated
This is all from Gist side. Now to Blogger,
Paste the script where you need to add the code snippet
Make sure to select the option “Interpret typed HTML” under Post Options -> Compose Settings
I found this steps in this blogspot
Remember how you added the files at the top of the HTML of your page for the essential SyntaxHighlighter CSS files and JavaScript brush files? The website tutorial you found does not add the brush plain to its list of brushes. All you have to do is add this (http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushPlain.js) JavaScript file under the other brush files that look like this:
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shCore.css' rel='stylesheet' type='text/css' />
<link href='http://alexgorbatchev.com/pub/sh/current/styles/shThemeEclipse.css' rel='stylesheet' type='text/css' />
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shCore.js' type='text/javascript' />
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushCss.js' type='text/javascript' />
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushJScript.js' type='text/javascript' />
<script src='http://agorbatchev.typepad.com/pub/sh/3_0_83/scripts/shBrushXml.js' />
Basically, just add this under your other brushes:
<script src='http://alexgorbatchev.com/pub/sh/current/scripts/shBrushPlain.js' type='text/javascript' />
I'm using AJAX inside my JSF portlet. When the session expires, We are suppose to get the following message(this is the response of AJAX request when session expires)
This page is used to hold your data while you are being authorized for your request.
You will be forwarded to continue the authorization process. If this does not happen automatically, please click the Continue button below.
<CONTINUE BUTTON>
In IE 6 and 7 I can see the continue button. But in Firefox I don't see that button. Only the text is visible.But in the source code I can see that section, but it is grayed in Firebug.I've the screenshot uploaded to http://img31.imageshack.us/img31/619/firefoxcontinue.jpg
Ideally it should automatically forward the user to the login page, since AJAX cannot redirect that, it just displays the response.So Continue button has to be shown inside the portlet. Can someone please tell me why the HTML form is not shown in Mozilla Firefox.
Thanks
I created a test page. The problem is there when we try to insert the Form inside a table.
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.0 Transitional//EN">
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
</HEAD>
<BODY>
<script type="text/javascript">
function insertAjax(){
// alert('inside ajax');
document.getElementById("wpsportlet").innerHTML='This page is used to hold your data while you are being authorized for your request.<br/><br/>You will be forwarded to continue the authorization process. If this does not happen automatically, please click the Continue button below.<form action="http://www.google.com" method="get" name="AUTOSUBMIT"><input type="submit" value="Continue"/></form>';
}
</script>
<input type=button value="Submit" onclick="insertAjax();">
<div id="wpsportlet">
</div>
</BODY>
</HTML>
If I nest the form inside a table then the Form is not displayed in Firefox. Can someone please help a work around for this.
Your generated DOM is invalid. Character data (text) and <br>, <form> and <script> elements may not be child elements of elements - only <tbody>, <thead> and <tfoot> element may (although in XHTML you can have <tr> elements too).
For those elements to exist inside a table, they must appear entirely within a table cell.
Given broken HTML, Firefox will do a good job of compensating for author errors, but when the broken DOM is generated with JS, you bypass some of the autocorrection routines.
As an aside, your Doctype (HTML + Transitional + No system identifier) triggers Quirks mode - which doesn't generally help matters.
I suggest:
Switch to a Doctype that triggers Standards mode
Validate your markup
Build the content you are adding with JavaScript using plain HTML instead
Make that validate
Write JavaScript to generate the DOM you have now tested as being valid
Why don't you add a button using JavaScript when the response is shown to the screen?
This way should work on all browsers...
function addButton() {
//Create an input type dynamically.
var element = document.createElement('input');
//Assign different attributes to the element.
element.setAttribute('type', 'button');
element.setAttribute('value', 'Continue');
element.setAttribute('name', 'somename');
element.setAttribute('id', 'someid');
var foo = document.getElementById("fooBar");
//Append the element in page
foo.appendChild(element);
}