Skip to content

Commit

Permalink
Fixes Semantic-UI/#5121 jQuery AJAX settings not documented
Browse files Browse the repository at this point in the history
  • Loading branch information
jlukic committed Jul 2, 2017
1 parent bf01db3 commit 7eb7c95
Show file tree
Hide file tree
Showing 2 changed files with 18 additions and 46 deletions.
9 changes: 8 additions & 1 deletion server/documents/behaviors/api.html.eco
Original file line number Diff line number Diff line change
Expand Up @@ -970,7 +970,14 @@ type : 'UI Behavior'
</h2>

<h4 class="ui header">
Behavior
AJAX
</h4>
<div class="ui info message">
You can pass in any standard <a href="http://api.jquery.com/jquery.ajax/">jQuery AJAX setting</a> like <code>timeout</code> or <code>contentType</code> to API's settings and it will be automatically passed to the request's AJAX call.
</div>

<h4 class="ui header">
API
</h4>
<table class="ui sortable celled definition table">
<thead>
Expand Down
55 changes: 10 additions & 45 deletions server/documents/hotfix.html.eco
100644 → 100755
Original file line number Diff line number Diff line change
Expand Up @@ -7,56 +7,21 @@ title : 'Test Page'
type : 'Library'
---
<div class="ui container">
<div class="ui basic segment">
1. After "First" tab is clicked, click the "ClickMe" button. Alert will appear<br />
2. <b>BUG:</b> When "First" tab is clicked on again, button stops working. Changing <i>cacheType</i> doesnt change anything!<br />
3. <b>The goal is to run JS once and then leave it be</b>. So scripts must be evaluated once and tab should not reload, if focused on again.
<div class="ui menu">
<div class="ui category search item">
<div class="ui transparent icon input">
<input class="prompt" type="text" placeholder="Search animals..." value="pizza">
<i class="search link icon"></i>
</div>
<div class="results"></div>
</div>
</div>

<div class="ui top attached tabular menu">
<a class="active item" data-tab="first">First</a>
<a class="item" data-tab="second">Second</a>
</div>
<div class="ui bottom attached active tab segment" data-tab="first">

</div>
<div class="ui bottom attached tab segment" data-tab="second">

<div class="ui segment">
<p></p>
</div>
</div>
<script>
$(document).ready(function() {
var firstTabContent = "<div id='testfirst'>One&nbsp;<button>ClickMe</button></div> \n" +
"<script type='text/javascript'>\n" +
" $(function() { $('button').click(function() { alert(1) }); $('#testfirst').append('<div>dynamically appended div <b>(will disappear if tab is clicked again!)</b> ' + (new Date()).getTime() + '</div>') });\n" +
"</scr" + "ipt>";

$('.menu .item')
.tab({
cache: true,
cacheType: 'DOM',
evaluateScripts: true,
onFirstLoad: function(tabPath, parameterArray, historyEvent) {
console.log('Initialized tab: ' + tabPath);
},
onLoad: function(tabPath, parameterArray, historyEvent) { //tab selected
console.log('Selected tab: ' + tabPath);
},
apiSettings: {
loadingDuration : 300,
mockResponse : function(settings) {
var response = {
first : firstTabContent,

second : 'Two',

third : 'Three'
};

return response[settings.urlData.tab];
}
}
});
});

</script>
Expand Down

0 comments on commit 7eb7c95

Please sign in to comment.