• February 12, 2023
    do you know about this code :
    
    <script>
    function printContent(el){
    var restorepage = $('body').html();
    var printcontent = $('#' + el).clone();
    var enteredtext = $('#text').val();
    $('body').empty().html(printcontent);
    window.print();
    $('body').html(restorepage);
    $('#text').html(enteredtext); 
    }
    </script>

    Yes, I can help explain what that code does.

    This is a JavaScript function that enables you to print a specific portion of the web page, which is identified by an id value passed to the function as a parameter. Here’s how it works:

    1. The function first stores the current contents of the body element in a variable called restorepage, using the jQuery html() function.
    2. It then clones the element with the id value passed as the function parameter (which is expected to be a portion of the page you want to print) and stores it in a variable called printcontent.
    3. Next, it empties the contents of the body element using the jQuery empty() function and replaces it with the printcontent using the jQuery html() function.
    4. It then invokes the window.print() function, which displays the print dialog box to the user.
    5. After printing, it restores the original contents of the body element using the restorepage variable and sets the value of an element with the id “text” to the value of a variable enteredtext.

    Overall, this function provides a way to print a specific portion of the web page while preserving the original content of the page.

    this code not working on mobile phone browser. Possible to fix?

    The code you provided may not work on some mobile browsers due to differences in browser behavior or limitations of the device. However, there are a few things you can try to make it work better on mobile devices:

    1. Ensure that jQuery is loaded correctly. The code you provided is using jQuery, so make sure it’s properly loaded on your web page.
    2. Use the onbeforeprint and onafterprint events instead of the window.print() function to trigger printing. Some mobile browsers don’t support the window.print() function, but they may support these events.

    Here’s an updated code that uses the onbeforeprint and onafterprint events:

    javascript
    function printContent(el) {
        var restorepage = $('body').html();
        var printcontent = $('#' + el).clone();
        var enteredtext = $('#text').val();
        $('body').empty().html(printcontent);
        window.onbeforeprint = function() {
            $('body').empty().html(printcontent);
        }
        window.onafterprint = function() {
            $('body').html(restorepage);
            $('#text').html(enteredtext);
        }
        window.print();
    }

    In this updated code, the onbeforeprint event is used to set the content to be printed, and the onafterprint event is used to restore the original content. The window.print() function is called after the events are set. This approach may work better on mobile devices that don’t support the window.print() function.

    it’s work! but have some bug , text on input not print

    If the text on the input is not being printed, it’s likely because you’re setting the value of the input element using the html() function, which is used to set the HTML content of an element, but doesn’t work for input elements.

    Instead, you can use the val() function to set the value of the input element. Here’s an updated code that should work correctly:

    javascript

    function printContent(el) {
        var restorepage = $('body').html();
        var printcontent = $('#' + el).clone();
        var enteredtext = $('#text').val();
        $('body').empty().html(printcontent);
        window.onbeforeprint = function() {
            $('body').empty().html(printcontent);
            $('#text').val(enteredtext);
        }
        window.onafterprint = function() {
            $('body').html(restorepage);
            $('#text').val(enteredtext);
        }
        window.print();
    }
    

    In this updated code, the val() function is used to set the value of the input element. The onafterprint event also sets the value of the input element to ensure it’s restored after printing. This should fix the issue you’re experiencing with the text not being printed.

    working perfectly!!! your are genius!!

    Thank you! I’m glad I could help you solve the issue. If you have any more questions or concerns, feel free to ask!



เวอไนน์ไอคอร์ส

ประหยัดเวลากว่า 100 เท่า!






เวอไนน์เว็บไซต์⚡️
สร้างเว็บไซต์ ดูแลเว็บไซต์

Categories


Uncategorized