how to empty search box on click event in wenzhixin bootstrap table without refresh page?

up vote
0
down vote

favorite

I want to empty search box. when I click anywhere on a page then without refresh page I want to get an only empty search box in a wenzhixin bootstrap table

 <table id="view_table" data-toggle="table" 

      data-search="true"

      data-page-list="[5, 10, 20]"

      data-page-size="5"

      data-pagination="true"

      data-show-pagination-switch="true" >

 <thead>

    <tr class="table-heading">

       <th data-field="image"><h4>Image</h4></th>

       <th data-field="name"><h4>Name</h4></th>

    </tr>

 </thead>



   <tbody>





   </tbody>

</table>

<button id="empty_search" class="btn btn-primary">Save</button>

 <script>

    $('#empty_search').on('click', function(){

        $.(this.["data-search"]).empty();

    });

</script>

javascript jquery css bootstrap-table

share|improve this question

edited 2 days ago

asked 2 days ago

vicky793

347

• 
  
  
  

  
  

  
  
  
  
  
  

  
  this.["data-search"] makes no sense to begin with. Apart from that this probably isn’t what you expect it to be in that context, the syntax is bogus as well - it is either foo.bar or foo[bar] - but not dot and square brackets.
  – misorude
  2 days ago
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  try to use $( this ).data( "search", '' ) instead of $.(this.["data-search"]).empty()
  – Stranger
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Stranger, yes I tried but not work.
  – vicky793
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @misorude, $('#empty_search').on('click', function(){ $("#view_table[data-search]").empty() }); is right?
  – vicky793
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  That would select the table element in your example (because it has that id, and has an attribute named data-search) - but I doubt you actually want to “empty” the whole table(?). You are talking about a search field, but there is no such thing in the code you have shown above. If that field gets created dynamically by another script, then use your browser dev tools to inspect it and find out what id (or other characteristics suitable for selection, if necessary) it has. And to empty an input field, the right method would be setting the value to an empty string.
  – misorude
  2 days ago
  

  
  
  
  

 | 
show 5 more comments

up vote
0
down vote

favorite

I want to empty search box. when I click anywhere on a page then without refresh page I want to get an only empty search box in a wenzhixin bootstrap table

 <table id="view_table" data-toggle="table" 

      data-search="true"

      data-page-list="[5, 10, 20]"

      data-page-size="5"

      data-pagination="true"

      data-show-pagination-switch="true" >

 <thead>

    <tr class="table-heading">

       <th data-field="image"><h4>Image</h4></th>

       <th data-field="name"><h4>Name</h4></th>

    </tr>

 </thead>



   <tbody>





   </tbody>

</table>

<button id="empty_search" class="btn btn-primary">Save</button>

 <script>

    $('#empty_search').on('click', function(){

        $.(this.["data-search"]).empty();

    });

</script>

javascript jquery css bootstrap-table

share|improve this question

edited 2 days ago

asked 2 days ago

vicky793

347

• 
  
  
  

  
  

  
  
  
  
  
  

  
  this.["data-search"] makes no sense to begin with. Apart from that this probably isn’t what you expect it to be in that context, the syntax is bogus as well - it is either foo.bar or foo[bar] - but not dot and square brackets.
  – misorude
  2 days ago
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  try to use $( this ).data( "search", '' ) instead of $.(this.["data-search"]).empty()
  – Stranger
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Stranger, yes I tried but not work.
  – vicky793
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @misorude, $('#empty_search').on('click', function(){ $("#view_table[data-search]").empty() }); is right?
  – vicky793
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  That would select the table element in your example (because it has that id, and has an attribute named data-search) - but I doubt you actually want to “empty” the whole table(?). You are talking about a search field, but there is no such thing in the code you have shown above. If that field gets created dynamically by another script, then use your browser dev tools to inspect it and find out what id (or other characteristics suitable for selection, if necessary) it has. And to empty an input field, the right method would be setting the value to an empty string.
  – misorude
  2 days ago
  

  
  
  
  

 | 
show 5 more comments

up vote
0
down vote

favorite

up vote
0
down vote

favorite

I want to empty search box. when I click anywhere on a page then without refresh page I want to get an only empty search box in a wenzhixin bootstrap table

 <table id="view_table" data-toggle="table" 

      data-search="true"

      data-page-list="[5, 10, 20]"

      data-page-size="5"

      data-pagination="true"

      data-show-pagination-switch="true" >

 <thead>

    <tr class="table-heading">

       <th data-field="image"><h4>Image</h4></th>

       <th data-field="name"><h4>Name</h4></th>

    </tr>

 </thead>



   <tbody>





   </tbody>

</table>

<button id="empty_search" class="btn btn-primary">Save</button>

 <script>

    $('#empty_search').on('click', function(){

        $.(this.["data-search"]).empty();

    });

</script>

javascript jquery css bootstrap-table

