As I am new to yii..I didnt understand what is CClientscript and its methods..
could you please anyone help me to about
CClientscript
registerScriptFile()
scriptFilePosition()
and its properties and methods
What is the use with this in yii..
what is the difference between
$baseUrl = Yii::app()->baseUrl;
$cs = Yii::app()->getClientScript();
$cs->registerScriptFile($baseUrl.'/js/jquery-min.js');
and
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl >/js/jquery-min.js"></script>
spent lot of time ..
please any suggestions ..thanks in advance..
By using CClientScript class we can manages JavaScript and CSS stylesheets for views dynamically.
if you add direct script or css file, In you views or layouts in below format
<script type="text/javascript" src="<?php echo Yii::app()->request->baseUrl >/js/jquery-min.js"></script>
which mean, you are rendering file from view in static position.
By using CClientscript we can render jquery in different position, like inside Head Tag, in Body Tag dynamically and this class will generate script tag and it will append in your html dynamically with dynamic position.
Predefined position in CClientScript as per Yii Doc:-
CClientScript::POS_HEAD : the script is inserted in the head section right before the title element.
CClientScript::POS_BEGIN : the script is inserted at the beginning of the body section.
CClientScript::POS_END : the script is inserted at the end of the body section.
CClientScript::POS_LOAD : the script is inserted in the window.onload() function.
CClientScript::POS_READY : the script is inserted in the jQuery's ready function.
I hope, you got the information about CClientScript.
Related
I'm not good with script and I can't figure out what's going wrong with my execution.
The webpage is http://snmcsupport.com/map-js-test-page and it should be running a script that produces a clickable map. The script itself is extremely long so I won't paste it here, but you can see it if you click here
On my webpage, I have the markup necessary to run the script in the header
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/raphael/2.1.4/raphael-min.js">
</script>
<script src="//cdnjs.cloudflare.com/ajax/libs/qtip2/2.1.1/jquery.qtip.min.js">
</script>
On my webpage, I call the script
<div>
<script type="text/javascript" src="http://snmcsupport.com/wp-includes/js/app.js">
</script>
</div>
But I still can't get the code to run? The initial instructions from the developer also said:
The last step is to initialize the map by making the following script calls:
<script>makeaClickableMap.initialize(<your-document-object-model-handle>);</script>
where your-object-document-model handle can be anything actually:
a jQuery object like $("#map")
a Javascript Document Object Model like document.getElementById("map")
or a simple string like "map"
but I can't figure out what that means. If I try to put in the initialize command in my webpage I get a nasty cross-scripting error and it won't let me.
I'm running this on Wordpress using a Divi Child theme.
makeaClickableMap.initialize(<your-document-object-model-handle>);
//this is the element that will --^
//be used to contain your rendered map
The method makeClickableMap.initialize() expects you to pass it a reference of an HTML element where you want the map to appear. Elements can be identified by
their tag name (div, p, h1, etc.)
a class name <div class="className></div>
OR by id name, which I will demonstrate here:
Firstly, you;ll need an element with an ID associated with it, it should be placed inside the <body> tag:
<div id="map"></div>
underneath this tag, but still within the body tag, you'll need to include the makeClickableMap.initialise call and pass in the ID of this <div>:
<!-- Javascript solution: -->
<script>
makeaClickableMap.initialize(document.getElementById('map'));
</script>
<!-- notice that the id is just 'map' here -->
An alternative to the Javscript solution above is using jQuery as follows (you'll still need the div with the ID):
<!-- jQuery solution: -->
<script>
makeaClickableMap.initialize($('#map'));
</script>
<!-- notice the ID is prefixced with a '#' character-->
I've been running into some problems that seem to arise from making my questionnaire a .PHP file rather than an .HTML. The reason I had to do this is because I'm using a PHP script for working with an SQL database and I had to include them into the Questionnaire, which won't work as an HTML.
In the HTML version everything runs perfectly the way I coded it. When I saved it as a .php file my javascript stopped working properly and I tried linking the javascript at the bottom of the body tag instead of the head and that still didn't help.
After a lot of going back and forth trying to see what's different I decided to save the .php file as an html just for grins and giggles to see if I still got the same problems. Oddly enough, it runs just as smooth as the other HTML file.
here's links to all 3 versions so you can see what I mean.
HTML v1
PHP
HTML v2
In the JS Console I got this error
Uncaught TypeError: Cannot set property 'onClick' of null
which referred me to line 163 of my .js file which is referencing the "next" button of the first page of the Questionnaire (not intro page that loads up but the next page where you actually input data).
The way I have the Questionnaire structured in the .PHP file is
<?php ini_set('display_errors','on'); ?><?php include('extlib/vdaemon/vdaemon.php'); ?><!doctype html>
<html>
<head>
//links to files etc.//
</head>
<header>
</header>
<body>
<form action="core/process.php" method="post" id="CorpID" runat="vdaemon">
<input type="hidden" name="formID" value="Questionnaire" />
<input type="hidden" name="redirect_to" value="http://optiqvision.x10host.com/Corp_ID_&_Branding_Questionnaire.html" />
//all form inputs//
</form>
<?php VDEnd(); ?>
</body>
<footer>
</footer>
</html>
The entire Questionnaire has well over 100 individual inputs so I didn't want to put all of them in this snippet. I just wanted to show the over all structure, plus I figured you could get more details in the browser from clicking on them and looking at the debugger to see more of what's going on. Can anyone identify what I'm doing wrong with the PHP? I really don't understand why it's messing up the way it is.
In your html the code for the textarea is like this:
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;"></textarea>
In your php the
The textarea closing tag is misplaced; coming after a lot of div's including the element with the id=p1_next. SO the divs just become part of the textarea value instead of being part of the HTML page
Edit: Looks like the real problem is that the DOM is broken. In your PHP file, you have a self-closed textarea tag. textarea tags need a closing tag.
<!-- you have this, it's not syntactically correct -->
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;" />
<!-- the following is correct -->
<textarea id="my_comp" class="tex_inp01" style="width:88%; height:100px; font-size:14pt;"></textarea>
Put Corp_ID_&_Branding_Questionnaire.js right before the body tag and it will work. The reason the PHP file is throwing a javascript error is because the node "p1_next" doesn't exist at runtime since your JS is in the head tag.
The reason it's working in the HTML file is mainly thanks to luck. The static HTML is loading fast enough that the DOM is ready by the time your JS code is running. As a thumb of rule, generally include all your JS right before the body tag. There are of course some exceptions.
If you really need to include your script in the head, you can wait until the DOM is ready by wrapping all your code with this:
$(document).ready(function() {
console.log( "ready!" );
// your JS code here
});
Last, if you're going to be using jQuery as a library, then it is recommended to use jQuery syntax instead of native JS. Just make sure to include the jQuery JS before your code.
var p1a = document.getElementById("p1_next");
// becomes:
var p1a = $('#p1_next'); // jQuery node by CSS selector
Before the end of the body tag like this:
<html>
<head>
..your code ..
</head>
<body>
..your code ..
<script type="text/javascript" src="http://www.optiqvision.x10host.com/Files/Javascript/Corp_ID_&_Branding_Questionnaire.js"></script>
</body>
</html>
I’m “developing” a web site from Sharetribe (this is a website to create marketplaces). Sharetribe limited the “freedom” of a developer. We can add anything to the <head> of the website. So in the <head> I can change the CSS of the website, and this is great because I can change the appearance of the website.
What I’d like to do is to add HTML tags, like buttons, divs, etc. If I can do that, it would be great.
I believe this can’t be done, but first, I’d like to question — who knows, maybe I’m wrong.
It's a bit hacky, but you can use javascript to "insert" or "append" html to the body of the webpage through the head.
If you only have access to the head element, but not to the body, then you could try to use Javascript to add elements into the body. This only works if script tags are allowed and it has to be said that it is not really a good way of coding. But if it is the only way...
My idea (to make it a bit easier) : Include jQuery and add elements to the body by using the append function. So: you go to the jQuery downloads page, download the file and include it in the head tag. Now, you can access the body tag and insert some custom code like this:
$("body").append('<h1>Hi! I am a headline</h1>');
Pure JavaScript way:
var sibling = document.querySelector('.sibling');
var newSibling = document.createElement('div');
newSibling.className = 'sibling';
newSibling.innerHTML = 'Appended before the below div';
document.body.insertBefore(newSibling, sibling);
<body>
<!-- Already Existing HTML -->
<div class="sibling">I wish I had a sibling</div>
</body>
Quick jQuery way:
Include jQuery inside your head. Include the custom jQuery code inside <script></script> within <head>.
$(document).ready(function() {
$('.sibling').append('<div class="sibling">Hey! I am here</div>');
$('.child').wrap('<div class="child">You are not orphan anymore!</div>');
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<body>
<!-- Already Existing HTML -->
<div class="child">I wish I had a parent</div>
<div class="sibling">I wish I had a sibling</div>
</body>
$('#<%=pnlCheckout.ClientID%> div.listitem').length am having this on my page level javascript I have to move this to external javascript file could anyone plz help me how to do this ?
Create a file called nameOfFile.js and copy your javascript code to it, without the <script> tags that surrounded it inline. Then load the external file into your main file using the <script> src attribute:
<script type="text/javascript" src="pathToFile.js"></script>
You could use the jQuery ends with selector here:
$('[id$="pnlCheckout"]')
Which will match any element for which the ID ends with pnlCheckout
Your final js would then be:
$('[id$="pnlCheckout"] div.listitem').length
related: jQuery Selector: Id Ends With?
I'm trying to add a horizontal rule as the last item in a div container. I tried
<script>
var rule = '<hr />';
$('#content-nav').append(rule);
</script>
I added this code into the header.php section of my website which is added onto multiple php files using php include. But jQuery files are also added and work fine for other jQuery plugins that have been implemented.
I'm never sure where in my html js is supposed to go. Am I putting this in the wrong place? Or is there something wrong with the code?
As long as your script comes after the jQuery script AND after the DOM is ready (or after the element is declared, but on DOM ready is preferable) your code will work:
<script src="pathToJQuery.js" />
<script>
$(function() {
$('#content-nav').append('<hr />');
});
</script>
...
<div id="content-nav">
...
</div>
NB in the above the $(function() { ... }); is shorthand for $(document).ready(function() {...});