7

I use jQUery UI Position plugin: http://jqueryui.com/position/ to position my icons on a web page. The selectors are grabbed from the database and outputted to JS using PHP in a $myselector variable. This is my current code:

var element_selector='<?php echo $myselector;?>';

$('#inline_docxdiv .Featured.Slider').position({
my: "center",
at: "right top",
of: $(element_selector)

});

//append icons,applicable to all

$(divname<?php echo $uniqueid;?>).append('<div id="inline_docxdiv" class="<?php echo $uniqueid;?>"><div id="helpericons_display"><a class="<?php echo $title_toolsetdisplayed;?>" id="questionmarkicon_inlinedoc" title="Display Explanation"><img src="<?php echo $helper_iconpng;?>"></a><a target="_blank" href="<?php echo admin_url().'post.php?post='.$id_toolsetdisplayed.'&action=edit';?>" class="<?php echo $title_toolsetdisplayed;?>" id="sourceicon_inlinedoc" title="View source"><img src="<?php echo $helpersource_iconpng;?>"></a></div></div>');

However the icons are not appended correctly and it returns an error in the console:

Uncaught TypeError: Cannot read property 'nodeType' of undefined

The strange thing is that if I hard-code the selector in the JS code (not outputted by PHP), everything works OK and no error returned in the console. This is the code where I hard-coded the element selector:

var element_selector='.idoc-featured-slider';

Is there a way to use PHP to output the selector and not encountering the error? Thanks for any help.

2
  • 1
    Show us what's the output of <?php echo $myselector; ?>
    – Ast Derek
    Jul 7, 2013 at 22:18
  • You need to make sure that all jquery selectors are string, meaning they all are enclosed between quotation marks. So go ahead and check what's the output for your $myselector variable.
    – leopinzon
    Jul 6, 2020 at 19:27

5 Answers 5

16

I ran into a similar issue. I was getting the following error:

Uncaught TypeError: Cannot read property 'nodeType' of undefined

With these dialog position configuration values:

position: {my: "center", at: "left top", of: "window"}

Per the jQuery UI documentation, the value of the "of" property is an object rather than a string. So, when I changed the position values to the following:

position: {my: "center", at: "left top", of: window}

the error disappeared.

2
  • 1
    Your answer was of great help to solve my problem. In my case, my of wasn't set to "window" but to an id of a non-existent element.
    – Pere
    Apr 8, 2016 at 12:15
  • But if you follow the documentation link pointed to - and follow the link with more details, it says the of arg can be a selector (ie a string) or an object. I can appreciate in the case of 'window' this could be a problem, but I just point out that being a string cannot be the root case because it could be a selector string - api.jqueryui.com/position
    – PandaWood
    Aug 4, 2016 at 1:43
3

The problem is due to the of:$() not working if the object/selector is not valid.

0

Please check in your code if any tags is not closed or not. I tried the same and it worked correctly. Apparently , I had an extra tag

0
0

Normally this Kind of error happen while you don't apply Properties of methods like prop() E.g:$(#"id").prop().if you don't specified its properties than also this error occur.

2
  • @msqar according to the docs. prop() expects a propertyName that is of type String You can find more about it here
    – Diego
    Aug 17, 2018 at 21:50
  • in my case the issue was that the .position(...) code was executed before the properties of the referred elements were calculated by the browser, solution was to put <script> after the element tags
    – geri
    Dec 22, 2018 at 16:00
0

In my case i just changed the following in my and the error [DataTables warning: table id=bootstrap-data-table2 - Requested unknown parameter '0' for row 0. For more information about this error, please see http://datatables.net/tn/4] was gone:

From:

                                    [enter image description here][1] <tbody>
                                            @foreach (var item in Model.HRMS_Tbl_ExpenseClaimModelList)
                                            {

                                                <tr>
                                                    @if (item.Approved == "1")
                                                    {
                                                        <td>@item.Date</td>
                                                        <td>@item.Date</td>
                                                        <td>@item.Type</td>
                                                        <td>@item.Amount</td>
                                                                               }
                                                </tr>

                                            }
                                        </tbody>


                        TO:


                                         <tbody>
                                            @foreach (var item in Model.HRMS_Tbl_ExpenseClaimModelList)
                                            {
                                              if (item.Approved == "1")
                                                    {
                                                <tr>

                                                        <td>@item.Date</td>
                                                        <td>@item.Date</td>
                                                        <td>@item.Type</td>
                                                        <td>@item.Amount</td>

                                                </tr>
                                                    }
                                            }
                                        </tbody>                            

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.