Click here to Skip to main content
15,894,180 members
Please Sign up or sign in to vote.
2.00/5 (1 vote)
See more:
I have a menu in html, clicking on the different items will trigger some javascript code to unhide the respective 'div'.

XML
<section>
<ul class="link-list" id="menu">
  <li><a href="addProduct" rel="addProduct">Add New Product</a></li>
  <li><a href="modifyProduct" rel="modifyProduct">Modify Products</a></li>
  <li><a href="removeProduct" rel="removeProduct">Remove Product</a></li>
</ul>
</section>


JavaScript:
C#
$(document).ready(function(){
      $('#menu a').click(function(){
        $('.content').hide();
        handleNewSelection.apply($("#menu"));
        $('#'+this.rel+'').show();
      return false;
      });
      $('.content input.close').click(function(){
        $(this).parent().hide();
      });
    });

    hideAllDivs = function () {
      $("#addProduct").hide();
      $("#modifyProduct").hide();
      $("#removeProduct").hide();
    };

    handleNewSelection = function () {
      hideAllDivs();
    };

    $(document).ready(function() {
      handleNewSelection.apply($("#menu"));
    });


C#
function getDetails(){
    var productCode = document.getElementById('productCode').value;

  $.ajax({ type: "POST",
      url: './produceProductImage.php',
      data: 'productCode='+productCode,
      success : function(data) {
        $("#productImageName").html(data);
    }
    });

  var geturl = "_getXML.php?productCode="+productCode ;

  downloadUrl(geturl, function(data) {
    var xml = data.responseXML;
    var markers = xml.documentElement.getElementsByTagName("marker");
    for (var i = 0; i < markers.length; i++) {
      var productName = markers[i].getAttribute("productName");
    var productDescription = markers[i].getAttribute("productDescription");
    var productPrice = markers[i].getAttribute("productPrice");
      var category = markers[i].getAttribute("category");
    var active = markers[i].getAttribute("active");
    var featured = markers[i].getAttribute("featured");

    document.getElementById("productName").value=productName;
    document.getElementById("productDescription").value=productDescription;
    document.getElementById("productPrice").value=productPrice;
    document.getElementById("category").value=category;
    if (active === "1") {
      document.getElementById("active").value='Yes';
      } else { document.getElementById("active").value='No'; }
    if (featured === "1") {
      document.getElementById("featured").value='Yes';
      } else { document.getElementById("featured").value='No'; }
    }
  });
}

  function downloadUrl(url, callback) {
      var request = window.ActiveXObject ?
        new ActiveXObject('Microsoft.XMLHTTP') :
        new XMLHttpRequest;

      request.onreadystatechange = function() {
      if (request.readyState == 4) {
        request.onreadystatechange = doNothing;
        callback(request, request.status);
      }
      };

      request.open('GET', url, true);
      request.send(null);
    }

    function doNothing() {}


My Problem is that for RemoveProduct and ModifyProduct I am using same textbox id's names and when referring to a textbox by its id I am not getting the proper results. Is there a way how can I make this work while still using the same javascript funtion getDetails().
Posted
Comments
Kornfeld Eliyahu Peter 20-Jan-14 14:28pm    
Yo say that this line
var productCode = document.getElementById('productCode').value;
does not behave as expected?
In which way?
datt265 20-Jan-14 14:37pm    
This is a scenario of what I have:

Practically the 'add product' works perfectly as I have a form fill it and database gets updated.
The problem arises when I select the 'remove' and 'modify'.

These two work like this:

In the dropdown 'productCode' I select the product I want, some quering takes place and I get other textboxes filled, such as details,price, etc. This is similar in both cases to 'modify' and 'remove' a product.

I know why I have the problem that javascripts populates only the first div and this is because lets say textbox 'productPrice' in div 'removeProduct' and div 'modifyProduct' has same id, and I know that you cannot have same id's, what I want to know is how I can get a way to do it.

1 solution

You did not provide enough information to help you, because you only show one case of the id attribute in all your code. I cannot see the elements with the attribute values "productName", "productDescription" and all other. So, what can help you?
  • You need to make sure that the id attribute values should be unique in the Web page. If you say that you use the same id's for the text boxes, those text boxes could be reused, but you cannot have different text boxes with the same id. If you break the uniqueness, the results could be unpredictable.
  • One convenient way of using id would be jQuery ID selector: http://api.jquery.com/id-selector/[^].
    There are many other convenient jQuery features you can benefit from.


—SA
 
Share this answer
 
Comments
datt265 20-Jan-14 14:38pm    
[Code removed — SA]
datt265 20-Jan-14 14:41pm    
[Code removed — SA]
datt265 20-Jan-14 14:48pm    
[Code removed — SA]
Sergey Alexandrovich Kryukov 20-Jan-14 15:49pm    
Why would you put code it comment? it makes it not really readable. Please, use "Improve question" instead.
—SA

This content, along with any associated source code and files, is licensed under The Code Project Open License (CPOL)



CodeProject, 20 Bay Street, 11th Floor Toronto, Ontario, Canada M5J 2N8 +1 (416) 849-8900