Solved

Convert Javascript to jQuery

Posted on 2016-07-22
9
155 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
[X]
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
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 57

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
Major Incident Management Communications

Major incidents and IT service outages cost companies millions. Often the solution to minimizing damage is automated communication. Find out more in our Major Incident Management Communications infographic.

 
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

Space-Age Communications Transitions to DevOps

ViaSat, a global provider of satellite and wireless communications, securely connects businesses, governments, and organizations to the Internet. Learn how ViaSat’s Network Solutions Engineer, drove the transition from a traditional network support to a DevOps-centric model.

Question has a verified solution.

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

Suggested Solutions

Requirements JQuery 1.6+ HTML CSS Introduction This article was inspired by an EE question (http://www.experts-exchange.com/Programming/Languages/Scripting/JavaScript/Q_28372511.html) on how to make a page show some balloons animate up a page…
There are a couple ways to attach a JavaScript function to dynamically created elements. You can make a new script for each element as it’s created or you can use delegation. Delegation allows a single script that is added at page creation to mat…
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…

734 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