Can the JS Prepend statement edit pre-defined html? - javascript

I define my html by setting it equal to a variable i am echoing, just for the sake of keeping my php page dynamic, however i am trying to append another input div onto my text area once a button is clicked via a javascript statement. In terms of syntax i cant seem to find any errors, is this just not allowed?
this is the code for my comment area,
$comment_ui = '<textarea id="statustext" onkeyup="statusMax(this,250)" onfocus="showBtnDiv()" placeholder="What's new with you '.$u.'?"></textarea>';
$comment_ui .= '<div id="uploadDisplay_SP"></div>';
$comment_ui .= '<div id="btns_SP" class="hiddenStuff">';
$comment_ui .= '<form action=""><input id="gendercheck" type="checkbox" name="male" onclick="gendertoggle()">male</form>';
$comment_ui .= '<img src="images/topic.JPG" id="triggerTopic" class="triggerBtn" onclick="showtitleDiv" width="137" height="22" title="Add a title" />';
$comment_ui .= '<button id="statusBtn" onclick="postToStatus(\'status_post\',\'c\',\''.$u.'\',\'statustext\',\''.$male.'\',\'title\')">Post</button>';
$comment_ui .= '<img src="images/camera.JPG" id="triggerBtn_SP" class="triggerBtn" onclick="triggerUpload(event, \'fu_SP\')" width="137" height="22" title="Upload A Photo" />';
$status_ui .= '</div>';
notice i included an image icon for adding a topic to a comment that on click calls this function
function showtitleDiv(){
_("statustext").prepend('<input id="title" onkeyup="statusMax(this,30)" placeholder="Topic headline..."><br />');
/*_("triggerTopic").style.display = "block";*/
}
and i echo the $comment_ui in the body of my document, everything shows, and the comments work, its just the showtitleDiv function isnt working
the javascipt console doesnt show any errors, is the syntax wrong? I appreciate any and all of your expertise!

Related

PHP Concatenation with JS Onclick Event

This is driving me nuts.
I have a button on my php template
echo '<a href="'. esc_url($action_link) .'" class="action_button'. esc_attr($action_class) .'" '. wp_kses_data($action_target) .'>'. wp_kses(mfn_opts_get('header-action-title'), mfn_allowed_html('button')) .'</a>';
And I need to attach the following Analytics event tracker code:
onclick="gtag('event', 'clic', { 'event_category': 'EVENTCAT', 'event_label': 'EVENTLABEL'});"
Sounds not too hard, but im not managing to make this work, after I have tried a lot of different combinations.
Is there any way to just escape everything?
Try this please
echo '<a
onclick="gtag(\'event\', \'clic\', { \'event_category\': \'EVENTCAT\', \'event_label\': \'EVENTLABEL\'});"
href="'. esc_url($action_link) .'"
class="action_button'. esc_attr($action_class) .'" '. wp_kses_data($action_target) .'>'.
wp_kses(mfn_opts_get('header-action-title'), mfn_allowed_html('button'))
.'</a>';

php use <div> for json

In my PHP I have a line of JSON:
echo '"jsoncaption":"'.$xxx.' '.$yyy.' <br /> ('.$zzz.')",';
I want to have the text line-height: 110%;, so I do this:
echo '<div style=\'line-height: 110%;\'>';
echo '"jsoncaption":"'.$xxx.' '.$yyy.' <br /> ('.$zzz.')",';
echo '</div>';
But this causes an an error in my JS console!
Unexpected token < in JSON at position 55
Without the <div> everything works, but I want to use line-height.
Someone have an idea?
echo '"jsoncaption":"' . '<div style=\'line-height: 110%;\'>' . $xxx .' '.$yyy.' <br /> ('.$zzz.')</div>",';
What did I do?
This would be a more detailed script:
$content = $xxx.' '.$yyy.' <br /> ('.$zzz.')';
$wrapped_content = '<div style=\'line-height: 110%;\'>' . $content . "</div>";
echo '"jsoncaption":"' . $wrapped_content . '",';
EDIT: Untested of course, maybe some quotation marks are wrong...

how to pass value from a boostrap modal child to parent?

