jQuery Forum

On clicking the iframe i need to open a div. I tried with click event and bind event but it didnt work. My requirement is to onclick the iframe. how to do it. how to add the click event for iframe.

$('#myFrame').click(function(){
   $('#myDiv').show();
});

and

$('#myFrame').bind('click', function(event) {
   $('#myDiv').show();
});

<iframe id="myFrame" border="0" onClick="clic(this.id)"></iframe>

I am loading the jquery UI dialog box. I tried to drag the dialog box its moving left, right and bottom but its not moving top from where the box get loaded. I tried in all the browsers its not moving top. May I know why its happening and how to solve it.

Thank you

Regards

Vivek

Hi

I am using jQuery UI multiselect dropdown plugin from  -  http://www.erichynds.com/examples/jquery-ui-multiselect-widget/demos/

I tried to validate the multiselect using jquery.validate.js . It shows the error message when there is error.

For example if it a required field. Without selecting any option when I tried to submit, it shows the error message 'This is required'.

The problem is when I select any options from the multiselect, the error message is not removed. Still its shows the error message. I tried using without the Jquery plugin its working properly.

How can I remove the error message in the above scenario.

Thank you

Vivek

I am using jQuery UI Tabs in my application. I have issue in loading the tabs. The page is called using jquery.load() function. Once the page gets load it shows the Tabs in list format and then it shows the tab and according to the content it fits the height. And it takes time to load. How to avoid this issue. Once the page is called it should directly show the tab view instead of list view and then loads into Tab view.

Below is the testing link,
http://vivek192.in/test/tab_test.html

Is there any way to load the Loading image and then load the content?

I am using jquery UI accordion layout for my template. As my content overflow, I change the css option overflow hidden to overflow auto. Everything is working Fine. I took a tooltip plugin for the form input field from -
http://onehackoranother.com/projects/jquery/tipsy/

The problem is the tooltip is not moving along with the input field as
in the example page in my layout. It is fixed in the screen. The page gets moved not the tooltip it is stick in the screen. Is this issue related to layout, because I tried all the option and without the layout there its working fine. Pl. help me to solve this issue.
Thank you

Hi

I am using jQuery Dialog box to display some content in the page. It is working fine. I need to position to the right side of the page with some padding. I am able to position to right using the below option
$("#dialog").dialog('option', 'position', ['right','center']);
It is positioning right, I need to add the padding something like right:40px . I tried to add but its not working. Please help me how to add the padding value along with position right.

I am using jquery load function to load the content. I need to add loading image for the waiting time of the content. As some page has large information it takes time to load. In that time loading image has to load first.

