Develop Reference

How to insert text with "< >" characters into TinyMCE as plain text, without it being considered a HTML tag

In my project, I have used a TinyMCE text editor. I also have a button that, when clicked, my javascript code will copy the value from the button into the text editor.
For example : If the button value is [first_name], clicking the button will put the text [first_name] (short code format in wordpress) into the text editor.
That works, but now I have changed my button value from [first_name] to <<first_name>>. When I click the button it should put <<first_name>> into the text editor, but it is only putting <>. It is not putting the full value because the text editor considers <<first_name>> as a HTML tag.
Also, I have tried with HTML entities such as < and > but it doesn't work either.
Note: it should not be a source code editor. It must be a simple text editor.
Can anyone please guide me on how to solve this problem?
My HTML Code:
Button Part -
<div class="panel-body">
<div class="col-md-6" style="margin-bottom: 10px;">
<a class="btn btn-primary sInput_netadvimage" href="<<first_name>>" style="width: 100%">FIRST NAME</a>
</div>
<div class="col-md-6" style="margin-bottom: 10px;">
<a class="btn btn-primary sInput_netadvimage" href="<<company_name>>" style="width: 100%">COMPANY NAME</a>
</div>
</div>
</div>
Text Editor Part
<textarea name="content[]" id="tedit-1" class="tmeditor contentfield" name="area"></textarea>
Jquery Part
$(document.body).on('blur', '.contentfield', function() {
currentreplaceelement = $(this);
});
$(document.body).on('click', ".sInput_netadvimage", function(e) {
e.preventDefault();
var code = $(this).attr('href');
alert(code);
if (currentreplaceelement != '') {
if (currentreplaceelement.hasClass('subjectfield')) {
var a = currentreplaceelement.val();
var output = [a.slice(0, currentreplaceposition), code, a.slice(currentreplaceposition)].join('');
currentreplaceelement.val(output);
// currentreplaceelement = '';
// currentreplaceposition = '';
} else {
tinymce.activeEditor.execCommand('mceInsertContent', false, code);
}
} else {
tinymce.activeEditor.execCommand('mceInsertContent', false, code);
}
});

As you've noticed, everything between <> is being interpreted as a html tag in tinymce.
In you change the string in the href itself to use < and > it is also getting converted to < and > before it is inserted into the editor.
However you can insert < and > directly into the editor, and it will work as you require.
Add this function to convert the < and > to < and >:
function convertCode(code) {
return String(code).replace('<', '<').replace('>', '>');
}
and then call it when you are inserting code into tinymce like this:
tinymce.activeEditor.execCommand('mceInsertContent', false, convertCode(code));
That has worked for me before so I'm sure it will work here too.

How to make button work after ajax called

In my project, I use the seaStBt button to open a search dialog.
I use AJAX to fetch data from the DB after I confirm the search dialog, which contains search conditions, and this data updates the idcCstmRId div successfully.
Here is the js code:
<script>
$(document).ready(function()
{
$('#idcCstmRId').on("dblclick","#bbs td",function(){......});
$('#seaStBt').click(function(){
$('#dlgSea').dialog("open");
});
$('#seaBt').click(function(){
var seaSlt1 = $('#seaSlt1').val();
$.ajax({
dataType:'html',
type:"POST",
url:"get_ajax_csc.php",
data: {seaSlt1:seaSlt1},
success:function(data)
{
$('#idcCstmRId').html(data);
$('#dlgSea').dialog("destroy").remove();
}
});
});
......
}
</script>
Here is html code:
<div id="firDiv">
<?php
echo '<table border=1px style="width:100%" id="bbs">';
.......
?>
<div class="main_title" id="mnTlt">
<input type="button" id="seaStBt" value="search">
</div>
<div id="dlgSea" >
<input type="submit" value="confirm" id="seaBt" />
</div>
<div class="idcCstmRqst" id="idcCstmRId"></div>
Here is get_ajax_csc.php code:
if(isset($_POST['seaSlt1']))
{
include("DB.php");
$seaOne=$_POST['seaSlt1'];
echo '<table border=1px style="width:100%" id="bbs">';
......
}
The problem is before fetching data from the DB, the seaStBt button displays search the dialog. But after fetching data, and idcCstmRId div updates successfully, the seaStBt button does not work any more. The search dialog does not show after clicking the seaStBt button.
Perhaps the AJAX changes the DOM, but seaStBt button sees does not see these changes?
I have no idea, who can help me ?

Problem could be with .remove() method.
jQuery docs says .remove() takes elements out of the DOM, so you are removing #dlgSea...

Are you saying you want to remove the click event from #seaStBt after the results are returned? If so, I believe you can do this with:
$('#seaStBt').unbind('click');

After click on button in Form append html page by Ajax

I am using Jquery mobile frame work and also new in jquery mobile. I want to append one html page by Ajax. First i am taking one button(check) in form but whenever click on this button then page appended but layout will be damage. I don't know how to append HTML page by ajax in jquery mobile.
SCREEN SHOT FOR HINTS:
This page is before click on check button:
After click on Check button:
HTML CODE:
<form id="checkPinCode1" method="get" data-uri="<c:url value="/pincode-available/${product.productId}/${product.productOfCityId}"/>" data-ajax="false">
<div style="margin-bottom: 20px; width: 80%;">
<input name="pinCode" type="number" class="form-control pinCode" placeholder=" Enter pincode here..">
</div>
<div style="margin-bottom: 20px; width:40%;">
<button class="btn btn-primary" type="submit" value="Check">Check</button>
</div>
</form>
<div id="showPincodeAvailablity">
<%--APPEND PAGE HERE--%>
</div>
AJAX CODE:
$.ajax({
type: 'get',
url: url,
data: {pincode: pincode},
success: function (response) {
if (response.success === "true") {
$("#showPincodeAvailablity").html(response.html);
}
},
error: function (response) {
},
complete: function (response) {
}
});
JAVA CODE:
#RequestMapping(value = "/pincode-available/{productId}/{productOfCityId}", method = {RequestMethod.GET})
#ResponseBody
<%--- CODE LINE 1--%>
<%--- CODE LINE 2--%>
<%--- CODE LINE .....--%>
resp.put("success", "true");
resp.put("html", html);
}
First i am type pin code and click on check button then check button control go to the controller and comes into the ajax then page append by id = showPincodeAvailablity. and page appended but page layout is not comes proper way. Give me some idea for achieving this solution.