I been trying to pass any value from my window modal child to the parent window, but it doesn't work. The modal doesn't hide or send the value to the parent window when I click Save.
application.php
<body>
<h3 class="h3 black">Application</h3>
<form class="form-horizontal" method="post" action="admin-controller.php" name="f1">
<input type="text" name="p_name" id="n1" >
<?php
include 'includes/calendar.php';
$calendar = new Calendar();
echo $calendar->show();
?>
</form>
</body>
<script src="https://code.jquery.com/jquery-2.1.0.min.js"></script>
<script src="http://ajax.aspnetcdn.com/ajax/jquery.validate/1.14.0 /jquery.validate.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.6/js/bootstrap.min.js" integrity="sha384-0mSbJDEHialfmuBBQP6A4Qrprq5OVfW37PRR3j5ELqxss1yVqOtnepnHVP9aJ7xS" crossorigin="anonymous"></script>
<script type="text/javascript">
function post_value(){
window.opener.document.f1.p_name = document.myform.skill_id_t.value;
$('#modal_1').modal('hide');
}
</script>
calendar.php
<?php
class Calendar {
public function show() {
//some code
$html .=$this->_showDay($someValues);
//some code
}
private function _showDay($cellNumber){
// Build up the html.
$html = '<td id="' . $this->currentDate . '" class="td-top-text ' . $classNameOne . $classNameTwo . '">';
//Radio button that open the Modal window
$html .= '<input type="radio" data-toggle="modal" data-target="#modal_1" name="schedule_id" value="'. $shedule_id.'">';
//singleModal
$html .=$this->_singleModal();
$html .= '</td>';
return $html;
}
//child window
public function _singleModal(){
//Single Modal
$html = '<form name="myform" method="post" action="">';
$html .= '<div class="modal fade" id="modal_1" role="dialog">';//Modal open
$html .= '<div class="modal-dialog">';//Modal Dialog open
$html .= '<div class="modal-content">';//Modal-Content Open
$html .= '<div class="modal-header">';//Modal-Header open
$html .= '<button type="button" class="close" data-dismiss="modal">×</button>';//bbutton
$html .= '<h4 class="modal-title bold cyan">Sign Up (Single)</h4>';//Title H4
$html .= ' </div>';//Modal-header Close
$html .= '<div class="modal-body">';//Modal-body open
//Type something to pass to parent window
$html .= '<input name="skill_id_t" type="text">';
$html .= '</div>';//Modal-body close
$html .= '<div class="modal-footer">';//Footer open
$html .= '<button type="button" class="btn btn-default" data-dismiss="modal">Close</button>';//button
$html .= '<input onclick="post_value();" id="save" type="button" name="save-details" value="Save">';//input
$html .= '</div>';//Footer Close
$html .= '</div>';//Modal-content close
$html .= '</div>';//Modal Dialog Close
$html .= '</div>';//Modal close
$html .= '</form>';
return $html;
}
}
I read other posts and according to them, the problem could be javascript because I cant use data-target="#modal_1" with javascript so I tried to delete the target and just add onclick call a function into my <input name="schedule_id"> to do $(#modal_1).modal('show'); but still the $(#modal_1).modal('hide'); doesn't work.
I also had tag php because according to other posts, I need to include the javascript into my php (calendar.php) and not in my application.php
Edit
I also got some error every time I click on Save
TypeError: opener is null
Tried to fix it by adding window.opener... but it didn't work either
New Edit:
I have change my js code to this:
$(function() {
$('#btnLaunch_1').click(function() {
$('#modal_1').modal('show');
});
$('#btnSave_1').click(function() {
opener.document.f1.p_name = document.myform.skill_id_t.value;
$('#modal_1').modal('hide');
});
$('#cancel_1').click(function() {
$('#modal_1').modal('hide');
});
});
and I remove everything that have to be with data-target including the one that close the window data-dismiss. And, I realized that the problem is this line opener.document.f1.p_name = document.myform.skill_id_t.value; for some reason this line fail by giving the above error. ...opener is null
Pleaseeee helpp =/ II am trying hard here....
So, after googling more and more and follow some suggestions from the first comment, I believe that the best way to get the values from a bootstrap modal child window and add it to the parent window is by using jQuery in this way:
$(function() {
//open modal
$('#btnLaunch_1').click(function() {
$('#modal_1').modal('show');//no need data-target just <input id="">
});
$('#btnSave_1').click(function() {
//Get the value from the child into a variable
value = $('[name="skill_id_1"]').val();
//Set the value to the parent window
$('[name="p_name"]').val(value);
//make the modal dismiss (no need data-target)
$('#modal_1').modal('hide');
});
//if user click cancel instead of use data-dismiss, just hide it
$('#cancel_1').click(function() {
$('#modal_1').modal('hide');
});
});
If you find a better solution that this one, please let me know
Thanks
Your opener form name is wrong;
Change
window.opener.document.f1.p_name to
window.opener.document.myform.p_name
as you refer
<form name="myform" method="post" action="">

Get simple CMS plugin

I am currently trying to modify a plugin that was made for get simple cms. The plugin is called "pages with comments". The reason I am posting here is because the topic for the plugin in the forums looks to be dead. Here is the link to the plugin I am currently using. https://mega.co.nz/#!pVcRnTiI!N0SyhLXrPbE1vFH3dNBaqO0zznETDD--QQpWp0c1EJoI have modified it but so you can see what code I am working with I am uploading it as a zip. My question is how do I make a a field required so when users submit the comment there has to be something in it. Either that or make that field a drop down.
Thanks
if ($capt =='Y'){
echo '<div id="captch"> ';
echo '<img alt="" class="capt" id="captcha'.$imfin.'" src="'.$siteurl.'plugins/pages_comments/img_cpt.php?url='.GSPLUGINPATH.'pages_comments/" />';
echo '<input type="button" value="'.$i18n['reload'].'" onClick="javascript:rec_cpt("captcha'.$imfin.'","'.$siteurl.'plugins/pages_comments/img_cpt.php?url='.GSPLUGINPATH.'pages_comments/")" /> <span class="msgavs">'.$i18n['rl'].'</span>';
echo '</div>';
echo '<div class="cap_input">';
echo '<input type="text" value="" name="guest[pot]" /><span>'.$i18n['Cpt'].'('.$i18n['Rf'].']'.'</span>';
echo '</div>';
}
echo '<div class="submit">';
echo '<input type="submit" value="'.$i18n['Ev'].'" name="guest-submit" />';
echo '</div>';
if (empty($_POST["field_name"])) {
$FieldErr = "FIELD is required"; //or any other error message
} else {
// code for submitting;
}
// you can dispaly the error message using echo $FeildErr beside your field area

How to turn a hidden type input into a checkbox type input?

This might sound stupid, but I need something like this. I have displayed, say, 10 skills on the webpage, each of which is a hidden input of a form.
At the bottom there is an 'EDIT' button.
On clicking that, I want checkboxes to appear next to each skillName so that the user can check/uncheck them and then submit the form.
my php code snippet right now is something like this:
<?php echo '<span id="skillSet">';
for($x=0;$x<count($userSkills);$x++)
echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select">' . $userSkills[$x] . "</div>";
echo '</span>'; ?>
<input type="button" value="Edit" onClick="someFunction()">
What can i put instead of some function to achieve the required result?
Also, if there is any other way I can implement the editing thing, please do tell.
Thanks in advance!
Give all inputs the class input_skill, like this:
echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select" class="input_skill">' . $userSkills[$x] . "</div>";
Then use this function to change their types:
<script type="text/javascript">
function ShowSkillCheckboxes() {
var skills = document.getElementsByClassName("input_skill");
for(var i=0; i<skills.length; i++)
skills[i].setAttribute("type","checkbox");
}
</script>
Keep in mind that the special checked value which the elements get by becoming checkboxes will vanish once you transform the checkboxes back into hidden type inputs. Besides: hidden inputs do not display at all on the webpage. You can say they have 0x0 px dimensions. This means that upon clicking the Edit button, those checkboxes will pop out and extent your layout.
Thanks for the input guys, but I found a way around it.
And apologies as well, since I ended up NOT using the hidden input at all.
If any of you are interested, this function should do the trick:
function editSkills()
{
var skills = document.getElementsByClassName("skillName");
for(var i=0;i<skills.length;i++)
{
var value = skills[i].innerHTML;
skills[i].innerHTML = '<input type="checkbox" checked name="skill[]" value="' + value + '" title="Toggle Selection">' + value;
}
document.getElementById('EditOrApply').innerHTML='<input type="submit" value="Apply Changes">';
}
That final line converts the 'Edit' to the 'Submit' button for the form.
the -1 he gave me is the usual way to act of greedy and unfair people. Probably he did it like the users before have done with him (have taken advantage of his low reputation). Anyway I want to underline this not for revenge,but to let the users to valutate the answers in an fair way
Something like this? jsfiddle
$userSkills = array('pasta','maccheroni','pizza');
echo '<span id="skillSet">';
for($x=0;$x<count($userSkills);$x++)
echo '<div class="skillName"><input type="hidden" name="skill[]" value="' . $userSkills[$x] . '" title="Click to select">' . $userSkills[$x] . "</div>";
echo '</span>'; ?>
<input type="button" value="Edit" onClick="$('input:hidden').attr('type','checkbox');">
you need jquery (<script src="http://code.jquery.com/jquery-1.9.1.js"></script>)
FULL JAVASCRIPT
<input type="button" value="Edit" onClick="show(document.getElementsByTagName('input'))">
<script>
function show(val){
for(i=0;i<val.length-1;i++){
if(val[i].type=='hidden'){
val[i].type='checkbox';
}
}
}
</script>

Categories