jQuery button displayed on top of menu - javascript

After calling .button() on my buttons, they are being displayed on top of my sub menu. To better explain, here's a screenshot:
I call my jQuery on my MasterPage:
<script type="text/javascript">
$(function (e) {
$("button, input[type='button'], input[type='submit']").button();
});
</script>
I'm referencing google's jQuery's 1.5 and 1.8 jquery script. (Otherwise my .button() doesn't work and get script errors such as 'Object [object Object] has no method button')
Why is this happening, and how can I change it?
Thanks.

The depth involved with HTML elements is controlled by their individual z-index values. You'll need to go through your CSS to adjust these values (or dynamically change them using jQuery).
Reference: https://developer.mozilla.org/en/CSS/Understanding_z-index

Related

How do I convert this jquery code to JavaScript?

This is the jquery code below:
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
I want to convert it to JavaScript because I get this error message:
"$ is undefined "
when I put the jquery code in the JavaScript section of codepen.io.
Is there a reason the jquery code is producing an error? How can I fix this?
If it is not possible to fix, how can I convert the Jquery code to JavaScript?
I'm trying to use toggleClass on all the divs when the div is clicked.
Here is a link to the codepen for reference: https://codepen.io/sophiesucode/pen/jOExXKw
Option 1: Use should push the jquery lib above </body>, Here is your demo
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
Option 2: Use pure javascript like below
document.querySelector('div').onclick = function(){
this.classList.toggle("show-description");
};
$('div').on('click', function() {
$(this).toggleClass('show-description');
});
Can be represented by vanilla javascript as:
var divs = document.querySelectorAll('div'); //Get a list of all div elements
for (const div of divs){ //Loops through every div element
div.onclick = function(e) { //Adds the on click function to each
e.currentTarget.classList.toggle('show-description'); //Defines the function as toggling a class on the element of the click function
}
}
Jquery code actually is javascript. Jquery is a library built for javascript. To solve the error "$ is undefined" you would have to add jquery to your webpage, or import it in your script.
There is this wonderful article on W3 Schools which teaches multiple ways to add jquery to your webpages.
Your code doesn't work because you linked your script path as a relative path.
Change this
<script src="/assets/jquery.js"></script>
into this
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
another way is to link the jquery file using the settings menu in codepen.
Settings > Javascript > then search jquery in the CDNsearch bar

button in jquery and jscript

I am trying to understand the difference between JQuery and JavaScript.
And apologies if this is a silly question.
This is my attempt at JQuery. On pressing the button the text in <p> should change as requested. I cannot get this to work.
http://jsfiddle.net/QaHda/7/
this is my JavaScript attempt. I cannot get this to work either
http://jsfiddle.net/aLhb8/1/
Can someone please help me with
my jQuery above to get it working.
my jscript above to get it working.
I was trying to get to a point where I could write my JQuery in such a way that it could be written in javascript. Can anyone help me do this?
Thanks
EDIT
Thanks for all the answers/corrections: what I was looking for part 3 was this enter link description here which basically does part 1 using javaScript,I think. In future I should be careful,using left hand pane, to include Jquery library and to make sure jsript is wrapped in head/body
jQuery
You need to include jQuery library to your page by selecting a jQuery version in the first dropdown in the left panel
Demo: Fiddle
JS Sample
The problem is since your function is defined within the onload callback, it was not available in the global scope causing an error saying
Uncaught ReferenceError: myFunction is not defined
The solution is to add the script to the body elements, instead of inside the onload callback by selecting No Wrap - in <body> in the second dropdown in the left panel
function myFunction()
{
alert("Hello World!");
}
Demo: Fiddle
jQuery is library of javascript function and you need to add jquery file in html file that y jquery function was not working and for javacript function you need to change the setting in jfiddele left to no-wrap in head
http://jsfiddle.net/aLhb8/1/
http://jsfiddle.net/hushme/QaHda/10/
here is code
$("button").on("click", function () {
$("p").text("this text will now appear!!")
});
If you have internet connection, This should work
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
$(document).ready(function() {
$('button').click(function() {
alert("This is a simple alert message");
});
});
But if don't then just download the jquery framework and include into your page
Hope it helps and anyway jquery is a framework of javascript, so they are both or they are the same. Don't confuse yourself.
Here is a JavaScript version - http://jsfiddle.net/aLhb8/4/
JavaScript
var myButton = document.getElementById('myButton');
myButton.addEventListener('click', function(){
alert(myButton.textContent);
});
Check this link out if you want to start learning more about JavaScript - http://javascriptissexy.com/how-to-learn-javascript-properly/
For the pure JS code, on the top left panel, select 'No wrap - in body'. This will make your code run without a problem.
In the jQuery code, make sure you've selected the jQuery library, as opposed to pure JS. You hadn't selected this before, so your code was invalid.

