Improve company productivity with a Business Account.Sign Up

x
  • Status: Solved
  • Priority: Medium
  • Security: Public
  • Views: 254
  • Last Modified:

Convert Javascript to jQuery

Hi,

I'm used to writing javascript and I've got 2 functions that are fine in IE but in Chrome they don't work.

<script>
function makeURL()
{
  var oCB;
  document.getElementById('hdnAction').value = '';
  
  for (x = 0; x < document.getElementsByTagName('input').length; x++)
  {
    if (document.getElementsByTagName('input').item(x).type == 'checkbox')
    {
      oCB = document.getElementsByTagName('input').item(x);

      if(oCB.checked)
      {
        document.getElementById('hdnAction').value+='&' + oCB.name + '=1';
      }
    }
  }
}

function updateURL()
{
  if(parseInt(0+document.getElementById('cmli_comm_personid').value) > 0)
  {
    document.getElementById('hdnAction').value += '&pers_personid=' + document.getElementById('cmli_comm_personid').value;
  }

  document.getElementById('btnAssign1').href = 'EMList/EMList.asp' + document.getElementById('hdnAction').value + '&EMTarget=A';
  document.getElementById('btnAssign2').href = 'EMList/EMList.asp' + document.getElementById('hdnAction').value + '&EMTarget=A';
  document.getElementById('btnDelete1').href = 'EMList/EMList.asp' + document.getElementById('hdnAction').value + '&EMTarget=D';
  document.getElementById('btnDelete2').href = 'EMList/EMList.asp' + document.getElementById('hdnAction').value + '&EMTarget=D';
  document.forms['EntryForm'].HIDDENSCROLLMODE.value=2;
  document.forms['EntryForm'].HIDDENSCROLLMODE_MyGrid.value=2;
  document.EntryForm.submit();
}
</script>

Open in new window


The first function stores the values of a series of checkboxes into a hidden form field, so that when any one of them gets checked, it runs and finds out which are checked and stores them in the hidden field.

The second function is called when abutton is pressed on the screen. When the button is pressed, it rebuilds the button target URL and appends the hidden field to it so that the checked boxes get passed on the query string. There are reasons for doing things this way which I won't go into now. What I need is to convert these to use jQuery syntax so that this works cross browser. I don't know jQuery at all so if anyone could help, and by help I don't mean send me to the jQuery api help files, I mean assist in the conversion, I would be very happy and grateful.
0
Lee Savidge
Asked:
Lee Savidge
5 Solutions
 
YZlatCommented:
something like this

function makeURL()
{
	$('#hdnAction').value="";
  
  	$("input[type=checkbox]").each(function() {
        	if(this.checked)
      		{
        		$('#hdnAction').value+='&' + this.name + '=1';
      		}
        });
}

function updateURL()
{
  if(parseInt(0+$('#cmli_comm_personid').value) > 0)
  {
    $('#hdnAction').value += '&pers_personid=' + $('#cmli_comm_personid').value;
  }

  $('#btnAssign1').href = 'EMList/EMList.asp' + $('#hdnAction').value + '&EMTarget=A';
  $('#btnAssign2').href = 'EMList/EMList.asp' + $('#hdnAction').value + '&EMTarget=A';
  $('#btnDelete1').href = 'EMList/EMList.asp' + $('#hdnAction').value + '&EMTarget=D';
  $('#btnDelete2').href = 'EMList/EMList.asp' + $('#hdnAction').value + '&EMTarget=D';
  $("form:first").HIDDENSCROLLMODE.value=2;
  $("form:first").HIDDENSCROLLMODE_MyGrid.value=2;
  $("form:first").submit();
}

Open in new window

0
 
Lee SavidgeAuthor Commented:
I will try that. Thank you. Another suggestion would be maybe someone could tell me why the original doesn't work in Chrome? I can't figure that out at all.
0
 
Julian HansenCommented:
We would need to see the rest of your code to answer the Chrome question. Filling in the gaps and testing in Chrome does not seem to cause in any issues.
0
Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

 
Lee SavidgeAuthor Commented:
The problem is this code exists within the framework of Sage CRM so showing you the code which generates the HTML won't help and seeing the horrendous mess that Sage CRM generates as HTML probably won't help.

In my initial post, the first function works ok in Chrome. It is the second one that isn't working so there must be something about the syntax it doesn't like. I cut the updateURL function down so it just does an alert() and that works,so there must be something in the function that Chrome doesn't like.

I'm wondering if I should delete this question and ask a new one.
0
 
Lee SavidgeAuthor Commented:
OMG!

I found out why it wasn't working in Chrome. The fields I'm referencing, in particular:

document.getElementById('cmli_comm_personid')

It fails because the field ID is CmLi_Comm_PersonId rather than all lower case. If I correct the case, it works. Since when have attributes on HTML elements been case sensitive?
1
 
Slick812Commented:
I think that for several reasons the element ID is considered "unique", so the Chrome you use has a "Different" way of considering a "unique", as  being Case Sensitive, while the IE does not enforce that "unique". . Not sure at all when or the browsers that have a different view on "unique" in the ID, since I try and ALWAYS use the EXACT copy of the text used in the element ID string.
0
 
RoonaanCommented:
Hi,

Just a side note. Regardless of using vanilla JavaScript or jQuery it is better to not re-execute the same call all the time. Repeatedly calling getElementsByTagName is slightly unnecessary and can be easily replaced by using a local variable:

function makeURL()
{
  var oCB;
  var hiddenAction = document.getElementById('hdnAction');
  var inputElements = document.getElementsByTagName('input');  

  hiddenAction.value = '';
  
  for (x = 0, nrOfInputs = inputElements.length; x < nrOfInputs; x++) {
    oCB = inputElements.item(x);    
    if (oCB.type == 'checkbox' && oCB.checked) {
        hiddenAction.value+='&' + oCB.name + '=1';
    }
  }
}

Open in new window


A similar thing you would do in the jQuery example by making a local variable of $('#hdnAction').

And please if you take on the jQuery example, do not use the $('form:first') as your javaScript will be more likely to break. Currently you nicely reference the form by it's name, which is way less likely to break in case of upgrades of the CRM or general template changes than hoping it is always the first form in the page.

Best,

-r-
0
 
Michel PlungjanIT ExpertCommented:
Also IE will return you a named element when using document.getElementById("elementName") but other browsers will not try to look for a name if no ID is found
0
 
Lee SavidgeAuthor Commented:
All these got me where I needed to be. Thanks for the help.
0
Question has a verified solution.

Are you are experiencing a similar issue? Get a personalized answer when you ask a related question.

Have a better answer? Share it in a comment.

Join & Write a Comment

Featured Post

Upgrade your Question Security!

Your question, your audience. Choose who sees your identity—and your question—with question security.

Tackle projects and never again get stuck behind a technical roadblock.
Join Now