Links not working in IE and Firefox with jquery generated markup - javascript

I'm writing a javascript app that dynamically generates buttons that lead users to links about different products.
They look like this:
The problem is when they're generated the links contained within them work in chrome but not in IE or Firefox.
Here's the HTML:
HTML
<div class="row">
<div class="button-class">
</div>
</div>
This is the code I use to generate them:
JQUERY
buttons: function(num) {
$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href=" + state.greens[num].website + " target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
if (state.greens[num].link !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href=" + state.greens[num].link + " rel='nofollow' target='_blank'>Get It On Amazon</a></button></li>");
}
if (state.greens[num].review !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href=" + state.greens[num].review + " target='_blank'>Read The Review</a></button></li>");
}
},
buttons is part of an object called display and is called by display.buttons();
The two if statements check to see if certain types of links exist within a product's object and then appends them to the UL if the ydo.
The buttons generate correctly but they don't open up the links when clicked in Firefox and IE (maybe Safari but I haven't checked).
What's more confusing to me is that the html being generated looks semantically correct.
For example this is the html shown in the Firefox debugger that's not working:
Doesn't make sense to me.
If you want to go to a live version of the page you can see it here: superfood picker
Then go to the last section that reads "Click On A Product's Detail Page To Learn More" and looks like this:
Click on one of the products and it'll take you to the buttons that I'm talking about.

It's not semantically correct because you need to wrap in quotes the href
buttons: function(num) {
$(".button-class").html("<div class='text-center'><ul class='list-inline'><li><button class='btn btn-success'><a href='" + state.greens[num].website + "' target='_blank'>Company Website</a></button></li> <li><button class='btn btn-success' data-toggle='modal' data-target='#myModal'>View the Label</button></li></ul></div>");
if (state.greens[num].link !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href='" + state.greens[num].link + "' rel='nofollow' target='_blank'>Get It On Amazon</a></button></li>");
}
if (state.greens[num].review !== false) {
$(".button-class ul").append("<li><button class='btn btn-success'><a href='" + state.greens[num].review + "' target='_blank'>Read The Review</a></button></li>");
}
},
Note that's it's best if you change double quotes instead single quotes and viceversa.

Related

Refresh html Editable table on adding new rows - Bootstable

I use the boostable plugin to edit HTML rows inline on runtime. The plugin is on https://www.jqueryscript.net/table/Editable-Tables-jQuery-Bootstrap-Bootstable.html. The problem is now when I want to dynamically add new rows to the table, I am not able to re-initialize the table or refresh so as to make all rows Bootstable(editable)
After adding /assets/plugins/editable/bootstable.js">
The following code is the one I use ti initialize the table
$('#tbl_deposists').SetEditable({
columnsEd: "1",
onEdit: function() {},
onDelete: function() {},
onBeforeDelete: function() {},
onAdd: function() {}
});
The following code is the one I use to add extra rows on runtime
$("#add_deposit").click(function(){
var name = $("#deposit_name").val();
var amount = $("#deposit_amount").val();
var markup = "<tr><td>" + name + "</td><td class='text-right'>" + amount + "</td></tr>";
$("#tbl_deposists tbody").append(markup);
});
I will suggest this . The initialize will look like below, you can set the button. This will automatically add the new row. You can add your other settings like columnsEd while initializing, but the example show how can you tell bootstable which button to use to add new rows.
$('#tbl_deposists').SetEditable({ $addButton: $('#add_deposit')});
button can look like this
<button class="btn btn-info" id="add"><span class="glyphicon glyphicon-plus-sign"></span>Add</button>
EDITED :
I tried this and looks like this works. You can actually put the html for last TD and everything will work, I mean edit, delete etc.
$("#add_deposit").click(function(){
var name = $("#deposit_name").val();
var amount = $("#deposit_amount").val();
var markup = "<tr><td>" + name + "</td><td class='text-right'>" + amount + "</td><td name='buttons'><div class='btn-group pull-right'><button id='bEdit' type='button' class='btn btn-sm btn-default' onclick='rowEdit(this);'><span class='glyphicon glyphicon-pencil'> </span></button><button id='bElim' type='button' class='btn btn-sm btn-default' onclick='rowElim(this);'><span class='glyphicon glyphicon-trash'> </span></button><button id='bAcep' type='button' class='btn btn-sm btn-default' style='display:none;' onclick='rowAcep(this);'><span class='glyphicon glyphicon-ok'> </span></button><button id='bCanc' type='button' class='btn btn-sm btn-default' style='display:none;' onclick='rowCancel(this);'><span class='glyphicon glyphicon-remove'> </span></button></div></td></tr>";
$("#tbl_deposists tbody").append(markup);
});

