I have a code by using Materializecss and PHP. I want to open some modal by returning Php code. For example code is 4 is equal wrong password etc.
But I never satisfied to show modal even try several suggestions shown on this site.
Can you help me?
Here is part of my code :
<?php
....
else {
echo "<script>$('#modalWrongPassword').fadeIn('show');</script>";
}
}
?>
...
<div id="modalWrongPassword" class="modal">
<div class="modal-content">
<h4>Hatalı şifre</h4>
<p>A bunch of text</p>
</div>
<div class="modal-footer">
Kapat
</div>
</div>
...
<script type="text/javascript" src="../js/jquery-2.1.1.min.js"></script>
<script type="text/javascript" src="../js/materialize.min.js"></script>
<script src="../js/jquery-2.js"></script>
<script>if (!window.jQuery) { document.write('<script src="bin/jquery-2.1.1.min.js"><\/script>'); }</script>
<script src="../js/jquery.js"></script>
<script src="../js/prism.js"></script>
<script src="../js/lunr.js"></script>
<script src="../js/materialize1.js"></script>
<script src="../js/init1.js"></script>
...
With Materializecss, can't open a modal like the way you are trying
echo "<script>$('#modalWrongPassword').fadeIn('show');</script>";
Here is the reference how to show Materializecss Modal programatically, via JavaScript
echo "<script>$('#modalWrongPassword').openModal();</script>";
Note: Make sure you include jQuery and other JS libraries only one time, e.g you have included jQuery and Materialize JS multiple times in document.
Related
I have a problem with my jQuery. So, I want to remove a script who is inside a . My html is :
<div id="right-bloc">
<div class="right-bloc-pub-1">
<script type="text/javascript" src="http://firstScript.com"></script>
</div>
<div class="right-bloc-pub-2">
<script type="text/javascript" src="http://secondScript.com"></script>
</div>
</div>
I find the solution which is below
html.find('script[src="http://firstScript.com"]').remove();
But the problem is it only removes the script which only has HTTP URL because some script has that kind of URL
//ialtears.com/d2/32/42/d23949fadf7b59629f8345.js
I want to remove that kind of URL's
You can try like this:
JQuery(document).ready(function($){
$('script').each(function() {
this.parentNode.removeChild(this);
});
});
I have the below code. However, my JQuery wont run when the #id and .classes it is looking for are in partials when viewing this static page. How do I get it to work?
<body ng-app>
<h2>JQuery wont run if code it is looking for is in a Partial</h2>
<div ng-include="'_includes/partials/menu.html'" ></div>
<br />
<h2>JQuery will work if the code it is looking for is here on the page (DOM)</h2>
<div class="container">
<div class="row">
<div class="col-xs-12">
<ul class="nav">
<li><a>Home</a></li>
<li><a>About</a></li>
<li><a>Services</a></li>
</ul>
</div>
</div>
</div>
<!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<!-- Include all compiled plugins (below), or include individual files as needed -->
<script src="_includes/scripts/bootstrap.min.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.4.6/angular.min.js"></script>
<script src="_includes/scripts/custom.js"></script>
</body>
It is not a good practice to try to find html elements and modify them in an AngularJS app as you would normally do in a JQuery enabled html. Instead, try to implement whatever you are thinking of only using Angular.
Anyway you want to use ng-directives instead jQuery calls.
I have remote function that NOT honor and stop working when I move jQuery scripts at the bottom of page (for page faster load). how can I fix it? thank You in advance.
<script type="text/javascript">
<?php echo $ajax->remoteFunction(array('url' => array('controller' => 'posts', 'action' => 'go', $user_obj['User']['id']), 'update' => 'engagePost')); ?>
</script>
<div id="engagePost"></div>
The browser reads the page from the top to the bottom. In your case the function you want to call is written at the top of the page and as you don't wrap it into some onload or document.ready event it gets executed immediatly.
But the required JQuery scripts are not loaded until the browser has written the corrosponding script tags.
<script>
remoteFunction()
</script>
<div>
<!--Page Content-->
</div>
<script src="jquery.js"></script>
Is causing the problem, insert the JQuery scripts before the function call
<script src="jquery.js"></script>
<script>
remoteFunction()
</script>
<div>
<!--Page Content-->
</div>
And for the best practice to make sure JQuery is loaded you can add the
$(document).ready(function () { //call function here })
event into your html.
So I'm trying to use a Bootstrap Modal, and I want it to appear after a click (onclick method).
Right now I have this
$(document).ready(function(){
$("#cancelPObtn").on("click", function(){ $("#error-dialog").modal();});
});
<script src="http://code.jquery.com/jquery-1.7.2.min.js"></script>
<link rel="stylesheet" type="text/css" href="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/css/bootstrap-combined.min.css">
<script src="http://netdna.bootstrapcdn.com/twitter-bootstrap/2.0.4/js/bootstrap.min.js"></script>
<!-- BELOW ON MY WORDPRESS POST -->
Yes, cancel it
<div class="modal hide fade" id="error-dialog">
<div class="modal-header">
<a class="close" data-dismiss="modal">x</a>
<h3>Cancel Purchase Order?</h3>
</div>
<div class="modal-body">
</div>
<div class="modal-footer">
Yes, cancel it
Nevermind
</div>
</div>
<!-- I HAVE THE JAVASCRIPT ON MY POST TOO, USING <script type="text/javascript"> -->
So, it appears to be working, everywhere, but on my Wordpress post I can't make it work! I've added the JS + CSS Files from Bootstrap on my header.php
What could be the issue here?
Thank you!
You should read up on enqueuing scripts and styles in WordPress. WordPress has it's own way of including the script files and the stylesheets that you should familiarize yourself with. A lot of times, what ends up happening is either the files aren't included correctly, or in the wrong order, or without the dependencies they might need. Adding the links directly to header.php is strongly discouraged.
In addition to using wp_enqueue_script as recommended above, I would ensure you're writing non-conflicting jQuery, as WordPress plugins sometimes come bundled with their own JavaScript libraries, which can cause issues.
See below:
<script type="text/javascript">
jQuery(function($) {
$('#cancelPObtn').click(function() {
$('#error-dialog').modal();
});
}
</script>
Also, WordPress is probably calling its own instance of jQuery, so you can use window.jQuery to test before including your own, like this:
<script type="text/javascript">
window.jQuery || document.write('<script src="https://code.jquery.com/jquery-1.7.2.min.js"><\/script>');
</script>
Resources:
jQuery.noConflict()
HTML5 Boilerplate
I have a site i'm working on http://trueproperty.org/ and on the front page i have two divs, one is #excerpt and the other is #content. #content is filled using
<?php the_excerpt(); ?> <button id="readmore">Continue Reading...</button>
and #excerpt is filled using
<?php the_content(); ?> .
content is set to display:none. now i use this code to display #content and hide #excerpt when the user clicks continue reading, it works in jsbin, but not on the actual site, and i cant figure it out :/.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>
It doesn't seem like you reference the Jquery library before you actually use the jQuery object. Try placing the code after the:
<script type='text/javascript' src='http://trueproperty.org/wp-includes/js/jquery/jquery.js?ver=1.7.1' />
You are loading two files that uses $ as alias ..
The following works:
<script type="text/javascript">
jQuery(document).ready(function(){
jQuery("#readmore").click(function(){
jQuery('#content').show('slow');
jQuery('#excerpt').hide('fast');
});
});
</script>
But it would be better to look for the conflict issue and use jQuery.noConflict
Place this code at the end of Head tag.
<script type="text/javascript">
$(document).ready(function(){
$("#readmore").click(function(){
$('#content').show('slow');
$('#excerpt').hide('fast');
});
});
</script>