Question

所以在我创建的自定义模块上，有一个提交按钮（在php中定义的形式），但它已经获取了一个动作，它调用一个回调函数来触发显示有关它下面某个条形码的一些信息。

我想要做的就是添加一些代码，允许我的提交按钮也触发自动向下滚动而没有链接/锚点（因为我希望SUBMIT BUTTON获取该动作，而不是另一个链接）以便用户无需向下滚动即可查看信息。

我避开链接/锚点选项的原因是因为我不想要一个单独的实体需要点击才能向下滚动。我希望滚动在我单击提交按钮时发生。除非链接可以与按钮组合？谢谢！

我的PHP提交按钮表单：

//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;

我的PHP回调函数：

//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

使用javascript，您可以将提交按钮跳转到页面上的任何HTML元素，而无需链接/锚点。下一个示例有两个按钮，单击时，按钮将向下滚动到页面的不同点：

<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>

您只需在<div>（或表格，或任何您想要的内容）中插入您的信息，为其提供一个＆＃34; ID＆＃34;，然后您就可以使用javascript向下滚动到它方法＆＃34; .scrollIntoView（）＆＃34;。

将以前的代码复制/粘贴到文件中并将其另存为HTML，然后在浏览器中将其打开。

编辑＃1：在填写＆＃34; after_div＆＃34;之后立即使用PHP添加一些javascript代码：

 $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>";

编辑＃2：替换此行：

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

下一个：

$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);

单击我的提交按钮时自动滚动

1 个答案: