Input with search button not showing when ajaxed in

shnar · Post by **shnar** » Thu Jan 17, 2019 2:16 pm

I'm ajaxing a <form> into my page, and it only has one input that I'd like to have a search button on and no clear button. I have this as my code:

Code: Select all

    <form action="javascript:" onSubmit="orderSearch()" style="margin:10px;">
        <input type="text" 
               id="OrderSearchOrderNumber"
               name="OrderSearchOrderNumber"
               data-role="input"
               style=" background-color: white; color: black;"
               data-search-button-click="custom"
               data-search-button="true"
               data-clear-button="false"
               data-on-search-button-click="orderSearch">
    </form>

The HTML on submit will call a javascript. I'd also like the Search button to call the same javascript. Based on the documentation, I think that's what I need. What am I missing? Is there something special I need to do if I'm ajaxing in this HTML?

-shnar

Post by **olton** » Thu Jan 17, 2019 3:01 pm

use attribute data-search-button-click="submit" https://metroui.org.ua/input.html#_input_search

shnar · Post by **shnar** » Thu Jan 17, 2019 5:58 pm

That makes sense. But one other issue I'm having is the Search button itself just isn't appearing. Is there something I need to do after the ajax call to get that to appear? Or did I set a property value wrong?

-shnar

Post by **olton** » Thu Jan 17, 2019 7:18 pm

All works for me:

Main file index.html

Code: Select all

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">

    <link href="../metro/css/metro-all.css?ver=@@b-version" rel="stylesheet">

    <title>Inject form - Metro 4 :: Popular HTML, CSS and JS library</title>
</head>
<body>

<button class="button" onclick="injectForm()">Inject form</button>
<div id="form-container"></div>

<script src="../js/jquery-3.3.1.min.js"></script>
<script src="../metro/js/metro.js?ver=@@b-version"></script>
<script>
    function injectForm() {
        $.get("if.html", function (response) {
            $("#form-container").html(response);
        })
    }
</script>
</body>
</html>

File with form if.html

Code: Select all

<form action="javascript:" onSubmit="orderSearch()" style="margin:10px;">
    <input type="text"
           id="OrderSearchOrderNumber"
           name="OrderSearchOrderNumber"
           data-role="input"
           style=" background-color: white; color: black;"
           data-search-button-click="custom"
           data-search-button="true"
           data-clear-button="false"
           data-on-search-button-click="orderSearch">
</form>
<script>
    function orderSearch(){
        alert("Ku");
    }
</script>

Post by **olton** » Thu Jan 17, 2019 7:22 pm

Metro 4 Community Forum

Input with search button not showing when ajaxed in

Input with search button not showing when ajaxed in

Re: Input with search button not showing when ajaxed in

Re: Input with search button not showing when ajaxed in

Re: Input with search button not showing when ajaxed in

Re: Input with search button not showing when ajaxed in