When using the idTabs jQuery plugin how do you add function that is called when a tab is clicked? The documentation says this (but gives no example):
click (function)
Function will be called when a tab is clicked. ex: $(...).idTabs(foo)
If the function returns true, idTabs will show/hide content (as usual).
If the function returns false, idTabs will not take any action.
The function is passed four variables:
The id of the element to be shown
an array of all id's that can be shown
the element containing the tabs
and the current settings
My code:
<ul class="idTabs">
<li>jQuery</li>
<li>Tabs 3</li>
</ul>
<div id="jquery">If you haven't checked out ...</div>
<div id="official">idTabs is only a simple ...</div>
function tabChanged(id, tabs, parent, settings) {
alert('tabChanged');
return true;
}
$(".idTabs").idTabs(tabChanged);
Nothing happens when the tab is clicked - I would expect to seen an alert message
You are almost there. You can do it like:
$(".idTabs").idTabs({click: tabChanged});
Or you can use an anonymous function:
$('.idTabs').idTabs({
click: function(id, all, container, settings){
alert('tabChanged');
return true;
}
});
Related
How do I show a hidden adjacent div on Prototype.js? Here is my current code:
<button id="checkAnswer" onclick="checkAnswer2()">Check Answer</button>
<p class="feedback">Feedback:</p>
Script:
function checkAnswer2 () {
$('checkAnswer').next().show();
}
If you put the ID in the function, you’re going to have to make a new function for each question/answer pair. How about this:
<button class=“checkAnswer”>Check Answer</button>
<p class=“feedback”>Feedback:</p>
script
$$('.feedback').invoke('hide');
$(document).on('click', '.checkAnswer', function(evt, elm){
elm.next('p').show();
});
Now you can repeat as many of these as you want on the page, and each button will always manage whatever p follows it.
Is there any way to know that view is open by back?
For example
<div data-role="view" id="view-test" data-show="show">
<!-- View content -->
</div>
<script>
var show = function(e){
if(e.view.isBack())
{
console.log("Back")
// do something
}
}
</script>
Is there any method or property like e.view.isBack() ?
There are many ways to handle this, maybe you can use a global variable where you keep the last visited page or even you can add a back button handler and get the view from which the back button was pressed. Another solution would be to pass a parameter along with page navigation when going back, for example:
<a data-role="button" href="#foo?back=true">Link to FOO with back parameter set to true</a>
And on the visited page on show event you can get the parameter like this:
function fooShow(e) {
e.view.params // {back: "true"}
}
Now depending on what the parameter value is you can detect if the back button was pressed or not before reaching the page.
I have a ajax function that is called by button tag
<button id="of_save" type="button" class="button-primary">
<?php echo __('Save All Changes', 'optionsframework');?>
</button>
$('#of_save').live('click',function() {
...
...
...
}};
The problem is that theme author put a single button on top of settings page and a million of settings, so every time I want to hit save, I must scroll whole page.
I found a little JS script that intercept CTRL+S or another browser combination and is working wonderful
http://www.openjs.com/scripts/events/keyboard_shortcuts
The problem is I don't know how to call the ajax function from this JS
shortcut.add("Ctrl+Shift+X",function() {
alert("Hi there!");
// not working...
live('click',function());
});
I have a Razor/ASP/MVC3 web application with a form and a Submit button, which results in some action on the server and then posts back to the form. There is often some delay, and it's important that users know they should wait for it to complete and confirm before closing the page or doing other things on the site, because it seems users are doing that and sometimes their work has not been processed when they assume it has.
So, I added a "Saving, Please Wait..." spinner in a hidden Div that becomes visible when they press the Submit button, which works very nicely, but I haven't been able to find a way to get the Div re-hidden when the action is complete.
My spinner Div is:
<div id="hahuloading" runat="server">
<div id="hahuloadingcontent">
<p id="hahuloadingspinner">
Saving, Please Wait...<br />
<img src="../../Content/Images/progSpin.gif" />
</p>
</div>
</div>
Its CSS is:
#hahuloading
{
display:none;
background:rgba(255,255,255,0.8);
z-index:1000;
}
I get the "please wait" spinner to appear in a JS method for the visible button, which calls the actual submit button like this:
$(document).ready(function () {
$("#submitVisibleButton").click(function () {
$(this).prop('disabled', true);
$("#myUserMessage").html("Saving...");
$("#myUserMessage").show();
$("#hahuloading").show();
document.getElementById("submitHiddenButton").click();
});
});
And my view model code gets called, does things, and returns a string which sets the usermessage content which shows up fine, but when I tried doing some code in examples I saw such as:
// Re-hide the spinner:
Response.write (hahuloading.Attributes.Add("style", "visibility:hiddden"));
It tells me "hahuloading does not exist in the current context".
Is there some way I am supposed to define a variable in the view model which will correspond to the Div in a way that I can set its visibility back from the server's action handler?
Or, can I make the div display conditional on some value, in a way that will work when the page returns from the action?
Or, in any way, could anyone help me figure out how to get my div re-hidden after the server action completes?
Thanks!
Is this done with ajax? I would assume so because the page is not being redirected. Try this:
$(document).ready(function () {
$("#submitVisibleButton").click(function () {
$(this).prop('disabled', true);
$("#myUserMessage").html("Saving...");
$("#myUserMessage").show();
$("#hahuloading").show();
document.getElementById("submitHiddenButton").click();
});
$("#hahuloading").ajaxStop(function () {
$(this).hide();
});
});
As an aside, you no longer need runat=server.
I am very new to MVC and jQuery and I have a problem adding a new tab to a jQuery tab panel.
I have a ASP.NET MVC3 View that contains two partial views. The first one is a search form and the second one displays the search results.
Now I need to put the search results in a tab of a tab panel. At a later point in this project it should work like this: The user searches for some keywords, and for each new search a new tab is added to the tab panel. This way it should be possible for the user to switch to a previous search. But I am not this far yet.
What I tried first was to add a static tab panel to the page with a single tab that contains the search results. This was rather easy and I had no problems. What I tried to do next, was to add a new tab with static content ("Hello World") to the tab panel each time the user clicks the submit button of the search form. But this doesn't really work:
I can see that the new tab is added to the tab panel. But only for < 1 sec. The new tab disappears as soon as the search results are rendered. It seems like rendering the partial view overwrites the changes made by jQuery/JavaScript.
This is the view (_SearchInput is the partial view for the search form, _SearchResults is the partial view used to display search results):
<div class="roundedBorder">
#Html.Partial("_SearchInput")
</div>
<div id="tabs" style="margin-top:7px;">
<ul>
<li>Test 1</li>
</ul>
<div id="contentcontainer">
<div id="fragment-1">#Html.Partial("_SearchResults")</div>
</div>
</div>
In _SearchInput I add the tabs when the document is ready and call searchClick when the submit button of the form is clicked:
<script>
$(document).ready(function () {
/* show tabs */
$('#tabs').tabs();
});
function searchClick() {
var keyword = $("#searchTextInput").val().trim();
if (keyword == null || keyword == "") {
return false;
}
var title = keyword.substring(0, 10);
$('#contentcontainer').append("<div id='fragment-2'>hello world</div>");
$('#tabs').tabs("add", "#fragment-2", title);
}
</script>
How are you submitting the form? If your not posting an ajaxy type of result this would be expected as your page will be refreshing on form submit.
Rather, than submit the form, submit the form with jquery and in your success callback perform your post form submission tasks.
EG:
$('form').submit(function(evt) {
evt.preventDefault();
$.ajax({
type: "POST",
url: "formsubmiturl",
data: dataposted,
success: function() {
// add jquery tab stuff here
}
});