i have an asp.net mvc project. there is an index page with extension cshtml. and when i generated it shows to me on browser a page contain title, buttons, table and footer.
i want to add a button to print just the table not all the page.
i add in the layout:
<link id="ctl00_Link1" rel="stylesheet" href="themes/css/print.css" type="text/css" media="print">
and in the end of index page:
<div class="line-btn ">
<input type="submit" name="ctl00$Index" value="print" onclick="window.print();return false;" id="ctl00_MainContent_Button1" class="btn fl btn-print">
</div>
but it still doesn't work and print all the index page!
You can achieve what you want using following code. Add following in your index.cshtml page:
<div class="line-btn">
<input type="submit" value="print" onclick="PrintOnlyTable()" class="btn fl btn-print">
</div>
<script>
function PrintOnlyTable() {
var HTML = $("html");
var cln = document.documentElement.innerHTML;
HTML.html($("table"));
window.print();
document.documentElement.innerHTML = cln;
return false;
}
</script>
Related
I have two buttons one is Edit and Save. I have a div or span so onclick of edit button I want to convert the span or div in to a summernote editor and onclick Save it will save the data to same div and will remove the summernote editor.
I did not find any helpful information from summernote website, please suggest the right method.
Summernote does provide a clear example to fullfil your needs, you may find it here.
var edit = function() {
$('.click2edit').summernote({focus: true});
};
var save = function() {
var markup = $('.click2edit').summernote('code');
$('.click2edit').summernote('destroy');
};
<link href="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/css/bootstrap.css" rel="stylesheet">
<script src="http://cdnjs.cloudflare.com/ajax/libs/jquery/3.2.1/jquery.js"></script>
<script src="http://netdna.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.js"></script>
<!-- include summernote css/js-->
<link href="https://summernote.org/vendors/summernote/dist/summernote.css" rel="stylesheet">
<script src="https://summernote.org/vendors/summernote/dist/summernote.js"></script>
<button id="edit" class="btn btn-primary" onclick="edit()" type="button">Show Edit Mode</button>
<button id="save" class="btn btn-primary" onclick="save()" type="button">Hide Edit Mode</button>
<div class="click2edit">click2edit</div>
When you click on Edit button, you can hide your div/span. With a jQuery code, it could be
<div id="summernote">/div>
<button id="edit-button">Edit</button>
<div id="editor"></div>
<button id="save-button">Save</button>
//JS
$('#edit-button').click(function() {
$('#summernote').hide();
$('#editor').show();
});
$('#save-button').click(function() {
$('#summernote').show();
$('#editor').hide();
});
I have Generate barCode in my application.There are some problems to print barCode and also export pdf file.In this case barCode is not showing in print or pdf file.I have Generate barCod by directive using angularjs js.
Here is my JavaScript
$scope._printBarCode = function (printSectionId) {
var innerContents = document.getElementById(printSectionId).innerHTML;
var popupWinindow = window.open();//'', '_blank');
popupWinindow.document.open();
popupWinindow.document.write('<html><head><link rel="stylesheet" type="text/css" href="Content/assets/css/barCode.css" /></head><body onload="window.print()">' + innerContents + '</html>');
popupWinindow.document.close();
}
and here is my html
<input type="button" value="Prnt" ng-click="_printBarCode('barCodeId')" class="btn btn-primary" />
<div class="barcodeplace">
<div class="col-sm-12">
<div barcode-generator="{{_barCodeGeneraterId}}" style="height:20px;">
</div>
</div>
</div>
You need to include the CSS in the new window with a media type of all otherwise it will be ignored in the print. Also you will have problems with browsers not printing the barcode as by default they disable printing background images. You can change the CSS for Chrome so it overrides this. However, in IE users need to change their page setup options from Tools->Print->Page setup.
Add the $timeout service to your controller and change the _printBarCode function as follows:
.controller('MyCtrl', function($scope,$timeout) {
$scope._printBarCode = function(printSectionId) {
var innerContents = document.getElementById(printSectionId).innerHTML;
var popupWindow = window.open('', 'Print');
popupWindow.document.write('<!DOCTYPE html><html><head><style type="text/css">#media print { body { -webkit-print-color-adjust: exact; } }</style><link rel="stylesheet" type="text/css" href="barcode.css" media="all" /></head><body> ' + innerContents + '</body></html>');
$timeout(function() {
popupWindow.focus();
popupWindow.print();
popupWindow.close();
});
};
Then in your HTML your ng-click needs to reference the id of an element on the page:
<input type="button" value="Prnt" ng-click="_printBarCode('barCodeId')" class="btn btn-primary" />
<div id="barCodeId" class="barcodeplace">
<div class="col-sm-12">
<div barcode-generator="{{_barCodeGeneraterId}}" style="height:20px;">
</div>
</div>
</div>
I want to show a print in table format(design ) in c# mvc.
The problem is that i am getting only the content and not in table format..
This is my Print button.
<input id="printdiv" type="submit" value="Print" onclick="return PrintDiv();" />
This is my Partial view div.
<div id="dvmismatch" style="display :none;">
#Html.Partial("_MismatchVendorList", Model)
</div>
This is my Script..
<script type="text/javascript">
var $ = jQuery.noConflict();
function PrintDiv() {
$("#dvmismatch").show();
$("#dvmismatch").print();
$("#dvmismatch").hide();
}
</script>
plz give me the Suggestions...
i want to Print a div with HTML in a Partial view in mvc 4 with C# using JavaScript..But showing only the table Content. Not the Content with Table Format????
Try This
Javascript
<script>
function printContent(el){
var restorepage = document.body.innerHTML;
var printcontent = document.getElementById(el).innerHTML;
document.body.innerHTML = printcontent;
window.print();
document.body.innerHTML = restorepage;
}
</script>
Button
<input id="printdiv" type="submit" value="Print" onclick="printContent('dvmismatch')" />
This is Partial view div.
<div id="dvmismatch" style="display :none;">
#Html.Partial("_MismatchVendorList", Model)
</div>
I want to append a script generated in javascript inside a div created before in HTML, the problem is that only works if
$("<script />", {
"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location":"http://en.parkopedia.co.uk/parking/" + search_field2,
"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size":"650:400",
"id":"script_map",
"type":"text/javascript"
}).appendTo("body")
but if I change that for "$('#divId')" does not work, so the questions are:
How can I append that script generated inside a div when you click into a button?
How can I prevent to duplicate the script when I click twice in the button? Because it's working inside the body, but when I click again it shows two script windows. So i should remove the script before create a new one or if I get to put inside the div, clean all the childs inside.
I've created a demo here:
Update:
The main aim is to update the data-location when you click on the button and send the text inside the box to the data location to search there and show the script map below the textbox. Maybe it is another simple way to do it.
This will answer your first question.
.appendTo("#map")
And for second question.
if ($("#script_map").length > 0) {
$("#map").html("");
}
DEMO :
http://jsfiddle.net/kishoresahas/oosttuc0/4/
Code :
window.scripting = function () {
if ($("#script_map").length > 0) {
$("#map").html("");
}
var src_fld = document.getElementById('txt_f').value;
$("<script />", {
"src": "//en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location": "//en.parkopedia.co.uk/parking/" + src_fld,
"data-options": "l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size": "650:400",
"id": "script_map",
"type": "text/javascript"
}).appendTo("#map")
}
<script type="text/javascript" src="//code.jquery.com/jquery-1.10.2.js"></script>
<script type="text/javascript" src="//code.jquery.com/ui/1.11.4/jquery-ui.js"></script>
<script type="text/javascript" src="//code.jquery.com/jquery.min.js"></script>
<script type="text/javascript" src="//maxcdn.bootstrapcdn.com/bootstrap/3.3.5/js/bootstrap.min.js"></script>
<div class="tab-pane carpark" id="main_view">
<input type="text" id="txt_f" name="txt_f">
<input type="submit" class="btn btn-default" id="btn" value="Submit" onclick="scripting(); return false;">
<div id="map" name="map"></div>
<iframe style="border:none" width="100%" height="500px" id="iFrame2" name="iFrame2"></iframe>
</div>
Look this:
function scripting(){
var src_fld = document.getElementById('txt_f').value ;
$("#main_view").find("script[id='test']").remove();
console.log("Size: " + $("#main_view").size());
$("<script id='test'/>", {
"src":"http://en.parkopedia.co.uk/js/embeds/mapView.js",
"data-location":"http://en.parkopedia.co.uk/parking/" + src_fld,
"data-options":"l=0&tc=0&zc=1&country=UK&ts[]=4&ts[]=3&ts[]=2",
"data-size":"650:400",
"id":"script_map",
"type":"text/javascript"
}).appendTo($("#main_view"))
console.log($("#main_view").html())
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div class="tab-pane carpark" id="main_view">
<input type="text" id="txt_f" name="txt_f">
<input type="button" class="btn btn-default" id="btn" value="Submit" onclick="scripting(); return false;">
<div id="map" name="map"></div>
<iframe style="border:none" width="100%" height="500px" id="iFrame2" name="iFrame2"></iframe>
</div>
Run the Date input line
DateInput('creneau_2',true,'DD-MON-YYYY');
you could just try and do it all in jQuery rather than mixing javascript selectors.
$("#test").append("<script type='text/javascript'>DateInput('creneau_2',true,'DD-MON-YYYY');</script>");
I'm working on 'add a link' functionality. For that I'm using Modal plugin from Twitter Boostrap JS. On the main page there's only the 'link' field to fill, when a user clicks 'add link' button, a modal pops up, and the user sees the complete form to fill 3 fields: link, title, tags. However, I want 1) the link field to be pre-filled with the value from the previous step AND 2) the title field is pre-filled with the title of the url.
I can do each of these separately, but I can't do both. In fact, the code below pre-fills the link field leaving title field empty. If I uncomment the AJAX part and add 'onClick="sendRequest()', then the code prefills the title field by executing the php script 'savePostAjax.php' which given the url echoes the title. However, in that case the link field is not filled. I guess, Bootstrap events somehow interfere with AJAX I wrote. One approach I tried is to get the url title in JavaScript, didn't work. How would you go about solving this problem of pre-filling BOTH link and title of the form in the modal dialog? Thanks!
<html>
<head>
<title>Example</title>
<script src="scripts/jquery.min.js"></script>
<script src="scripts/bootstrap-modal.js"></script>
<link rel="stylesheet" href="scripts/bootstrap.min.css">
<link rel="stylesheet" href="main.css" />
<!-- AJAX
<script type="text/javascript" src="ajaxwebform/prototype.js"></script>
<script type="text/javascript">
function sendRequest() {
new Ajax.Request("savePostAjax.php",
{
method: 'post',
parameters: 'linkURL='+$F('linkURL'),
onComplete: showResponse
});
}
function showResponse(req){
$('show-title').value= req.responseText;
}
</script>
AJAX ENDS -->
<script type="text/javascript">
$(document).ready(function()
{
$('#modal-from-dom').bind('show',function()
{
$(".modal-body #wall-post").val($("#linkURL").val());
});
});
</script>
</head>
<body>
<!-- The Modal Dialog -->
<div id="modal-from-dom" class="modal hide fade">
<div class="modal-header">
×
<h3>Add Link</h3>
</div>
<div class="modal-body">
<!-- onsubmit='return false;' -->
<form id='post-on-wall' method='POST' action='savePost.php' enctype='multipart/form-data' >
<div>
<input id='show-title' class='label-inline' name='title' type='text' size='100'>
</div>
<div>
<input id='wall-post' class='label-inline' name='linkURL' type='text' size='100'>
</div>
<div>
<input id='link-field' class='label-inline' name='topics' type='text' size='100' placeholder='topics'>
</div>
</form>
</div>
<div class="modal-footer">
Add Link
</div>
</div>
<!-- Enf of The Modal Dialog -->
<div class="container">
<div class="wall-post">
<input id='linkURL' class='label-inline' name='linkURL' type='text' size='100' autocomplete='off'>
<button data-controls-modal="modal-from-dom" data-backdrop="true" data-keyboard="true" class="btn">Add Link</button>
<!-- onClick="sendRequest()" -->
</div>
</div>
</body>
The reason it doesn't work is because you've included prototype and jquery, both of which try to occupy $. You can easily get around this by using jQuery in noConflict mode but I'd recommend ditching prototype completely as it doesn't make sense to use two libraries in that situation.
I haven't actually run this, but it should be what you need. Of course before actually using it you'll want to add a little spinner indicating that the ajax request is being made etc.
jQuery(document).ready(function($) {
function setTitle(url) {
$.post("savePostAjax.php", { linkURL: $('#linkURL').val() },
function(resp) {
$('show-title').val= resp;
});
};
$('#modal-from-dom').bind('show',function() {
var linkURL = $('#linkURL').val();
$('.modal-body #wall-post').val(linkURL);
setTitle(linkURL);
});
});