Get help with using Metro 4 components
-
shnar
- Posts: 9
- Joined: Mon Nov 26, 2018 12:52 pm
-
Status:
Offline
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
-
shnar
- Posts: 9
- Joined: Mon Nov 26, 2018 12:52 pm
-
Status:
Offline
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
-
olton
- Site Admin
- Posts: 170
- Joined: Mon Apr 09, 2018 6:19 pm
- Location: Kiev, Ukraine
-
Status:
Offline
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>
-
olton
- Site Admin
- Posts: 170
- Joined: Mon Apr 09, 2018 6:19 pm
- Location: Kiev, Ukraine
-
Status:
Offline
Post
by olton » Thu Jan 17, 2019 7:22 pm