Try changing this line
$("#showPincodeAvailablity").html(response.html);
to this
$("#showPincodeAvailablity").html(response.html).enhanceWithin();

How to focus next field if user clicked on the link?

I have a number of fields with labels-links like below:
<div class="control-group">
<label class="control-label" for="some-id-1">Text1</label>
<div class="controls">
<input type="text" id="some-id-1" name="some-id-1"><br>
</div>
</div>
<div class="control-group">
<label class="control-label" for="some-id-2">Text2</label>
<div class="controls">
<input type="text" id="some-id-2" name="some-id-2"><br>
</div>
</div>
If user clicks on the link, how can I focus according field (without preventing default action)? I.e. if user clicks on Text1, then I should open http://example.com/some-id-1 in new window and set focus at input with id some-id-1.

jsfiddle
$(".control-label a").click(function(){
$(this).parent().next().find('input').focus();
});

$('.control-label a').on('click', function(e) {
e.preventDefault();
$(this).parent().next().find('input').focus();
// or
$('.control-group').has(this).find('input').focus();
});

Text1

If understanding correctly you want to open a new page and in the new page set focus based on link that was clicked
If you are opening a new page you will need to pass a hash in url or use a cookie and have other page parse the hash or cookie
In current page:
$(function(){
$('.control-label a').click(function(){
var hash='#'+ $(this).next().find('input').attr('id');
window.open( this.href + hash);
return false;
});
})
In other page:
$(function(){
var hash= location.hash;
$(hash).focus();
})

JavaScript in one page can't control how another page responds to a URL, if the 'other' page is under your control then you could set it up to parse the id:
var parts = document.location.href.split('/'),
id = parts.pop();
document.getElementById(id).focus;
On the other hand, if you want to focus that element reliably, just pass an id, as a hash, to the URL:
Go to an element of 'some id'
This may not focus the form element, but it should draw that element to the attention of the user and, in pages outside of your control, is much more reliable.

Can't find form on returned HTML

I have a main page consisting of a link and a div with id 'containerDiv'.
When you press the link it loads some HTML from another page using Ajax into this div.
The HTML that is returned contains a form. When the form is submitted, I wish to stay on the same page and display the resulting content in the div.
Please see a picture showing what I wish to accomplish by clicking this link.
The script on the main page:
<script type="text/javascript">
$(document).ready(function () {
$("a").click(function () {
$('#containerDiv').load(this.href + ' #contentDiv', function () {
alert($('#page2Form').id);
$('#page2Form').submit(function () {
$.post(
pageName,
this.serialize(),
function (data) {
if (data.success)
alert('done');
else
alert('error');
$('#containerDiv').html(data);
}
);
return false;
});
});
return false;
});
});
</script>
The relevant HTML on the main page:
<a id="link1" href="page1.aspx">Page 1</a>
<br />
<div id='console' style="border: 2px solid red; width: 1000px">
when the link is clicked this content is replaced with new html.
</div>
The relevant HTML on the content page:
<div id="contentDiv">
<form id="page2Form" runat="server">
<div>
<h1>
Page 2</h1>
<asp:TextBox ID="TextBox1" runat="server"></asp:TextBox>
<asp:Button ID="Button1" runat="server" Text="submit" OnClick="Submit_OnClick" />
</div>
</form>
</div>
The problem is that I can't find the form 'page2Form' on the returned HTML.
Alert ($('#page2Form'). id); returns 'undefined'
Perhaps it has something to do with that element is not loaded in the DOM.

A few things here, jQuery objects won't have a .id property, you want the id of the first element in the matched set, like this:
alert($('#page2Form')[0].id);
//or without jquery:
alert(document.getElementById('page2Form').id);
Also, make sure you're looking for it after the $('#containerDiv').html(data); call, so it's added to the DOM. If you're looking for it before it's added, then use the returning data as the context to look in, like this:
alert($('#page2Form', data)[0].id);