Adding a jQuery code to a PHP string - javascript

I want to add a jQuery code to a PHP string
Here is the PHP code
$my_code ='
<script src="js/jquery.form.js"></script>
<script>
$(document).ready(function()
{
$("#my_form").on("submit", function(e)
{
e.preventDefault();
$("#myButton").attr("disabled", "");
$("#my-output").html(‘<div class="alert alert-info" role="alert">My message</div>’);
$(this).ajaxSubmit({
target: "# my-output ",
success: afterSuccess
});
});
});
function afterSuccess()
{
$("#myButton").removeAttr("disabled");
}
</script>
‘;
Issue I’m having in this code line
$("#my-output").html(‘<div class="alert alert-info" role="alert">My message</div>’);
I even try change the single quote to double quotes and when I do code stopped working. It works fine if I don’t have a div inside above code line.
Ex:
$("#my-output").html(“My message”);
Appreciate your answers.

You can use single quotes inside the string, however you will need to \' escape them:
'$("#my-output").html(\'<div class="alert alert-info" role="alert">My message</div>\');'

You should use Heredoc Syntax to avoid quote issues.

Related

Representing # symbol in javascript string

I'm trying to access the position of the # symbol and using the following JS...
<script>
$(document).ready(function () {
$("#submitButton").click(function (e) {
var at = $('#email').val().lastIndexOf("#");
});
});
</script>
However this produces a Parse Error:
"");" is not valid at the start of a code block. Only identifiers, keywords, comments, "(" and "{" are valid.
Do I need an escape character here? When I replace the # with some other character, say a letter. It does not crash. This code works...
$("#submitButton").click(function (e) {
var at = $('#email').val().lastIndexOf("w");
e.preventDefault();
Assuming you are trying to execute the exact snippet above, the error is telling you that your code is not valid. Specifically, you are missing a closing curly brace (}) and a closing parenthesis ())
Here is what it should look like:
$("#submitButton").click(function(e) {
var at = $('#email').val().lastIndexOf("#");
console.log('at', at);
e.preventDefault();
}); // <-- Closing } and )
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<button id="submitButton">Click Me</button>
<input id="email" type="text" value="something#something.com" />
As far as the # symbol goes, you do not need to escape it in this scenario.
EDIT
The error your getting smells a lot like you're using this in an ASP.NET controller. You might just be including your JS wrong. Try including it by doing it this way:
#scripts {
<script>
$(document).ready(function () {
$("#submitButton").click(function (e) {
var at = $('#email').val().lastIndexOf("#");
});
});
</script>
}
I found it! The # symbol needs an escape character...another # symbol. This works...
var at = $('#email').val().lastIndexOf("##");

replace multiple $ sign using jquery

I am not able to replace multiple $ signs using JavaScript/jQuery ,
my JavaScript replace code are as per bellow,
var str = $('#amt').html().replace("/\$/g","₹");
alert(str);
but it does not replace all occurrence, Please help me to replace $ by ₹ symbol.
Your regex is correct, but when wrapped it in quotes, it is no longer a RegEx, it's a string.
.replace(/\$/g, "₹");
And the HTML is not replaced it is just creating a string variable, use
$('#amt').html(function (i, oldHtml) {
return oldHtml.replace(/\$/g, "₹");
});
$('#amt').html(function(i, oldHtml) {
return oldHtml.replace(/\$/g, "₹");
});
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="amt">
<div>Books: $150.00</div>
<div>Food: $2050.00</div>
<div>Total: $2200.00</div>
</div>

javascript if condition is not working

i'm trying to work the following code of script. but its not working. i don't know what is the problem. the x variable i created contains nothing. but still the if condition is not working. i have tried printing the x variable in an alert box and it prints nothing, which means that it contains nothing. But in its not picking up the condition don't know why. And there are no console errors.
<div id="test">
</div>
<script>
var x = document.getElementById("test").innerHTML;
if(x == '') {
document.getElementById("test").innerHTML = 'There are No friends posts yet my love!!';
}
</script>
Your variable x contains not empty string but some spaces. Try to use trim() function to remove these symbols:
if(x.trim() == ''){
...
}
This will work!
<script>
var x=document.getElementById("test").innerHTML;
if(x.trim() == ''){
document.getElementById("test").innerHTML='There are No friends posts yet my love!!';
}
</script>
use innerText
if(x.innerText === ''){
https://jsfiddle.net/s4aLcfm5/
The issue is that your 'x' variable is not empty. It contains two return characters. Try removing all the white-space between your open and close div statement. Here is the corrected code:
<div id="test"></div>
<script>
var x=document.getElementById("test").innerHTML;
debugger;
if(x == ''){
document.getElementById("test").innerHTML='There are No friends posts yet my love!!';
}
</script>`
Simply add or remove returns within the div statement to see this work or not work.
Your code works. It all comes down to the way that your html is written:
<div id="test">
// This is an unnecessary space that's what is making your condition fail
</div>
<script>
var x=document.getElementById("test").innerHTML;
if(x == ''){
document.getElementById("test").innerHTML='There are No friends posts yet my
love!!';
}
</script>
Clean up your html: <div id="test"></div>
And you don't need anything else

Unexpected token < From a Style Tag

I keep getting "Unexpected token <" because of this script:
<script type='text/javascript'>
$(document).ready(function(){
if (window.location.pathname + window.location.search = '/search/?q=label:Web-Design|label:Graphic-Design|label:Identity-Design|label:Brand-Design') {
document.write (<style type="text/css">#HTML25, #HTML23, #HTML22, #HTML24 { display:block; }</style>);
}
});
</script>
I don't understand why it's throwing that error. I have been researching for about 2 hours now. I tried adding CDATA tags, I tried using entity names instead of characters, I made sure there was no whitespace within the document.write, etc, etc. Why won't it work? I thought document.write supported HTML entities?
EDIT: I changed the = operator to == . I also added single quotes, but then when I submitted to Blogger I got the XML error: "The content of elements must consist of well-formed character data or markup" so I changed the HTML Characters to HTML Names and resubmitted. I am still getting the "unexpected token" < error...
UPDATE I have updated the script to this, but still get the exact same error:
<script type='text/javascript'>
<![CDATA[
$(document).ready(function(){
if ((window.location.pathname + window.location.search) === '/search/?q=label:Web-Design|label:Graphic-Design|label:Identity-Design|label:Brand-Design') {
document.write ('<style type="text/css">#HTML25, #HTML23, #HTML22, #HTML24 { display:block; }</style>');
}
});
]]>
</script>
At least you have to add a single quote around your string ...
<script type='text/javascript'>
$(document).ready(function () {
if ((window.location.pathname + window.location.search) === '/search/?q=label:Web-Design|label:Graphic-Design|label:Identity-Design|label:Brand-Design') {
// add the style to your head
$('head').append(String.fromCharCode(60) + 'style type="text/css">#HTML25, #HTML23, #HTML22, #HTML24 { display:block; }' + String.fromCharCode(60) + '/style>');
// or decide to individually show the divs with jquery selectors
$('div#HTML25').css('display', 'block');
}
});
</script>
Try this:
<script type='text/javascript'>
$(document).ready(function(){
if (window.location.pathname + window.location.search == '/search/?q=label:Web-Design|label:Graphic-Design|label:Identity-Design|label:Brand-Design') {
document.write("<style type='text/css'>#HTML25, #HTML23, #HTML22, #HTML24 { display:block; }</style>");
}
});

Why am i getting this missing } after property list error? :(

I know this is something easy but I just can't see it. Can anyone tell me why I am getting the error "missing } after property list" for the following code:
<script type="text/javascript">
$(".single_image").live("click", function() {
jwplayer().load({
file: 'utubeurl'
});
});​
</script>
the whole of the code is shown below:
$(xml).find('item').each(function(i){
var current=$(this);
var ttl=current.find('title:first').text();
var thum=current.find('thumbnail:first').text();
var cat=current.find('category:first').text().split(',');
var desc = current.find('description:first').text();
var utubeurl = current.find('youtubeurl:first').text();
var fbshareurl = current.find('facebookshareurl:first').text();
var twturl = current.find('twitterurl:first').text();
var nbcurl = current.find('nbcsiteurl:first').text();
var item = {
title:ttl,
thumbnail:thum,
category:cat,
description:desc,
youtubeurl:utubeurl,
facebookshareurl:fbshareurl,
twitterurl:twturl,
nbcsiteurl:nbcurl,
obj:$('<div class="'+options.itemClass+'"><a id="'+parentId+'" class="single_image" title="'+desc+'"><script type="text/javascript"> $(".single_image").live("click",function(){ jwplayer().load({file:'+utubeurl+'}); }); </script><img src="'+thum+'" /></a><div class="show_lightbox_title"><strong>'+ttl+'</strong></div><ul id="social"><li><iframe src="'+fbshareurl+'" class="iframe_style" scrolling="no" frameborder="0" allowtransparency="true"/></li><li><a class="twtbtn" href="'+twturl+'" target="_blank"><img src="images/twitter_btn.gif"></a></li><a class="nbcbtn" href="'+nbcurl+'" target="_blank"><img src="images/showPages_btn.gif"></a></div>')
};
shows.push(item);
});
You need to quote your property value, here:
obj:$('<div class="'+options.itemClass+'"><a id="'+parentId+'" class="single_image" title="'+desc+'"><script type="text/javascript"> $(".single_image").live("click",function(){ jwplayer().load({file:'+utubeurl+'}); }); </script><img src="'+thum+'" /></a><div class="show_lightbox_title"><strong>'+ttl+'</strong></div><ul id="social"><li><iframe src="'+fbshareurl+'" class="iframe_style" scrolling="no" frameborder="0" allowtransparency="true"/></li><li><a class="twtbtn" href="'+twturl+'" target="_blank"><img src="images/twitter_btn.gif"></a></li><a class="nbcbtn" href="'+nbcurl+'" target="_blank"><img src="images/showPages_btn.gif"></a></div>')
...this:
'... jwplayer().load({file:'+utubeurl+'}); ...'
...needs to be:
'... jwplayer().load({file:"'+utubeurl+'"}); ...'
...note the extra quotes. Not sure if adding those quotes will break your looooooooong (difficult to read/support) string, you might need to escape them. But you get the idea?
Cheers
Try putting the file property under quote marks , like so:
function () {
'file' : 'utubeurl'
}
--EDIT:
My bad , forget it , I was confusing with json, jquery and maybe some other j out there, you're definning a property , no need to make the name of the memory slot a string .
When I copy and paste that block of code, I see an extra character trailing the second closing });
Removing that executes fine in console for me, so if that is not the source of the error I would look elsewhere on the page.
Is the page publicly accessible?
Solved the problem by passing a variable through href and then passing it into the command to play the url.
var item = {
title:ttl,
thumbnail:thum,
category:cat,
description:desc,
youtubeurl:utubeurl,
facebookshareurl:fbshareurl,
twitterurl:twturl,
nbcsiteurl:nbcurl,
obj:$('<div class="'+options.itemClass+'"><img src="'+thum+'" /><div class="show_lightbox_title"><strong>'+ttl+'</strong></div><ul id="social"><li><iframe src="'+fbshareurl+'" class="iframe_style" scrolling="no" frameborder="0" allowtransparency="true"/></li><li><a class="twtbtn" href="'+twturl+'" target="_blank"><img src="images/twitter_btn.gif"></a></li><a class="nbcbtn" href="'+nbcurl+'" target="_blank"><img src="images/showPages_btn.gif"></a></div>')
};
shows.push(item);
});
setSetter();
}
});
}
utubeurlParser = function(url){
jwplayer().load({file: [url]});}

Categories