How to stop jQuery plugin in specific page? - javascript

I have a web application which uses MVC layouts, all of my views inherits from this page, in layout page I am using a jquery plug in (iCheck), now I have a page which also inherits from my layout but I don't want this page to use that plugin, in layout I have this script:
<script>
$(function() {
$('input').iCheck();
});
</script>
Now Is there any way to tell jQuery not use this plugin in that page?

The better approach instead of relying in viewbags and other server side codes is to use class in the elements as it's more clear what's the intention of the code.
Here's an example.
<input class="not-icheck" value="I'm a rebel!" />
...
<script>
$(function()
{
$('input:not(.not-icheck)').iCheck();
});
</script>

One way is this:
In layout replace the script code with this:
#{
bool? dontICheck = ViewBag.dontICheck;
}
if(!dontICheck.getValueOrDefault()){
<script>
$(function() {
$('input').iCheck();
});
</script>
}
This means iCheck will work at default. If you dont want it to work add this line into the view's action method which you dont want to use iCheck:
ViewBag.dontICheck = true;

A simple method is to add a class where you do not want this applied, eg:
<input class='noicheck' ...
then apply this in your selector:
$("input:not(.noicheck)").iCheck();
This will then work across your entire site without needing page-by-page changes or any changes to your viewmodel / viewbag etc and will still allow some controls to have this check applied.

I assume that your page has some specific class for styling (for example "special-page").
You can use that to identify that you are on that page and not to init jQuery plugin.
replace
$('input').iCheck();
with
if(!$(".special-page").length){
$('input').iCheck();
}

Replace the current script block you have with:
#if (IsSectionDefined("iCheck")) {
RenderSection("iCheck");
}
else {
<script>
$(function() {
$('input').iCheck();
});
</script>
}
Then in the view that you don't want this run, add:
#section iCheck {}
By defining the section, the layout will include the contents of the section, rather than the default code (your iCheck script), which will just be empty because nothing was provided within the curly brackets.

Related

Jquery on Wordpress Frontend not woorking

Maybe I am so noob with jQuery but cant reach my objective. I need to add the attribute target="_blank to all the links inside certain divs. But anything I do works.
I have checked for jquery loaded with:
if(wp_script_is('jquery')==false) {
wp_enqueue_script("jquery");
}
Using the the following code nothing happens:
jQuery("#adagal").html("<p>asdf*</p>");
The #adagal element remains with previous content. I have checked in the source if my javascript file was correctly added, and it is.
<script type='text/javascript' src='http://localhost/wordpress/wp-content/plugins/AdManagerAdagal/js/ads/show_ad.js?ver=4.3.1'></script>
So, what is the problem¿?
Use that:
jQuery(document).ready(function($)
{
$(".your_class a").attr("target", "_blank");
});
Don't forget $ in ready(function to use jquery in your js

jquery not quick enough to take effect

I have a need to add a class to certain pages - ones that contain an ID of #hero. For all other pages, the class must not be added.
Because I'm using asp.net with a few layered master pages, its not as simple as just adding a class directly to the html becuase the body tag sits a couple of pages above the aspx page.
I could locate the body tag, but so far I've tried to avoid that due to the added complexity, and instead tried to use jquery.
Here's the code:
$(document).ready(function () {
updateBodyClasses();
});
function updateBodyClasses() {
if($("#hero")) {
$("html, body").addClass("hero");
}
}
Nothing complicated, but here's the rub. By the time the class has been appended, the page has been rendered and the class doesn't seem to have any effect. However, if I test it by adding the class directly to the html, it works - so I know the CSS works and that its a timing issue.
I suppose I could add the code higher up the page - jquery is deferred, so I would need to know the equivalent javascript to try it out.
Would appreciate any thoughts on this potential solution, or perhaps and other ideas.
/* UPDATE */
For clarity, it seems to be the HTML related class that isn't being applied.
You can alter the DOM without waiting for it to be ready.
You need to:
load jQuery in a synchronous way(without defer or async).
Put #hero element i above the script.
Please consider this example:
.red {
color: red;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="hero">I don't care about DOM being ready</div>
<script>
var $el = $('#hero');
if ($el.length) {
$el.addClass('red');
}
</script>
You can use IIFE(Immidiately Invocked Function Expression):
like:
(function()
{
if($("#hero")) {
$("html, body").addClass("hero");
}
})();
just put your function in document ready like
$(function(){
if($("#hero")) {
$("html, body").addClass("hero");
}
});
No real solution provided.
Not reasitic to change the whole site infrastructure - from one that defers jquery to loading it synchronously.
The two other jquery answers are as per the current setup and don't work.
The only working solution was provided by Tushar, although it would still require selective loading of the script, which was not included in the answer.
In the end, I used a workaround, which bypassed the need for any javascript. Instead of selectively adding a class to html tag, I added the css permanently to the html tag, affecting all pages. I then added an inner div, which reverses it out. This means that any page can now manipulate its own functionality directly without having to add classes to the html tag.

JQuery: Change image on page based on class in body

I have a wordpress page where I want to display a featured image on the header of the homepage, but no other pages. I set up a script to read whether the body tag contains the "home" class and display an image based on that. The code looks like this:
<script>
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
</script>
What's wrong with this script?
Try to wrap your code into function fired on DOM ready:
<script>
$(function() {
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
</script>
More info
jQuery needs to know when to start the function. Start it after the document is ready.
$(document).ready(function(){
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});
Did you include jQuery library in your header section? Also some times $ symbol may conflict in wordpress, write full jQuery term when initialize jQuery this way:
jQuery(document).ready(function(){
if($('body').hasClass("home")) {
$('#headshot').html('<img src="http://www.kieferslaton.com/wp-content/uploads/2015/04/Headshot1.png" alt="headshot">');
}
});

Rails - JavaScript timed refresh for one view only

I have a rails app in which I would like only one view to be refreshed every five seconds. I put the following in assets/javascripts/application.js
function timedRefresh(timeoutPeriod) {
setTimeout("location.reload(true);",timeoutPeriod);
}
$(document).ready(function(){
timedRefresh(5000);
});
However this will cause every view to be refreshed every five seconds. How could I make this JavaScript apply to only one view?
(using Rails 3.2.5)
If you want to keep your JS in application.js you can simply check for the presence of a specific element and act accordingly. For example:
some_vew.html.erb
<div id = "refreshable">
<!-- So on and so forth... -->
</div>
application.js
$(function() {
// function timeRefresh()...
if ($('#refreshable').length) {
timedRefresh(5000);
}
});
You can make use of the tag in the bottom of your view.
some_view.html.erb
...
contents
...
<script type="text/javascript">
Put javascript code here...
</script>
This will make this script only available to someview.html.erb. The application.js makes the script global.

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.

Categories