I want to used extended Textarea from tiny_mce_src. What am I doing wrong?
<%using(Ajax.BeginForm("CreateArticle","Home",new AjaxOptions(UpdateTargetId="content" }))
{% <div><p><label for="body"></label> <%= Html.TextArea("body", new style="height:500px"})%></p> <input type="submit value="Save"/></div> <%}%>
<script type="text/javascript" language="javascript">
tinyMCE.init({mode:"textareas", thene:"advanced" }):
</script>
tinyMCE.init need to be inside script tag:
<script type="text/javascript">
tinyMCE.init({mode:"textareas",thene:"advanced"});
</script>
Perhaps it is the misspelling of theme?
<script type="text/javascript">
tinyMCE.init({mode:"textareas",theme:"advanced"});
</script>
Related
I am trying to manually integrate the jQuery select2 library into my Symfony form as a replacement for my select boxes.
Following the manual I have added to the page header:
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
In addition I have modified my form class, adding attr to each select:
->add('kontoWinien', EntityType::class, array(
'class' => 'AppBundle\Entity\konto',
'attr' => array('class'=>'select2')
))
My modified Twig template:
{{ form_start(form) }}
<SCRIPT type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</SCRIPT>
{{ form_widget(form) }}
{{ form_end(form) }}
However the select2 is still not loaded.
HTML code generated by symfony3 looks like this:
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<form name="dziennik" method="post">
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
Could you please advise what am i doing wrong?
Like fcpauldiaz said you'll need to load up jquery before hand. I took your code loaded jquery (and some options so we can see it work) and it worked fine.
<head>
<link href="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/css/select2.min.css" rel="stylesheet" />
<!-- Loading jquery here--><script src="https://ajax.googleapis.com/ajax/libs/jquery/1.12.0/jquery.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/select2/4.0.2-rc.1/js/select2.min.js"></script>
</head>
<form name="dziennik" method="post">
<script type="text/javascript">
$(document).ready(function() {
$(".select2").select2();
});
</script>
<select id="dziennik_kontoWinien" name="dziennik[kontoWinien]" class="select2 form-control">
<option value="test1">test1</option>
<option value="test2">test2</option>
</select>
Try this
<script type="text/javascript">
$('select').select2();
</script>
How to have a custom HTML for Page Loading Widget for JQuery Mobile web app?
I tried the following:
$(document).on('mobileinit', function(){
$.mobile.loader.prototype.options.html = "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='/image/logo.png' /><h2>loading...</h2></span>";
});
But it still displays the default image. I want to have a global configuration.
In single page
Documentation for the loader available here. Also check out this documentation much relevant to you.
You should do something as below
$(document).ready(function() {
$.mobile.loading('show', {
text: 'foo',
textVisible: true,
theme: 'z',
html: "<span class='ui-bar ui-overlay-c ui-corner-all'><img src='http://www.shougun.it/images/loading.gif' /><h2>loading...</h2></span>"
});
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<link href="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.css" rel="stylesheet" />
<script src="http://code.jquery.com/mobile/1.4.5/jquery.mobile-1.4.5.min.js"></script>
<div data-role="page">
<div data-role="header">
<h1>header</h1>
</div>
</div>
To setup as global
It needs to go belog <script src=jquery.js> but before <script src=jquerymobile.js> and must be called onmobileinit event. Did you import the js before loading the jQuery Mobile js?
I am fairly new to the concept of javascript client side development. I am running into an issue, though it may be I just don't understand how to accomplish something with the mash of frameworks.
I know I want to use Knockout for it's rich client side goodies. I also wanna use Sammy.js to allow for routing and passing data to the knockout views (I come from an MVC background where I stuff a model with data, then return view(model), and MVC binds it nice and good for me).
So now I am trying to do something similar client side...
Here is my Index.html :
<!DOCTYPE html>
<html>
<head>
<meta name="viewport" content="width=device-width, height=device-height, initial-scale=1.0, maximum-scale=1.0, user-scalable=no;" />
<meta http-equiv="Content-type" content="text/html; charset=utf-8"/>
<title>The EClassifieds Mobile</title>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jquery/1/jquery.js"></script>
<script type="text/javascript" src="https://ajax.googleapis.com/ajax/libs/jqueryui/1/jquery-ui.min.js"></script>
<!-- <script type="text/javascript" src="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.js"></script>-->
<script type="text/javascript" charset="utf-8" src="./scripts/cordova-1.8.1.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/knockout.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/templ.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/sammy.js"></script>
<script type="text/javascript" charset="utf-8" src="./scripts/sammy.tmpl.js"></script>
<script type="text/javascript" charset="utf-8" src="./services/RouteManager.js"></script>
<script type="text/javascript" charset="utf-8" src="./services/ApplicationManager.js"></script>
<link rel="stylesheet" href="./style/site.css" type="text/css" media="screen" title="no title" charset="utf-8"/>
<!-- <link rel="stylesheet" href="http://code.jquery.com/mobile/1.1.0/jquery.mobile-1.1.0.min.css" />-->
</head>
<body>
<div id="main">
<h1>HELLO WORLD!</h1>
<!--Sammy should update the content of this div dynamically, creating a SPA (single page application)-->
</div>
</body>
</html>
Here is my Sammy Configuration.
(function ($) {
alert('Building Routes');
var app = $.sammy('#main', function () {
this.use('Tmpl', 'html');
this.get('#/', function (context) {
alert('Rendering Partial for Login page');
context.app.swap('Loading...');
this.render("/views/Login.html");
});
});
$(function () {
app.run('#/');
});
})(jQuery);
Here is my Login.html
<!--Model File Goes Here -->
<script type="text/javascript" charset="utf-8" src="../models/Login.js"></script>
<fieldset title="Please Login to Begin :">
<div data-role="content" style="padding: 15px">
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="txtUsername">
Username
</label>
<input id="txtUsername" data-bind="value: username" placeholder="Stevie" value="" type="text" />
</fieldset>
</div>
<div data-role="fieldcontain">
<fieldset data-role="controlgroup" data-mini="true">
<label for="txtPassword">
Password
</label>
<input id="txtPassword" data-bind="value: password" placeholder="yep!" value="" type="password" />
</fieldset>
</div>
<a id="btnLogin" data-role="button" data-transition="fade" href="#page1" >
Login
</a>
</div>
<div id="errorText">
<h1></h1>
</div>
<p id="deviceProperties">Loading device properties...</p>
</fieldset>
<script type="text/javascript">
$(document).ready(function () {
ko.applyBindings(new LoginDataModel(0, "Stevie", "theTV", true));
});
</script>
I also need some way to pass the data from the sammy get handler, to the knockout page. Is there a way to do this, or am I attempting the impossible?
UPDATE 1 :
I would really love to be able to do something like :
var app = $.sammy('#main', function () {
this.use('Tmpl', 'html');
this.get('#/', function (context) {
alert('Rendering Partial for Login page');
context.app.swap('Loading...');
var data = getLoginData();
this.render("/views/Login.html", data);
});
Sammy does this same exact thing using other template frameworks, however, I don't see how I would bind the $data in the Knockout view to the data passed from Sammy.
Not sure if you saw this, but the webmail tutorial on the knockoutjs website uses sammy.js for routing:
http://learn.knockoutjs.com/#/?tutorial=webmail
Here's a link to the finished product (so you can view source if you don't want to follow the whole tutorial)
http://learn.knockoutjs.com/WebmailExampleStandalone.html
the Knockout.js-External-Templates plugin will help you in achieving this behavior. A good starting point will be from here
EDIT: The "starting point" link now goes to malware.
Even John Papa endorses it here
The above solution is useful only when you frequently reuse your templates. Use inline templating whenever possible. Inline templating – and using foreach binding, performs around 1/3 faster than applying template from a separate DOM element, the so-called named template binding. More info on this here
The script on the following ASP.NET partial view is causing me endless amounts of grief:
<%# Control Language="C#" Inherits="System.Web.Mvc.ViewUserControl<AkwiMemorial.Models.CalendarModel>" %>
<link href="../../Content/jquery.ui.all.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="../../Scripts/jquery-1.6.1.min.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.core.js"></script>
<script type="text/javascript" src="../../Scripts/jquery.ui.datepicker.js"></script>
**<script type="text/javascript">
$(document).ready(function () {
$('#datepicker').datepicker({
inline: true,
onSelect: function(dateText, inst) {
$('#DateStr').val(dateText);
$('form').trigger('submit'); }});
});
</script>**
<% using (Html.BeginForm()) { %>
<div>
<div id="datepicker" ></div>
<%= Html.HiddenFor(x => x.DateStr)%>
</div>
<% } %>
I have tried using jQuery 1.4.4, 1.5.1 and 1.6.1, all to no avail. From the numerous related posts I have come across, it sounds like the datepicker script is not being loaded. Why so, even when it is referenced?
<head runat="server">
<title></title>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.5.1/jquery.min.js"></script>
<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/jquery-ui.min.js"></script>
<link type="text/css" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.11/themes/ui-lightness/jquery-ui.css"/>
<script>
$(document).ready(function() {
$("#TextBox1").datepicker();
});
</script>
</head>
<body>
<form id="form1" runat="server">
<div>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
</div>
</form>
</body>
Should I be linking any other css files? Or is it a problem with Google CDN?
you are using <script> for css instead of <link>
EDIT:
and rel="stylesheet" is missing
Still cant figure out how to do it with external CSS. A faster solution was to keep the CSS files local.