jQuery Forum

1. <link type="text/css" href="css/custom-theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
2. <link type="text/css" href="css/blue_theme/jquery-ui-1.8.20.custom.css" rel="stylesheet" />
3. <script type="text/javascript" src="Scripts/jquery-1.7.2.min.js"></script>
4. <script type="text/javascript" src="Scripts/jquery-ui-1.8.20.custom.min.js"></script>
5. <script type="text/javascript">
6.       $(document).ready(function(){
7.             $(".service_request, .form_request").button();
8.       }):
9. </script>

1. <div id="form">  <!-- themed with css/custom-theme/jquery-ui-1.8.20.custom.css -->
2.       <p class ="services">
3.             <a class="form_request ui-button ui-widget ui-state-default us-corner-all
4.             ui-button-text-only" >Service Request</a>
5.       </p>
6. </div>

1. <td colspan="3">
2.       <a id="submitbutton" class="service_request ui-button ui-widget ui-state-default ui-corner-all
3.        ui -button-text-only" onclick="verify()">Submit Request</a>&nbsp;&emsp;
4.       <a id="resetbutton" class="service_request ui-button ui-widget ui-state-default ui-corner-all
5.       ui-button-text-only" onclick="resetinputs()">Reset Form</a>
6. </td>

1. <link type="text/css" href="theme_interiorNavigation/ui.all.css" rel="Stylesheet" />

I have the following HTML code with an option list:

I have read many post related to users loading multiple copies of jQuery and the problems that occur.  I understand that the repeat load of jQuery overwrites the previous version loaded  I have also read post related to using a safe load method that replaces the use of "$".  I never had to deal with this before now and could use a little direction on what steps to take in my case.

I'm using UI Accordion with autoheight = true.  IE and FF both display the accordion sections without scroll bars, but Chrome is putting a scroll bar on the longest selection.  I looked in Chrome's "inspect element" and saw that there is an added style and I can't figure out where it's coming from or how to disable it.  This is what's appearing in the Styles panel under the Elements view.

Hi,
First I want to thank you all for your invaluable contributions on this site!

My problem - I have a table with numerous inputs including 3 sets of 3 radio inputs:

1. <tr>
2.                         <td class="indent20" colspan="3">
3.                             <a class="formlabels">2011</a>&ensp;&ensp;<span style="color: #666"><input type="radio" name="sex1" value="Colt"/>Colt&ensp;<input type="radio" name="sex1" value="Filly"/>Filly&ensp;<input type="radio" name="sex1" value="" checked="checked" />None&ensp;&ensp;&ensp;</span>
4.                         <a class="formlabels">Sire</a>&ensp;<input type="text" size="28" name="sire1" id="sire1" />
5.                         </td>
6.                 </tr>
7.                 <tr>
8.                         <td class="indent20" colspan="3">
9.                             <a class="formlabels">2010</a>&ensp;&ensp;<span style="color: #666"><input type="radio" name="sex2" value="Colt"/>Colt&ensp;<input type="radio" name="sex2" value="Filly"/>Filly&ensp;<input type="radio" name="sex2" value="" checked="checked" />None&ensp;&ensp;&ensp;</span>
10.                         <a class="formlabels">Sire</a>&ensp;<input type="text" size="28" name="sire2" id="sire2" />
11.                         </td>
12.                 </tr>
13.                 <tr>
14.                         <td class="indent20" colspan="3">
15.                             <a class="formlabels">2009</a>&ensp;&ensp;<span style="color: #666"><input type="radio" name="sex3" value="Colt"/>Colt&ensp;<input type="radio" name="sex3" value="Filly"/>Filly&ensp;<input type="radio" name="sex3" value="" checked="checked" />None&ensp;&ensp;&ensp;</span>
16.                         <a class="formlabels">Sire</a>&ensp;<input type="text" size="28" name="sire3" id="sire3" />
17.                         </td>
18.                 </tr>           
19.                 <tr>

My reset for the values in the table all work except for removing the checked status of the radio buttons.
I use:

1. $(":input").val("");
2.  $(":radio").removeAttr("checked");
3. $("#yearRequested").val("2012");
4. $("#mareYear").val("Select Year");
5. $("#mareColor").val("Select Color");
6. $("#mareStatus").val("Select Status");
7. $(".formlabels").css("color","#666666");
8. $(".requiredicon").css("color","#006600");
9. $('#lastBD').removeAttr('disabled');
10. $('#lastS').removeAttr('disabled');

I can remove the value of the radio buttons, but that's not what I want to do.  I just want to "uncheck" them.

Is my selector for the radio inputs wrong?  Or am I misusing the removeAttr?  Can't seem to figure this out.

Can you suggest the correct way to reset the radio buttons.

Thanks for any help.

PS: also have tried $(".radio").prop('checked', false);

Hi guys,

I am using UI Datepicker as follows:

