Automatisches Scrollen beim Klicken auf meine Senden-Schaltfläche

Question

Also auf meinem benutzerdefinierten Modul, das ich erstellt habe, gibt es eine Absenden-Schaltfläche (Formular in PHP definiert), aber es ruft bereits eine Aktion, ruft eine Rückruffunktion, um die Anzeige einiger Informationen auszulösen in Bezug auf einen bestimmten Barcode direkt darunter.

Alles, was ich tun möchte, ist etwas Code hinzufügen, die meine Submit-Taste auch ein automatisches Scrollen nach unten ohne einen Link/Anker auslösen kann (weil ich die SUBMIT BUTTON, um diese Aktion, nicht einen anderen Link erwerben möchten) Benutzer muss nicht nach unten scrollen, um die Informationen anzuzeigen.

Der Grund, warum ich die Link/Anker-Option vermeide, ist, weil ich einfach keine separate Entität haben möchte, die angeklickt werden muss, um nach unten zu scrollen. Ich möchte, dass die Scroll-Datei korrekt ausgeführt wird, wenn ich auf den Absenden-Button klicke. Es sei denn, ein Link kann mit einem Button kombiniert werden? Vielen Dank!

Meine PHP Submit-Button Form:

//submit button that uses ajax (to display whats in callback) 
$form['submit_button'] = array(
      '#type'=> 'submit', 
      '#value'=> t('Submit'), 
      '#ajax' => array(//no need to refresh the page bc ajax 
        'callback' => '_ibbr_inv_after_callback', //callback 
      ), 
      '#suffix' => "<div id='after_div'><br></div> 
         <div id='after_status'></div>", 
    ); 
    return $form; 

Meine PHP Callback-Funktion:

//function for submit button callback 
function _ibbr_inv_after_callback($form, $form_state) { 
    $selector = '#after_div'; 
    $commands = array(); 

    $query = new EntityFieldQuery(); 
    $entities = $query->entityCondition('entity_type', 'node') 
    ->propertyCondition('type', 'eq') 
    ->propertyCondition('title', $form_state['input']['barcode']) 
    ->propertyCondition('status', 1) 
    ->range(0,1) 
    ->execute(); 

    //If this barcode is found in database 
    if (!empty($entities['node'])) { 
      $node = node_load(array_shift(array_keys($entities['node']))); 

      //Load fields from returned equipment item 
      $room = taxonomy_term_load($node->field_eq_room['und'][0]['tid']); 
      $desc = $node->field_eq_description['und'][0]['value']; 
      $manu = $node->field_eq_mfr['und'][0]['value']; 
      $model = $node->field_eq_modelno['und'][0]['value']; 
      $serial = $node->field_eq_serial['und'][0]['value']; 
      //displaying all the components of the specific barcode 
      $info = "<div id='after_div'><b>Title</b>: $node->title<br> 
          <b>Description</b>: $desc<br> 
          <b>Manufacturer</b>: $manu<br> 
          <b>Room</b>: $room->name<br> 
          <b>Model Number:</b> $model<br> 
          <b>Serial Number:</b> $serial<br></div>"; 
      //Displaying the Confirm and Flag buttons 
      $commands[] = ajax_command_replace($selector, $info); 
      $commands[] = ajax_command_replace("#after_status", "<div id='after_status'> <button id = 'confirm' type = 'submit' name = 'Confirm' value = 'Confirm'> Confirm</button><button id = 'Flag' type = 'submit' name = 'flag' value = 'flag'>Flag </button> </div>"); 
      //$commands[] = ajax_command_invoke("#after_div", 'animate', array("{scrollTop: top}",1000)); 
    //If this barcode is not found in the database 
    }else { 
      //Displaying the Add button and "Item not found" ONLY IF this entity is empty (meaning barcode was not found in database) 
      $commands[] = ajax_command_replace($selector, "<div id = 'after_div'>Item not found.</div>"); 
      $commands[] = ajax_command_replace("#after_status", "<div id='after_status'><button id = 'add' type = 'submit' name = 'Add' value = 'Add'>Add new item</button></div>"); 

    } 
    return array('#type' => 'ajax', '#commands' => $commands); 
}//end _ibbr_inv_after_callback 

Answer 1

Mit Javascript Sie Ihre Schaltfläche auf der Seite zu jedem beliebigen HTML-Elemente springen einreichen machen können, ohne Link/Anker. Nächstes Beispiel verfügt über zwei Tasten, wenn darauf geklickt wird, werden Tasten navigieren Sie zu verschiedenen Punkten der Seite nach unten:

<html> 
    <head> 
<script type="text/javascript"> 
function godown() 
{ document.getElementById("down").scrollIntoView(); // JUMP TO DIV "DOWN". 
} 
function gobottom() 
{ document.getElementById("bottom").scrollIntoView(); // JUMP TO DIV "BOTTOM". 
} 
</script> 
    </head> 
    <body> 
    <button onclick="godown()">Click to go down</button> 
    <button onclick="gobottom()">Click to go bottom</button> 

    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/> 
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/> 
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/> 
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/> 
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/> 
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/> 
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/> 
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/> 
    <br/>1<br/>2<br/>3<br/>4<br/>5<br/>6<br/>7<br/>8<br/>9<br/>0<br/> 

    <div id="down">You are down!</div> 

    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/> 
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/> 
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/> 
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/> 
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/> 
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/> 
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/> 
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/> 
    <br/>a<br/>b<br/>c<br/>d<br/>e<br/>f<br/>g<br/>h<br/>i<br/>j<br/> 

    <div id="bottom">You are at the bottom!</div> 
    </body> 
</html> 

Sie fügen Sie einfach Ihre Informationen in einem <div> (oder eine Tabelle, oder alles, was Sie wollen), geben ihm ein " id ", und Sie können mit der JavaScript-Methode" .scrollIntoView() "nach unten scrollen.

Kopieren Sie den vorherigen Code in eine Datei und speichern Sie ihn als HTML, und öffnen Sie ihn in Ihrem Browser.

Edit # 1: einige Javascript-Code mit PHP hinzufügen rechts, nachdem Sie füllen "after_div":

$info = "<div id='after_div'><b>Title</b>: $node->title<br> 
          <b>Description</b>: $desc<br> 
          <b>Manufacturer</b>: $manu<br> 
          <b>Room</b>: $room->name<br> 
          <b>Model Number:</b> $model<br> 
          <b>Serial Number:</b> $serial<br></div>" . 
     "<script type='text/javascript'>" . 
     "document.getElementById('after_div').scrollIntoView();" . 
     "</script>"; 

Edit # 2: Ersetzen Sie diese Zeile:

$commands[] = ajax_command_replace($selector, "<div id = 'after_div'>Item not found.</div>"); 

dieses nächste:

$body = "<div id = 'after_div'>Item not found.</div>" . 
     "<script type='text/javascript'>" . 
     "document.getElementById('after_div').scrollIntoView();" . 
     "</script>"; 
$commands[] = ajax_command_replace($selector, $body);