Refactor jquery animate

I am using the datepicker plugin from here - The example is on the bottom of the page.
It is utilizing jquery animate() like this:
$('#widgetField>a').bind('click', function(){
$('#widgetCalendar').stop().animate({height: state ? 0 : $('#widgetCalendar div.datepicker').get(0).offsetHeight}, 500);
state = !state;
return false;
});
I need a recommendation on how to refactor this into an accordian-like expanding div. I do not want the calendar to float, I need it to push the div content below it down.
Recommendations?
Updated Answer
The widget floats because it has a position:absolute; and a height offset in the jquery function.
See the css:
#widgetCalendar has a style, position:absolute. You will need to remove that, which will make it work, but then there are additional styling issues that can all be taken care of with css adjustments.
Or, you can try using jQuery .slidedown:
$('#widgetCalendar').slideDown();
Then you wouldn't need the height offset.
It would be great if you could do a jsfiddle, as I am unable to test without seeing what you are doing.
Edited - user not using jQuery UI
This is due to the nature of jquery UI - the calendar is a specialized dialog. The jQuery UI dialog is a popin. But, you can counteract this:
<script>
$(function() {
$( "#datepicker" ).datepicker();
});
</script>
Display the datepicker embedded in the page instead of in an overlay. Simply call .datepicker() on a div instead of an input.

jQuery Mobile rendering problems with content being added after the page is initialized