<td class="news_td">Publication Date:&nbsp;</td><td><input name="pub_date" class="datepicker" type="text" /></td>

my script is:

<script type="text/javascript">
  $(document).ready(function() {
    $("input:submit, button").button();
    $( ".datepicker" ).datepicker({
        dateFormat: 'yy-mm-dd'
    });
  });
</script>

The problem I'm trying to solve is that the input box for the datepicker is very hard to click on.  The mouse pointer has to be exactly over the bottom boarder of the box.  Mousing over the contents of the box has no effect.  I can't figure out what I've done wrong.

Any suggestions on where to look, or what I've done wrong?
Is it OK to use a class selector instead of an id selector?

Thanks for any help.

Dave

Hi Wizards,

I have a web page using the UI Tabs with 6 tabs.  All of the tabs are loaded with jQuery Ajax everytime the user changes the selection on a jQuery Accordion menu.  Everything works fine, except that one of the tabs is sometimes empty and in those situations I want to disable that tab.  I have a php if else statement set up as follows:

.
.
.
if ($totalRows_News != 0){ 
.
.
.

?>
    <script type="text/javascript">
      $(document).ready(function() {
          $( "#tabs" ).tabs( "option", "disabled", false);
      });
    </script>
<?php
}else{
.
.
?>
    <script type="text/javascript">
      $(document).ready(function() {
          $( "#tabs" ).tabs( "option", "disabled", [2]);
      });
    </script>
<?php
.
.
.

The code I use to run the JQuery ajax calls on the tabs is:

<script type="text/javascript">               
$('.stallion').live('click', function(){

        $( "#tabs" ).tabs( "option", "selected", 0 );
        $( "#tabs" ).tabs( "option", "disabled", [2]);
       
    var id= parseInt(this.id);
    activehorse(id);
 //Overview Tab load starting.
        var request = $.ajax({
        url: "VSoverview.php",
        type: "GET",
        data: {vs_horse_id : id}
        });
        request.done( function(html){
        $("#tabs-1").html(html);      
        $(".activehorse").fadeOut('1000', function(){
        document.getElementById("activehorsename").innerHTML=document.getElementById(id).innerHTML;
        $(".activehorse").fadeIn('1000');
        });});
//Overview Tab load finished.
//Pedigree Tab load starting.
        var request = $.ajax({
        url: "VSpedigree.php",
        type: "GET",
        data: {vs_horse_id : id},
        success: function(html){
        $("#tabs-2").html(html);
        }
        });
//Pedigree Tab load finished.
//News Tab load starting.
        var request = $.ajax({
        url: "VSnewsdetails.php",
        type: "GET",
        data: {vs_horse_id : id},
        success: function(html){
        $("#tabs-3").html(html);
        }
        }); 
//News Tab load finished.
//Race Record Tab load starting.
        var request = $.ajax({
        url: "VSracerecords.php",
        type: "GET",
        data: {vs_horse_id : id},
        success: function(html){
        $("#tabs-4").html(html);
        }
        });
.
.
.


The funny thing is that this correctly disables the News tab when it's empty EXCEPT in one situation.  If the user clicks on the News tab in a situation where it is "active", and then changes the selection in the Accordion,  the News tab will not be disabled if need be, for the new selection.  What's even more funny is that it does work the first time this situation is encountered, but not after that.

Any suggestions would be greatly appreciated.

Thanks!

Greetings,

I am pretty new to jQuery and have benefited from the willingness of you guys to help newcomers.
I've almost finished employing the jQuery Accordian and Tabs UI functions on a website, but still have one remaining problem.

I have a page using the UI tabs.  When the page first loads the content of all the tabs flashes for a second or two and then the selected tab is displayed.  After that the tabs work great with smooth transitions as expected.

The tabs on page load are filled with php include calls.  Then I use ajax to refill the tabs base upon the users selections.  That works fine without the load flashing of all tab contents.  I did try switching all the php includes to jQuery ajax.  The resulting page had the same problem with the content of all tabs flashing before the selected tab displayed.

Here's some of my code:

In the head:

<script type="text/javascript">
    $(document).ready(function() {
    $("#tabs").tabs({ fx: { opacity: 'toggle', selected: 0}});
     });
</script>
<script type="text/javascript">               
$('.stallion').live('click', function(){
    var id= parseInt(this.id);
    activestallion(id);
        $( "#tabs" ).tabs( "option", "selected", 0 ); //need to get this to finish before the ajax event
 //Overview Tab load starting.
        var request = $.ajax({
        url: "stalliondetails.php",
        type: "GET",
        data: {stallion_ID : id}
        });
        request.done( function(html){
        $("#fragment-1").html(html);      
        $(".activehorse").fadeOut('1000', function(){
        document.getElementById("activehorsename").innerHTML=document.getElementById(id).innerHTML;
        $(".activehorse").fadeIn('1000');
        });});
//Overview Tab load finished.
//Pedigree Tab load starting.
        var request = $.ajax({
        url: "pedigreedetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#fragment-2").html(html);
        }
        });   
//Pedigree Tab load finished.
//Progeny Tab load starting.
        var request = $.ajax({
        url: "progenydetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#fragment-3").html(html);
        }
        });   
//Progeny Tab load finished.
//News Tab load starting.
        var request = $.ajax({
        url: "newsdetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#fragment-4").html(html);
        }
        });   
