jQuery Forum

slideToggle() : problem with toggle state
[8Replies]
- 18-Jan-2013 08:18 AM
- Forum: Using jQuery
Hi,
I want to just replace text in <span> on another div's slideToggle(), I have written some code which I expect to execute, but it's not working.
In slideToggle() function I am getting false from is(:hidden) on both the State of slideToggle

Following is my html code:
1. <div style="width:77%; float:left;">
2. <span id="addareas" class="OtherLinkStyle" style="font-size:14px;">
3. Show apartment area details
4. </span>
5. </div>
  <div class="RoundPanel" style="float:left; width:77%;margin: 5px 0 0 0;position:relative;display:none;">
6. <div id="ApartmentAreaDetails" style="width: 99%; float: left; padding-left: 10px;">
7. //some content here
8.       </div>
        <div style="display:none; position:absolute; bottom:5px; right:5px;" class="btnsave">
              <input type="submit" value="Save" name="btnSave" class="linkSave"/>
              <input type="submit" value="Cancel" name="btnCancel" class="linkCancel"/>
        </div>
  </div>
and following is my jquery code:
1. $('#addareas').click(function () {
              $(this).parent().next(".RoundPanel").slideToggle('fast');
              if ($(this).parent().next(".RoundPanel").is(":hidden") == true) {
                  $(this).html('Show apartments area details');
              }
              else {
                  $(this).html('Hide apartments area details');
              }
          });
Is I am doing anything wrong or missing anything here?

Autocomplete multiple values remote, strictly select/enter from suggested value
[2Replies]
- 18-Jan-2013 07:45 AM
- Forum: Using jQuery UI
Hi,
I am using Autocomplete, with multiple values, remote.
It's working fine for me, but now I want to add one change in it.
The change is: I want to add condition that, user must select/enter value from suggested values in autocomplete.

e.g. Suppose my autocomplete suggesting following values on typing letter A :
      A003
      A004
      A005
Now user must select value from these suggested things, and if he enters wrong input (like A321 in above case), then, I would like to prompt user for correct input.

Can any one suggest what I need to do for this?

Thank you,
Bhushan

json calls used in autocompletion is not working
[3Replies]
- 04-Oct-2012 10:16 AM
- Forum: Using jQuery UI
I have return some functions for autocompletion, which makes json calls to server. But json calls are not executing from some functions.

Below I am giving two functions, the 1st one is working fine and facing problem with 2nd functions
(Note: Both functions are kept in external js file. And I am using these functions in MVC3 application)

1st function: (working fine)
1. $("#@txtTag").autocomplete({
              source: function (request, response) {
                  $.ajax({
                      url: "Tagging/AutocompleteSuggestions",
                      type: "POST",
                      dataType: "json",
                      contentType: 'application/json; charset=utf-8',
                      data:
                      JSON.stringify({
                          term: extractLast(request.term),
                          entityId: "@ViewBag.EntityId",
                          entityType: "@ViewBag.EntityType"
                      }),
                      success: function (data) {
                          response($.map(data, function (item) {
                              return { label: item.Tag, value: item.Tag }
                          }
                      ))
                      }
                  })
              },
              minLength: 1,
              focus: function (event, ui) {
                  $("#@txtTag").val(ui.item.label);
                  return false;
              },
              search: function () {
                  var term = extractLast(this.value);
                  if (term.length < 1) {
                      return false;
                  }
              },
              focus: function () {
                  return false;
              },
              select: function (event, ui) {
                  var terms = split(this.value);
                  terms.pop();
                  terms.push(ui.item.value);
                  terms.push("");
                  this.value = terms.join(", ");
                  return false;
              }
          });
2nd function: (not working)
1. $(function () {
      $("#ReportsTo_FullName").autocomplete({
          source: function (request, response) {
              $.ajax({
                  url: 'Employee/AutocompleteSuggestions',
                  type: "POST",
                  dataType: "json",
                  contentType: 'application/json; charset=utf-8',
                  data:JSON.stringify({
                          term: request.term,
                          moduleName: "Employee"
                      }),
                  success: function (data) {
                      response($.map(data, function (item) {
                          return { label: item.FullName, value: item.Id }
                      }
                      ))
                  },
                  error: function (xhr, ajaxOptions, thrownError) { alert(thrownError); }
              })
          },
          minLength: 1,
          focus: function (event, ui) {
              $("#ReportsTo_FullName").val(ui.item.label);
              return false;
          },
          select: function (event, ui) {
              if (ui.item) {
                  $("#ReportsTo_FullName").css('border', '');
                  $("#ReportsTo_FullName").val(ui.item.label);
                  $("#ReportsToId").val(ui.item.value);
                  return false;
              }
          },
          change: function (event, ui) {
              if (ui.item == null) {
                  $("#ReportsTo_FullName").css({ 'border': '1px solid #ff0000' });
                  $("#ReportsToId").val(null);
              }
          }
      });
please ignore the variable/id names like #@txtTag, since I am using it with MVC3 application

What is the problem?

Thank you.

How to pass parameters to jquery functions kept in external file?
[2Replies]
- 02-Oct-2012 05:37 AM
- Forum: Using jQuery
Hi,
I want to pass some values to jquery function, which kept in external file.
Can we pass values to such external functions? and how?

Thank you.

Click event gets fired multiple times
[4Replies]
- 25-Sep-2012 06:13 AM
- Forum: Using jQuery
Hi,
I have following htnl code
2. <div id="divTag1">
3. <div class="singletagblock" >
4. <a href="/Tagging/BrowseTag" id="tagname">tag for details page</a>
5. <a href="" class="removetag" id="removeTag1"></a>
6. </div>
8. <div id="addtag1" style="display:inline-block">
9. <a href="#" >+Add tag</a></div>
11. <div id="divAddTagBox1">
12. <input id="txtTag1" name="tags" type="text" value="" />
13. <input type="button" value="Add" id="btnAddTag1"/>
14. <input type="button" value="Cancel" id="btnCancelTag1" />
15. </div>
17. </div>
and following is jquery to do some server side stuff
2. $(".removetag").click(function (event) {
4. var tagtext = $(this).prev().attr('text');
5. var parentdiv = $(this).parent();
6. alert(tagtext);
8. $.ajax({
9. url: "/Tagging/RemoveTag",
10. datatype: "json",
11. type: "POST",
12. data: { "tag": tagtext,
13. "entityId": "1",
14. "entityType": "2"
15. },
16. success: function () {
17. parentdiv.remove();
18. },
19. error: function (xhr, ajaxOptions, thrownError) {
20. alert(thrownError);
21. }
22. });
24. return false;
25. });
I used above html code multiple times on single page.
Now when I click on .removetag link the click event gets fired multiple times for all the links with class removetag. How to prevent this?

Thanks

How to use single jquery function for a control that used multiple times on page?
[4Replies]
- 24-Sep-2012 01:00 AM
- Forum: Using jQuery
Hi,
I have created a control (user control), which contains one hyperlink and one input textbox with two buttons.
And I have written following code to hide and show text box onclick of hyperlink. It works fine when I use single controls on page.
1. $(function () {
           $('div#divAddTag').add().css("display", "none");
       });
  
       $("a#addtag").click(function (event) {
           $('div#divAddTag'). add().css("display", "inline-block");
           $(this).add().css("display", "none");
       });
Now I want to use this control multiple times on page, but it acts correctly only for 1st control on page.

(Question will be How to use single jquery for user controls, that we use multiple times on page?)

Response title

Attachments

jQuery Forum

Activity Trend