Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
I need bit help about jquery...
I'm using woocommerce and i have to make contract texts visible but my theme makes it visible only when I click on the contract link and I want this link to be automatically clicked while the page is loading.
Before click contract link
https://prnt.sc/t7owcb
After click contract link
https://prnt.sc/t7ox49
How can I leave this field open?
Thank you!
After some fiddling, we found a way to show the terms and conditions by default on the checkout page.
We can't just show the div, or trigger a click, because the terms' wrapper element is overwritten after an Ajax request, so it removes anything we try to do before that.
But we can force display: block by adding a <style> tag to the page. That won't be overwritten, and by using !important, we make sure this gets higher priority in CSS:
// When the DOM is ready
addEventListener('DOMContentLoaded', function() {
// Create a style tag
var s = document.createElement('style');
s.innerText = '.woocommerce-terms-and-conditions-wrapper{display: block!important;}';
// Append it to the body
document.body.appendChild(s);
});
Related
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 2 years ago.
Improve this question
In the following fullcalendar example (using v5.3.2) I've added a select element to the events, but the select elements won't expand when clicked, and so the value can't be changed.
I've updated the code example to insert the select tag into the DOM via the eventDidMount callback (which is what I do in my own code) and added jquery to add the event handler for the clicks on the select. You can see the clicks triggering in the console, but the select won't actually expand.
Is there any way to allow the select elements to be functional?
eventDidMount: function(arg) {
let content = $('<select><option>1</option><option>2</option></select>')
$(content).on('click', function(evt){
console.log(evt.target.tagName)
})
$('.fc-event-time', arg.el).before(content)
}
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 3 years ago.
Improve this question
For a while now, i want to create an autoclicker for in the browser to click on specific buttons on a website. Since i am pretty familiar with javascript i want to use javascript to write the script. To clarify what i want, imagine a website with a list of items. Each of these items has a button with the content "add" and contains the css class "add-btn". What i want is a script that scans the code of the wanted website and searches for all buttons with the "add-btn" class attached to it. Then i want to trigger the click event for each of these buttons one by one. (If it is possible i want the browser minified and not opened while running the script).
I already did a lot of research on the internet and still haven't found a clear javascript tutorial to achieve my goal. Does anyone maybe have a link to a tutorial that matches my wishes? Or maybe a push in the right direction?
What you want is a headless browser, like PhantomJS or Zombie. PhantomJS is no longer maintained. Then you can navigate to the page and find buttons using css selectors, which you can then trigger click events on.
https://phantomjs.org/
http://zombie.js.org/
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 4 years ago.
Improve this question
I have a section of a page that can have his html content changed by ajax requests. Also, each content (lets call it "tiny-template") has its own js script that is also appended or detached via js.
Example: user click on button "myBtn1", it loads "tiny-template1" and my js append "myJs1.js".
Then if user click on button "myBtn2", it removes "tiny-template1" and "myJs1.js" and then it loads "tiny-template2" and append "myJs2.js".
I know that the js removed script content stays in the DOM even if we remove the script tag (ex: ) from the html.
So my question is, if user clicks again on button "myBtn1", the script "myJs1.js" will be appended (again). This will result on duplicated js code?
Whether the script element exists or not in the DOM probably isn't the issue. The second time you add a script loading myJs1.js to the DOM, it will evaluate the script a second time, which could cause side effects if the script modifies any global state. Removing a script element does not remove those side-effects. If the scripts don't mutate any sort of global state, you should be ok.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 8 years ago.
Improve this question
I'm creating text fields each time a button is clicked, with each new div I create I also want to give it a button to delete this field. As can be seen in this JSFiddle.
However the button associated with each newly created div doesn't delete it's associated field. How can this delete that text fields?
You have to use delegation.
This works for the elements new to the DOM, after it was already loaded.
$(document).on('click','.deleteButton',function(){
$(this).closest('.form-group').hide();//remove
});
JSFiddle
Note: I added deleteButton class to the dynamically inserted buttons.
You can set in your button an onclick function and handle delete there like following:
window.deleteRow = function(obj){
$(obj).parent().remove();
}
fiddle
Closed. This question needs details or clarity. It is not currently accepting answers.
Want to improve this question? Add details and clarify the problem by editing this post.
Closed 8 years ago.
Improve this question
I have just started using JQueryMobile and built a little app.
This app has one page with a table that i build dynamically using javascript.
This table is being built at the app load and each 10 seconds.
After the table is build with all the rows and other stuff , i add it to a div (data-role=page).
On the first time i use $.mobile.changePage("#WantedPage") , it works fine and has the css design.
But, if i stay one this page and the method of the dynamic build of the table is called it looses all of its design it had before.
I tried already to reload the page also after building this table but it still has the same problem.
Can anyone give me a direction with this issue?
I will be glad to give more info if needed.
Edit:
Each td in the table has a button inside it and i noticed recently that before the re-build of the table with new button , it creates a div that has a span and button in it.
and after the re-build , i have only a button in it.
Just trigger this line after you add dynamic content:
$( ".selector" ).table( "rebuild" );
First time it works because you are adding it to other page. Secone page is not enhanced because it was never active before. As soon as you transit to it jQuery will enhance full page markup, including dynamically added table.
But, when page becomes active, if you add dynamic content, you will need to enhance it manually.
There's another function that can help you, but in this case trigger it on whole page:
$('#pageId').triggerWithin();
On there other hand, if you want to find more about this topic read another related answer.
Working example: http://jsfiddle.net/Gajotres/vds2U/85/