Welcome to Experts Exchange

Add your voice to the tech community where 5M+ people, just like you, are talking about what matters.

  • Help others & share knowledge
  • Earn cash & points
  • Learn & ask questions
Solved

Convert Javascript to jQuery

Posted on 2016-07-22
9
130 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 100 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 55

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
Resolve Critical IT Incidents Fast

If your data, services or processes become compromised, your organization can suffer damage in just minutes and how fast you communicate during a major IT incident is everything. Learn how to immediately identify incidents & best practices to resolve them quickly and effectively.

 
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 100 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 200 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 100 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

Master Your Team's Linux and Cloud Stack!

The average business loses $13.5M per year to ineffective training (per 1,000 employees). Keep ahead of the competition and combine in-person quality with online cost and flexibility by training with Linux Academy.

Question has a verified solution.

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

Suggested Solutions

Introduction Got endorsements from your clients?  Great!  There is almost nothing better than word-of-mouth advertising.  But how can you do that on the internet?  Sure you can make a page for endorsement quotations and list them all, but who is …
Nothing in an HTTP request can be trusted, including HTTP headers and form data.  A form token is a tool that can be used to guard against request forgeries (CSRF).  This article shows an improved approach to form tokens, making it more difficult to…
The viewer will learn how to dynamically set the form action using jQuery.
The viewer will learn the basics of jQuery, including how to invoke it on a web page. 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.: (CODE)

791 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