share|improve this question

edited 2 days ago

asked 2 days ago

vicky793

347

I want to empty search box. when I click anywhere on a page then without refresh page I want to get an only empty search box in a wenzhixin bootstrap table

 <table id="view_table" data-toggle="table" 

      data-search="true"

      data-page-list="[5, 10, 20]"

      data-page-size="5"

      data-pagination="true"

      data-show-pagination-switch="true" >

 <thead>

    <tr class="table-heading">

       <th data-field="image"><h4>Image</h4></th>

       <th data-field="name"><h4>Name</h4></th>

    </tr>

 </thead>



   <tbody>





   </tbody>

</table>

<button id="empty_search" class="btn btn-primary">Save</button>

 <script>

    $('#empty_search').on('click', function(){

        $.(this.["data-search"]).empty();

    });

</script>

javascript jquery css bootstrap-table

javascript jquery css bootstrap-table

share|improve this question

edited 2 days ago

asked 2 days ago

vicky793

347

share|improve this question

edited 2 days ago

asked 2 days ago

vicky793

347

share|improve this question

share|improve this question

edited 2 days ago

edited 2 days ago

edited 2 days ago

asked 2 days ago

vicky793

347

asked 2 days ago

vicky793

347

asked 2 days ago

vicky793

347

347

• 
  
  
  

  
  

  
  
  
  
  
  

  
  this.["data-search"] makes no sense to begin with. Apart from that this probably isn’t what you expect it to be in that context, the syntax is bogus as well - it is either foo.bar or foo[bar] - but not dot and square brackets.
  – misorude
  2 days ago
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  try to use $( this ).data( "search", '' ) instead of $.(this.["data-search"]).empty()
  – Stranger
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Stranger, yes I tried but not work.
  – vicky793
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @misorude, $('#empty_search').on('click', function(){ $("#view_table[data-search]").empty() }); is right?
  – vicky793
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  That would select the table element in your example (because it has that id, and has an attribute named data-search) - but I doubt you actually want to “empty” the whole table(?). You are talking about a search field, but there is no such thing in the code you have shown above. If that field gets created dynamically by another script, then use your browser dev tools to inspect it and find out what id (or other characteristics suitable for selection, if necessary) it has. And to empty an input field, the right method would be setting the value to an empty string.
  – misorude
  2 days ago
  

  
  
  
  

 | 
show 5 more comments

• 
  
  
  

  
  

  
  
  
  
  
  

  
  this.["data-search"] makes no sense to begin with. Apart from that this probably isn’t what you expect it to be in that context, the syntax is bogus as well - it is either foo.bar or foo[bar] - but not dot and square brackets.
  – misorude
  2 days ago
  
  
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  try to use $( this ).data( "search", '' ) instead of $.(this.["data-search"]).empty()
  – Stranger
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @Stranger, yes I tried but not work.
  – vicky793
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  @misorude, $('#empty_search').on('click', function(){ $("#view_table[data-search]").empty() }); is right?
  – vicky793
  2 days ago
  

  
  
  
  


• 
  
  
  

  
  

  
  
  
  
  
  

  
  That would select the table element in your example (because it has that id, and has an attribute named data-search) - but I doubt you actually want to “empty” the whole table(?). You are talking about a search field, but there is no such thing in the code you have shown above. If that field gets created dynamically by another script, then use your browser dev tools to inspect it and find out what id (or other characteristics suitable for selection, if necessary) it has. And to empty an input field, the right method would be setting the value to an empty string.
  – misorude
  2 days ago
  

  
  
  
  

this.["data-search"] makes no sense to begin with. Apart from that this probably isn’t what you expect it to be in that context, the syntax is bogus as well - it is either foo.bar or foo[bar] - but not dot and square brackets.
– misorude
2 days ago

this.["data-search"] makes no sense to begin with. Apart from that this probably isn’t what you expect it to be in that context, the syntax is bogus as well - it is either foo.bar or foo[bar] - but not dot and square brackets.
– misorude
2 days ago

try to use $( this ).data( "search", '' ) instead of $.(this.["data-search"]).empty()
– Stranger
2 days ago

try to use $( this ).data( "search", '' ) instead of $.(this.["data-search"]).empty()
– Stranger
2 days ago

@Stranger, yes I tried but not work.
– vicky793
2 days ago

@Stranger, yes I tried but not work.
– vicky793
2 days ago

@misorude, $('#empty_search').on('click', function(){ $("#view_table[data-search]").empty() }); is right?
– vicky793
2 days ago

@misorude, $('#empty_search').on('click', function(){ $("#view_table[data-search]").empty() }); is right?
– vicky793
2 days ago

That would select the table element in your example (because it has that id, and has an attribute named data-search) - but I doubt you actually want to “empty” the whole table(?). You are talking about a search field, but there is no such thing in the code you have shown above. If that field gets created dynamically by another script, then use your browser dev tools to inspect it and find out what id (or other characteristics suitable for selection, if necessary) it has. And to empty an input field, the right method would be setting the value to an empty string.
– misorude
2 days ago