I'm using jQuery Mobile and Backbone JS for a project. It's mostly working, using jQuery Mobile's event 'pagebeforeshow' to trigger the correct Backbone View. In the Backbone View for that particular jQuery Mobile page, that's where it's doing all the dynamic things needed. Some of the things the views do is pull in certain bits using Underscore's templating system.
This is all great until where I pulling in form bits using the templating system. For example, a set of dynamic radio buttons (which are generated from a Backbone Collection). These radio buttons I want to style up using what jQuery Mobile has to offer. At the moment, jQuery Mobile is not picking up these dynamically injected radio buttons. I solved this issue previously when doing sliders by just calling the jQuery Mobile widget "slider()" method again and it seemed to refresh them... This doesn't seem to be the case with these radio buttons.
In the Backbone View, I tried calling the widget methods again:
$(this.el).find("input[type='radio']").checkboxradio();
$(this.el).find(":jqmData(role='controlgroup')").controlgroup();
I tried them the other way around too, but it seemed I need to do it this way for the grouping styling to work etc. But this just doesn't seem right! ...doing this also caused errors when I clicked on the radio buttons, saying: "cannot call methods on checkboxradio prior to initialization; attempted to call method 'refresh'"?
It seems there should be a way in jQuery Mobile to re-initialize the page or something?! I noticed there is a 'page' widget in the source code.
How does jQuery Mobile handle forms/elements being injected into the DOM after the page is made? Is there a clean way of handling how it makes up the forms? There must be a clean way of calling on the forms to render 'the jQuery Mobile way' without it just relying on data attribute tags in the base HTML?
Any help or insight into this problem would be greatly appreciated... I'm very much on this quest of trying to get Backbone JS and jQuery Mobile to work nicely together.
Many thanks, James
update
Since jQueryMobile beta2 there is an event to do this. .trigger('create') on an element to cause everything inside it to be painted correctly.
Another question that is not a duplicate, but requires an answet I posted over 10 times :)
[old answer]
try .page()
More details in my faq:
http://jquerymobiledictionary.pl/faq.html
Refreshing the whole page worked for me:
$('#pageId').page('destroy').page();
I'm not sure if this helps but when adding dynamic elements I was using .page() in the sucess ajax call itself (example here and here) but I found that it was not working as expected. I found that in the ajax call it's better to refresh the element (if it's a form element) to use these documented methods:
Checkboxes:
$("input[type='checkbox']").attr("checked",true).checkboxradio("refresh");
Radios:
$("input[type='radio']").attr("checked",true).checkboxradio("refresh");
Selects:
var myselect = $("select#foo");
myselect[0].selectedIndex = 3;
myselect.selectmenu("refresh");
Sliders:
$("input[type=range]").val(60).slider("refresh");
Flip switches (they use slider):
var myswitch = $("select#bar");
myswitch[0].selectedIndex = 1;
myswitch .slider("refresh");
and for adding a non-form element use .page()
JQuery Mobile now supports .trigger("create"); which will resolve this for you
Try calling .trigger("create") on the element with the new content.
I needed a way to dynamically refresh a JQM page after it had been initialized. I found that if I removed the data attribute "page" during the "pagehide" event, the next time the JQM page was displayed it was re-initialzed.
$('#testing').live('pagehide', function (e) {
$.removeData(e.target, 'page');
});
$('#pageId').page('destroy').page();
works for entire control groups that are generated, let alone radio input children.
-Mike
It worked for me when I called .trigger('create') on the enclosing div element. See example below:
In .html file:
<div id="status-list" data-role="fieldcontain">
<fieldset data-role="controlgroup">
<legend>Choose as many snacks as you'd like:</legend>
<input type="checkbox" name="checkbox-1a" id="checkbox-1a"/>
<label for="checkbox-1a">Cheetos</label>
</fieldset>
</div>
in .js file:
$("#status-list").trigger('create');
For me only .page() worked (without the .page('destroy')).
E.g.:
$('my-control-group-id').page();
Amnon
I little bit off topic. I wanted to be able to stop jqm from creating first default page div on init as backbone wraps elements in divs anyway. I wanted to dynamically insert pages to the DOM and then call jqm to create its classes and widgets. I finally did this like this:
<head>
<script src="jquery-1.8.3.js"></script>
<script type='javascript'>
$(document).on("mobileinit", function () {
$.mobile.autoInitializePage = false;
}
</script>
<script src="jquery.mobile-1.3.0-beta.1.min.js"></script>
</head>
<body>
....... dynamically add your content ..........
<script type='javascript'>
$.mobile.initializePage()
</script>
</body>
and my hole jqm config (which you put before jqm.js)
$(document).on("mobileinit", function () {
$.mobile.ajaxEnabled = false;
$.mobile.hashListeningEnabled = false;
$.mobile.pushStateEnabled = false;
$.mobile.linkBindingEnabled = false; // delegating all the events to chaplin
$.mobile.changePage.defaults.changeHash = false;
$.mobile.defaultDialogTransition = "none";
$.mobile.defaultPageTransition = "slidedown";
$.mobile.page.prototype.options.degradeInputs.date = true;
$.mobile.page.prototype.options.domCache = false;
$.mobile.autoInitializePage = false;
$.mobile.ignoreContentEnabled=true;
});
So far Backbone and JQM been working fine.
Try use enhanceWithin() method. This should be method of any jQuery object while using jQuery Mobile.

SliderExtender with BehaviorID is not rendered after pageLoad(), but work after postback

I'm using a asp.net slider inside an UpdatePanel within a page control.
I assign a behaviorID and call it using $find(behaviorID) in both $(document).ready and Sys.WebForms.PageRequestManager.getInstance().add_endRequestfunctions inside a JavaScript located in the bottom of the page.
The JavaScript function on the slider doesn't work after page_initial.
It fails to find the slider in JavaScript, i.e. $find(behaviorID) = null. while other JavaScript functions set in the $(document).ready does work.
However, I can view slider's rail and drag it.
But when I do any postback on the page with other controls , the slider works smoothly!
It generate additional tags with <... Class= ...Behavior_ID>
and the JS which is used to generate Slider and its Event in source code looks like:
Sys.Application.add_init(function() {
$create(AjaxControlToolkit.SliderBehavior, {"Length":410,"Maximum":100,"Minimum":-100,"TooltipText":"Adjust Target","id":"targetSlider_JS"}, null, null, $get("ctl00_ContentPlaceHolder3_Target1_txtSlider"));
});
The page is in 'content' of a MasterPage.
I guess it doesn't render the slider correctly when page-init, need some server side setting for slider?
Regards,
I had the same problem that was intermittent. Sometime it was null and other times was fine. I added a small setTimeout of 100ms to delay a call to $find and it works now.
didn't find solution.
used jquery slider instead.

Categories