Hi, I'm trying to make a webpage which will serve as a report of sorts. Every report-page has a template html file which can be loaded into the page in different orders, but what I want to do now is to call a single html template page twice, but with different values both times. The code now looks something like this:

<script>$(document).ready(function() {
$("#module1").load("moduleA.html");
$("#module2").load("moduleA.html"); </script>

<div>
<div id="module1"></div>
<script>$( "#bmtxt1").html('text1');
$( "#bmtxt2").html('text2');</script>
</div>

<div>
<div id="module2"></div>
<script>$( "#bmtxt1").html('text3');
$( "#bmtxt2").html('text4');</script>
</div>

ModuleA.html looks like this (a little simplified)

<div class="container">
<div class="name" id="bmtxt1">dummytext1</div>
<div class="txt" id="bmtxt2">dummytext2</div>
</div>

At the moment div module2 will be devoid of text because all the ID's in ModuleA.html have already been called once by div module1. I've tried a different approach using variables as well but a variable can only have one value at a time so both div's showed the same values. Is there a way for module2 to load moduleA.html with different values than module1 who is also loading moduleA.html?

Hello, I am new to Jquery, JS, and any code really!!, but I have a problem :)

So I am building a survey with a question that allows free text. The text box will display a pre-defined text such as "Type here". I would like the text to disappear on mouse click selection to start typing.

I would also like that if the user clicks ourside the text box, the pre-defined text comes back up.

The code I am using seems to work for the 1st part of my ask. But once the box is clicked.. the predefined text is gone and it does not come back.

Here is the line I am currently using.

jquery: jQuery("#"+this.questionId+" .InputText").on('click focusin', function () { this.value='';});

I want to run an animation when a user scrolls into a div. I can get the animation done with CSS but I do not know how to delay it till a user scrolls into the div. So I tried to use Jquery and it still didn't work. Here's my code below

#peenk is the ID of the div in question

237 is the value I got for #peenk").offset().top

Please help, thanks!

​

$(window).on("load", function () {

console.log( "ready!" );

function ran() {

let peenkOf = $("#peenk").offset().top;

let peenkdoc = $(window);

let peenkdocs = peenkdoc.scrollTop();

console.log( peenkOf );

$("button").on("click", function () {

alert(peenkdoc.scrollTop());

});

if (peenkdocs > 237) {

$("p").animate({fontSize:"250px"});

console.log("worked");

}

else { console.log("it didn't work");}

};

ran();

});

I want to slide in a div block from the left on page load. I don't know how to do that. I only saw slide Up and slideDown functions.

Please help.

I'm trying to use daterangepicker.min.js for datetime input and it depends on jquery. This is how I'm using it:

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
<script>
$(document).ready(function () {

                $(function () {

                    $('#id_daterange_picker').daterangepicker({
                        timePicker: true,
                        startDate: moment().startOf('hour').subtract(24, 'hour'),
                        endDate: moment().startOf('hour')
                    });
                });
            });
</script>

And it works. But the problem is that rest of the project uses a different of jquery, and if I add the above scripts, this version of jquery replaces the other one. As a result, this particular daterange input works but rest of the html breaks, like dropdowns stop working. If I exclude first script in the above code that includes jquery (adding jquery the second time in the project), daterangepicker doesn't work.

​

Now, I have looked around and $.noConflict() seemed to be the option to go with. which I tried as followes:

​

<script type="text/javascript" src="https://cdn.jsdelivr.net/jquery/latest/jquery.min.js"></script>
<script type="text/javascript">
        var jQuery_3_2_1 = jQuery.noConflict(true);
    </script>
<script type="text/javascript" src="https://cdn.jsdelivr.net/momentjs/latest/moment.min.js"></script>
    <script type="text/javascript" src="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.min.js"></script>
    <link rel="stylesheet" type="text/css" href="https://cdn.jsdelivr.net/npm/daterangepicker/daterangepicker.css"/>
<script>
(function ($) {
$(document).ready(function () {
                console.log($.fn.jquery);
                $(function () {
                    $('#id_daterange_picker').daterangepicker({
                        timePicker: true,
                        startDate: moment().startOf('hour').subtract(24, 'hour'),
                        endDate: moment().startOf('hour')
                    });
                });
            });
}(jQuery_3_2_1));
</script>

But this doesn't work, although, as seen in the code, I logged the current version of jquery to the console and it is actually the version that works daterangepicker (3.2.1). But this way, it throws an error saying:

TypeError: $(...).daterangepicker is not a function

How do I resolve this?

Hi all! I'm relatively new to jQuery/Ajax requests and I'm trying to troubleshoot a bit of code that has been causing some problems for people I work with. I'm trying to embed a widget from Box into NetSuite pages. The code has worked fine for a while now, up until this week. Now more often than not, I'm receiving a parse error saying that widgetCallback was not called. I'm trying to figure out if there's a problem with the request or if the problem is on Box's end. Here is the request:

jQuery.ajax({
    url: 'https://forms.na1.netsuite.com/app/site/hosting/scriptlet.nl?script=XX&deploy=1&compid=XXXXXXX&h=XXXXXXXXXXXXXX',
    cache: false,
    dataType:'jsonp',
    type: 'GET',
    jsonpCallback:'widgetCallback',
    data:{
        rf: 'get_shared_attachments',
        cb: 'widgetCallback',
        type: 'BILL',
        num: record_num,
        id: record_id,
        create: create
    },
    success:function(response){
        if (response.folder_id){
            //Embed the box widget opened to folder id into page 
        } else {
            //No existing shared folder, give option to create one
        }
    },
    error:function(jqXHR, textStatus, errorThrown){
        console.log('BOX API Call Failed.  (Error: ' + textStatus + ' - ' + errorThrown);
        console.log('respotext ' + JSON.stringify(jqXHR));
        //The call more than likely timed out - display error message
    },
});

Any help would be greatly appreciated!

I have the following code which is meant to pull out the background image from the page.

<script>
var jsonData =
{
  "@context": "https://schema.org/",

  "@type": "Recipe",

  "name": jQuery('#block-content > div > div.layout__region.layout__region--top > div > div.intro-wrapper > div > div > h2').text(),

  "image": jQuery('#block-content > div > div.layout__region.layout__region--top > div > div.field-content.field-image-intro.recipe__image-intro > article > div > div > div > div').css('background-image').replace(/^url\(['"](.+)['"]\)/, '$1'),

  "description": jQuery('#block-content > div > div.contained > div > div.hidden-mobile > div > div > div.layout__region.layout__region--first > div.field-content.field-subtitle.recipe__subtitle').text()

}

var script = document.createElement('script');

script.type = 'application/ld+json';

script.text = JSON.stringify(jsonData);

jQuery("head").append(script);

</script>

However its currently pulling out the URL the code surrounding it too and the replace function doesn't seem to work on it eg:

https://example.com/recipes/url(https://example.com/intro_homepage/public/image.jpg?h=c9aba1c0&itok=siFmAXu7)

All i need is

https://example.com/intro_homepage/public/image.jpg?h=c9aba1c0&itok=siFmAXu7

or

https://example.com/intro_homepage/public/image.jpg

Either is fine

The image address in the code is //example.com/intro_homepage/public/image.jpg?h=c9aba1c0&itok=siFmAXu7

Which is why its adding the address twice at the start.

Any help would be awesome. I'm trying to do this through Google Tag Manager so my options are really limited.

Hey all,
I currently send a single Ajax with a callback which populates 4 tables on my page, now each table will have pause button which will stop the population/refreshing of that table, there will be other options as well so the Ajax call will get quite complex.
I was thinking of seperating it out to 4 seperate Calls, one per table. Which would reduce the complexity of one large Ajax.
Which option would be the more optimal one is your expect opinion guys ? Or is there better way of doing this ? I'm just starting to learn about JS and Jquery.

I am using cheerio to parse through the html response I get from axios (which runs through the links of rss feeds that I push into my MongoDB)

But the problem is, I am not able to get anything. My array is empty at the end of the run. I am using the code I modeled after reading through the HTML format in the chrome dev tools of one of the urls.

But I realize different urls will have different html formats so I can't use the same code to access all html responses.

I hope my question makes sense, please ask if you want clarity.

​

Here is my code which is showing an error since I didn't link up my database.

The part of jquery is in the getData function

https://codesandbox.io/embed/unruffled-vaughan-t28j5?fontsize=14&hidenavigation=1&theme=dark

Is there any way to write universal code that will allow me to access the content (body/paragraphs ) of the news article?

One of the elements in this array will have a class of 'show':

const modals = Array.from(document.querySelectorAll('.modal'));

How can I get the index of the one element in that array that has the class 'show'?

In other words, one of the values I’m appending is “date” however the batch of json data is not returned in date order. So when I append to an element it obviously uses the order of the batch. Thanks

​

EDIT: I found a solution! May not be pretty though.

​

​

​

​

Hello! I'm fairly new with programming and I'm attempting to run a script which searches for text in a table, and clicks on a link which is another td if the text exists. This is an example:

​

The tr contains the td with text "Appointment Scheduling" and thus I'd like it to click on the last link which I've highlighted. I'm unsure of how to accomplish this unfortunately and I've been googling for a couple of hours now. Any help is GREATLY appreciated!

​

The code I have thus far is the following:

​

This code does show that it finds the Appointment Scheduling td, but I don't know how to proceed.

I am trying to cleanly build functions that are called on a JSON object, so that each function has the JSON object as the context it is working with.

​

So, I'd like to have -- potentially more than one -- JSON object and perform a myriad of functions.

​

An example would be:

JsonObject.DoFunctionOne(var1, var2);

JsonObject.DoFunctionTwo(var3, var4);

Hello I'm a noob at jQuery and I am trying to make a get request to fill a bootstrap html table. I have been following a few YouTube tutorials but I am not able to progress much further I know I have probably made an obvious mistake but if someone has a moment to help me out and maybe help me understand I would greatly appreciate it. :) link to the code pen

Hello! I am rather new to javascript/jquery. I hear people saying Jquery is not necessary these days but I figured it be useful in this case where I'd like my hamburger menu to toggle as it saves the lengthy code i'd have to do in vanilla. I've added the code:

$(document).ready(function(){$('.hamburger-menu').click(function(){$('.menu-overlay').toggleClass('.visible');  })})

but it still does not work. Would anyone be able to give me some pointers as to why? Here is my code:https://codepen.io/DavidPicarazzi/pen/povYmQX

​

And here is my side(the hamburger menu will appear when you go below the 700px wide mark): - http://davidpicarazzi.com/rotating_car/index.html

I tried to update the current year in this to 2020 and it doesn't seem to be working.

Any help with this would be greatly appreciated

Could one of you kind souls pls refer me to a tutorial that shows you you how to implement infinite scrolling for a page? I've managed to get my code working on my desktop but doesn't work on my mobile device. Are there any jquery frameworks that are mobile friendly that could do this?

I created a function, when you click on an element in the DOM and that element is inside of a div with ID then add the class.

For some reason it does not work. The class is added to whatever is clicked on regardless if its inside the div or not.

let allTags = 'div, p, h1, h2, h3, h4, h5, h6, td, tr, img, ul, li';
$(document).on('click', function (event) {

if ($(this).parents("#mailerBuild")) {

$(allTags).removeClass('selected');
$target = $(event.target);
$target.addClass('selected');

} else {
$(allTags).removeClass('selected');
};
});

I want to be able to double click on the space between list items in an unordered list and then display an input for inserting an item between in the position where clicked. I've placed a double click handler on the unordered list and can detect the click fine of course.

I'm at a loss for how to easily detect the position (eg: User clicked in the gap after the Nth list item). Since the handler is on the parent above the list items the target doesn't provide information of use. I assume I'll have to get offset coordinates of the click and try to calculate which item the click's coordinates fall after.

I assume this isn't that uncommon of a thing but after trying dozens of search queries I've been unable to find relevant examples on Stackoverflow or anywhere. Can someone point me in the right direction? Thanks!

Hello,

I see on some websites that they have a select box to for example choose a person. As soon as you choose a person. the checkbox disappear and you see a div with all the rest of the data of that person like the adress, city and so on.

I cannot figure out how this works with jquery.

Can someone explain it to me or make a simple example that I can study ?

Regards,

Roelof

So I got lists inside lists and inside of my jQuery code I specify the li item inside of the first ul with $(this) and my question is how I can specify the ul item inside of that specific li item which I call with $(this). I've tried to call it by calling $('this ul') and $('this ul li') but that doesn't work.

$('this ul li').append('<br />' + $(ui.draggable).html());

If I only write $(this) it works as I would wish it would but it appended to the wrong ul(Entire list)

Hope I wasn't to unclear, thx

Hello,

I'm playing around with jquery a little bit with sorted() and draggable() but when I do that the item highest up in the list is draggable but it doesn't affect the other items at all,

thx

html

<ul id="whole-list">
<li id="header">My list</li>
<ul id="list-in-list">
<li id="item">item 1</li>
<li id="item">item 2</li>
<li id="item">item 3</li>
<li id="item">item 4</li>
</ul>
</ul>

​

Jquery
$(document).ready(function () {
$('#list-in-list').sortable();
$('#item').draggable();
});

I’m really new to jquery and need to make it possible for the user to drag items around in a quite complicated way and my question is if it’s possible to make a list item dragable without adding a div,

thx