i want to print a page with tinymce editor and its text.
here is my code..
<script type="text/javascript">
tinyMceEditor("StaffResponsibility,Encourager,Bonus");
function printPage(printpage1, printpage2)
{
var headstr = "<html><head><title></title></head><body>";
var footstr = "</body>";
var newstr1 = document.getElementById(printpage1).innerHTML;
var newstr2 = document.getElementById(printpage2).innerHTML;
var oldstr = document.body.innerHTML;
document.body.innerHTML = headstr+newstr1+newstr2+footstr;
window.print();
document.body.innerHTML = oldstr;
location.reload();
return false;
}
</script>
<div style="float: right"><img src="<?=$this->baseUrl('/images/icons/small/print.png')?>" title="Print" alt="Print" /></div>
<div id="div_print">
<?=$this->form->StaffResponsibility?>
<div class="clear10"></div>
<?=$this->form->Encourager?>
<div class="clear10"></div>
<?=$this->form->Bonus?>
<div class="clear10"></div>
</div>
when i click the print icon i should print tinymce editor with text.but here i am not getting editors and its text..
regards
uday
You will need to execute the following on click
onclick="tinymce.triggerSave(); $( '#'+tinymce.editors.get(0).id) ).css('display','block');printPage('pnlMainHeader','div_print');"
Related
i have started to work on ember.js just day before.
i don't know how to get text box value while submitting. i have tried like this
this is html
<script type="text/x-handlebars" data-template-name="index">
<div >
<p>{{view Ember.TextField valueBinding="fname"}}</p>
</div>
<div>
<p>{{view Ember.TextField valueBinding="lname"}}</p>
</div>
<button {{action save}}>submit</button>
</script>
this is my ember.js file
App = Ember.Application.create();
App.IndexController = Ember.ObjectController.extend({
save:function()
{
var fname=this.get('fname');
var lname=this.get('lname');
alert(fname+','+lname);
}
});
whenever i am clicking on submit button, i am getting undefined in alert.so how to get value? i hope anyone will help me for to continue in ember.js
in js like this
App.WebFormController = Ember.Controller.extend({
fname: null,
lname: null,
save: function () {
var fname = this.get('fname');
var lname = this.get('lname');
alert(fname + ',' + lname);
}
});
without need a model
in template like this
<script type="text/x-handlebars" data-template-name="web_form">
<form {{action save on="submit"}}>
<div >
<p>{{input type="text" valueBinding="fname"}}</p>
</div>
<div>
<p>{{input type="text" valueBinding="lname"}}</p>
</div>
<button>submit</button>
</form>
</script>
Your problem is that your form doesn't have a model. You can provide it using model or setupController hook.
App.IndexRoute = Ember.Route.extend({
model: function() {
return {};
},
// or
setupController: function(controller) {
controller.set('model', {});
}
});
In addition some tips:
Use the action name on="submit" in the form, instead of action name in submit button. So you can execute the action when the user press enter key, in input.
And the input type="text" helper is a shortcut for view Ember.TextField
<script type="text/x-handlebars" data-template-name="index">
<form {{action save on="submit"}}>
<div >
<p>{{input type="text" valueBinding="fname"}}</p>
</div>
<div>
<p>{{input type="text" valueBinding="lname"}}</p>
</div>
<button>submit</button>
<form>
</script>
Here a live demo
That is really nice tutorial by mavilein.
We can do it at controller level also.
App.IndexController = Ember.ObjectController.extend({
content:function(){
return {fname:null,lname:null}
}.property(),
save:function()
{
var fname=this.get('fname');
var lname=this.get('lname');
alert(fname+','+lname);
}
});
Or we can do it
App.IndexController = Ember.ObjectController.extend({
fname:null,
lname:null,
save:function()
{
var fname=this.get('fname');
var lname=this.get('lname');
alert(fname+','+lname);
}
});
Below code is working for me:
cshtml: In script on tag specify data-template-name="text"
<script type="text/x-handlebars" data-template-name="text">
{{view Ember.TextField value=view.message}}
{{view Ember.TextField value=view.specy}}
{{textarea value=view.desc id="catdesc" valueBinding="categor" cols="20" rows="6"}}
<button type="submit" {{action "submit" target=view}}>Done</button>
</script>
app.js:
App.TextView = Ember.View.extend({
templateName: 'text',
message:'',
specy: '',
desc:'',
actions: {
submit: function (event) {
var value = this.get('specy');
var spc = this.get('message');
var de = this.get('desc');
}
}
});
I have two pages. For explanations sake I'll call them page A and Page B. When I open page B in my browser it is rendered with all the styling and jquery ui code working properly, but when I open page B inside of a div in Page A via the load() method, the only thing that renders is the raw html, no styling, no interfaces. What is the problem? Directly below is the code from page B and all the way at the bottom is the code from page A:
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script src="http://code.jquery.com/ui/1.10.2/jquery-ui.js"></script> //jquery ui
<link rel="stylesheet" href="http://spilot.koding.com/lbStyle.css"/> //stylesheet
<script src="http://www.parsecdn.com/js/parse-1.2.2.min.js"></script> //parse database
<script>
$(function(){
var crowd = ' ';
var ageGroup = ' ';
var activity = [];
var scene = [];
var neighborhood = [];
var date = [];
var details = [];
var time = [];
Parse.initialize("ivHLAO7z9ml1bBglUNuPSgcWabXe3UeE2yCgKM2x","gNeGt04lU7xcew893EvbEJ05qqc4POVhBsIBSCVj");
$(".menu").menu({
select: function (event, ui) {
$('.selected', this).removeClass('selected');
var selection = ui.item.addClass('selected').children('a').attr('name'); //add background color to selected menu item and get its attribute name
var choice = ui.item.text(); //get text of menu selection
if(selection == "ageGroup"){
$("#ageGroup").text(choice); //change the text in the first <a> of ageGroup menu to ageGroup selection.
ageGroup = $("#ageGroup").text();
}else{
crowd = selection;
};
} // closes select function
}); // closes menu
$("button").click(function(){
var city = JSON.parse( localStorage.getItem('city') );
var niche = Parse.Object.extend(crowd);
var query = new Parse.Query(niche);
query.equalTo("ageGroup", ageGroup);
query.equalTo("city", city);
//query.include([activity.date.details.location.neighborhood.time])
query.find({
success: function(results) {
for (i = 0; i < results.length; i++){
activity = results[i].get("activity");
scene = results[i].get("location");
neighborhood = results[i].get("neighborhood");
date = results[i].get("date");
details = results[i].get("details");
time = results[i].get("time");
};
},
error: function(error) {
alert("Error: " + error.code + " " + error.message);
}
});
//alert("working");
}); //closes click()
}); // close function()
</script>
<script>
$(function(){
$( "button" ).button();
});
</script>
</head>
<body>
<div id="div1">
<button>Button label</button>
<div id="div2">
<ul class="menu">
<li>
Age Group
<ul>
<li>18-21</li>
<li>21-30</li>
<li>30-40</li>
<li>40-50</li>
<li>50-60</li>
<li>60-70</li>
<li>70-80</li>
<li>80-90</li>
<li>90-100</li>
</ul>
</li>
</ul>
</div>
<div id="div3">
<ul class="menu" id="menu">
<li><img src="" alt="" /><h2>Academic: Art Studies</h2></li>
<li><img src="" alt="" /><h2>Academic: Literature</h2></li>
<li><img src="" alt="" /><h2>Academic: Social Sciences</h2></li>
<li><img src="" alt="" /><h2>Academic: Physical/Natural Sciences</h2></li>
</ul>
</div>
</div>
</body>
</html>
--------------//PAGE A//--------------
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.9.0/jquery.min.js"></script>
<script>
$(function(){
$("#mainDiv").load("http://myURl.com/find2.html"); //this is where I call load()
});
</script>
</head>
<body>
//this is the div where I want the other page to load
<div id="mainDiv">
</div>
</body>
</html>
since you are loading page "b" into page "a", you need to have all page "b" stylesheets/js in page "a" header.
please note that you are loading a complete html page into page "a", that includes html,header,body and that is not desirable, you should make page "b" a template that only contains the markup you need.
UPDATE:
you are embedding your scripts in the html, that is a bad practice, separate the JS code to different files.
When you include JS code in your file it will run as soon as the page loads, so if you put 'pageb' code in 'pagea' it will run as soon as 'pagea' was loaded and when you load 'pageb' the code will not run again.
You need to put 'pageb' code in a function and call it only after you loaded 'pageb' content.
I am quite new to JQuery Mobile and I've been spending days now to figure out an apparently simple question.
Here's my problem:
I am using a charting javascript library from Amcharts. So far, so good...
What I am trying now is just to create a simple page in JQmobile with let's say 2 links to new pages. All I want is when I click the link, the amchart should display in the div with a specific name.
(Amcharts usually displays the chart in a certain div by calling chart.write('nameofthediv');
So I thought with an event handler bound to $('#container').bind('click', function(){...} I should be able just to include the relevant javascript...
Somehow though...it doesn't work.
Here's the link so you can see what I mean:
http://www.noten-werkstatt.de/jqm_amcharts/
And here is the code from the index.html and the relevant custom-scripting.js.
Thank you very much in advance!
Regards,
Lisa
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>jQuery Mobile and Amcharts</title>
<link href="amcharts/style.css" rel="stylesheet" type="text/css"> <!-- Amcharts CSS-File local -->
<link href="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.css" rel="stylesheet" type="text/css"/> <!-- JQ Mobile CSS-File (CDN) -->
<script src="amcharts/amcharts.js" type="text/javascript"></script> <!-- Amcharts JS-File local -->
<script src="http://code.jquery.com/jquery-1.5.min.js" type="text/javascript"></script> <!-- JQ JS-File (CDN) -->
<script src="http://code.jquery.com/mobile/1.0a3/jquery.mobile-1.0a3.min.js" type="text/javascript"></script> <!-- JQ Mobile JS-File (CDN) -->
<script src="custom-scripting.js" type="text/javascript"></script> <!-- Custom Scripting JS-File local -->
</head>
<body>
<!-- ****** START PAGE ************ -->
<div data-role="page" id="page">
<div data-role="header">
<h1>Main Page</h1>
</div>
<div data-role="content">
<ul data-role="listview">
<li>Page two</li>
<li>Page three</li>
</ul>
</div>
<div id="chartserialdiv" style="height:500px !important; border: 1px solid;">It's odd...displaying the chart works here (div containr #chartserialdiv)...(Initialized in the window.onload = function() {})<br>But as I want to attach it to a click handler, please click "page two"...
</div><br>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<!-- ****** 2nd PAGE ************ -->
<div data-role="page" id="page2">
<div data-role="header">
<h1>Page two</h1>
</div>
<div data-role="content" id="test"> <!-- ****** DIV CONTAINER "TEST" ************ -->
If the event handler worked, there must be text after the ":" :<br>
</div>
<div data-role="content" id="chartserialdiv2" style="height:500px !important; border: 1px solid;"> <!-- ****** DIV CONTAINER "CHARTSERIALDIV" ************ -->
The is the div container #chartserialdiv2 - Why is the chart not displaying here???
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
<!-- ****** 3rd PAGE ************ -->
<div data-role="page" id="page3">
<div data-role="header">
<h1>Page three</h1>
</div>
<div data-role="content">
As there is no event handler attached to page 3, if you read the text and nothing else happens - that's correct! :-)
</div>
<div data-role="footer">
<h4>Footer</h4>
</div>
</div>
</body>
</html>
custom-scripting.js
window.onload = function() {
//This displays the chart on the start page
var chart;
var dataProvider;
createChart('chartserialdiv');
loadCSV("daten/budget_management_projekt_kum.csv"); //DATENQUELLE
//This is supposed to display the chart on the 2nd page when clicked on the link
$('#page li a.page2').bind('click', function(event){
alert("The link \"Page 2\" was clicked...now we turn to page 2 and try to load the chart...");
$('#test').append("Event Handler-Check: Congratulations, the event handler $(\'#test\').append... worked!!!<br>");
$('#chartserialdiv2').ready(function(){
var chart;
var dataProvider;
createChart('chartserialdiv2');
loadCSV("daten/budget_management_projekt_kum.csv"); //DATENQUELLE
});
//event.preventDefault();
//return false;
});
$(document).delegate('.ui-page', 'pageshow', function () {
alert("worked");
var chart;
var dataProvider;
createChart('chartserialdiv2');
loadCSV("daten/budget_management_projekt_kum.csv"); //DATENQUELLE
});
}
// method which loads external data
function loadCSV(file) {
if (window.XMLHttpRequest) {
// IE7+, Firefox, Chrome, Opera, Safari
var request = new XMLHttpRequest();
}
else {
// code for IE6, IE5
var request = new ActiveXObject('Microsoft.XMLHTTP');
}
// load
request.open('GET', file, false);
request.send();
parseCSV(request.responseText);
}
// method which parses csv data
function parseCSV(data){
data = data.replace (/,/g,"."); // SUCHE NACH KOMMA UND ERSETZE DURCH PUNKT
var rows = data.split("\r"); // SUCHE NACH ZEILENUMBRUCH UND SPALTE DORT ZEILE AB
dataProvider = [];
for (var i = 1; i < rows.length; i++){ // i=1 WEGEN DER ÜBERSCHRIFTEN
if (rows[i]) {
var column = rows[i].split(";");
var category = column[0];
var value1 = column[1];
var value2 = column[2];
var value3 = column[3];
var dataObject = {category:category, value1:value1, value2:value2, value3:value3};
dataProvider.push(dataObject);
}
}
chart.dataProvider = dataProvider;
chart.validateData();
}
function createChart(container){ // method which creates chart
chart = new AmCharts.AmSerialChart(); // chart variable is declared in the top
chart.addTitle('Chart',12, '#FFFFFF', 1, true);
chart.addLabel(15, 25, 'Mio. €', 'left', 10, '#000000', 0, 1, true);
chart.backgroundAlpha = 1;
chart.backgroundColor = '#FFFFFF';
chart.categoryField = "category"; // here we tell the chart name of category field in our data provider. Wwe called it "date" (look at parseCSV method)
var graph = new AmCharts.AmGraph(); // chart must have at least 1 graph
graph.valueField = "value1"; // graph should know at what field from data provider it should get values.
graph.lineThickness = 3;
graph.lineColor = "#336699";
graph.type = "column";
graph.bulletAlpha = 1;
graph.balloonText = "PLAN kum.:[[value]] Mio. €";
graph.title = "PLAN kum.";
graph.fillAlphas = 1;
chart.addGraph(graph); // add graph to the chart
var graph2 = new AmCharts.AmGraph();
graph2.valueField = "value2"
graph2.lineThickness = 3;
graph2.bullet = "bubble";
graph2.balloonText = "IST kum.:[[value]] Mio. €";
graph2.title = "IST kum.";
graph2.lineColor = "#ff9933";
chart.addGraph(graph2);
var graph3 = new AmCharts.AmGraph();
graph3.valueField = "value3";
graph3.lineThickness = 5;
graph3.bulletAlpha = 1;
graph3.lineColor = "#999999";
graph3.type = "column";
graph3.fillAlphas = 1;
graph3.dashLength = 5;
graph3.balloonText = "Forecast kum.:[[value]] Mio. €";
graph3.title = "Forecast kum.";
chart.addGraph(graph3);
var legend = new AmCharts.AmLegend();
chart.addLegend(legend);
legend.align = "center";
legend.backgroundAlpha = 1;
legend.backgroundColor ="#CCCCCC";
legend.borderAlpha = 1;
legend.borderColor = "#000000";
legend.equalWidths =true;
legend.horizontalGap = 1;
legend.switchType = "v";
legend.markerBorderAlpha = 1;
legend.markerBorderThickness = 1;
legend.markerBorderColor = "#FFFFFF";
legend.markerLabelGap = 5;
legend.position = "bottom";
// 'chartserialdiv' is id of a container where the chart will be
chart.write(container);
}
You need to place your code to generate the chart in the pagshow event, something like
$(document).delegate('#page2', 'pageshow', function( ) {
createChart('chartserialdiv2');
loadCSV("daten/budget_management_projekt_kum.csv");
});
Im using the jQuery Mobile Filter List:
http://jquerymobile.com/test/docs/lists/lists-search-with-dividers.html
Is it possible to move the position of the input field so I can put it into a div already on my page?
Using jQuery's appendTo seems to work fine but its kind of a hacky solution. Thanks
this is what I found while searching for solution to a similar problem.
HTML code example:
<div data-role="page" id="page-id">
<div data-role="content">
<div data-role="fieldcontain">
<input type="search" name="password" id="search" value="" />
</div>
<div class="filter-div" data-filter="one">1</div>
<div class="filter-div" data-filter="two">2</div>
<div class="filter-div" data-filter="three">3</div>
<div class="filter-div" data-filter="four">4</div>
<div class="filter-div" data-filter="five">5</div>
</div>
</div>
JS code example:
$(document).delegate('#page-id', 'pageinit', function () {
var $filterDivs = $('.filter-div');
$('#search').bind('keyup change', function () {
if (this.value == '') {
$filterDivs.slideDown(500);
} else {
var regxp = new RegExp(this.value),
$show = $filterDivs.filter(function () {
return ($(this).attr('data-filter').search(regxp) > -1);
});
$filterDivs.not($show).slideUp(500);
$show.slideDown(500);
}
});
});
This way you can place your input text box anywhere on your page and it should properly filter a list of items you want.
JSFiddle DEMO: http://jsfiddle.net/cZW5r/30/
I have a problem with document.getElementById('editor').value, because I can't get the value. The textarea of YUI Editor is not a normal TextArea.
<script>
function viewValue
{
alert(document.getElementById('editor').value);
}
</script>
textarea:
<div class="editor" >
<textarea id="editor" name="editor">
</textarea>
</div>
Documentation: http://developer.yahoo.com/yui/editor/#getdata
<script>
//Put the HTML back into the text area
oEditor.saveHTML();
//The var html will now have the contents of the textarea
var html = oEditor.get('element').value;
alert(html);
</script>