I am using jquery UI tab for my project. Kindly check the html code
<div id="tabs">
<ul>
<li>General</li>
<li>Admin Products</li>
<li>Admin Category</li>
<li>Others(Admin)</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
<div id="tabs-3"></div>
<div id="tabs-4"></div>
</div>
when I click a tab, I get the form using ajax, which works well. Check the js code below which is taken from phtml file,
<script type="text/javascript">
$(function(){
// Tabs
$('#tabs').tabs();
//hover states on the static widgets
$('#dialog_link, ul#icons li').hover(
function() { $(this).addClass('ui-state-hover'); },
function() { $(this).removeClass('ui-state-hover'); }
);
$('.load_cont').click(function()
{
var groupname;
var id = $(this).attr('rel');
var gnameArr = id.split('||');
groupname = gnameArr[1];
//alert(gnameArr[1]);
var url = <?php echo BASE_URL; ?> + '/admin/settings/getqtips/gname/'+groupname;
//alert(id);
$.ajax({
type:'POST',
dataType:'json',
url:url+'/math/'+Math.random(),
data:'',
success:function(response)
{
if(response.MSG == 'DONE')
{
$("#"+gnameArr[0]).html(response.TPL);
$('div#'+gnameArr[0]+' #gname').val(groupname);
}
}
});
}
);
});
$(function(){
$('a#preload').click();
})
</script>
My requirement is, when ever I click on respective tab, I need to clear the html inside other tab. That is, if I click on tabs-2, the content from other tabs (tabs-1, tabs-3, tabs-4) should be clear. This one saves my validation on zend.
Kindly advice on this.
inside your success function empty all other divs
$('div[id^="tabs-"]').each(function(){ //search for all divs which id starts with 'tabs-'
if (this.id != gnameArr[0]) { //if this is not clicked one
$(this).empty(); //clear its content
}
});
or with falsarella's tip
$('.load_cont').click(function() {
var clickedEl = $('#'+gnameArr[0]);
...
success:functi...
$('div[id^="tabs-"]').not(clickedEl).empty();
...
Alternatively, you can set container elements with the same class, eg .container.
// Clear all container before you set the new one.
$('.container').html('');
how about something like this :
$('.load_cont').click(function(){
$('.load_cont').not($(this)).each(function(i,el){
$($(el).attr('href')).empty();
});
});
Select the divs that aren't the selected one, and clear them all:
$('#tabs > div:not(#' + gnameArr[0] + ')').empty();
Related
Hi all I am using a down menu on our website and it is all working fine except when you activate one of the drop-downs you can also activate any other drop-down menu without the previous one closing and it looks messy. Can anyone please suggest a way to make the previous menu close when you click on another one?
Here is my script
<script type="text/javascript">
function DropDown(el) {
this.dd1 = el;
this.initEvents();
}
DropDown.prototype = {
initEvents : function() {
var obj = this;
obj.dd1.on('click', function(event){
$(this).toggleClass('active');
event.stopPropagation();
});
}
}
$(function() {
var dd1 = new DropDown( $('#dd1') );
$(document).click(function() {
// all dropdowns
$('.wrapper-dropdown-5').removeClass('active');
});
});
</script>
And here is the HTML
<div id="dd1" class="wrapper-dropdown-5" tabindex="1">School Information
<ul class="dropdown">
<li><i></i>Break and Breakfast Price List</li>
<li><i> </i>Bus Timetables</li>
Many Thanks
J Tech
Instead of removing a class, you need to blur the selects:
$('.wrapper-dropdown-5').blur()
I think you're looking for accordion menu . Here it's example. Demo Download
I have a small jquery problem:
My code is like this:
<div id="select-word-5" class="select-word-link"> - some content - </div>
<div id="select-5" class="select"> - some content - </div>
I have throughout my document several select-word-link and select divs.
I want to add a click event to the first div, that reacts just to the second div.
My idea was to loop through all the "select-x" elements, but i think there is a much better way?
$('.select-word-link').each(function()
{
var id = this.id;
var idLink = this.id.replace("-word", "");
$('.select').each(function()
{
if (idLink == this.id)
{
$(id).click(function() {
alert("this does not work");
});
});
});
You can do this easier by triggering an action on an event.
$('#select-5').click(function(){
alert('Does this work?');
});
$('.select-word-link').click(function(){
$('#select-5').trigger('click'); // will behave as if #select-5 is clicked.
});
Info: http://api.jquery.com/trigger/
More advanced:
$('#select-5').click(function(){
alert('Does this work?');
});
$('#select-6').click(function(){
alert('Does this work?');
});
// etc
$('.select-word-link').click(function(){
var selectId = this.id.replace('-word', '');
$('#'+selectId).trigger('click'); // will behave as if #select-5 is clicked.
});
maybe this code help you
$(".select-word-link").click(function(){
$(this).next().hide();
});
});
try
$('.select-word-link').first().on('click',function(){
// you code goes here
})
jQuery as CSS uses # selector to identify that this string is an Id.
e.g.
<div id="someId"></div>
and you execute this code:
$('#someId')
this will select the DOM object that has the Id someId
while id property returns the id of the DOM object without the selector # i.e. this jQuery code:
var id = $('#someId').get(0).id
will initialize the variable id to 'someId'
Thus, in your code add '#' in the selector
$('#' + id).click(function() {
alert("this does not work");
});
You have to trigger click next() element not all .select
$(".word").click(function() {
var selectId = this.id.replace('-word', '');
console.log(selectId);
$('#'+selectId).trigger('click');
});
$(".next").click(function() {
alert($(this).html());
})
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="select-word-5" class="select-word-link word">- some content 5-</div>
<div id="select-word-6" class="select-word-link word">- some content 6-</div>
<div id="select-word-7" class="select-word-link word">- some content 7-</div>etc.
<div id="select-5" class="select-word-link next">- some content next 5-</div>
<div id="select-6" class="select-word-link next">- some content next 6-</div>
<div id="select-7" class="select-word-link next">- some content next 7-</div>
very simple solution
$('#select-5 , .select-word-link').click(function () {
// your code
});
If you want trigger same functionality from 2 or more different div ids or classes or combination of both then put separated by , like '#select-5 , .select-word-link' as shown in above example.
I have a listener for tab selection changes, and want to be able to load content in a div element, everytime I click on a tab:
However, the following works only for the first time. With subsequent clicks on the tabs, the page (or div region) is blank.
tabSelectionHandler = function (event, ui) {
// .... code to get tab that was clicked
//..code to get URL
var nextURL = PAGE_URL[tabName];
$('#' + tabName + 'Content').load(nextURL, function (responseTxt, statusTxt, xhr) {});
}
I want the content to be loaded everytime tab is clicked, as the content may be dynamic.. How do I do that?
How I do this is like this:
Suppose I have the following HTML:
<div id="tabs">
<ul>
<li>abc</li>
<li>xyz</li>
</ul>
<div id="tabs-1"></div>
<div id="tabs-2"></div>
</div>
Then you can access each tab like this:
$('#tabs').tabs({
activate: function (event, ui) {
var active = $("#tabs").tabs("option", "active");
var tabId = $("#tabs ul>li a").eq(active).attr('href');
if (tabId === "#tabs-1") {
//set url here
loadHtml(tabId,url );
} else if (tabId === "#tabs-2") {
//set url here
loadHtml(tabId,url );
}
}
});
And then have a javaScript function that loads the content:
function loadHtml(id,url){
$('#'+id).html("some html here");
//you can place an ajax call here or whatever is suitable
//In your case that would be something like
//$('#' + id).load(url);
}
Hope that helps
I'm working with some form validation.
I run the validation on a .blur event for each input.
During each validation, I create a validation summary at the top of the page, listing out all of the errors.This is currently working, with the exception that I can not clear errors from the list.
My question, how can I remove the errors list on each .blue event.
I've added a comment where I've tried to clear the error list.
My Code:
<script>
$(function () {
$("#EditPhone input").blur(function () {
var a = $(this).parent();
var b = a.find(".k-tooltip").text();
$(".validation-summary-errors ul").html(""); // This does not work
$(".k-tooltip").each(function () {
var c = $(this).text();
$(".validation-summary-errors").show();
$(".validation-summary-errors ul").append("<li>" + c + "</li>");
});
});
});
</script>
<div class="validation-summary-errors" style="display:none;">
<ul>
</ul>
</div>
You can try empty() method for example:
$(".validation-summary-errors ul").empty();
You can try remove() method for example:
$(".validation-summary-errors ul li").remove();
I know a lot of people have asked questions about selectors, but whatever I do looks right but still ends up not working. I have a list of actions. The actions are shown or hidden whenever their "folder" is clicked. I don't want them to hide again when the action itself is clicked...however they do. Can anyone see what my problem is? I've tried so many variations; maybe it's just late.
Relevant code:
func.js
$(function() {
$(".menuitems").hide();
$("#dmenu li").not(".menuitems li").click(function() {
$(this).children(".menuitems").slideToggle();
});
$(".menuitems").children("li").click(function() {
$.get("aux/" + $(this).text() + ".html", function(data) {
$("#content").html(data);
}, "text");
});
});
main.html
<div id="content">
All contents come here!!
</div>
<div id="leftnavigation">
<h3>Options</h3>
<ul id="dmenu" style="list-style-type:none; margin-left:-50">
<li>__Registration
<ul class="menuitems">
<li>FindExisting</li>
<li>CreateNew</li>
</ul>
</li>
</ul>
</div>
you want to look on all li elements that has a .menuitems inside it you could do something like:
$(function() {
$("#dmenu li:has(.menuitems)").click(function() {
$(this).children(".menuitems").slideToggle();
});
$(".menuitems").hide().find("li").click(function() {
$.get("aux/" + $(this).text() + ".html", function(data) {
$("#content").html(data);
}, "text");
return false;
});
});