//News Tab load finished.
//Race Record Tab load starting.
        var request = $.ajax({
        url: "racerecorddetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#fragment-5").html(html);
        }
        });   
//Race Record Tab load finished.
//Analysis Tab load starting.
        var request = $.ajax({
        url: "analysisdetails.php",
        type: "GET",
        data: {stallion_ID : id},
        success: function(html){
        $("#fragment-6").html(html);
        }
        });   
//Analysis Tab load finished.
        updateseasons(id);
        $( "#tabs" ).tabs( "option", "selected", 0 );
        $("button").button() ;      
});
</script>

Then in the body:

<div id="tabs">
                <ul class="stallion_tabs">
                    <li id="tab_overview" style="margin-left:20.0em"><a href="#fragment-1" class="tablabels"><span>Overview</span></a></li>
                    <li><a href="#fragment-2" class="tablabels" id="pedigree_tab"><span>Pedigree</span></a></li>
                    <li><a href="#fragment-3" class="tablabels"><span>Progeny</span></a></li>
                    <li><a href="#fragment-4" class="tablabels"><span>News</span></a></li>
                    <li><a href="#fragment-5" class="tablabels"><span>Race Record</span></a></li>
                    <li><a href="#fragment-6" class="tablabels"><span>Analysis</span></a></li>      
                </ul>
                <div class="tab_container">
                <div id="fragment-1" class="tab_content_ov">
                    <?php include 'stalliondetails.php'; ?>
                </div>
                <div id="fragment-2" class="tab_content">
                    <?php include 'pedigreedetails.php'; ?>
                </div>
                <div id="fragment-3" class="tab_content">
                    <?php include 'progenydetails.php'; ?>
                </div>
                <div id="fragment-4" class="tab_content">
                    <?php include 'newsdetails.php'; ?>
                </div>
                <div id="fragment-5" class="tab_content">
                    <?php include 'racerecorddetails.php'; ?>
                </div>
                <div id="fragment-6" class="tab_content">
                    <?php include 'analysisdetails.php'; ?>
                </div>
                </div>
            </div>

Is my code the problem or is there something I'm leaving out that would hide the copy of the tabs loading until the document is ready and selects the first tab (index 0)?

I appreciate any help you guys can offer.
Thanks

I'm using UI tabs and I applied the following script in my header to add a fadein/fadeout transition between tab clicks.  It works great in FF but doesn't work in IE.  Is there a fix for this or am I doing something wrong?

<script type="text/javascript">
  $(document).ready(function() {
    $("#tabs").tabs({ fx: { opacity: 'toggle' } });
  });
</script>

I'm using IE 9.

Thanks for any help.

Very new to this.  Trying to get a handle on the basic syntax.

I want to use .ajax instead of the following js function so that I can use the event handlers to update the DOM after changing the contents of a jQuery UI tab.  What happens now is that the DOM only contains the first loading of the JQuery UI tab (fragment-3 in this example).  Once the tab is changed by the displayfrag3 function (a table is rewritten with new <td ids>) the DOM doesn't see any new id tags so "on click" functions using the new ids don't work.

My Call to this Function:

onclick="displayfrag3(variable)"

Current Function I use:

function displayfrag3(str)
{
$stallionID = str;

if (str=="")
  {
  document.getElementById("fragment-3").innerHTML="";
  return;
  }
if (window.XMLHttpRequest)
  {// code for IE7+, Firefox, Chrome, Opera, Safari
  var xmlhttp=new XMLHttpRequest();
  }
else
  {// code for IE6, IE5
  xmlhttp=new ActiveXObject("Microsoft.XMLHTTP");
  }
xmlhttp.onreadystatechange=function()
  {
  if (xmlhttp.readyState==4 && xmlhttp.status==200)
    {
        document.getElementById("fragment-3").innerHTML=xmlhttp.responseText;       
    }
  }
xmlhttp.open("GET","progenydetails.php?stallion_ID="+str,true);
xmlhttp.send();
 
}

My Attempt at using jQuery .ajax:

<script type="text/javascript">
$.ajax({
   type: "GET",
   url: "progenydetails.php",
   context: document.body.fragment-3,
   data: "stallion_ID="+str   <!-- don't know how to incorporate a passed variable-->
 });
</script>

What is the call statement for this and how do I pass a variable to it?

Could someone please show me the correct jQuery .ajax code and explain how to add the success handler to update the DOM.  I have been trying to figure this out with the online info and just need a little help to get going.

Thanks for any help.