Prevent page reload when blank link is clicked?

I have a web page to download files using a button.But for some cases the files does not exit and download links are blank...So whenever the user clicks the link page just reloads.It would have been great if i could somehow disable the page reload and display an alert that says file not yet available..
This is the download link button code.row["slink"] gives the download link and may become empty sometime.
'<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</buttn> ';
Check if row['slink'] is present, else replace href with javascript:alert(...)(This won't do page reload for blank href, and show an alert):
var href = row["slink"].trim().length > 0 ? row["slink"] : "javascript:alert('File Not Yet Available')"
'<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</buttn> ';
Simple Solution
You can set target to blank:
<a ... ... target="_blank" > ... </a>
This will open it in a new tab instead of refreshing.
More Sophisticated Approach:
You can also use a conditional to build your anchor tag.
if (row["slink"] == "")
{
var atag = '<button type="button" class="btn btn-info " data-row-id="' + row.id + '">Download</button> ';
}
This will give an alert if there is no file.

Calling a method while setting innerHTML of an element

I am struggling with calling a method while setting innerHTML.
I apologize if there is a straightforward answer I have overlooked, but at the moment I am stuck.
Se the code below:
"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"
You can see that there's a mess regarding the quotes.
Is there a third way to type quotes or something of the kind that can allow me to call "removeEntry(element.id)"? I need quotes around element.id in order to call removeEntry. Any suggestions on how to solve this in a different way?
You should replace
"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"
with
"<a href='#' onclick='removeEntry(\"" + element.id + "\")'><span class='fa fa-times'></span></a>"
In fact, the problem is with you current code, the a tag onclick property will be looking like onclick='removeEntry('myId')'
Note there's imbricated simple quotes, breaking your function call. Replace the id simple quotes by escaped double quotes , and it'll give you onclick='removeEntry("myId")' that is fine :)
Edit : Anyway, if you're targeting recent browser, you could try ES6 template literals, that will give you the following line :
var html = `<span class="fa fa-times"></span>`;
This helps to avoid struggling with your quotes. Note that the variable inclusion in the template literal looks like PHP do.
This:
"<a href='#' onclick='removeEntry('" + element.id + "')'><span class='fa fa-times'></span></a>"
will create an element like this:
<a href='#' onclick='removeEntry('someId')'><span class='fa fa-times'></span></a>
Which is not correct. What you need to do is to either:
Use the other quotes " (but you have to escape them):
like this:
"<a href='#' onclick='removeEntry(\"" + element.id + "\")'><span class='fa fa-times'></span></a>"
to create an element like this:
<a href='#' onclick='removeEntry("someId")'><span class='fa fa-times'></span></a>
Or Add a backslash \ to the ' quotes (you have to escape the backslashes as well):
like this:
"<a href='#' onclick='removeEntry(\\'" + element.id + "\\')'><span class='fa fa-times'></span></a>"
to create an element like this:
<a href='#' onclick='removeEntry(\'someId\')'><span class='fa fa-times'></span></a>
'<a href="#" onclick="removeEntry(' + element.id + ')">
<span class="fa fa-times"></span>
</a>'
This should work out. You can encode double quotes in single quotes and you want this whole expression as a string.so a string with variable can be written as
string1 = string2 + variable +string3;
Or for a multi lines string in JavaScript you can use back ticks.
`<a href="#" onclick="removeEntry(' + element.id + ')">
<span class="fa fa-times"></span>
</a>`

Javascript - Dynamically added tabs not seen as tabs in Kendo panelbar

