SitePoint Sponsor

User Tag List

Results 1 to 10 of 10
  1. #1
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)

    Convert simple function from jQuery to pure JavaScript

    Hi all,

    I have a very simple jQuery function which I need converting into pure JavaScript (as jQuery isn't available).

    I am taking the contents of a <strong> tag and squirting it into the value of a hidden form field in an iframe (the iframe is from a different domain if that affects the solution)

    Code JavaScript:
    $(document).ready(function(){
    	$('#21016619031340').load(function(){
    		$(this.contentDocument).find('#input_4').val($('#content .group p:first-child strong').html())
    	});
    });

    Could someone help me please?

    Many thanks
    Mike

  2. #2
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    Could someone help me please?
    Well untested, that would involve putting something like this scripting code at the end of the body, just before the </body> tag.

    Code javascript:
    document.getElementById('21016619031340').onload = function () {
        var text = document.querySelector('#content .group p:first-child strong').innerHTML;
        this.contentDocument.getElementById('input_4').value = text;
    };
    Last edited by paul_wilkins; Apr 20, 2012 at 02:49.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  3. #3
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks!

    I got this error...

    Uncaught TypeError: Property 'onload' of object #<HTMLIFrameElement> is not a function (anonymous function)

    Any ideas?

  4. #4
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by mikeebee8 View Post
    Thanks!

    I got this error...

    Uncaught TypeError: Property 'onload' of object #<HTMLIFrameElement> is not a function (anonymous function)

    Any ideas?
    Yes, it should be an assignment made to onload instead, such as:

    Code javascript:
    document.getElementById('21016619031340').onload = function () {
        ...
    };

    The original code is now updated to reflect that.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  5. #5
    SitePoint Addict
    Join Date
    May 2006
    Posts
    250
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Perfect! Thanks so much

  6. #6
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Hi Paul. I'm also looking for help to convert a jQuery function to pure JavaScript. Here is the jQuery. It's for use on a SharePoint Web Part Page. Apparently it works. I'd like to use pure JavaScript if possible rather than load the jQuery library. Thanks.

    jQuery(document).ready(function () {

    $('a').filter("[href='###']").each(function () {
    $(this).replaceWith($(this).html());
    });

    });

  7. #7
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dugutigi View Post
    Hi Paul. I'm also looking for help to convert a jQuery function to pure JavaScript. Here is the jQuery. It's for use on a SharePoint Web Part Page. Apparently it works. I'd like to use pure JavaScript if possible rather than load the jQuery library. Thanks.

    jQuery(document).ready(function () {

    $('a').filter("[href='###']").each(function () {
    $(this).replaceWith($(this).html());
    });

    });
    So A link of ### results in the link being unlinked. Okay.

    The following should do the job:

    Code javascript:
    var linksToUnlink = document.querySelectorAll('[href="###"]'),
        i;
    for (i = 0; i < linksToUnlink.length; i += 1) {
        linksToUnlink[i].outerHTML = linksToUnlink[i].innerHTML;
    };

    If you want to do something fancier, you can convert the nodeList of links in to an array, and use forEach on them.

    Code javascript:
    var linksToUnlink = document.querySelectorAll('[href="###"]');
     
    linksToUnlink = Array.prototype.slice.call(linksToUnlink, 0);
    linksToUnlink.forEach(function (link) {
        link.outerHTML = link.innerHTML;
    });

    But that's introducing another complication, so I prefer to instead use the Array's forEach method directly on the nodeList itself

    Code javascript:
    var linksToUnlink = document.querySelectorAll('[href="###"]');
    Aray.prototype.forEach.call(linksToUnlink, function (link) {
        link.outerHTML = link.innerHTML;
    });
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  8. #8
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Paul ... thanks so much. I tried example #1 and #3 and they would load. In example #1, I changed the comma at the end of the first line to a semicolon. Do you see any other errors?

    In example #3, I corrected the word Array on the 2nd line, but it would not load either. Unfortunately, SharePoint doesn't provide any error messages for the JavaScript. Any further ideas? Thank you so much for taking a stab at it.

  9. #9
    Unobtrusively zen silver trophybronze trophy
    paul_wilkins's Avatar
    Join Date
    Jan 2007
    Location
    Christchurch, New Zealand
    Posts
    14,684
    Mentioned
    99 Post(s)
    Tagged
    4 Thread(s)
    Quote Originally Posted by dugutigi View Post
    Paul ... thanks so much. I tried example #1 and #3 and they would load. In example #1, I changed the comma at the end of the first line to a semicolon. Do you see any other errors?
    That is not an error. The following lines of code do the same job.

    Code javascript:
    var linksToUnlink = document.querySelectorAll('[href="###"]');
    var i;

    Code javascript:
    var linksToUnlink = document.querySelectorAll('[href="###"]'),
        i;


    The second sample of code has a larger benefit in that it doesn't give the impression that multiple variable statements are okay, and serves to reinforce that variables should be declared in the one place from the start of function or the code.

    Quote Originally Posted by dugutigi View Post
    In example #3, I corrected the word Array on the 2nd line, but it would not load either.
    JavaScript has several pre-defined global objects, some that you may recognise and some that you don't seem to recognise as of yet.
    These pre-defined global objects are: Array, Boolean, Date, Function, Iterator, Number, Object, RegExp, String

    Quote Originally Posted by dugutigi View Post
    Unfortunately, SharePoint doesn't provide any error messages for the JavaScript. Any further ideas? Thank you so much for taking a stab at it.
    I hope that you at some stage learn how to control SharePoint as well.
    Programming Group Advisor
    Reference: JavaScript, Quirksmode Validate: HTML Validation, JSLint
    Car is to Carpet as Java is to JavaScript

  10. #10
    SitePoint Member
    Join Date
    Oct 2012
    Posts
    3
    Mentioned
    0 Post(s)
    Tagged
    0 Thread(s)
    Thanks Paul.


Bookmarks

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •