Appending Laravel Blade from JQuery - javascript

I am trying to append Blade syntax from Laravel but can't get the browser to understand Blade. When I append the Blade syntax from my js file it output the code onto the page.
// this is my code..
$("#"+Current_box).append("#if ($errors->has('testing'))<span class='help-block'><strong>{{ $errors->first('testing') }}</strong></span>#endif")
It would output this on to the page:
#if ($errors->has('testing'))
{{ $errors->first('testing') }}
#endif

you can generate your view in your controller. and append it to your jQuery
//blade
$html = view('someView')->render();
retrun json_encode($html)
And in your blade you can do something like this
<script type="text/javascript">
#if( isset($html) )
$("#"+Current_box).append({{$html}})
#endif
I don't know if you are using an ajax call or simply a pageload so dont forget to wrap you script in document ready or ajax function

Laravel Blade is processing on server side by PHP. Not in your browser like JS.
Therefore if you do like you did, you get normal text in your browser.
So your server process PHP/Laravel code with Blade and provide for your browser static code with HTML, CSS and JS.
If it will help you, you can try put your blade code in appropriate *.blade.php file.

Related

How to make "<" not interpreted in .html() using jQuery?

I have to generate a php file from the content of a div, this is working. But characters like < and > are blocking the generation.
For example :
<div id="test">
<p> I want to have this in my php file <?php echo "tatata" ?> </p>
</div>
I'm using the function $("#test").html() to get the content before to send it to a php file using ajax.
If I do an alert of this, I get the correct data but when I open the php file generated, I only have :
<div id="test">
<p> I want to have this in my php file
I've tried to use &#60 instead of <
I dont know if the problem comes from jQuery or the php code I call with ajax.
But I'm sure the problem is due to the < and > characters, because when I remove them, it works correctly.
Thanks for your help !
The suggestion of #treyBake is working perfectly.
As he suggested in the comments, the function str_replace solved the problem. I use it just before to create my php file and it's working.
Thank you #treyBake ! :)
Have you tried using htmlentities?
e.g.
echo htmlentities('<sometext>');

Insert javascript string into HTML with PHP in WP

I need to create some widget for WP and in widget's setting will be textarea, where user can insert some JS code. And then my widget must inject this code to WP's footer.php with this function:
add_action( 'wp_footer', 'inject_js', 10 );
In my inject_js I have:
function inject_js () {
echo esc_attr( get_option('js_code') );
}
Everything is working good and the code inserts into HTML, but I faced one problem. In my HTML I get something like this:
<!-- BEGIN JS widget -->
<script type="text/javascript">
var __cp = {
id: "J4FGckYPdasda21OaTnqo6s7kMgeGXdTBAb6SgXMD-A"
};
As I understand I got the code from user's textarea in string type and I must do something with the quotes and other symbols, but I really don't know how to solve this issue, because I am new to PHP.
What PHP function must I use or it's possible to do with some WP functions?
I tried:
echo htmlspecialchars(esc_attr( get_option('js_code') ));
and
echo addslashes(esc_attr( get_option('js_code') ));
But nothing helped.
You are seeing the effect of esc_attr - the function is html encoding (amoungst other things) the string.
It is designed for untrusted user input. As your code is specifically designed to accept javascript from a trusted source (the site owner), dont use it.
echo get_option('js_code');
wrap your code in this :- like this:
html_entity_decode(esc_attr( get_option('js_code')));

Wordpress, PHP, Javascript, how to get variable within a js function?

Purpose: passing html hidden input variable into javascript function.
Working on a wordpress plugin and got stuck with javascript.
Here's hidden input I am trying to get, which is variable_product_id. This gets set when an user selects an dropdown options dynamically.
<form class="hello">
<input type="hidden" name="variation_id" value="">
</form>
Outside of form class hello, there's plugin function in below, and I am trying to get and set "variation_id" right after product_id within "wp.CheckoutButton.apply".
if( !is_user_logged_in() )
{
echo "<script type=\"text/javascript\" >
var temp = document.getElementsByName('variation_id');
//<![CDATA[
wp.CheckoutButton.apply({
BUY_BUTTON_LINK_URL:\"www.website.com/?p=42&product_id=\"+temp,
\"\":\"\" });
//]]>
</script>";
}
"wp.CheckoutButton.apply" prints button on the screen which will pass product_id that I am passing.
It's been working with no variable product options within woocommerce, for variable product, I have to get the selected hidden variation_id when an users changes values(dropdown input).
Can I use document.getElementsByName('variation_id');?
If so, how can I pass 'variation_id' within "wp.CheckoutButton.apply" function?
Is "+temp" within apply function legal?
A possible duplicate of this :
php variable into javascript
Sometimes, some data is needed in js files / js code like the base url of the site. In this case, it is best practice to create a JS variable within the header html tag. In your header tags, create a variable like below :
<script>
var baseUrl = <?php echo get_site_url(); //if get_site_url echos the result itself, then no need to use echo ?>
</script>
Now, in all of your JS files and inline js code you will have this variable and you can use it. Simply it is a global js variable (i just made it up, dont know if js has :P )
Now you can use that variable every where in your js files and js codes.
Notge : Please create baseUrl variable at top most of the header tag or some where, so that no js file is included before it.
**Edit : **
Now to get variation_id from your form element, add id to your element as below:
<input type="text" name="variation_id" id="variation_id" value="" />
In js using jquery :
var variation_id = $("#variation_id").val();
and in wp.CheckoutButton.apply , instead of temp, use variation_id. It is correct i think, but try it.
Hope this will help.
For that you need to create a localize script that can help to call a site url in js file or js function.
http://codex.wordpress.org/Function_Reference/wp_localize_script

Javascript form validation by the code inside a separate file

<script type="text/javascript" src="js/js01.js"></script>
<!-- ... -->
<form id="frmReg" method="post" onsubmit="valRegs()" action="memb_area/register.php">
Why the function valRegs() (code is placed inside js01.js file) is not executed, except I drag the code inside html file ?
How can I be sure that valRegs() is always executed before and not after code inside register.php file ?
By making sure that the script with your validation is below the form in your html.
This is because you are trying to bind to a non-existent element when the script runs.
Alternatively you should wrap your script inside a jQuery $(document).ready() or by creating an onload function.
Besides the solution Sam suggests, there is also a possibility if the js01.js contains errors, and the function is placed after the point of error. So use the broswer inspect to make sure there is no error within the js file.

How do you output raw javascript in asp.net

I would like to output raw javascript to an aspx response. Using response.write fails because along with the javascript, it dumps all of the other asp.net stuff in the page, for example:
...
<input type="hidden" name="__VIEWSTATE" id="__VIEWSTATE" value="/wEPDwUKMTAxODk4MjA3OWRk9jVlI2KaQPiVjEC+P0OPYGV74vKjJQZuwD6OaHhb+U0=" />
...
Is there anyway to simply output raw text to the output without having all of the other asp.net stuff on the page? I am trying to use the page as follows:
<script src="mypage.aspx"></script>
Where this page contains the javascript this triggers off the aspx page, however chrome doesn't like it for obvious reasons... it expects javascript, but it is getting javascript + markup + .NET injected stuff.
Please no comments on why I am doing this! Working on very specific problem.
Use .ashx Generic Handler. Then you can set context.Response.ContentType = "text/javascript" and just use Response.Write
I'm not sure that I understand your question, but you can try something like this:
Page.ClientScript.RegisterClientScriptBlock(this.GetType(), "registerSomething", "doSomething = function(){ ... }", true);
You could also disable the viewstate, etc... and remove everything from the aspx file.
<%#Page ... EnableViewState="false" EnableViewStateMac="false"%>
Include nothing else in the aspx file, no runat=server anything. Then write your javascript in the codebehind using response.write.
This will be pretty tough using WebForms. The best way I can think of would be to add MVC to your project so you can have more control over the output. (Yes, MVC and WebForms can coexist in the same project).
This way you can still leverage the .aspx syntax (or the even-cooler Razor syntax) to produce a javascript file, without WebForms adding all of its annoying stuff to your output.
I needed this and this was my solution:
Created a file script.aspx and the content was straight javascript with the header directive of the page. Then in the javascript I was able to insert calls to static methods:
<%# Page Language="C#" ContentType="text/javascript" %>
function someFunction()
{
var someVar;
someVar="<%= MyClass.MyMethod() %>";
}
That returned just pure javascript with the server side insertions as needed:
function someFunction()
{
var someVar;
someVar="Some string returned by my method";
}

Categories

Resources