Solved

Convert Javascript to jQuery

Posted on 2016-07-22
9
76 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
Comment Utility
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
Comment Utility
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 51

Expert Comment

by:Julian Hansen
Comment Utility
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
 
LVL 25

Author Comment

by:Lee Savidge
Comment Utility
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
What Security Threats Are You Missing?

Enhance your security with threat intelligence from the web. Get trending threat insights on hackers, exploits, and suspicious IP addresses delivered to your inbox with our free Cyber Daily.

 
LVL 25

Assisted Solution

by:Lee Savidge
Lee Savidge earned 0 total points
Comment Utility
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 33

Assisted Solution

by:Slick812
Slick812 earned 100 total points
Comment Utility
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
Comment Utility
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
Comment Utility
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
Comment Utility
All these got me where I needed to be. Thanks for the help.
0

Featured Post

Highfive + Dolby Voice = No More Audio Complaints!

Poor audio quality is one of the top reasons people don’t use video conferencing. Get the crispest, clearest audio powered by Dolby Voice in every meeting. Highfive and Dolby Voice deliver the best video conferencing and audio experience for every meeting and every room.

Join & Write a Comment

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…
This article demonstrates how to create a simple responsive confirmation dialog with Ok and Cancel buttons using HTML, CSS, jQuery and Promises
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)
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…

762 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

Need Help in Real-Time?

Connect with top rated Experts

11 Experts available now in Live!

Get 1:1 Help Now