That would select the table element in your example (because it has that id, and has an attribute named data-search) - but I doubt you actually want to “empty” the whole table(?). You are talking about a search field, but there is no such thing in the code you have shown above. If that field gets created dynamically by another script, then use your browser dev tools to inspect it and find out what id (or other characteristics suitable for selection, if necessary) it has. And to empty an input field, the right method would be setting the value to an empty string.
– misorude
2 days ago

 | 
show 5 more comments

1 Answer
1

active

oldest

votes

up vote
1
down vote



accepted

Here is an example: http://jsfiddle.net/9ynp8j6k/1/

You can empty the form field like this:

$('#clear').on("click",function() {

    $('.bootstrap-table .form-control').val("");

});

share|improve this answer

answered 2 days ago

de-facto

634

add a comment | 

Your Answer

StackExchange.ifUsing("editor", function () {
StackExchange.using("externalEditor", function () {
StackExchange.using("snippets", function () {
StackExchange.snippets.init();
});
});
}, "code-snippets");

StackExchange.ready(function() {
var channelOptions = {
tags: "".split(" "),
id: "1"
};
initTagRenderer("".split(" "), "".split(" "), channelOptions);

StackExchange.using("externalEditor", function() {
// Have to fire editor after snippets, if snippets enabled
if (StackExchange.settings.snippets.snippetsEnabled) {
StackExchange.using("snippets", function() {
createEditor();
});
}
else {
createEditor();
}
});

function createEditor() {
StackExchange.prepareEditor({
heartbeatType: 'answer',
convertImagesToLinks: true,
noModals: true,
showLowRepImageUploadWarning: true,
reputationToPostImages: 10,
bindNavPrevention: true,
postfix: "",
imageUploader: {
brandingHtml: "Powered by u003ca class="icon-imgur-white" href="https://imgur.com/"u003eu003c/au003e",
contentPolicyHtml: "User contributions licensed under u003ca href="https://creativecommons.org/licenses/by-sa/3.0/"u003ecc by-sa 3.0 with attribution requiredu003c/au003e u003ca href="https://stackoverflow.com/legal/content-policy"u003e(content policy)u003c/au003e",
allowUrls: true
},
onDemand: true,
discardSelector: ".discard-answer"
,immediatelyShowMarkdownHelp:true
});


}
});

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373565%2fhow-to-empty-search-box-on-click-event-in-wenzhixin-bootstrap-table-without-refr%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

1 Answer
1

active

oldest

votes

1 Answer
1

active

oldest

votes

active

oldest

votes

active

oldest

votes

up vote
1
down vote



accepted

Here is an example: http://jsfiddle.net/9ynp8j6k/1/

You can empty the form field like this:

$('#clear').on("click",function() {

    $('.bootstrap-table .form-control').val("");

});

share|improve this answer

answered 2 days ago

de-facto

634

add a comment | 

up vote
1
down vote



accepted

Here is an example: http://jsfiddle.net/9ynp8j6k/1/

You can empty the form field like this:

$('#clear').on("click",function() {

    $('.bootstrap-table .form-control').val("");

});

share|improve this answer

answered 2 days ago

de-facto

634

add a comment | 

up vote
1
down vote



accepted

up vote
1
down vote



accepted

Here is an example: http://jsfiddle.net/9ynp8j6k/1/

You can empty the form field like this:

$('#clear').on("click",function() {

    $('.bootstrap-table .form-control').val("");

});

share|improve this answer

answered 2 days ago

de-facto

634

Here is an example: http://jsfiddle.net/9ynp8j6k/1/

You can empty the form field like this:

$('#clear').on("click",function() {

    $('.bootstrap-table .form-control').val("");

});

share|improve this answer

answered 2 days ago

de-facto

634

share|improve this answer

share|improve this answer

answered 2 days ago

de-facto

634

answered 2 days ago

de-facto

634

answered 2 days ago

de-facto

634

634

add a comment | 

add a comment | 

 

draft saved

draft discarded

 

draft saved

draft discarded

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

StackExchange.ready(
function () {
StackExchange.openid.initPostLogin('.new-post-login', 'https%3a%2f%2fstackoverflow.com%2fquestions%2f53373565%2fhow-to-empty-search-box-on-click-event-in-wenzhixin-bootstrap-table-without-refr%23new-answer', 'question_page');
}
);

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Sign up or log in

StackExchange.ready(function () {
StackExchange.helpers.onClickDraftSave('#login-link');
});

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Sign up using Google

Sign up using Facebook

Sign up using Email and Password

Post as a guest

Name

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Name

Name

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

Email

Required, but never shown

This page is only for reference, If you need detailed information, please check here