1. Tudásbázis
  2. Modulok fejlesztése
  3. Export jquery

Export jquery

Beküldte makgab - 2015. szeptember 11. 13.42
makgab képe

Üdv!

Ezt a kis jquery-t szeretném implementálni a kis modulomba:
http://jsfiddle.net/xzZ7n/1/

Teszt jelleggel próbálom:

function mymod_form(...) {
...
    // add_js
    drupal_add_js( drupal_get_path('module','mymod') . '/export/jquery-compat-git.js', 'file' );
    drupal_add_js( drupal_get_path('module','mymod') . '/export/bootstrap.js', 'file' );
    drupal_add_js( drupal_get_path('module','mymod') . '/export/jspdf.js', 'file' );
    drupal_add_js( drupal_get_path('module','mymod') . '/export/export.js', 'file' );
 
...
    $form['grp']['table'] = array(
      '#theme' => 'table',
      '#header' => $header,
      '#rows' => $rows,
      '#attributes' => array( 'id' => 'tab_customers' ),
      '#prefix'  => '<div id="customers">',
      '#suffix'  => '</div>',
      );
    $form['grp']['button'] = array(
      '#type'   => 'item',
      '#markup'  => '<button onclick="javascript:demoFromHTML();">PDF</button>',
      );
...
}

Az export.js-be tettem a mintában levő beágyazott JS-t:

function demoFromHTML() {
    var pdf = new jsPDF('p', 'pt', 'letter');
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#customers')[0];
 
    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function (element, renderer) {
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },
 
    function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF 
        //          this allow the insertion of new lines after html
        pdf.save('Test.pdf');
    }, margins);
}

Egyszer valamiért működött. De most a "PDF" gombra csak újratöltődik az oldal, nem generál PDF-et. Merre keressem a hibát?
A FF elemvizsgálat/firebug hibakeresőben nem látok hibát.

:(

Drupal verzió: 
7.x
Fórum: 
Modulok fejlesztése
makgab képe

Beküldte makgab - 2015. szeptember 11. 14.43

Annyit kiderítettem, hogy ha az export.js-be csak ezt teszem, akkor ez lefut a PDF button klikkre:

function demoFromHTML() {
  // popup window
  window.alert('Alert!');
}
0
0
makgab képe

Beküldte makgab - 2015. szeptember 11. 15.06

nem egészen értem... egymás után 3-4x kattintottam a PDF button-ra és egyszer csak lefutott most meg. De csak egyszer futott le... :o

0
0
makgab képe

Beküldte makgab - 2015. szeptember 11. 15.35

Az export.js-be teszek az elejére és a végére egy console.log()-ot, akkor az első lefut, de a második nem látszódik a FB konzolján:

function demoFromHTML() {
    console.log('DEBUG: Begin!');
    var pdf = new jsPDF('p', 'pt', 'letter');
    // source can be HTML-formatted string, or a reference
    // to an actual DOM element from which the text will be scraped.
    source = $('#customers')[0];
 
    // we support special element handlers. Register them with jQuery-style 
    // ID selector for either ID or node name. ("#iAmID", "div", "span" etc.)
    // There is no support for any other type of selectors 
    // (class, of compound) at this time.
    specialElementHandlers = {
        // element with id of "bypass" - jQuery style selector
        '#bypassme': function (element, renderer) {
            // true = "handled elsewhere, bypass text extraction"
            return true
        }
    };
    margins = {
        top: 80,
        bottom: 60,
        left: 40,
        width: 522
    };
    // all coords and widths are in jsPDF instance's declared units
    // 'inches' in this case
    pdf.fromHTML(
    source, // HTML string or DOM elem ref.
    margins.left, // x coord
    margins.top, { // y coord
        'width': margins.width, // max width of content on PDF
        'elementHandlers': specialElementHandlers
    },
 
    function (dispose) {
        // dispose: object with X, Y of the last line add to the PDF 
        //          this allow the insertion of new lines after html
        pdf.save('Test.pdf');
        console.log('DEBUG: PDF save!');
    }, margins);
}

Tehát a pdf mentése sor nem fut le:

pdf.save('Test.pdf');

De miért...? :o

0
0
makgab képe

Beküldte makgab - 2015. szeptember 12. 23.11

Megtaláltam a probléma okát.
A button-nak a form tag-en kívül kell lennie.
Hogyan tudom a form-on kívülre tenni a button-t?

0
0
makgab képe

Beküldte makgab - 2015. szeptember 13. 09.04

Talán nem a drupal_get_form() fv-el kellene generálnom az oldalt?
https://www.drupal.org/node/930760

<?php
function mymodule_menu() {
...
  $items['mypage-html'] = array(
    'title' => 'My page with HTML-style function',
    'page callback' => 'mymodule_html_page',
    'access callback' => TRUE,
  );
...
  return $items;
}
 
function mymodule_html_page() {
  $output = '<p>A paragraph...</p>';
  $output .= '<ul><li>first item</li><li>second item</li><li>third item</li></ul>';
  return $output;
}
 
?>
0
0
makgab képe

Beküldte makgab - 2015. szeptember 14. 09.58

Így oldottam meg végül:

# mymodule.module
...
  $items['mymodule/run/%'] = array(
    'title' => 'Title',
    'page callback' => 'mymodule_run_form',
    'page arguments' => array( 2 ), // parameter
    //...
    'type' => MENU_CALLBACK,
  );
 
...
 
 
 
# mymodule.inc
function mymodule_run_form($id) {
  $form = array();
...
  drupal_add_js( 'jquery-compat-git.js', 'file' );
  drupal_add_js( 'bootstrap.js', 'file' );
  drupal_add_js( 'jspdf.js', 'file' );
  drupal_add_js( 'export.js', 'file' ); 
...
  // render form
  $output = drupal_render($form);
  // button for jquery, export
  $output .= '<button onclick="javascript:exportFromHTML();">PDF</button>';
 
  return $output;
}

Szépen működik is. Tehát a mymodule.module-ban a menü felépítésénél nem a drupal_get_form() fv-t hívom meg, hanem a mymodule_run_form()-ot.

1
0