Ok, first off I read in an encrypted file as my DataSource, which is then converted to an XML String.
The data displays properly in my grids, except that the panels which are dynamically added to the panelbar does not seem to act as such as seen in this fiddle.
They are added to:
<ul id='panelbar'>
<li id='patDet' class='k-state-active'>
<span class='k-link k-state-selected'><input type='checkbox' id='cPatientDetails' /><label for='cPatientDetails'><a href='#' id='cbSelect'></a>Patient Detail</label></span>
<div id='patTab'></div>
</li>
</ul>
like so:
$("<li id = '"+ liID +"' class='k-item k-state-default' role='menuitem' aria-expanded='false' aria-hidden='true'><span class='k-link k-header'><input type='checkbox' id='c" + x + "' class='cbSelect' /><label for='c" + x + "'><a href='#' id='cbSelect''></a>" + liTitle + "</label></span></li>").appendTo("#panelbar");
$("<div id = 'gridGenerate" + x + "' width='400px;' aria-hidden='true'></div>").appendTo("#" + liID);
The reason for the span and link is so that styling can be used on my checkbox which can be found in this fiddle.
At first I used a hard coded DataSource, which worked perfectly, but when I switched over to fetching the data using a request, where all the data displays as it should, except for the panelbar.
This is what it looks like:
when only the first tab should be open. I created the panelbar like so:
$("#panelbar").kendoPanelBar(
{
expandMode: "single"
});
EDIT
I've made it now that the panelbar and grids are only created once the data is retreived and converted, but the issue remains.
Any idea why this is happening?
When KendoUI adds a tab, it does much more than just adding HTML tags. That's why you have methods for adding tabs on demand.
Instead of adding the HTML by hand try using:
var panelbar = $("#panelbar").data("kendoPanelBar");
panelbar.append([
{
text: "<label for='c" + x + "'>" +
"<a href='#' id='cbSelect''></a>" +
"" + liTitle + "" +
"</label>",
encoded: false,
content: "<div>text</div>"
}
]);
Click here to see it in JSFiddle.
Answer:
It seems like when I ask a question, it helps me to find the answer. Just found it.
I created the panelbar before adding the extra panels, so I just moved the:
$("#panelbar").kendoPanelBar(
{
expandMode: "single"
});
to the end of my method. The all the content is added, then I create the panelbar.

adding class to this href .. not working?

We have uplaod function on our site. And uploaded file, displays link which on click user can see file they have uploaded in new window.
We also use divbox http://jquery.phpbasic.com/divbox
My code is this:
$("#uploader" + queueId).html("
<div class='cancel'>
<input class='button_cancel' name='removeFile' fileName='"
+fileObj.name.replace("'", "%27")+"' type='button'>
</div>
<a class='lightbox' href='" + self.attr("path")
+ fileObj.name.replace("'", "%27") + "'><span class='fileName'>"
+fileObj.name+"</span></a>");
For some reason when we click on the link, it still opens in new window and doesnt initiate the lightbox.
In my page i see this ( all normal )
<a class="lightbox" href="uploads/nutshell.png">
<span class="fileName">nutshell.png</span>
</a>
Which should fire the lightbox.. Anything scream out at you in the js code I posted above ? I am wondering if its self.attr("path")
Here is what we have::::::
in the js for divbox we have
$('.lightbox').divbox({caption: false});
in the js for the uploader we have.
$("#uploader" + queueId).html("<div class='cancel'><input class='button_cancel' name='removeFile' fileName='"+fileObj.name.replace("'", "%27")+"' type='button'></div><a class='lightbox' href='" + self.attr("path") + fileObj.name.replace("'", "%27") + "'><span class='fileName'>"+fileObj.name+"</span></a>");
Presumably you're doing something like this:
$('a.lightbox').divbox({ ... })
before you add the <a> in question with:
$("#uploader" + queueId).html("...");
$('a.lightbox') only applies to elements that exist on the page when $('a.lightbox') is called, it won't bind DivBox to elements that are added to the page later. You'll have to bind DivBox to the new <a> that you added with something like this:
$("#uploader" + queueId).html("...");
$('#uploader' + queueId).find('a.lightbox').divbox({ /* and whatever options you need */ });
Rough demo of the technique: http://jsfiddle.net/ambiguous/EswfB/
To build off of mu is too short's answer, you could implement like so:
$("#uploader" + queueId).html("
<div class='cancel'>
<input class='button_cancel' name='removeFile' fileName='"+fileObj.name.replace("'", "%27")+"' type='button'>
</div>
<a class='lightbox' href='" + self.attr("path")
+ fileObj.name.replace("'", "%27") + "'><span class='fileName'>"
+fileObj.name+"</span></a>")
.find('a.lightbox')
.divbox({ /* and whatever options you need */ });
And simply chain the commands into one.

Categories