Go Premium for a chance to win a PS4. Enter to Win

x
?
Solved

Convert Javascript to jQuery

Posted on 2016-07-22
9
Medium Priority
?
217 Views
Last Modified: 2016-07-25
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
Comment
Question by:Lee Savidge
9 Comments
 
LVL 35

Assisted Solution

by:YZlat
YZlat earned 400 total points
ID: 41724647
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
 
LVL 25

Author Comment

by:Lee Savidge
ID: 41724712
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
 
LVL 60

Expert Comment

by:Julian Hansen
ID: 41724770
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
Concerto Cloud for Software Providers & ISVs

Can Concerto Cloud Services help you focus on evolving your application offerings, while delivering the best cloud experience to your customers? From DevOps to revenue models and customer support, the answer is yes!

Learn how Concerto can help you.

 
LVL 25

Author Comment

by:Lee Savidge
ID: 41724785
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
 
LVL 25

Assisted Solution

by:Lee Savidge
Lee Savidge earned 0 total points
ID: 41724945
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
 
LVL 34

Assisted Solution

by:Slick812
Slick812 earned 400 total points
ID: 41724996
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
 
LVL 49

Accepted Solution

by:
Roonaan earned 800 total points
ID: 41725597
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
 
LVL 75

Assisted Solution

by:Michel Plungjan
Michel Plungjan earned 400 total points
ID: 41725981
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
 
LVL 25

Author Closing Comment

by:Lee Savidge
ID: 41727528
All these got me where I needed to be. Thanks for the help.
0

Featured Post

Industry Leaders: We Want Your Opinion!

We value your feedback.

Take our survey and automatically be enter to win anyone of the following:
Yeti Cooler, Amazon eGift Card, and Movie eGift Card!

Question has a verified solution.

If you are experiencing a similar issue, please ask a related question

PROBLEM: The other day I was working on adding an ajax request to a webpage that already had a dialog box on the page.  The dialog box was using relative positioning to be positioned next to a form field I had on the page.  Everything was working…
This article discusses how to implement server side field validation and display customized error messages to the client.
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery including how to code hide show and toggles. Reference your jQuery libraries: (CODE) Include your new external js/jQuery file: (CODE) Write your first lines of code to setup your site for jQuery…
Suggested Courses

824 members asked questions and received personalized solutions in the past 7 days.

Join the community of 500,000 technology professionals and ask your questions.

Join & Ask a Question