$("#content).load(page);

this is how I load the content , can you please help me to add the loading image for this.

Thank you

Is it possible to have scrollable header for jQuery vertical Tabs as horizontal tabs shown in the below link

http://jquery.aamirafridi.com/jst/

Hi,

I am using jQuery UI Tabs in one of my application. I need to Add the tabs dynamically using jquery click function. I tried to do it but it is not working. Is there any working sample to do it. And I need to delete those dynamically added Tabs. Pl. help to how to do this.

Thank you

How to close a Jquery UI dialog box when changing the page using ajax load. now the dialog box is appearing in the other page while loading the page thru ajax. How to close it while changing the page.

It can be close using the below function

function closeDialog()
{
  $('#dialogID').dialog("close"); 
}

I tried to trigger the above function in window.unload but its closing the box when we close the browser tab. Pl. help to solve his issue.

Hi

I am calling a  jquery UI dialog box on change of a select field. I need to position the dialog box next to the select field. I tried with lot of options but its not displaying the dialog box next to the select field. How to position that.

Hi

I am using below script to sort the select option value its working fine.

jquery function
function sortDropDownListByText() {
        // Loop for each select element on the page.
        $("select").each(function() {            
            // Keep track of the selected option.
            var selectedValue = $(this).val();     
            // Sort all the options by text. I could easily sort these by val.
            $(this).html($("option", $(this)).sort(function(a, b) {
                return a.text == b.text ? 0 : a.text < b.text ? -1 : 1
            }));     
            // Select one option.
            $(this).val(selectedValue);
        });
    }
   
 $(document).ready(sortDropDownListByText);


When I tried to add the optgroup its not working, I add the optgroup because the sort is including the "<option value="" selected="selected">Select</option>" which dont want to sort. I there any other option to exclude the sort or sorting with optgroup. I need to add the option dynamically. It need to sort that option also.


html
 <select name="type_assembly" id="type_assembly" title="TYpe of Assembly">
    <optgroup >
        <option value="" selected="selected">Select</option>
    </optgroup>
    <optgroup >
       <option value="Novel_transcript" >Novel transcript</option>
       <option value="Known_transcript" >Known transcript</option>
       <option value="mytranscript" >My transcript</option>
        <option value="stranscript" >Sort transcript</option>
        <option value="atranscript" >Another transcript</option>
        <option value="Both_transcript" >Both known transcript</option>
      </optgroup>  
</select>

Thank you

Vivek

I am using the plugin

http://www.quasipartikel.at/multiselect/

for multiselect. It works fine for one to one multiselect.

My requirement is to have one to many multiselect. I can choose the selection and store it. something like this. Basically grouping the value.



Or is there any other plugin to do this.

Thank you.

Regards

Vivek

Hi ,

I am loading my pages from the link through load function. The page content is loading fine. The

problem is when the session expires the Login page is loading in the middle div. which is inside the

template. How to load the login page to the parent div.

I am loading the page using

$("DIV_ID").load("page");

Hi ,

I am loading my pages from the link through load

function. The page content is loading fine. The content page has only the content. The required JS files are in the template file.

My problem is when I right click the link and open in new window its loading only the content page.

How to render the whole template in this senario. Pl. help to solve this issue.

I am loading the page using

$("DIV_ID").load("page_filename");

Regards

Vivek

Hi

I am using jquery.validate.js for validating the forms.

The issue now is I have a dropdown list with values. Say a dropdown has the values 'One', 'two', 'Three', 'Four','Five'.

If the value is 'Three' OR 'Four' . The next 2 input fields are required. Else those are not required. The value will be seperated with optgroups.

I tried with different options but I couldnt find the solution. How to validate this?

Example
<select id="num" name="num">
<option value='1'>One</option>
<option value='2'>Two</option>   
<option value='3'>Three</option>
<option value='4'>Four</option>
<option value='5'>Five</option>         
</select>

<input type="file" name="calc1" id="calc1" />
<input type="file" name="calc2" id="calc2" />

Hi,

I need to validate a multiple select with its value .

For Example in the below multiple select I can select 2 or more options from apple. If I select apple, I should not select orange. Either 1 I can select not the both. How to validate this using jquery.

<select id="fruit" name="fruit" multiple='multiple' size="5">
<option selected="selected" >Apple_small1</option>
<option>Apple_small2</option>
<option >Apple_big1</option>
<option >Orange_big1</option> <option >Orange_small1</option>  
</select>

How to reset an input field to its default value, which is depend on another. There is a way to clear the input field but not resetting to its default value.

Example

I have 2 radio buttons. Depends of the radio button selection some other input fields are required. Those things are already done using the click function. It clears the input field. But I need to reset to its default value. Pl. help me to do this.

<input type="radio" name="radiogroup" id="radio1" value="1"  /><label for="radio1"> Radio 1 </label>
<input type="radio" name="radiogroup" id="radio2" value="2"  /><label for="radio1"> Radio2 </label>

<input type="text" name="inputfield1" id="inputfield1" value="123" />

<input type="text" name="inputfield2" id="inputfield2" value="abc" />

<input type="text" name="inputfield3" id="inputfield3" value="cde" />

         $("#radio1").click(function() {
           $("#inputfield1").valid();
           $("#inputfield2").val('');
           $("#inputfield").val('');
         });

I am using jquery validate js for my validation. I need to validate and pass the value for the below senario.

I am having a dropdown box which has 2 option. Option 1 and Option 2.

And I have few checkboxes with same name. Depending upon the dropdown selection it should show/hide some checkboxes. Using javascript and CSS these are working fine.

The problem I am having is with the Select All function. If I check Select All it checks the hidden field also. The requirement is to select only the fields which are visible not the hidden one. Please suggest me how to do this.

Example

<select name="selectoptions" id="selectoptions>
  <option> Select Item 1</option>
  <option> Select Item 2</option>
</select>


<ul class="ls_input">
  <li><input type="checkbox" name="region" id="an_region1" />Value 1</li>
  <li><input type="checkbox" name="region" id="an_region2" />Value 2</li>
  <li><input type="checkbox" name="region" id="an_region3" />Value 3</li>
  <li><input type="checkbox" name="region" id="an_region4" />Value 4</li>
  <li><input type="checkbox" name="region" id="an_regionAll" />Check All Values</li>
</ul>


Here Value 3 and value 4 are common. If I select option Select Item 1 Value 1 will show and value 2 will be hide. If I select all it should not select value 2. As the name is common its selecting that also. It should not select value 2. This is the requirement

I am loading the pages in a div. Without reloading the page the content is loading into the page by using the below method.

Script
      $(document).ready(function(){
        $('a.menu_links').click(function(e) {
           e.preventDefault();  // This line prevents the anchor from redirecting.
           $("#content").load($(this).attr('href'));
        });
      });

Menu
 <li><a class="menu_links" href="newproject.html">New Project</a></li>
              <li><a class="menu_links" href="accord.html">Accordion</a></li>
              <li><a class="menu_links" href="project_summary.html">Summary Table</a></li>
              <li><a class="menu_links" href="detail_report.html">Detail Report</a></li>
              <li><a class="menu_links" href="upload_data.html">Upload Data</a></li>

Target Div
<div id="content"></div>

It works fine. The problem now is when I refresh the page or use the browser back button Its not working as expected. I understand that the URL didn't get change according the content loads.

My Question is how to use the ID for the link and use it for the navigation. Pl. let me know how to solve this issue.

Hi

I am using jquery.form.js for submitting the form. I am using ajaxSubmit() to submit the form and load the response in one div ID as target. and I am loading some content according to success or failure. Here my question is, is there any way to set the target according to success or failure. If success set this ID as target and if it is failure set another ID as target.

sample code I am using
 submitHandler: function(form){
            $(form).ajaxSubmit({
              target: '#content',
              success: function() {              
                $("#tree_browser").load("tree_browse.html");
              } ,
              error: function() {              
                $("#tree_browser").load("tree_menu.html");
              }  
           
            });            
          }

If it

Hi

I am using jquery.validate.js. I am having 2 input fields. The condition is the second input value should not be less than first input value. The second condition is the first input value should not be greater than 2nd value. I tried with different options but it didnt work. Is there any jquery function for this validation? Or pl. help to figure it out.

Hi

I am having 2 input fields. Both will have only the integer values. Its a minimum and maximum values. The condition is The minimum value of the 2nd input field should be greater than 1st input field. and 1st input field value should be minimum than 2nd input field. For that I tried with

Jquery Script

 $('document').ready(function(){
      
        $('#project_form1').validate({
          rules: {
            minfield: {
              required:true,
              integer: true,
              min:0,
              max:$("#maxfield").val(),
            },
            maxfield:{
              required:true,
              integer: true,
              min:$("#minfield").val(),
              max:10
            },
          },
         
        })
      });

HTML script
<form name="project_form1" id="project_form1" method="post" action="submit.php" >
<div><input name="minfield" type="text" id="minfield" /></div>
<div><input name="maxfield" type="text" id="maxfield" /></div>
<div><input name="submit" type="submit" id="submit"/></div>
</form>

But its not working properly. Pl. let me know how to validate this.

Hi,

How to add an ID to dynamically created input field. Type of serial Input field its possible to add, but If I insert any input field in the middle is the problem for me.

Add/Delete of the input field is happening like this http://jsfiddle.net/TfSYz/5/

How to add the ID for the input field

Hi,

I am trying to create a form which should have the feature of add/delete. It should be exactly same as the below image. Its done. My query here is to add the ID for the input field.



Some how I achieve this but how to Add the ID and name for the input field. Working example is http://jsfiddle.net/TfSYz/5/

How to add the ID for the input field.