i want to display my html content on colobox jquery.
here im using ajax function to submit my data but on success function in returns some html page. now i want to display my html content on colorbox.
how can i do this..
my code is something like this:
$('#submitButtonName').click(function(event) {
event.preventDefault();
alert("press");
var send=$("#ajaxadd").serialize();
alert(send);
$.ajax({
type:"POST",
url:"/patient_add",
data:send,
success: function(msg) {
$("#gg").html(msg);// here gg is the id which im try to retrieve from my html page. not getting exactly.
alert(msg);
//$(".display").colorbox({html:'<p>Hello</p>'});
}
});
$(".display").colorbox({html:send});
here is my html file. i want my patient name, uhid , age display on colorbox.
<body>
<div id="gg">
<form id="FormName11" action="/display" method="post" name="FormName11">
<table>
<tr><div align="center"><h2><b><u>Fortis-Medremind Patient Receipt</u></b><h2></div></tr>
</table>
<table>
<b>PatientName</b>: {{patientinfo_all.name}}
<br>
<b>UHid</b> : {{patientinfo_all.uhid}}
<br>
<b>Age</b> : {{patientinfo_all.age}}
<br>
</form>
</div>
thanx in advance..
One way is to enclose it by textarea tags.
e.g.
var response = '<textarea style="width:688px; height:458px">' + data + '</textarea>';
$.colorbox({title:'Response',width:'700px',height:'500px',html:response});
Related
Page source (only iFrame part which contains to form i need to fill)
<iframe title="Form 0" id="hs-form-iframe-0" >
#document
<html>
<body>
<form id="hsForm_405e4c3f-98da-4eb1-bd27-c1886a1f811e">
<div>
<label placeholder="Enter your Vorname">Vorname</span>
<div class="input">
<input name="firstname">
</input>
</div>
</div>
</form>
</body>
</html>
</iframe>
Code i tried:
cy.get('#hs-form-iframe-0').its('0.contentDocument').should('exist')
cy.get('input[name="firstname"]').type( 'Smith') //failes as never found. Is the iFrame the cause of it? Of the form?
TLDR The correct way would be to use .find() on the iframe contentWindow.
cy.get('#hs-form-iframe-0').its('0.contentWindow').should('exist')
.its('body').should('not.be.undefined')
.find('input[name="firstname"]').type( 'Smith')
Example from Working with iframes in Cypress
const getIframeWindow = () => {
return cy.get('iframe[data-cy="the-frame"]')
.its('0.contentWindow').should('exist')
.its('body').should('not.be.undefined')
}
cy.getIframeBody().find('#run-button').should('have.text', 'Try it').click()
There are other potential problems, such as delayed loading of the iframe source. The .should('exist') check on the iframe window does not cover all situations, nor does performing visibility checks on the input.
The cypress-iframe package has a lot more checks built in, so it's a safer way to handle iframes.
You have found the iframe and access its contents but then you search for the input at the root of your DOM instead of the iframe. You can continue the chain of commands by removing the second cy.
cy.get('#hs-form-iframe-0')
.its('0.contentDocument')
.should('exist')
.get('input[name="firstname"]')
.should('be.visible') // always good to check before action
.type( 'Smith')
I'm trying to build a News site and I need to do some testing with NightwatchJS in the process.
I want to make something like like an RSS feed and when testing the information should be sent to the API.
Here is what I tried:
browser.elements('css selector','ul#feed-list', function (result) {
els = result.value;
var jsonString = "";
els.forEach(function(el,j,elz) {
browser.elementIdText(el.ELEMENT, function(text) {
jsonString += text;
});
console.log(jsonString);
});
Here the sample code to the from the site:
<html>
<body>
<div1>
<div2>
<div3>
<div class="tab-active">
<div class="full-content">
<ul class="media-list" id="list-feed">
<li class="block blog _feedBlog blog-feed" id="blog-******">
<div class="news-body">
<div class="author">
<div class="title">
<div class="news-text">
where:
****** is the news article ID;
tab-active is the whole tab with news
full-content represents the whole feed under tab-active
So, basically I need to read the last 10 items of the ul and if they are not already present, send them via an API call.
I need title, author and news-text to be stored in variables so I can send them and if something is missing, or if the text is small sized on the news, I want to be notified.
Thanks!
I have an editable div-tag where i dynamically create paragraphs. I want to save that div-tags content on button click. Is that possible?
<div id="RiskScoreTextArea" class="RiskScoreTextArea" contenteditable="true">
<p id="textAreaP"></p>
</div>
I would use jquery for that
$('.btnClick').on('click', function(){
var content = $('#RiskScoreTextArea').html();
});
If you wanted the text of the div you can use .text() but html will return the full contents of the div. Hopefully this will work for you.
I'm trying to figure out how to pass form data collected from sql database to a new window. The idea is when the user click 'Rediger' (edit), that a new small window will open up with the current data and an input field for the user to change the data, and then hit the save button for the data to be written to the database. Then the window must close and the original page being updated with the new data. Is this possible? Can anyone please help me with this? Thank you.
Check out the page here: http://kristoff.it/onlinecoaching/coach/
Here is my dummy code:
<!DOCTYPE html>
<html>
<head>
<script>
function getValue()
{
var txtfield=document.getElementById(this.id);
//alert(txtfield.innerHTML);
newWindow.document.write(txtfield.innerHTML);
return newWindow;
//windowsize(640, 480)
}
</script>
</head>
<body>
<form method="POST" id="submitform">
<label id="name">John Smith</label><input type="button" id="button" onclick="getValue()" value="Edit">
<br>
<label id="title">Director</label><input type="button" id="button" onclick="getValue()" value="Edit">
</form>
</body>
</html>
You'll need some AJAX for this.
First follow this discussion, to be able to detect when the windows was closed.
Then make an ajaxRequest like this:
$.ajax({
url: "someUrlWhereYouCanFindTheUpdatedRecords.html",
cache: false
}).done(function( html ) {
//Some code that updates your webpage
});
Note that this code is using JQuery
Good luck!
I'm using Rails 3's UJS (which is awesome btw). I have the following form HTML:
<form accept-charset="UTF-8" action="/users/invitation" class="simple_form form-invite" data-remote="true" method="post">
<input class="btn btn-mini btn-invite" data-disable-with="Inviting" name="commit" type="submit" value="Invite">
</form>
I'm using data-disable-withso the button text changes and button is disabled during processing. However, I'd like the button text to change to "Invited" after the call is complete.
I'm using the following:
$(document).on "ajax:success", ".form-invite", (evt, data, status, xhr) ->
el = $(this).find('.btn-invite')
el.val("Invited")
return
This does change the button text. However, since it's processing within the ajax:success block, the button text reverts back to "Invite". Is there any way to define the button text after processing using HTML attribute or JavaScript?
I was able to fix this with a minor hack:
$(document).on("ajax:success", ".form-invite", function(evt, data, status, xhr) {
var el;
el = $(this).find('.btn-invite');
setTimeout((function() {
return el.val("Invited");
}), 1);
});